chore(frontend): replace querySelector with Testing Library patterns (#13289)

Signed-off-by: Priyanshu-u07 <connect.priyanshu8271@gmail.com>

Author: Priyanshu-u07

frontend/src/components/NewRunParameters.test.tsx

@@ -52,7 +52,7 @@ describe('NewRunParameters', () => {
 
     expect(handleParamChange).toHaveBeenCalledTimes(1);
     expect(handleParamChange).toHaveBeenLastCalledWith(0, '{\n  "test": "value"\n}');
-    expect(document.querySelector('.ace_editor')).toBeInTheDocument();
+    expect(screen.getByTestId('json-editor-newRunPipelineParam0')).toBeInTheDocument();
   });
 
   it('fires handleParamChange callback on change', () => {

frontend/src/components/NewRunParameters.tsx

@@ -170,7 +170,7 @@ class ParamEditor extends React.Component<ParamEditorProps, ParamEditorState> {
           />
         )}
         {this.state.isJsonField && this.state.isEditorOpen && (
-          <div className={css.row}>
+          <div className={css.row} data-testid={`json-editor-${id}`}>
             <Editor
               width='100%'
               minLines={3}

frontend/src/components/NewRunParametersV2.test.tsx

@@ -917,7 +917,7 @@ describe('NewRunParametersV2', () => {
   });
 
   it('does not display any text fields if there are no parameters', () => {
-    const { container } = render(
+    render(
       <CommonTestWrapper>
         <NewRunParametersV2
           titleMessage='Specify parameters required by the pipeline'
@@ -927,7 +927,9 @@ describe('NewRunParametersV2', () => {
       </CommonTestWrapper>,
     );
 
-    expect(container.querySelector('input').type).toEqual('checkbox');
+    // The only input should be the pipeline root checkbox — no text fields for parameters
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    expect(screen.queryAllByRole('textbox')).toHaveLength(0);
   });
 
   // Test for fix: Default parameters not displayed in Compare Runs

frontend/src/components/graph/ArtifactNode.test.tsx

@@ -32,23 +32,27 @@ describe('ArtifactNode', () => {
     expect(screen.getByText('my-artifact')).toBeInTheDocument();
   });
 
-  it('renders with LIVE state and yellow icon', () => {
-    const { container } = renderWithProvider(
+  it('renders with LIVE state and correct icon', () => {
+    renderWithProvider(
       <ArtifactNode
         id='artifact-1'
         data={{ label: 'live-artifact', state: Artifact.State.LIVE }}
       />,
     );
     expect(screen.getByText('live-artifact')).toBeInTheDocument();
-    expect(container.querySelector('.text-mui-yellow-800')).toBeInTheDocument();
+    const liveIcon = screen.getByTestId('artifact-icon-live');
+    expect(liveIcon).toBeInTheDocument();
+    expect(liveIcon).toHaveClass('text-mui-yellow-800');
   });
 
-  it('renders with undefined state and grey icon', () => {
-    const { container } = renderWithProvider(
+  it('renders with undefined state and default icon', () => {
+    renderWithProvider(
       <ArtifactNode id='artifact-1' data={{ label: 'unknown-artifact', state: undefined }} />,
     );
     expect(screen.getByText('unknown-artifact')).toBeInTheDocument();
-    expect(container.querySelector('.text-mui-grey-300-dark')).toBeInTheDocument();
+    const defaultIcon = screen.getByTestId('artifact-icon-default');
+    expect(defaultIcon).toBeInTheDocument();
+    expect(defaultIcon).toHaveClass('text-mui-grey-300-dark');
   });
 
   it('sets the title attribute on the button', () => {
@@ -59,9 +63,9 @@ describe('ArtifactNode', () => {
   });
 
   it('renders with the correct id on the label span', () => {
-    const { container } = renderWithProvider(
+    renderWithProvider(
       <ArtifactNode id='artifact-42' data={{ label: 'test', state: undefined }} />,
     );
-    expect(container.querySelector('#artifact-42')).toBeInTheDocument();
+    expect(screen.getByTestId('artifact-42')).toBeInTheDocument();
   });
 });

frontend/src/components/graph/ArtifactNode.tsx

@@ -39,7 +39,7 @@ function ArtifactNode({ id, data }: ArtifactNodeProps) {
         <div className='flex items-center justify-between w-60 rounded-lg shadow-lg bg-white'>
           {icon}
           <div className='flex flex-grow justify-center items-center rounded-r-lg overflow-hidden'>
-            <span className='text-sm truncate' id={id}>
+            <span className='text-sm truncate' id={id} data-testid={id}>
               {data.label}
             </span>
           </div>
@@ -65,13 +65,19 @@ export default ArtifactNode;
 
 function getIcon(state: Artifact.State | undefined) {
   if (state === undefined) {
-    return getIconWrapper(<FolderIcon className='text-mui-grey-300-dark' />);
+    return getIconWrapper(
+      <FolderIcon data-testid='artifact-icon-default' className='text-mui-grey-300-dark' />,
+    );
   }
   switch (state) {
     case Artifact.State.LIVE:
-      return getIconWrapper(<FolderIcon className='text-mui-yellow-800' />);
+      return getIconWrapper(
+        <FolderIcon data-testid='artifact-icon-live' className='text-mui-yellow-800' />,
+      );
     default:
-      return getIconWrapper(<FolderIcon className='text-mui-grey-300-dark' />);
+      return getIconWrapper(
+        <FolderIcon data-testid='artifact-icon-default' className='text-mui-grey-300-dark' />,
+      );
   }
 }
 

frontend/src/components/graph/ExecutionNode.test.tsx

@@ -32,34 +32,34 @@ describe('ExecutionNode', () => {
     expect(screen.getByText('train-step')).toBeInTheDocument();
   });
 
-  it('renders with COMPLETE state and green background', () => {
-    const { container } = renderWithProvider(
+  it('renders with COMPLETE state and correct icon', () => {
+    renderWithProvider(
       <ExecutionNode
         id='exec-1'
         data={{ label: 'completed-step', state: Execution.State.COMPLETE }}
       />,
     );
     expect(screen.getByText('completed-step')).toBeInTheDocument();
-    expect(container.querySelector('.bg-mui-green-50')).toBeInTheDocument();
+    expect(screen.getByTestId('CheckCircleIcon')).toBeInTheDocument();
   });
 
-  it('renders with RUNNING state and green background', () => {
-    const { container } = renderWithProvider(
+  it('renders with RUNNING state and correct icon', () => {
+    renderWithProvider(
       <ExecutionNode
         id='exec-1'
         data={{ label: 'running-step', state: Execution.State.RUNNING }}
       />,
     );
     expect(screen.getByText('running-step')).toBeInTheDocument();
-    expect(container.querySelector('.bg-mui-green-50')).toBeInTheDocument();
+    expect(screen.getByTestId('RefreshIcon')).toBeInTheDocument();
   });
 
-  it('renders with FAILED state and red background', () => {
-    const { container } = renderWithProvider(
+  it('renders with FAILED state and correct icon', () => {
+    renderWithProvider(
       <ExecutionNode id='exec-1' data={{ label: 'failed-step', state: Execution.State.FAILED }} />,
     );
     expect(screen.getByText('failed-step')).toBeInTheDocument();
-    expect(container.querySelector('.bg-mui-red-50')).toBeInTheDocument();
+    expect(screen.getByTestId('ErrorIcon')).toBeInTheDocument();
   });
 
   it('sets the title attribute', () => {
@@ -76,32 +76,32 @@ describe('getIcon', () => {
   });
 
   it.each([
-    ['COMPLETE', Execution.State.COMPLETE, '.bg-mui-green-50', 'CheckCircleIcon'],
-    ['RUNNING', Execution.State.RUNNING, '.bg-mui-green-50', 'RefreshIcon'],
-    ['FAILED', Execution.State.FAILED, '.bg-mui-red-50', 'ErrorIcon'],
-    ['NEW', Execution.State.NEW, '.bg-mui-blue-50', 'PowerSettingsNewIcon'],
-    ['CANCELED', Execution.State.CANCELED, '.bg-mui-grey-200', undefined],
-    ['CACHED', Execution.State.CACHED, '.bg-mui-green-50', 'CloudDownloadIcon'],
-    ['UNKNOWN', Execution.State.UNKNOWN, '.bg-mui-grey-200', 'MoreHorizIcon'],
-  ] as const)('returns the correct icon for %s state', (_label, state, bgClass, iconTestId) => {
-    const { container } = render(getIcon(state)!);
-    expect(container.querySelector(bgClass)).toBeInTheDocument();
-    if (iconTestId) {
-      expect(container.querySelector(`[data-testid="${iconTestId}"]`)).toBeInTheDocument();
-    }
-  });
+    ['COMPLETE', Execution.State.COMPLETE, 'CheckCircleIcon', 'bg-mui-green-50'],
+    ['RUNNING', Execution.State.RUNNING, 'RefreshIcon', 'bg-mui-green-50'],
+    ['FAILED', Execution.State.FAILED, 'ErrorIcon', 'bg-mui-red-50'],
+    ['NEW', Execution.State.NEW, 'PowerSettingsNewIcon', 'bg-mui-blue-50'],
+    ['CANCELED', Execution.State.CANCELED, 'StopCircleIcon', 'bg-mui-grey-200'],
+    ['CACHED', Execution.State.CACHED, 'CloudDownloadIcon', 'bg-mui-green-50'],
+    ['UNKNOWN', Execution.State.UNKNOWN, 'MoreHorizIcon', 'bg-mui-grey-200'],
+  ] as const)(
+    'returns the correct icon for %s state',
+    (_label, state, iconTestId, backgroundClass) => {
+      render(getIcon(state)!);
+      const stateIcon = screen.getByTestId(iconTestId);
+      expect(stateIcon).toBeInTheDocument();
+      expect(stateIcon.parentElement).toHaveClass(backgroundClass);
+    },
+  );
 });
 
 describe('getExecutionIcon', () => {
-  it('returns a grey ListAlt icon for undefined state', () => {
-    const { container } = render(getExecutionIcon(undefined));
-    expect(container.querySelector('.text-mui-grey-500')).toBeInTheDocument();
-    expect(container.querySelector('[data-testid="ListAltIcon"]')).toBeInTheDocument();
+  it('returns a default ListAlt icon for undefined state', () => {
+    render(getExecutionIcon(undefined));
+    expect(screen.getByTestId('execution-icon-default')).toBeInTheDocument();
   });
 
-  it('returns a blue ListAlt icon for defined state', () => {
-    const { container } = render(getExecutionIcon(Execution.State.RUNNING));
-    expect(container.querySelector('.text-mui-blue-600')).toBeInTheDocument();
-    expect(container.querySelector('[data-testid="ListAltIcon"]')).toBeInTheDocument();
+  it('returns an active ListAlt icon for defined state', () => {
+    render(getExecutionIcon(Execution.State.RUNNING));
+    expect(screen.getByTestId('execution-icon-active')).toBeInTheDocument();
   });
 });

frontend/src/components/graph/ExecutionNode.tsx

@@ -82,9 +82,9 @@ export default ExecutionNode;
 
 export function getExecutionIcon(state: Execution.State | undefined) {
   if (state === undefined) {
-    return <ListAltIcon className='text-mui-grey-500' />;
+    return <ListAltIcon data-testid='execution-icon-default' className='text-mui-grey-500' />;
   }
-  return <ListAltIcon className='text-mui-blue-600' />;
+  return <ListAltIcon data-testid='execution-icon-active' className='text-mui-blue-600' />;
 }
 
 export function getIcon(state: Execution.State | undefined) {
@@ -119,7 +119,7 @@ export function getIcon(state: Execution.State | undefined) {
       );
     case Execution.State.COMPLETE:
       return getStateIconWrapper(
-        <CheckCircleIcon className='text-mui-green-600 bla' />,
+        <CheckCircleIcon className='text-mui-green-600' />,
         'bg-mui-green-50',
       );
     default:

frontend/src/components/graph/SubDagNode.test.tsx

@@ -41,23 +41,23 @@ describe('SubDagNode', () => {
     expect(screen.getByText('sub-pipeline')).toBeInTheDocument();
   });
 
-  it('sets the title attribute on the button', () => {
+  it('sets accessible label on the button', () => {
     renderWithProvider(<SubDagNode id='subdag-1' data={defaultData} />);
-    expect(screen.getByTitle('sub-pipeline')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'sub-pipeline' })).toBeInTheDocument();
   });
 
-  it('renders with COMPLETE state', () => {
+  it('renders COMPLETE state icon', () => {
     renderWithProvider(
       <SubDagNode id='subdag-1' data={{ ...defaultData, state: Execution.State.COMPLETE }} />,
     );
-    expect(screen.getByText('sub-pipeline')).toBeInTheDocument();
+    expect(screen.getByTestId('CheckCircleIcon')).toBeInTheDocument();
   });
 
-  it('renders with RUNNING state', () => {
+  it('renders RUNNING state icon', () => {
     renderWithProvider(
       <SubDagNode id='subdag-1' data={{ ...defaultData, state: Execution.State.RUNNING }} />,
     );
-    expect(screen.getByText('sub-pipeline')).toBeInTheDocument();
+    expect(screen.getByTestId('RefreshIcon')).toBeInTheDocument();
   });
 
   it('calls expand callback when expand button is clicked', () => {
@@ -69,7 +69,7 @@ describe('SubDagNode', () => {
   });
 
   it('renders with the correct id on the label span', () => {
-    const { container } = renderWithProvider(<SubDagNode id='subdag-42' data={defaultData} />);
-    expect(container.querySelector('#subdag-42')).toBeInTheDocument();
+    renderWithProvider(<SubDagNode id='subdag-42' data={defaultData} />);
+    expect(screen.getByTestId('subdag-42')).toBeInTheDocument();
   });
 });

frontend/src/components/graph/SubDagNode.tsx

@@ -53,7 +53,7 @@ function SubDagNode({ id, data }: SubDagNodeProps) {
                   {executionIcon}
                 </div>
                 <div className='px-4 py-4 w-44 flex flex-col justify-center items-center '>
-                  <span className='w-full truncate' id={id}>
+                  <span className='w-full truncate' id={id} data-testid={id}>
                     {data.label}
                   </span>
                 </div>

frontend/src/icons/StopCircle.tsx

@@ -20,7 +20,7 @@ interface StopCircleProps {
 
 export default function StopCircle({ colorClass }: StopCircleProps) {
   return (
-    <div className={colorClass}>
+    <div className={colorClass} data-testid='StopCircleIcon'>
       <svg
         xmlns='http://www.w3.org/2000/svg'
         enableBackground='new 0 0 24 24'