chore: address second round of review comments - to be squashed

playwright/components/progress-tracker/index.ts

@@ -1,5 +1,12 @@
 import { Page } from "@playwright/test";
-import { PROGRESS_TRACKER, PROGRESS_TRACKER_LINE } from "./locators";
+import {
+  PROGRESS_TRACKER,
+  PROGRESS_TRACKER_CURRENT_VALUE,
+  PROGRESS_TRACKER_CUSTOM_VALUE_PREPOSITION,
+  PROGRESS_TRACKER_DESCRIPTION,
+  PROGRESS_TRACKER_LINE,
+  PROGRESS_TRACKER_MAX_VALUE,
+} from "./locators";
 
 // component preview locators
 export const progressTrackerComponent = (page: Page) =>
@@ -8,14 +15,16 @@ export const progressTrackerComponent = (page: Page) =>
 export const progressTrackerLine = (page: Page) =>
   page.locator(PROGRESS_TRACKER_LINE);
 
-export const progressTrackerMinVal = (page: Page, index = 0) =>
-  progressTrackerComponent(page).locator("* > span").nth(index);
+export const progressTrackerMinVal = (page: Page) =>
+  progressTrackerComponent(page).locator(PROGRESS_TRACKER_CURRENT_VALUE);
 
-export const progressTrackerMaxVal = (page: Page, index = 2) =>
-  progressTrackerComponent(page).locator("* > span").nth(index);
+export const progressTrackerMaxVal = (page: Page) =>
+  progressTrackerComponent(page).locator(PROGRESS_TRACKER_MAX_VALUE);
 
-export const progressTrackerCustomValuePreposition = (page: Page, index = 1) =>
-  progressTrackerComponent(page).locator("* > span").nth(index);
+export const progressTrackerCustomValuePreposition = (page: Page) =>
+  progressTrackerComponent(page).locator(
+    PROGRESS_TRACKER_CUSTOM_VALUE_PREPOSITION
+  );
 
-export const progressTrackerDescription = (page: Page, index = 3) =>
-  progressTrackerComponent(page).locator("* > span").nth(index);
+export const progressTrackerDescription = (page: Page) =>
+  progressTrackerComponent(page).locator(PROGRESS_TRACKER_DESCRIPTION);

playwright/components/progress-tracker/locators.ts

@@ -1,3 +1,10 @@
 // component preview locators
 export const PROGRESS_TRACKER = '[data-component="progress-bar"]';
 export const PROGRESS_TRACKER_LINE = '[data-element="inner-bar"]';
+export const PROGRESS_TRACKER_CURRENT_VALUE =
+  '[data-element="current-progress-label"]';
+export const PROGRESS_TRACKER_MAX_VALUE = '[data-element="max-progress-label"]';
+export const PROGRESS_TRACKER_CUSTOM_VALUE_PREPOSITION =
+  '[data-element="custom-preposition"]';
+export const PROGRESS_TRACKER_DESCRIPTION =
+  '[data-element="progress-tracker-description"]';

src/components/progress-tracker/components.test-pw.tsx

@@ -1,9 +1,34 @@
 import React from "react";
 import ProgressTracker, { ProgressTrackerProps } from ".";
+import Box from "../box";
 
 export const Default = (args: ProgressTrackerProps) => {
   return <ProgressTracker {...args} />;
 };
+
 export const ProgressTrackerComponent = (props: ProgressTrackerProps) => {
   return <ProgressTracker progress={50} showDefaultLabels {...props} />;
 };
+
+export const AccessibilityExample = () => {
+  return (
+    <Box display="flex" justifyContent="space-around">
+      <ProgressTracker
+        currentProgressLabel="50%"
+        progress={50}
+        aria-valuemin={100}
+        aria-valuenow={150}
+        aria-valuemax={200}
+        aria-valuetext="$150"
+      />
+    </Box>
+  );
+};
+
+export const AccessibilityExampleTwo = () => {
+  return (
+    <Box display="flex" justifyContent="space-around">
+      <ProgressTracker progress={50} aria-valuemin={111} aria-valuemax={188} />
+    </Box>
+  );
+};

