Removed unused data-testid's that weren't used in the workflow1 playw…

…right test
qua-platform · Jan 27, 2025 · db0a4ae · db0a4ae
1 parent 00cb1ae
commit db0a4ae
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 56 deletions.
diff --git a/frontend/src/modules/Nodes/components/NodeElement/NodeElement.tsx b/frontend/src/modules/Nodes/components/NodeElement/NodeElement.tsx
@@ -132,13 +132,13 @@ export const NodeElement: React.FC<{ nodeKey: string; node: NodeDTO }> = ({ node
         setSelectedItemName(node.name);
       }}
     >
-      <div className={styles.row} data-testid={`node-row-${nodeKey}`}>
-        <div className={styles.titleOrNameWrapper} data-testid={`title-name-wrapper-${nodeKey}`}>
+      <div className={styles.row}>
+        <div className={styles.titleOrNameWrapper}>
           <div className={styles.titleOrName} data-testid={`title-or-name-${nodeKey}`}>{insertSpaces(node.title ?? node.name)}</div>
         </div>
-        <div className={styles.descriptionWrapper} data-testid={`description-wrapper-${nodeKey}`}>
+        <div className={styles.descriptionWrapper}>
           <div className={styles.description}>
-            <div className={styles.descriptionText} data-testid={`description-text-${nodeKey}`}>{node.description}</div>
+            <div className={styles.descriptionText}>{node.description}</div>
           </div>
         </div>
         <div className={styles.dotWrapper} data-testid={`dot-wrapper-${nodeKey}`}>
