[BI Data Mapper] Add Level 01 E2E test

workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/DataMapperView.tsx

@@ -609,6 +609,15 @@ export function DataMapperView(props: DataMapperProps) {
         rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: context });
     };
 
+    useEffect(() => {
+        // Expose function to refresh data mapper in playwright tests
+        (window as any).__refreshDM = onDMRefresh;
+
+        return () => {
+            delete (window as any).__refreshDM;
+        };
+    }, []);
+
 
     useEffect(() => {
         // Hack to hit the error boundary

workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx

@@ -52,7 +52,7 @@ export function DataMapperHeader(props: DataMapperHeaderProps) {
     return (
         <HeaderContainer>
             <HeaderContent>
-                <IconButton onClick={onBack}>
+                <IconButton onClick={onBack} data-testid="back-button">
                     <Icon name="bi-arrow-back" iconSx={{ fontSize: "24px", color: "var(--vscode-foreground)" }} />
                 </IconButton>
                 <BreadCrumb>

workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeWidget.tsx

@@ -66,7 +66,7 @@ export function LinkConnectorNodeWidget(props: LinkConnectorNodeWidgetProps) {
     );
 
     return (!node.hidden && (
-        <div className={classes.root} data-testid={`link-connector-node-${node?.value}`}>
+        <div className={classes.root} data-testid={`link-connector-node-${node?.targetPort?.getName()}`}>
             <div className={classes.header}>
                 {renderPortWidget(engine, node.inPort, `${node?.value}-input`)}
                 {renderIconButton(node)}

workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeWidget.tsx

@@ -83,7 +83,7 @@ export function QueryExprConnectorNodeWidget(props: QueryExprConnectorNodeWidget
     );
 
     return (!node.hidden && (
-            <div className={classes.root} data-testid={`link-connector-node-${node?.value}`}>
+            <div className={classes.root} data-testid={`link-connector-node-${node?.targetPort?.getName()}`}>
                 <div className={classes.header}>
                     {renderPortWidget(engine, node.inPort, `${node?.value}-input`)}
                     {renderEditButton(onClickEdit, node?.value)}

workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/Tree/Tree.tsx

@@ -68,7 +68,10 @@ export const TreeHeader = styled.div<{ isSelected?: boolean; isDisabled?: boolea
         : 'var(--vscode-list-hoverBackground)',
     },
     color: 'var(--vscode-inputOption-activeForeground)',
-    borderBottom: '1.8px solid var(--vscode-dropdown-border)'
+    borderBottom: '1.8px solid var(--vscode-dropdown-border)',
+    ...(isSelected && {
+      outline: "1px solid var(--vscode-list-focusAndSelectionOutline, var(--vscode-contrastActiveBorder, var(--vscode-editorLink-activeForeground, var(--vscode-list-focusOutline))))"
+    })
 }));
 
 export const TreeBody = styled.div`

workspaces/bi/bi-extension/src/test/e2e-playwright-tests/ProjectExplorer.ts

@@ -58,4 +58,10 @@ export class ProjectExplorer {
         await this.page.waitForTimeout(500); // To fix intermittent issues
         await locator.click();
     }
+
+    public async refresh(projectName: string) {
+        await this.page.getByRole('treeitem', { name: projectName }).hover();
+        const refreshBtn = this.page.getByRole('button', { name: 'Refresh' });
+        await refreshBtn.click();
+    }
 }