src/components/progress-tracker/progress-tracker.component.tsx

@@ -111,17 +111,27 @@ const ProgressTracker = ({
     return (
       <StyledValuesLabel labelsPosition={labelsPosition} size={size}>
         {displayedCurrentProgressLabel && (
-          <StyledValue>{displayedCurrentProgressLabel}</StyledValue>
+          <StyledValue data-element="current-progress-label">
+            {displayedCurrentProgressLabel}
+          </StyledValue>
         )}
 
         {displayedMaxProgressLabel && (
           <>
-            <span>{customValuePreposition || l.progressTracker.of()}</span>
-            <StyledValue>{displayedMaxProgressLabel}</StyledValue>
+            <span data-element="custom-preposition">
+              {customValuePreposition || l.progressTracker.of()}
+            </span>
+            <StyledValue data-element="max-progress-label">
+              {displayedMaxProgressLabel}
+            </StyledValue>
           </>
         )}
 
-        {description && <StyledDescription>{description}</StyledDescription>}
+        {description && (
+          <StyledDescription data-element="progress-tracker-description">
+            {description}
+          </StyledDescription>
+        )}
       </StyledValuesLabel>
     );
   };

src/components/progress-tracker/progress-tracker.pw.tsx

@@ -16,55 +16,33 @@ import {
   checkCSSOutline,
 } from "../../../playwright/support/helper";
 import { ProgressTrackerProps } from "../progress-tracker";
-import { ProgressTrackerComponent } from "./components.test-pw";
+import {
+  AccessibilityExample,
+  AccessibilityExampleTwo,
+  ProgressTrackerComponent,
+} from "./components.test-pw";
 import { PROGRESS_TRACKER_SIZES } from "./progress-tracker.config";
 
-const DEFAULT_PROP_VALUE = 50;
-
-const checkPropName = (propName: string) =>
-  propName.endsWith("now") &&
-  propName.endsWith("min") &&
-  propName.endsWith("max");
-
-const getProps = (propName: string, shouldBeDefault: boolean) => {
-  if (!shouldBeDefault) {
-    return {
-      [propName]: DEFAULT_PROP_VALUE,
-    };
-  }
-  return {
-    [propName]: CHARACTERS.STANDARD,
-  };
-};
-
 test.describe("Check props for ProgressTracker component", () => {
   ([
-    "aria-label",
-    "aria-describedby",
-    "aria-valuenow",
-    "aria-valuemin",
-    "aria-valuemax",
-    "aria-valuetext",
-  ] as const).forEach((propName) => {
-    test.describe(`When ${propName} prop is passed`, () => {
-      test(`verify that the ${propName} is set to cypress-standard`, async ({
-        mount,
-        page,
-      }) => {
-        const isNowMinOrMax = checkPropName(propName);
-        const props = getProps(propName, isNowMinOrMax);
-        const assertion = isNowMinOrMax
-          ? CHARACTERS.STANDARD
-          : DEFAULT_PROP_VALUE;
-
-        await mount(<ProgressTrackerComponent {...props} />);
-
-        const progressTrackerComponentElement = progressTrackerComponent(page);
-        await expect(progressTrackerComponentElement).toHaveAttribute(
-          propName,
-          String(assertion)
-        );
-      });
+    ["aria-label", CHARACTERS.STANDARD],
+    ["aria-describedby", CHARACTERS.STANDARD],
+    ["aria-valuenow", 50],
+    ["aria-valuemin", 50],
+    ["aria-valuemax", 50],
+    ["aria-valuetext", CHARACTERS.STANDARD],
+  ] as const).forEach(([propName, value]) => {
+    test(`when ${propName} prop is passed, sets the correct ARIA attribute on the ProgressTracker`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ProgressTrackerComponent {...{ [propName]: value }} />);
+
+      const progressTrackerComponentElement = progressTrackerComponent(page);
+      await expect(progressTrackerComponentElement).toHaveAttribute(
+        propName,
+        String(value)
+      );
     });
   });
 
@@ -150,20 +128,24 @@ test.describe("Check props for ProgressTracker component", () => {
     );
   });
 
-  ([true, false] as const).forEach((boolean) => {
-    test(`render component with showDefaultLabels is set to ${boolean}`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<ProgressTrackerComponent showDefaultLabels={boolean} />);
-      const labelElement = page.getByText("50%");
+  test("should render label when showDefaultLabels prop is true", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<ProgressTrackerComponent showDefaultLabels />);
+    const labelElement = page.getByText("50%");
 
-      if (boolean) {
-        await expect(labelElement).toBeInViewport();
-      } else {
-        await expect(labelElement).not.toBeInViewport();
-      }
-    });
+    await expect(labelElement).toBeInViewport();
+  });
+
+  test("should not render label when showDefaultLabels prop is false", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<ProgressTrackerComponent showDefaultLabels={false} />);
+    const labelElement = page.getByText("50%");
+
+    await expect(labelElement).not.toBeInViewport();
   });
 
   ([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
@@ -225,33 +207,20 @@ test.describe("Check props for ProgressTracker component", () => {
     }
   );
 
-  ([
-    ["top", 0, 2],
-    ["bottom", 1, 3],
-  ] as [ProgressTrackerProps["labelsPosition"], number, number][]).forEach(
-    ([labelsPosition, minValIndex, maxValIndex]) => {
-      test(`render component with labelsPosition is set to ${labelsPosition}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <ProgressTrackerComponent labelsPosition={labelsPosition} />
-        );
+  (["top", "bottom"] as const).forEach((labelsPosition) => {
+    test(`render component with labelsPosition is set to ${labelsPosition}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ProgressTrackerComponent labelsPosition={labelsPosition} />);
 
-        const progressTrackerMinValElementIndex = progressTrackerMinVal(
-          page,
-          minValIndex
-        );
-        await expect(progressTrackerMinValElementIndex).toHaveText("50%");
+      const progressTrackerMinValElementIndex = progressTrackerMinVal(page);
+      await expect(progressTrackerMinValElementIndex).toHaveText("50%");
 
-        const progressTrackerMaxValElementIndex = progressTrackerMaxVal(
-          page,
-          maxValIndex
-        );
-        await expect(progressTrackerMaxValElementIndex).toHaveText("100%");
-      });
-    }
-  );
+      const progressTrackerMaxValElementIndex = progressTrackerMaxVal(page);
+      await expect(progressTrackerMaxValElementIndex).toHaveText("100%");
+    });
+  });
 
   ([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
     (description) => {
@@ -290,26 +259,22 @@ test.describe("Check props for ProgressTracker component", () => {
 });
 
 test.describe("Accessibility tests", () => {
-  ([
-    "aria-label",
-    "aria-describedby",
-    "aria-valuenow",
-    "aria-valuemin",
-    "aria-valuemax",
-    "aria-valuetext",
-  ] as const).forEach((propName) => {
-    test.describe(`when ${propName} prop is passed`, () => {
-      test(`check the accessibility when the ${propName} is set to cypress-standard`, async ({
-        mount,
-        page,
-      }) => {
-        const isNowMinOrMax = checkPropName(propName);
-        const props = getProps(propName, isNowMinOrMax);
-        await mount(<ProgressTrackerComponent {...props} />);
+  test(`should check the accessibility of Accessibility Example`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AccessibilityExample />);
 
-        await checkAccessibility(page);
-      });
-    });
+    await checkAccessibility(page);
+  });
+
+  test(`should check the accessibility of Accessibility Example Two`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AccessibilityExampleTwo />);
+
+    await checkAccessibility(page);
   });
 
   ([