test: use btnTestId prop to identify specific button during tests

hotosm · Nov 27, 2024 · 13801d1 · 13801d1
1 parent 9d4b8be
commit 13801d1
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/src/frontend/e2e/02-mapper-flow.spec.ts b/src/frontend/e2e/02-mapper-flow.spec.ts
@@ -32,8 +32,8 @@ test.describe('mapper flow', () => {
     });
 
     // 2. Lock task for mapping
-    await expect(page.getByRole('button', { name: 'START MAPPING' })).toBeVisible();
-    await page.getByRole('button', { name: 'START MAPPING' }).click();
+    await expect(page.getByTestId('StartMapping')).toBeVisible();
+    await page.getByTestId('StartMapping').click();
     await page.waitForSelector('div:has-text("updated to LOCKED_FOR_MAPPING"):nth-of-type(1)');
     await expect(
       page
@@ -114,7 +114,7 @@ test.describe('mapper flow', () => {
       },
     });
     await expect(page.getByText('Status: UNLOCKED_TO_MAP')).toBeVisible();
-    await expect(page.getByRole('button', { name: 'START MAPPING' })).toBeVisible();
+    await expect(page.getByTestId('StartMapping')).toBeVisible();
 
     // 2. Click on a specific feature / Entity within a task
     // assert feature popup visibility

diff --git a/src/frontend/src/components/DialogTaskActions.tsx b/src/frontend/src/components/DialogTaskActions.tsx
@@ -184,6 +184,7 @@ export default function Dialog({ taskId, feature }: dialogPropType) {
             return list_of_task_actions?.length != 0 ? (
               <Button
                 btnId={data.value}
+                btnTestId="StartMapping"
                 key={index}
                 onClick={(e) => {
                   if (

diff --git a/src/frontend/src/components/common/Button.tsx b/src/frontend/src/components/common/Button.tsx
@@ -14,6 +14,7 @@ interface IButton {
   disabled?: boolean;
   loadingText?: string;
   btnId?: string;
+  btnTestId?: string;
 }
 
 const btnStyle = (btnType, className) => {
@@ -45,11 +46,12 @@ const Button = ({
   isLoading,
   loadingText,
   btnId,
+  btnTestId,
 }: IButton) => (
   <div>
     <button
       data-btnid={btnId}
-      data-testid="test-button"
+      data-testid={btnTestId}
       type={type === 'submit' ? 'submit' : 'button'}
       onClick={onClick}
       className={`fmtm-text-lg fmtm-group fmtm-flex fmtm-items-center fmtm-gap-2 fmtm-outline-none ${btnStyle(