From f3a94de6afcdc88269a93181b436d74f65bf7648 Mon Sep 17 00:00:00 2001 From: Ihor Dluhosh Date: Thu, 9 Feb 2023 10:20:03 +0100 Subject: [PATCH] test(progress-tracker): add accessibility tests --- cypress/support/accessibility/a11y-utils.js | 1 + .../progress-tracker/progress-tracker.test.js | 147 +++++++++++++++++- 2 files changed, 142 insertions(+), 6 deletions(-) diff --git a/cypress/support/accessibility/a11y-utils.js b/cypress/support/accessibility/a11y-utils.js index 31c99b29e3..d4fe1313b7 100644 --- a/cypress/support/accessibility/a11y-utils.js +++ b/cypress/support/accessibility/a11y-utils.js @@ -77,6 +77,7 @@ export default (from, end) => { !prepareUrl[0].startsWith("date-range") && !prepareUrl[0].startsWith("pages") && !prepareUrl[0].startsWith("button-toggle-group") && + !prepareUrl[0].startsWith("progress-tracker") && !prepareUrl[0].endsWith("test") ) { urlList.push([prepareUrl[0], prepareUrl[1]]); diff --git a/src/components/progress-tracker/progress-tracker.test.js b/src/components/progress-tracker/progress-tracker.test.js index b12ee28de7..0377c2e484 100644 --- a/src/components/progress-tracker/progress-tracker.test.js +++ b/src/components/progress-tracker/progress-tracker.test.js @@ -17,6 +17,20 @@ const ProgressTrackerComponent = ({ ...props }) => { return ; }; +const DEFAULT_PROP_VALUE = 50; + +const checkPropName = (propName) => + propName.endsWith("now") && + propName.endsWith("min") && + propName.endsWith("max"); + +const getProps = (propName, shouldBeDefault) => { + if (!shouldBeDefault) { + return { [propName]: DEFAULT_PROP_VALUE }; + } + return { [propName]: CHARACTERS.STANDARD }; +}; + context("Tests for ProgressTracker component", () => { describe("check props for ProgressTracker component", () => { describe.each([ @@ -28,15 +42,15 @@ context("Tests for ProgressTracker component", () => { "aria-valuetext", ])("when %s prop is passed", (propName) => { it(`verify that the ${propName} is set to cypress-standard`, () => { - const props = { [propName]: CHARACTERS.STANDARD }; + const isNowMinOrMax = checkPropName(propName); + const props = getProps(propName, isNowMinOrMax); + const assertion = !isNowMinOrMax + ? DEFAULT_PROP_VALUE + : CHARACTERS.STANDARD; CypressMountWithProviders(); - progressTrackerComponent().should( - "have.attr", - propName, - CHARACTERS.STANDARD - ); + progressTrackerComponent().should("have.attr", propName, assertion); }); }); @@ -169,4 +183,125 @@ context("Tests for ProgressTracker component", () => { } ); }); + + describe("should check accessibility tests for progress tracker component", () => { + describe.each([ + "aria-label", + "aria-describedby", + "aria-valuenow", + "aria-valuemin", + "aria-valuemax", + "aria-valuetext", + ])("when %s prop is passed", (propName) => { + it(`check the accessibility when the ${propName} is set to cypress-standard`, () => { + const isNowMinOrMax = checkPropName(propName); + const props = getProps(propName, isNowMinOrMax); + + CypressMountWithProviders(); + + cy.checkAccessibility(); + }); + }); + + it.each([ + PROGRESS_TRACKER_SIZES[0], + PROGRESS_TRACKER_SIZES[1], + PROGRESS_TRACKER_SIZES[2], + ])( + "should check the accessibility when component is rendered with %s size", + (size) => { + CypressMountWithProviders(); + + cy.checkAccessibility(); + } + ); + + it.each(["150px", "350px", "550px"])( + "should check the accessibility when component is rendered %s length", + (length) => { + CypressMountWithProviders(); + + cy.checkAccessibility(); + } + ); + + it.each([12, 47, 100])( + "should check the accessibility when component is rendered with %s% of progress", + (progress) => { + CypressMountWithProviders( + + ); + + cy.checkAccessibility(); + } + ); + + it("should check the accessibility when component is rendered with error prop", () => { + CypressMountWithProviders( + + ); + + cy.checkAccessibility(); + }); + + it.each([true, false])( + "should check the accessibility when component is rendered with showDefaultLabels is set to %s", + (boolean) => { + CypressMountWithProviders( + + ); + + cy.checkAccessibility(); + } + ); + + it.each([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS])( + "should check the accessibility when component is rendered with currentProgressLabel is set to %s", + (currentProgressLabel) => { + CypressMountWithProviders( + + ); + + cy.checkAccessibility(); + } + ); + + it.each([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS])( + "should check the accessibility when component is rendered with maxProgressLabel is set to %s", + (maxProgressLabel) => { + CypressMountWithProviders( + + ); + + cy.checkAccessibility(); + } + ); + + it.each([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS])( + "should check the accessibility when component is rendered with customValuePreposition is set to %s", + (customValuePreposition) => { + CypressMountWithProviders( + + ); + + cy.checkAccessibility(); + } + ); + + it.each(["top", "bottom"])( + "should check the accessibility when component is rendered with labelsPosition is set to %s", + (labelsPosition) => { + CypressMountWithProviders( + + ); + + cy.checkAccessibility(); + } + ); + }); });