Merge branch 'master' into FE-5709-accordion-modify-buttonwidth-type-…

…to-string
Sage · Mar 24, 2023 · 9960389 · 9960389
2 parents 5747c20 + aa8f6da
commit 9960389
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 29 deletions.
diff --git a/cypress/support/accessibility/a11y-utils.js b/cypress/support/accessibility/a11y-utils.js
@@ -104,6 +104,7 @@ export default (from, end) => {
       !prepareUrl[0].startsWith("drawer") &&
       !prepareUrl[0].startsWith("group-character") &&
       !prepareUrl[0].startsWith("duelling-picklist") &&
+      !prepareUrl[0].startsWith("multi-action-button") &&
       !prepareUrl[0].startsWith("settings-row") &&
       !prepareUrl[0].startsWith("numeral-date") &&
       !prepareUrl[0].startsWith("global-header") &&

diff --git a/src/components/multi-action-button/multi-action-button-test.stories.tsx b/src/components/multi-action-button/multi-action-button-test.stories.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import { action } from "@storybook/addon-actions";
+import Dialog from "../dialog";
 import MultiActionButton, {
   MultiActionButtonProps,
 } from "./multi-action-button.component";
@@ -12,6 +13,7 @@ import {
 
 export default {
   title: "Multi Action Button/Test",
+  includeStories: "MultiActionButtonStory",
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -76,3 +78,28 @@ MultiActionButtonStory.story = {
     text: "Example Multi Action Button",
   },
 };
+
+export const MultiActionButtonList = ({ ...props }) => {
+  return (
+    <div>
+      <MultiActionButton text="Multi Action Button" {...props}>
+        <Button>Example Button</Button>
+        <Button>Example Button with long text</Button>
+        <Button>Short</Button>
+      </MultiActionButton>
+    </div>
+  );
+};
+
+export const MultiActionNestedInDialog = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  return (
+    <Dialog open={isOpen} onCancel={() => setIsOpen(false)} title="Dialog">
+      <MultiActionButton text="default text">
+        <Button>Example Button</Button>
+        <Button>Example Button with long text</Button>
+        <Button>Short</Button>
+      </MultiActionButton>
+    </Dialog>
+  );
+};
diff --git a/src/components/multi-action-button/multi-action-button.test.js b/src/components/multi-action-button/multi-action-button.test.js
@@ -1,8 +1,10 @@
-import React, { useState } from "react";
-import MultiActionButton from "./multi-action-button.component";
-import Button from "../button";
+import React from "react";
+import {
+  MultiActionButtonList,
+  MultiActionNestedInDialog,
+} from "./multi-action-button-test.stories.tsx";
 import { Accordion } from "../accordion";
-import Dialog from "../dialog";
+import * as stories from "./multi-action-button.stories";
 
 import { buttonSubtextPreview } from "../../../cypress/locators/button";
 import { pressTABKey, keyCode } from "../../../cypress/support/helper";
@@ -23,30 +25,6 @@ import CypressMountWithProviders from "../../../cypress/support/component-helper
 import { useJQueryCssValueAndAssert } from "../../../cypress/support/component-helper/common-steps";
 
 const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
-const MultiActionButtonList = ({ ...props }) => {
-  return (
-    <div>
-      <MultiActionButton text="Multi Action Button" {...props}>
-        <Button>Example Button</Button>
-        <Button>Example Button with long text</Button>
-        <Button>Short</Button>
-      </MultiActionButton>
-    </div>
-  );
-};
-
-const MultiActionNestedInDialog = () => {
-  const [isOpen, setIsOpen] = useState(true);
-  return (
-    <Dialog open={isOpen} onCancel={() => setIsOpen(false)} title="Dialog">
-      <MultiActionButton text="default text">
-        <Button>Example Button</Button>
-        <Button>Example Button with long text</Button>
-        <Button>Short</Button>
-      </MultiActionButton>
-    </Dialog>
-  );
-};
 
 context("Tests for MultiActionButton component", () => {
   describe("check props for MultiActionButton component", () => {
@@ -551,4 +529,63 @@ describe("should check colors for MultiActionButton component", () => {
       cy.get("@button").should("have.css", "border-color", borderColor);
     }
   );
+
+  describe("check accessibility for MultiActionButton component", () => {
+    it("should pass accessibility tests for MultiActionButton Default story", () => {
+      CypressMountWithProviders(<stories.DefaultStory />);
+
+      cy.checkAccessibility();
+    });
+
+    it("should pass accessibility tests for MultiActionButton Disabled story", () => {
+      CypressMountWithProviders(<stories.Disabled />);
+
+      cy.checkAccessibility();
+    });
+
+    it("should pass accessibility tests for MultiActionButton Sizes story", () => {
+      CypressMountWithProviders(<stories.Sizes />);
+
+      cy.checkAccessibility();
+    });
+
+    it("should pass accessibility tests for MultiActionButton CustomWidth story", () => {
+      CypressMountWithProviders(<stories.CustomWidth />);
+
+      cy.checkAccessibility();
+    });
+
+    it("should pass accessibility tests for MultiActionButton ButtonTypes story", () => {
+      CypressMountWithProviders(<stories.ButtonTypes />);
+
+      cy.checkAccessibility();
+    });
+
+    it("should pass accessibility tests for MultiActionButton ChildButtonTypes story", () => {
+      CypressMountWithProviders(<stories.ChildButtonTypes />);
+
+      cy.checkAccessibility();
+    });
+
+    it("should pass accessibility tests for MultiActionButton Alignment story", () => {
+      CypressMountWithProviders(<stories.Alignment />);
+
+      cy.checkAccessibility();
+    });
+
+    it("should pass accessibility tests for MultiActionButton Subtext story", () => {
+      CypressMountWithProviders(<stories.Subtext />);
+
+      cy.checkAccessibility();
+    });
+
+    it("should pass accessibility tests for MultiActionButton InOverflowHiddenContainer story", () => {
+      CypressMountWithProviders(<stories.InOverflowHiddenContainer />);
+
+      accordionDefaultTitle().click();
+      multiActionButton().eq(0).trigger("click");
+
+      cy.checkAccessibility();
+    });
+  });
 });