Skip to content

Commit

Permalink
chore: address code review comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@DipperTheDan
DipperTheDan committed Nov 29, 2023
1 parent 44ad4a2 commit 2efff85
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 133 deletions.
2 changes: 1 addition & 1 deletion playwright/components/progress-tracker/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Page } from "@playwright/test";
import { Page } from "@playwright/test";
import { PROGRESS_TRACKER, PROGRESS_TRACKER_LINE } from "./locators";

// component preview locators
Expand Down
261 changes: 129 additions & 132 deletions src/components/progress-tracker/progress-tracker.pw.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import {
checkAccessibility,
checkCSSOutline,
} from "../../../playwright/support/helper";
import { ProgressTrackerProps } from "../../../src/components/progress-tracker";
import { ProgressTrackerComponent } from "../../../src/components/progress-tracker/components.test-pw";
import { PROGRESS_TRACKER_SIZES } from "../../../src/components/progress-tracker/progress-tracker.config";
import { ProgressTrackerProps } from "../progress-tracker";
import { ProgressTrackerComponent } from "./components.test-pw";
import { PROGRESS_TRACKER_SIZES } from "./progress-tracker.config";

const DEFAULT_PROP_VALUE = 50;

Expand Down Expand Up @@ -150,7 +150,7 @@ test.describe("Check props for ProgressTracker component", () => {
);
});

([[true], [false]] as const).forEach(([boolean]) => {
([true, false] as const).forEach((boolean) => {
test(`render component with showDefaultLabels is set to ${boolean}`, async ({
mount,
page,
Expand Down Expand Up @@ -289,165 +289,162 @@ test.describe("Check props for ProgressTracker component", () => {
});
});

test.describe(
"Should check accessibility tests for progress tracker 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(`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} />);

await checkAccessibility(page);
});
});
});

([
PROGRESS_TRACKER_SIZES[0],
PROGRESS_TRACKER_SIZES[1],
PROGRESS_TRACKER_SIZES[2],
] as ProgressTrackerProps["size"][]).forEach((size) => {
test(`should check the accessibility when component is rendered with ${size} size`, async ({
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,
}) => {
await mount(<ProgressTrackerComponent size={size} />);
const isNowMinOrMax = checkPropName(propName);
const props = getProps(propName, isNowMinOrMax);
await mount(<ProgressTrackerComponent {...props} />);

await checkAccessibility(page);
});
});
});