@@ -155,7 +155,7 @@ export const NodeElement: React.FC<{ nodeKey: string; node: NodeDTO }> = ({ node
         )}
       </div>
       {node.name === selectedItemName && node.name === submitNodeResponseError?.nodeName && (
-        <ErrorResponseWrapper error={submitNodeResponseError} data-testid={`error-wrapper-${nodeKey}`} />
+        <ErrorResponseWrapper error={submitNodeResponseError} />
       )}
       {Object.keys(node?.parameters ?? {}).length > 0 && (
         <Parameters

diff --git a/frontend/src/modules/Nodes/components/Results/Results.tsx b/frontend/src/modules/Nodes/components/Results/Results.tsx
@@ -16,7 +16,7 @@ export const Results: React.FC<{ title?: string; jsonObject?: unknown; showSearc
 
   return (
     <div className={styles.wrapper} data-testid="results-wrapper">
-      <JSONEditor title={title ?? "Results"} jsonDataProp={jsonData ?? {}} height={"100%"} showSearch={showSearch} data-testid="json-editor" />
+      <JSONEditor title={title ?? "Results"} jsonDataProp={jsonData ?? {}} height={"100%"} showSearch={showSearch} />
     </div>
   );
 };
diff --git a/frontend/src/modules/Nodes/components/RunningJob/RunningJob.tsx b/frontend/src/modules/Nodes/components/RunningJob/RunningJob.tsx
@@ -40,22 +40,22 @@ export const RunningJob: React.FC = () => {
       <div className={styles.title} data-testid="running-job-title">
         <div className={styles.dot} data-testid="running-job-dot"></div>
         <div className={styles.runningJobWrapper} data-testid="running-job-name-wrapper">
-          <div className={styles.runningJobNameWrapper} data-testid="running-job-name-container">
-            <div data-testid="running-job-text">Running job{runningNode?.name ? ":" : ""}</div>
+          <div className={styles.runningJobNameWrapper}>
+            <div>Running job{runningNode?.name ? ":" : ""}</div>
             <div className={styles.runningJobName} data-testid="running-job-name">&nbsp;&nbsp;{runningNode?.name ? insertSpaces(runningNode?.name) : ""}</div>
           </div>
         </div>
         {isNodeRunning && (
-          <div className={styles.stopButtonWrapper} data-testid="stop-button-wrapper">
+          <div className={styles.stopButtonWrapper}>
             <div onClick={handleStopClick} data-testid="stop-button">
               <StopIcon />
             </div>
           </div>
         )}
       </div>
-      {runningNodeInfo && <RunningJobInfoSection data-testid="running-job-info-section" />}
-      <div className={styles.parameterStatesWrapper} data-testid="parameter-states-wrapper">
-        <div className={styles.parameterColumnWrapper} data-testid="parameter-column-wrapper">{runningNodeInfo && <RunningJobParameters />}</div>
+      {runningNodeInfo && <RunningJobInfoSection />}
+      <div className={styles.parameterStatesWrapper}>
+        <div className={styles.parameterColumnWrapper}>{runningNodeInfo && <RunningJobParameters />}</div>
         <div className={styles.statesColumnWrapper} data-testid="states-column-wrapper">
           <StateUpdates
             runningNodeInfo={runningNodeInfo}

diff --git a/frontend/src/modules/Nodes/components/RunningJob/RunningJobInfoSection.tsx b/frontend/src/modules/Nodes/components/RunningJob/RunningJobInfoSection.tsx
@@ -8,36 +8,36 @@ export const RunningJobInfoSection: React.FC = () => {
 
   return (
     <div className={styles.runInfoWrapper} data-testid="run-info-wrapper">
-      <div className={styles.runInfoColumn} data-testid="run-info-column-1">
+      <div className={styles.runInfoColumn}>
         {runningNodeInfo?.lastRunNodeName && (
-          <div className={styles.runInfoRow} data-testid="run-info-row-last-node">
-            <div className={styles.jobInfoKey} data-testid="run-info-key-last-node">Last run node:&nbsp;&nbsp;</div>
-            <div className={styles.jobInfoValue} data-testid="run-info-value-last-node">{runningNodeInfo?.lastRunNodeName}</div>
+          <div className={styles.runInfoRow}>
+            <div className={styles.jobInfoKey}>Last run node:&nbsp;&nbsp;</div>
+            <div className={styles.jobInfoValue}>{runningNodeInfo?.lastRunNodeName}</div>
           </div>
         )}
         {runningNodeInfo?.timestampOfRun && (
-          <div className={styles.runInfoRow} data-testid="run-info-row-timestamp">
-            <div className={styles.jobInfoKey} data-testid="run-info-key-timestamp">Run start:&nbsp;&nbsp;</div>
+          <div className={styles.runInfoRow}>
+            <div className={styles.jobInfoKey}>Run start:&nbsp;&nbsp;</div>
             <div className={styles.jobInfoValue} data-testid="run-info-value-timestamp">{runningNodeInfo?.timestampOfRun}</div>
           </div>
         )}
         {runningNodeInfo?.runDuration && (
-          <div className={styles.runInfoRow} data-testid="run-info-row-duration">
-            <div className={styles.jobInfoKey} data-testid="run-info-key-duration">Run duration:&nbsp;&nbsp;</div>
+          <div className={styles.runInfoRow}>
+            <div className={styles.jobInfoKey}>Run duration:&nbsp;&nbsp;</div>
             <div className={styles.jobInfoValue} data-testid="run-info-value-duration">{runningNodeInfo?.runDuration}&nbsp;s</div>
           </div>
         )}
       </div>
-      <div className={styles.runInfoColumn} data-testid="run-info-column-2">
+      <div className={styles.runInfoColumn}>
         {runningNodeInfo?.status && (
-          <div className={styles.runInfoRow} data-testid="run-info-row-status">
-            <div className={styles.jobInfoKeySecondColumn} data-testid="run-info-key-status">Status:&nbsp;&nbsp;</div>
+          <div className={styles.runInfoRow}>
+            <div className={styles.jobInfoKeySecondColumn}>Status:&nbsp;&nbsp;</div>
             <div className={styles.jobInfoValue} data-testid="run-info-value-status">{runningNodeInfo?.status}</div>
           </div>
         )}
         {runningNodeInfo?.idx && (
-          <div className={styles.runInfoRow} data-testid="run-info-row-idx">
-            <div className={styles.jobInfoKeySecondColumn} data-testid="run-info-key-idx">idx:&nbsp;&nbsp;</div>
+          <div className={styles.runInfoRow}>
+            <div className={styles.jobInfoKeySecondColumn}>idx:&nbsp;&nbsp;</div>
             <div className={styles.jobInfoValue} data-testid="run-info-value-idx">{runningNodeInfo?.idx}</div>
           </div>
         )}

diff --git a/frontend/src/modules/Nodes/components/StateUpdates/StateUpdateElement.tsx b/frontend/src/modules/Nodes/components/StateUpdates/StateUpdateElement.tsx
@@ -103,14 +103,14 @@ export const StateUpdateElement: React.FC<StateUpdateProps> = (props) => {
   }) => {
     return (
       <>
-        <div className={styles.stateUpdateValueOld} data-testid="value-old">
+        <div className={styles.stateUpdateValueOld}>
           <ValueComponent stateUpdateValue={oldValue} />
         </div>
-        <div className={styles.stateUpdateRightArrowIconWrapper} data-testid="right-arrow-icon-wrapper">
+        <div className={styles.stateUpdateRightArrowIconWrapper}>
           <RightArrowIcon />
         </div>
         {!parameterUpdated && (
-          <div className={styles.stateUpdateValueNew} data-testid="value-new">
+          <div className={styles.stateUpdateValueNew}>
             <ValueComponent
               stateUpdateValue={newValue}
               onClick={() => {
@@ -132,7 +132,7 @@ export const StateUpdateElement: React.FC<StateUpdateProps> = (props) => {
           </div>
         )}
         {parameterUpdated && (
-          <div className={styles.stateUpdateValueNew} data-testid="value-new-updated">
+          <div className={styles.stateUpdateValueNew}>
             <ValueComponent stateUpdateValue={newValue} disabled={parameterUpdated} onChange={onChange} />
           </div>
         )}
@@ -163,8 +163,8 @@ export const StateUpdateElement: React.FC<StateUpdateProps> = (props) => {
   return (
     // {!runningUpdate && !parameterUpdated && (
     <div key={`${key}-wrapper`} className={styles.stateUpdateWrapper} data-testid={`state-update-wrapper-${key}`}>
-      <div className={styles.stateUpdateOrderNumberAndTitleWrapper} data-testid={`state-update-title-wrapper-${index}`}>
-        <div className={styles.stateUpdateOrderNumber} data-testid={`state-update-order-number-${index}`}>{index + 1}</div>
+      <div className={styles.stateUpdateOrderNumberAndTitleWrapper}>
+        <div className={styles.stateUpdateOrderNumber}>{index + 1}</div>
         <div className={styles.stateUpdateOrderKey} data-testid={`state-update-key-${index}`}>{key}</div>
       </div>
       <div className={styles.stateUpdateValueWrapper} data-testid={`state-update-value-wrapper-${index}`}>

diff --git a/frontend/src/modules/Nodes/index.tsx b/frontend/src/modules/Nodes/index.tsx
@@ -16,21 +16,21 @@ const NodesPage = () => {
   return (
     <div className={styles.wrapper} data-testid="nodes-page-wrapper">
       <div className={styles.titleWrapper} data-testid="title-wrapper">
-        <PageName data-testid="page-name">{heading}</PageName>
+        <PageName>{heading}</PageName>
         &nbsp;
         <BlueButton onClick={() => fetchAllNodes()} data-testid="refresh-button">Refresh</BlueButton>
       </div>
       <div className={styles.nodesAndRunningJobInfoWrapper} data-testid="nodes-and-job-wrapper">
-        <div className={styles.nodesContainerTop} data-testid="nodes-container-top">
-          <div className={styles.nodeElementListWrapper} data-testid="node-element-list-wrapper">
+        <div className={styles.nodesContainerTop}>
+          <div className={styles.nodeElementListWrapper}>
             <NodeElementList listOfNodes={allNodes} />
           </div>
         </div>
-        <div className={styles.nodesContainerDown} data-testid="nodes-container-down">
-          <div className={styles.nodeRunningJobInfoWrapper} data-testid="running-job-info-wrapper">
+        <div className={styles.nodesContainerDown}>
+          <div className={styles.nodeRunningJobInfoWrapper}>
             <RunningJob />
           </div>
-          <Results showSearch={false} data-testid="results-component" />
+          <Results showSearch={false} />
         </div>
       </div>
     </div>

diff --git a/frontend/src/modules/SidebarMenu/MenuItem.tsx b/frontend/src/modules/SidebarMenu/MenuItem.tsx
@@ -20,7 +20,7 @@ const MenuItem: React.FunctionComponent<Module & { hideText: boolean; onClick?:
 
   return (
     <button onClick={onClick || (() => openTab(keyId))} className={styles.itemWrapper} data-cy={dataCy} data-testid={`menu-item-${keyId}`}>
-      {Icon && <Icon color={MENU_TEXT_COLOR} data-testid={`menu-item-icon-${keyId}`} />}
+      {Icon && <Icon color={MENU_TEXT_COLOR} />}
       {!hideText && <div data-testid={`menu-item-title-${keyId}`}>{title}</div>}
     </button>
   );

diff --git a/frontend/src/modules/SidebarMenu/SidebarMenu.tsx b/frontend/src/modules/SidebarMenu/SidebarMenu.tsx
@@ -25,23 +25,22 @@ const SidebarMenu: React.FunctionComponent = () => {
     <>
       <div
         className={styles.container}
-        data-testid="sidebar-menu-container"
         onMouseEnter={() => (!pinSideMenu ? setMinify(false) : {})}
         onMouseLeave={() => (!pinSideMenu ? setMinify(true) : {})}
       >
-        <div className={containerClassName} data-testid="sidebar-menu">
-          <button onClick={() => setShowPopup(true)} className={styles.qualibrateLogo} data-testid="sidebar-logo-button" data-cy={cyKeys.HOME_PAGE}>
-            {minify ? <QUAlibrateLogoSmallIcon data-testid="sidebar-small-logo" /> : <QUAlibrateLogoIcon data-testid="sidebar-large-logo" />}
+        <div className={containerClassName}>
+          <button onClick={() => setShowPopup(true)} className={styles.qualibrateLogo} data-cy={cyKeys.HOME_PAGE}>
+            {minify ? <QUAlibrateLogoSmallIcon /> : <QUAlibrateLogoIcon />}
           </button>
-          <div className={styles.menuContent} data-testid="menu-content">
-            <div className={styles.menuUpperContent} data-testid="menu-upper-content">
+          <div className={styles.menuContent}>
+            <div className={styles.menuUpperContent}>
               {hideSideMenuItems ? [] : menuItems.map((item, index) => <MenuItem {...item} key={index} hideText={minify} data-testid={`menu-item-${index}`}/>)}
             </div>
-            <div className={styles.menuBottomContent} data-testid="menu-bottom-content">
+            <div className={styles.menuBottomContent}>
               {bottomMenuItems.map((item) => (
-                <MenuItem {...item} key={item.keyId} hideText={minify} onClick={() => {}} data-testid={`bottom-menu-item-${item.keyId}`} />
+                <MenuItem {...item} key={item.keyId} hideText={minify} onClick={() => {}} />
               ))}
-              {THEME_TOGGLE_VISIBLE && <ThemeToggle showText={!minify} data-testid="theme-toggle" />}
+              {THEME_TOGGLE_VISIBLE && <ThemeToggle showText={!minify} />}
             </div>
           </div>
         </div>

diff --git a/frontend/src/modules/common/GlobalElementParameters/GlobalElementParameters.tsx b/frontend/src/modules/common/GlobalElementParameters/GlobalElementParameters.tsx
@@ -11,22 +11,21 @@ export const GlobalElementParameters: React.FC<{
 
   return (
     <>
-      <div className={styles.parameterTitle} data-testid="global-element-parameter-title">
+      <div className={styles.parameterTitle}>
         <div
           className={styles.arrowIconWrapper}
-          data-testid="global-element-parameter-arrow"
           onClick={() => {
             setExpanded(!expanded);
           }}
         >
-          <ArrowIcon options={{ rotationDegree: expanded ? 0 : -90 }} data-testid="global-element-parameter-arrow-icon" />
+          <ArrowIcon options={{ rotationDegree: expanded ? 0 : -90 }} />
         </div>
-        <div className={styles.title} data-testid="global-element-parameter-title-text">{title}</div>
+        <div className={styles.title}>{title}</div>
       </div>
       {expanded && (
-        <div className={styles.sectionWrapper} data-testid="global-element-parameter-section">
+        <div className={styles.sectionWrapper}>
           {Object.entries(parameters ?? {}).map(([key, value]) => (
-            <div key={key} className={styles.textWrapper} data-testid={`global-element-parameter-${key}`}>
+            <div key={key} className={styles.textWrapper}>
               {key}:&nbsp;{value}
             </div>
           ))}

diff --git a/frontend/src/modules/common/Parameters/Parameters.tsx b/frontend/src/modules/common/Parameters/Parameters.tsx
@@ -47,10 +47,9 @@ export const Parameters: React.FC<IProps> = ({
   return (
     <div className={classNames(styles.parametersWrapper, !show && styles.nodeNotSelected)} data-testid="node-parameters-wrapper">
       {showTitle && Object.entries(currentItem?.parameters ?? {}).length > 0 && (
-        <div className={styles.parameterTitle} data-testid="node-parameter-title">
+        <div className={styles.parameterTitle}>
           <div
             className={styles.arrowIconWrapper}
-            data-testid="arrow-icon-wrapper"
             onClick={() => {
               setExpanded(!expanded);
             }}
@@ -65,7 +64,7 @@ export const Parameters: React.FC<IProps> = ({
           if (parameter.title.toLowerCase() !== "targets name") {
             return (
               <div key={key} className={styles.parameterValues} data-testid={`parameter-values-${key}`}>
-                <div className={styles.parameterLabel} data-testid="parameter-label">{parameter.title}:</div>
+                <div className={styles.parameterLabel}>{parameter.title}:</div>
                 <div className={styles.parameterValue} data-testid="parameter-value">{getInputElement(key, parameter, currentItem)}</div>
               </div>
             );

diff --git a/frontend/tests/e2e/workflow1.test.ts b/frontend/tests/e2e/workflow1.test.ts
@@ -17,6 +17,7 @@ test('Workflow1 - Running a Calibration Node', async ({ page }) => {
 
   // 2. Verify Calibration Nodes
   // Check that at least one calibration node (e.g., test_cal) is displayed in the Node Library.
+  await expect(page.getByTestId('nodes-and-job-wrapper')).toBeVisible(); // Node page loaded sucessfully
   await expect(page.getByTestId('nodes-page-wrapper')).toBeVisible(); // Node page loaded sucessfully
   await expect(page.getByTestId('title-wrapper')).toBeVisible(); // title wrapper is visible 
   await expect(page.getByTestId('title-wrapper')).toContainText('Run calibration node'); // title is correct
@@ -71,11 +72,13 @@ test('Workflow1 - Running a Calibration Node', async ({ page }) => {
   await page.getByTestId('run-button').click();
   await expect(page.getByTestId('circular-progress-test_cal')).toBeVisible(); // spinning loading icon appears 
   await expect(page.getByTestId('run-info-value-status')).toContainText('running'); // status changes to running 
+  await expect(page.getByTestId('stop-button')).toBeVisible(); // stop button appears 
   await expect(page.getByTestId('running-job-name')).toContainText('test_cal'); 
   // Verify:
   // The Running Job section appears, showing parameters and status.
   await expect(page.getByTestId('running-job-wrapper')).toBeVisible();
   await expect(page.getByTestId('running-job-title')).toContainText('Running job: test_cal');
+  await expect(page.getByTestId('running-job-name-wrapper')).toBeVisible();
   await expect(page.getByTestId('run-info-wrapper')).toBeVisible();
   await expect(page.getByTestId('run-info-value-timestamp')).toContainText(date); // Matches the format: 2021/09/30 15:00:00
   await expect(page.getByTestId('run-info-value-duration')).toContainText(runDuration); // Matches the format: 4.00 s
@@ -98,6 +101,7 @@ test('Workflow1 - Running a Calibration Node', async ({ page }) => {
   await expect(page.getByTestId('parameter-value-noise_factor')).toContainText('0.2');
 
   // 6. Check Results Section 
+  await expect(page.getByTestId('results-wrapper')).toBeVisible();
   // Confirm the Results section is populated with:
   const resultsFrequency = page.getByTestId('data-key-pairfrequency_shift');
   const resultsFigure = page.getByTestId('data-key-pairresults_fig');