(["150px", "350px", "550px"] as const).forEach((length) => {
test(`should check the accessibility when component is rendered ${length} length`, async ({
mount,
page,
}) => {
await mount(<ProgressTrackerComponent length={length} />);
([
PROGRESS_TRACKER_SIZES[0],
PROGRESS_TRACKER_SIZES[1],
PROGRESS_TRACKER_SIZES[2],
] as ProgressTrackerProps["size"][]).forEach((size) => {
test(`should check the accessibility when component is rendered with ${size} size`, async ({
mount,
page,
}) => {
await mount(<ProgressTrackerComponent size={size} />);

await checkAccessibility(page);
});
await checkAccessibility(page);
});
});

([12, 47, 100] as const).forEach((progress) => {
test(`should check the accessibility when component is rendered with ${progress}% of progress`, async ({
mount,
page,
}) => {
await mount(<ProgressTrackerComponent progress={progress} />);
(["150px", "350px", "550px"] as const).forEach((length) => {
test(`should check the accessibility when component is rendered ${length} length`, async ({
mount,
page,
}) => {
await mount(<ProgressTrackerComponent length={length} />);

await checkAccessibility(page);
});
await checkAccessibility(page);
});
});

test("should check the accessibility when component is rendered with error prop", async ({
([12, 47, 100] as const).forEach((progress) => {
test(`should check the accessibility when component is rendered with ${progress}% of progress`, async ({
mount,
page,
}) => {
await mount(
<ProgressTrackerComponent error showDefaultLabels progress={35} />
);
await mount(<ProgressTrackerComponent progress={progress} />);

await checkAccessibility(page);
});
});

test("should check the accessibility when component is rendered with error prop", async ({
mount,
page,
}) => {
await mount(
<ProgressTrackerComponent error showDefaultLabels progress={35} />
);
await checkAccessibility(page);
});

([true, false] as const).forEach((boolean) => {
test(`should check the accessibility when component is rendered with showDefaultLabels is set to ${boolean}`, async ({
mount,
page,
}) => {
await mount(<ProgressTrackerComponent showDefaultLabels={boolean} />);

await checkAccessibility(page);
});
});

([true, false] as const).forEach((boolean) => {
test(`should check the accessibility when component is rendered with showDefaultLabels is set to ${boolean}`, async ({
([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
(currentProgressLabel) => {
test(`should check the accessibility when component is rendered with currentProgressLabel is set to ${currentProgressLabel}`, async ({
mount,
page,
}) => {
await mount(<ProgressTrackerComponent showDefaultLabels={boolean} />);
await mount(
<ProgressTrackerComponent
currentProgressLabel={currentProgressLabel}
/>
);

await checkAccessibility(page);
});
});
}
);

([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
(currentProgressLabel) => {
test(`should check the accessibility when component is rendered with currentProgressLabel is set to ${currentProgressLabel}`, async ({
mount,
page,
}) => {
await mount(
<ProgressTrackerComponent
currentProgressLabel={currentProgressLabel}
/>
);

await checkAccessibility(page);
});
}
);
([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
(maxProgressLabel) => {
test(`should check the accessibility when component is rendered with maxProgressLabel is set to ${maxProgressLabel}`, async ({
mount,
page,
}) => {
await mount(
<ProgressTrackerComponent maxProgressLabel={maxProgressLabel} />
);

([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
(maxProgressLabel) => {
test(`should check the accessibility when component is rendered with maxProgressLabel is set to ${maxProgressLabel}`, async ({
mount,
page,
}) => {
await mount(
<ProgressTrackerComponent maxProgressLabel={maxProgressLabel} />
);
await checkAccessibility(page);
});
}
);

await checkAccessibility(page);
});
}
);
([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
(customValuePreposition) => {
test(`should check the accessibility when component is rendered with customValuePreposition is set to ${customValuePreposition}`, async ({
mount,
page,
}) => {
await mount(
<ProgressTrackerComponent
customValuePreposition={customValuePreposition}
showDefaultLabels
/>
);

([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
(customValuePreposition) => {
test(`should check the accessibility when component is rendered with customValuePreposition is set to ${customValuePreposition}`, async ({
mount,
page,
}) => {
await mount(
<ProgressTrackerComponent
customValuePreposition={customValuePreposition}
showDefaultLabels
/>
);

await checkAccessibility(page);
});
}
);
await checkAccessibility(page);
});
}
);

(["top", "bottom"] as ProgressTrackerProps["labelsPosition"][]).forEach(
(labelsPosition) => {
test(`should check the accessibility when component is rendered with labelsPosition is set to ${labelsPosition}`, async ({
mount,
page,
}) => {
await mount(
<ProgressTrackerComponent labelsPosition={labelsPosition} />
);
(["top", "bottom"] as ProgressTrackerProps["labelsPosition"][]).forEach(
(labelsPosition) => {
test(`should check the accessibility when component is rendered with labelsPosition is set to ${labelsPosition}`, async ({
mount,
page,
}) => {
await mount(
<ProgressTrackerComponent labelsPosition={labelsPosition} />
);

await checkAccessibility(page);
});
}
);
await checkAccessibility(page);
});
}
);

([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
(description) => {
test(`should check the accessibility when component is rendered with description prop set to ${description}`, async ({
mount,
page,
}) => {
await mount(<ProgressTrackerComponent description={description} />);
([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
(description) => {
test(`should check the accessibility when component is rendered with description prop set to ${description}`, async ({
mount,
page,
}) => {
await mount(<ProgressTrackerComponent description={description} />);

await checkAccessibility(page);
});
}
);
}
);
await checkAccessibility(page);
});
}
);
});

0 comments on commit 2efff85

Please sign in to comment.