From dbfcfb927b7fccc9dce77ef3916d0553fdfa4041 Mon Sep 17 00:00:00 2001
From: Stephen O'Gorman <stephen.ogorman@sage.com>
Date: Wed, 23 Aug 2023 15:29:48 +0100
Subject: [PATCH] test(button-minor): playwright refactor

---
 .../button-minor/button-minor.cy.tsx          | 453 ------------
 playwright/components/index.ts                |   1 +
 .../button-minor/button-minor.pw.tsx          | 660 ++++++++++++++++++
 .../button-minor/components.test-pw.tsx       |  25 +
 4 files changed, 686 insertions(+), 453 deletions(-)
 delete mode 100644 cypress/components/button-minor/button-minor.cy.tsx
 create mode 100644 src/components/button-minor/button-minor.pw.tsx
 create mode 100644 src/components/button-minor/components.test-pw.tsx

diff --git a/cypress/components/button-minor/button-minor.cy.tsx b/cypress/components/button-minor/button-minor.cy.tsx
deleted file mode 100644
index 4ec9bb3453..0000000000
--- a/cypress/components/button-minor/button-minor.cy.tsx
+++ /dev/null
@@ -1,453 +0,0 @@
-import React from "react";
-import { ButtonMinorProps } from "../../../src/components/button-minor";
-import {
-  Default as ButtonMinor,
-  ButtonMinorCustom,
-  ButtonMinorDifferentTypes,
-} from "../../../src/components/button-minor/button-minor-test.stories";
-import * as Stories from "../../../src/components/button-minor/button-minor.stories";
-import {
-  buttonSubtextPreview,
-  buttonMinorComponent,
-} from "../../locators/button";
-
-import {
-  BUTTON_SIZES,
-  BUTTON_ICON_POSITIONS,
-} from "../../../src/components/button/button.config";
-
-import { cyRoot, icon, tooltipPreview } from "../../locators";
-import { CHARACTERS } from "../../support/component-helper/constants";
-import CypressMountWithProviders from "../../support/component-helper/cypress-mount";
-import { assertCssValueIsApproximately } from "../../support/component-helper/common-steps";
-import { keyCode } from "../../support/helper";
-
-const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
-
-const buttonTypesAndBackgrounds = [
-  ["1st", "primary", 0],
-  ["2nd", "secondary", 1],
-  ["3rd", "tertiary", 2],
-] as const;
-
-const keysToPress = [
-  "leftarrow",
-  "rightarrow",
-  "uparrow",
-  "downarrow",
-  "Enter",
-] as const;
-
-const destructive = "rgb(162, 44, 59)";
-const transparent = "rgba(0, 0, 0, 0)";
-
-context("Test for Button Minor component", () => {
-  describe("when focused", () => {
-    it("should have the expected styling when the focusRedesignOptOut is false", () => {
-      CypressMountWithProviders(<ButtonMinorCustom />);
-
-      buttonMinorComponent()
-        .eq(0)
-        .focus()
-        .should(
-          "have.css",
-          "box-shadow",
-          "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
-        )
-        .and("have.css", "outline", "rgba(0, 0, 0, 0) solid 3px");
-    });
-
-    it("should have the expected styling when the focusRedesignOptOut is true", () => {
-      CypressMountWithProviders(<ButtonMinorCustom />, undefined, undefined, {
-        focusRedesignOptOut: true,
-      });
-      buttonMinorComponent()
-        .eq(0)
-        .focus()
-        .should("have.css", "outline", "rgb(255, 188, 25) solid 3px");
-    });
-  });
-
-  describe("Check props for Button Minor component", () => {
-    it("should render Button Minor with aria-label prop", () => {
-      CypressMountWithProviders(
-        <ButtonMinorCustom aria-label="cypress-aria" />
-      );
-
-      buttonMinorComponent().should("have.attr", "aria-label", "cypress-aria");
-    });
-
-    it.each(testData)(
-      "should render Button Minor label using %s special characters",
-      (label) => {
-        CypressMountWithProviders(<ButtonMinor>{label}</ButtonMinor>);
-
-        buttonMinorComponent().should("have.text", label);
-      }
-    );
-
-    it.each(testData)(
-      "should render Button Minor subtext with %s special characters",
-      (subtext) => {
-        CypressMountWithProviders(
-          <ButtonMinorCustom size="large" subtext={subtext} />
-        );
-
-        buttonSubtextPreview().should("have.text", subtext);
-      }
-    );
-
-    it.each(testData)(
-      "should render Button Minor name using %s special characters",
-      (name) => {
-        CypressMountWithProviders(<ButtonMinorCustom name={name} />);
-
-        buttonMinorComponent().should("have.attr", "name", name);
-      }
-    );
-
-    it.each(testData)(
-      "should render Button Minor id using %s special characters",
-      (id) => {
-        CypressMountWithProviders(<ButtonMinorCustom id={id} />);
-
-        buttonMinorComponent().should("have.attr", "id", id);
-      }
-    );
-
-    it.each(testData)(
-      "should render tooltip message with %s special characters",
-      (tooltipMessage) => {
-        CypressMountWithProviders(
-          <ButtonMinor
-            iconType="bin"
-            iconTooltipMessage={tooltipMessage}
-            m="100px"
-          />
-        );
-
-        buttonMinorComponent().children().last().realHover();
-        tooltipPreview().should("have.text", tooltipMessage);
-        cyRoot().realHover({ position: "topLeft" });
-      }
-    );
-
-    it("when icon only, icon's position is absolute", () => {
-      CypressMountWithProviders(<ButtonMinor iconType="bin" />);
-      icon().should("have.css", "position", "absolute");
-    });
-
-    it.each([
-      [BUTTON_SIZES[0], 32],
-      [BUTTON_SIZES[1], 40],
-      [BUTTON_SIZES[2], 48],
-    ] as [ButtonMinorProps["size"], number][])(
-      "should render Button Minor in %s size",
-      (size, minHeight) => {
-        CypressMountWithProviders(
-          <ButtonMinor size={size}>{size}</ButtonMinor>
-        );
-
-        buttonMinorComponent().should(
-          "have.css",
-          "min-height",
-          `${minHeight}px`
-        );
-      }
-    );
-
-    it.each([
-      [BUTTON_ICON_POSITIONS[0], "right"],
-      [BUTTON_ICON_POSITIONS[1], "left"],
-    ] as [ButtonMinorProps["iconPosition"], string][])(
-      "should set position to %s for icon in a button",
-      (iconPosition, margin) => {
-        CypressMountWithProviders(
-          <ButtonMinorCustom iconType="add" iconPosition={iconPosition} />
-        );
-
-        icon().should("have.css", `margin-${margin}`, "8px");
-      }
-    );
-
-    it("should render Button Minor with full width", () => {
-      CypressMountWithProviders(<ButtonMinorCustom fullWidth />);
-
-      buttonMinorComponent().then(($el) => {
-        assertCssValueIsApproximately($el, "width", 1365);
-      });
-    });
-
-    it("should render Button Minor with href", () => {
-      CypressMountWithProviders(
-        <ButtonMinorCustom href="https://carbon.sage.com/" />
-      );
-
-      buttonMinorComponent().should(
-        "have.attr",
-        "href",
-        "https://carbon.sage.com/"
-      );
-    });
-
-    it.each([
-      [true, "white-space"],
-      [false, "flex-wrap"],
-    ] as [ButtonMinorProps["noWrap"], string][])(
-      "should render the Button Minor text with noWrap prop set to %s",
-      (booleanState, cssValue) => {
-        const assertion = booleanState ? "nowrap" : "wrap";
-
-        CypressMountWithProviders(
-          <ButtonMinor noWrap={booleanState}>
-            {" "}
-            Long long long long long text{" "}
-          </ButtonMinor>
-        );
-
-        buttonMinorComponent().should("have.css", cssValue, assertion);
-      }
-    );
-
-    it.each([...buttonTypesAndBackgrounds] as [
-      string,
-      ButtonMinorProps["buttonType"],
-      number
-    ][])(
-      "should check Button Minor is disabled for the %s button",
-      (position, type, index) => {
-        CypressMountWithProviders(<ButtonMinorDifferentTypes disabled />);
-
-        buttonMinorComponent(index)
-          .should("be.disabled")
-          .and("have.attr", "disabled");
-      }
-    );
-
-    it.each([...buttonTypesAndBackgrounds] as [
-      string,
-      ButtonMinorProps["buttonType"],
-      number
-    ][])(
-      "should check Button Minor is enabled for the %s button",
-      (position, type, index) => {
-        CypressMountWithProviders(<ButtonMinorDifferentTypes />);
-
-        buttonMinorComponent(index).should("be.enabled");
-      }
-    );
-
-    it.each([...buttonTypesAndBackgrounds] as [
-      string,
-      ButtonMinorProps["buttonType"],
-      number
-    ][])(
-      "should check Button Minor is destructive for the %s button when buttonType is %s",
-      (_, type, index) => {
-        CypressMountWithProviders(
-          <ButtonMinorDifferentTypes buttonType={type} destructive />
-        );
-
-        buttonMinorComponent(index).realHover();
-
-        buttonMinorComponent(index)
-          .should(
-            "have.css",
-            "background",
-            `${destructive} none repeat scroll 0% 0% / auto padding-box border-box`
-          )
-          .and("have.css", "border-color", transparent)
-          .and("have.css", "color", "rgb(255, 255, 255)");
-      }
-    );
-
-    it.each(["_blank", "_self", "_parent", "_top"])(
-      "should render Button Minor with target prop set to %s",
-      (target) => {
-        CypressMountWithProviders(<ButtonMinorCustom target={target} />);
-
-        buttonMinorComponent().should("have.attr", "target", target);
-      }
-    );
-
-    it.each(["add", "share", "tick"])(
-      "should render Button Minor with type prop set to %s",
-      (type) => {
-        CypressMountWithProviders(<ButtonMinorCustom type={type} />);
-
-        buttonMinorComponent().should("have.attr", "type", type);
-      }
-    );
-  });
-
-  describe("check events for Button Minor component", () => {
-    it("should call onClick callback when a click event is triggered", () => {
-      const callback: ButtonMinorProps["onClick"] = cy.stub().as("onClick");
-
-      CypressMountWithProviders(<ButtonMinorCustom onClick={callback} />);
-
-      buttonMinorComponent().click();
-
-      cy.get("@onClick").should("be.calledOnce");
-    });
-
-    it("should call onBlur callback when a blur event is triggered", () => {
-      const callback: ButtonMinorProps["onBlur"] = cy.stub().as("onBlur");
-
-      CypressMountWithProviders(<ButtonMinorCustom onBlur={callback} />);
-
-      buttonMinorComponent().focus().blur();
-      cy.get("@onBlur").should("be.calledOnce");
-    });
-
-    it.each([...keysToPress])(
-      "should call onKeyDown callback when a keydown %s event is triggered",
-      (key) => {
-        const callback: ButtonMinorProps["onKeyDown"] = cy
-          .stub()
-          .as("onKeyDown");
-
-        CypressMountWithProviders(<ButtonMinorCustom onKeyDown={callback} />);
-
-        buttonMinorComponent().focus().trigger("keydown", keyCode(key));
-        cy.get("@onKeyDown").should("be.calledOnce");
-      }
-    );
-
-    it("should call onFocus callback when a focus event is triggered", () => {
-      const callback: ButtonMinorProps["onFocus"] = cy.stub().as("onFocus");
-
-      CypressMountWithProviders(<ButtonMinorCustom onFocus={callback} />);
-
-      buttonMinorComponent().focus();
-      cy.get("@onFocus").should("be.calledOnce");
-    });
-  });
-
-  describe("accessibility tests", () => {
-    it("should check accessibility for primary Button Minor", () => {
-      CypressMountWithProviders(<Stories.PrimaryButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for primary destructive Button Minor", () => {
-      CypressMountWithProviders(<Stories.PrimaryDestructiveButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for primary disabled Button Minor", () => {
-      CypressMountWithProviders(<Stories.PrimaryDisabledButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for primary icon before and after Button Minor", () => {
-      CypressMountWithProviders(<Stories.PrimaryIconButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for primary full width Button Minor", () => {
-      CypressMountWithProviders(<Stories.PrimaryFullWidthButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for primary no wrap Button Minor", () => {
-      CypressMountWithProviders(<Stories.PrimaryNoWrapButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for secondary Button Minor", () => {
-      CypressMountWithProviders(<Stories.SecondaryButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for secondary destrictive Button Minor", () => {
-      CypressMountWithProviders(<Stories.SecondaryDestructiveButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for secondary disabled Button Minor", () => {
-      CypressMountWithProviders(<Stories.SecondaryDisabledButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for secondary icon before and after Button Minor", () => {
-      CypressMountWithProviders(<Stories.SecondaryIconButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for secondary full width Button Minor", () => {
-      CypressMountWithProviders(<Stories.SecondaryFullWidthButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for secondary no wrap Button Minor", () => {
-      CypressMountWithProviders(<Stories.SecondaryNoWrapButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for tertiary Button Minor", () => {
-      CypressMountWithProviders(<Stories.TertiaryButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for tertiary destructive Button Minor", () => {
-      CypressMountWithProviders(<Stories.TertiaryDestructiveButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for tertiary disabled Button Minor", () => {
-      CypressMountWithProviders(<Stories.TertiaryDisabledButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for tertiary icon before and after Button Minor", () => {
-      CypressMountWithProviders(<Stories.TertiaryIconButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for tertiary full width Button Minor", () => {
-      CypressMountWithProviders(<Stories.TertiaryFullWidthButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for tertiary no wrap Button Minor", () => {
-      CypressMountWithProviders(<Stories.TertiaryNoWrapButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for icon only Button Minor", () => {
-      CypressMountWithProviders(<Stories.IconOnlyButton />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should check accessibility for icon only with tooltip Button Minor", () => {
-      CypressMountWithProviders(<Stories.IconOnlyWithTooltipButton />);
-
-      cy.checkAccessibility();
-    });
-  });
-
-  it("should have the expected border radius", () => {
-    CypressMountWithProviders(<ButtonMinor>Foo</ButtonMinor>);
-    buttonMinorComponent().should("have.css", `border-radius`, "4px");
-  });
-});
diff --git a/playwright/components/index.ts b/playwright/components/index.ts
index 0219043d73..8e070f3fd5 100644
--- a/playwright/components/index.ts
+++ b/playwright/components/index.ts
@@ -12,6 +12,7 @@ export const getDataElementByValue = (page: Page, element: string) => {
 export const closeIconButton = (page: Page) => {
   return page.locator(CLOSE_ICON_BUTTON);
 };
+
 export const tooltipPreview = (page: Page) => {
   return page.locator(TOOLTIP_PREVIEW);
 };
diff --git a/src/components/button-minor/button-minor.pw.tsx b/src/components/button-minor/button-minor.pw.tsx
new file mode 100644
index 0000000000..9e42cb7277
--- /dev/null
+++ b/src/components/button-minor/button-minor.pw.tsx
@@ -0,0 +1,660 @@
+import React from "react";
+import { test, expect } from "@playwright/experimental-ct-react17";
+import { ButtonMinorProps } from "./button-minor.component";
+import {
+  Default as ButtonMinor,
+  ButtonMinorCustom,
+  ButtonMinorDifferentTypes,
+} from "./components.test-pw";
+import {
+  PrimaryButton,
+  PrimaryDestructiveButton,
+  PrimaryDisabledButton,
+  PrimaryIconButton,
+  PrimaryFullWidthButton,
+  PrimaryNoWrapButton,
+  SecondaryButton,
+  SecondaryDestructiveButton,
+  SecondaryDisabledButton,
+  SecondaryIconButton,
+  SecondaryFullWidthButton,
+  SecondaryNoWrapButton,
+  TertiaryButton,
+  TertiaryDestructiveButton,
+  TertiaryDisabledButton,
+  TertiaryIconButton,
+  TertiaryFullWidthButton,
+  TertiaryNoWrapButton,
+  IconOnlyButton,
+  IconOnlyWithTooltipButton,
+} from "./button-minor.stories";
+import { buttonMinorComponent } from "../../../playwright/components/button/index";
+import { BUTTON_ICON_POSITIONS } from "../button/button.config";
+import { ICON } from "../../../playwright/components/locators";
+import {
+  dlsRoot,
+  icon,
+  tooltipPreview,
+} from "../../../playwright/components/index";
+import { CHARACTERS } from "../../../cypress/support/component-helper/constants";
+import {
+  assertCssValueIsApproximately,
+  checkAccessibility,
+} from "../../../playwright/support/helper";
+import { HooksConfig } from "../../../playwright";
+
+const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
+
+const buttonPositions = [
+  ["1st", 0],
+  ["2nd", 1],
+  ["3rd", 2],
+] as const;
+
+const keysToPress = [
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Enter",
+] as const;
+
+const destructive = "rgb(162, 44, 59)";
+const transparent = "rgba(0, 0, 0, 0)";
+
+test.describe(
+  "check Focus Outline & Border Radius for Button Minor Component",
+  () => {
+    test("should have the expected styling when the focusRedesignOptOut is false", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonMinorCustom />);
+
+      const outlined = buttonMinorComponent(page, 0).nth(0);
+      await outlined.focus();
+      await expect(outlined).toHaveCSS(
+        "box-shadow",
+        "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      );
+      await expect(outlined).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
+    });
+
+    test("should have the expected styling when the focusRedesignOptOut is true", async ({
+      mount,
+      page,
+    }) => {
+      await mount<HooksConfig>(<ButtonMinorCustom />, {
+        hooksConfig: {
+          focusRedesignOptOut: true,
+        },
+      });
+
+      const outlined = buttonMinorComponent(page, 0).nth(0);
+      await outlined.focus();
+      await expect(outlined).toHaveCSS(
+        "outline",
+        "rgb(255, 188, 25) solid 3px"
+      );
+    });
+
+    test("should have the expected styling when roundedCornersOptOut is false", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonMinor>Foo</ButtonMinor>);
+
+      await expect(buttonMinorComponent(page)).toHaveCSS(
+        "border-radius",
+        "4px"
+      );
+    });
+
+    test("should have the expected styling when roundedCornersOptOut is true", async ({
+      mount,
+      page,
+    }) => {
+      await mount<HooksConfig>(<ButtonMinor>Foo</ButtonMinor>, {
+        hooksConfig: { roundedCornersOptOut: true },
+      });
+
+      await expect(buttonMinorComponent(page)).toHaveCSS(
+        `border-radius`,
+        "0px"
+      );
+    });
+  }
+);
+
+test.describe("Check props for Button Minor component", () => {
+  test("should render Button Minor with aria-label prop", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<ButtonMinorCustom aria-label="cypress-aria" />);
+
+    await expect(buttonMinorComponent(page, 0)).toHaveAttribute(
+      "aria-label",
+      "cypress-aria"
+    );
+  });
+
+  testData.forEach((label) => {
+    test(`should render Button Minor label using ${label} special characters`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonMinor>{label}</ButtonMinor>);
+
+      await expect(buttonMinorComponent(page, 0)).toHaveText(label);
+    });
+  });
+
+  testData.forEach((subtext) => {
+    test(`should render Button Minor subtext with ${subtext} special characters`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <ButtonMinor size="large" subtext={subtext}>
+          Title
+        </ButtonMinor>
+      );
+
+      await expect(
+        buttonMinorComponent(page, 0).locator("span").locator("span").nth(1)
+      ).toHaveText(subtext);
+    });
+  });
+
+  testData.forEach((name) => {
+    test(`should render Button Minor name using ${name} special characters`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonMinorCustom name={name} />);
+
+      await expect(buttonMinorComponent(page, 0)).toHaveAttribute("name", name);
+    });
+  });
+
+  testData.forEach((id) => {
+    test(`should render Button Minor id using ${id} special characters`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonMinorCustom id={id} />);
+
+      await expect(buttonMinorComponent(page, 0)).toHaveAttribute("id", id);
+    });
+  });
+
+  testData.forEach((tooltipMessage) => {
+    test(`should render tooltip message as ${tooltipMessage}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <ButtonMinor
+          iconType="bin"
+          iconTooltipMessage={tooltipMessage}
+          m="100px"
+        />
+      );
+      await page.getByRole("button").locator(ICON).hover({ force: true });
+      await expect(tooltipPreview(page)).toHaveText(tooltipMessage);
+      await dlsRoot(page).hover({ position: { x: 0, y: 0 } });
+    });
+  });
+
+  test("when icon only, icon's position is absolute", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<ButtonMinor iconType="bin" />);
+
+    await expect(icon(page)).toHaveCSS("position", "absolute");
+  });
+
+  ([
+    ["small", 32],
+    ["medium", 40],
+    ["large", 48],
+  ] as [ButtonMinorProps["size"], number][]).forEach(([size, minHeight]) => {
+    test(`should render Button Minor in ${size} size`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonMinor size={size}>{size}</ButtonMinor>);
+
+      await expect(buttonMinorComponent(page, 0)).toHaveCSS(
+        "min-height",
+        `${minHeight}px`
+      );
+    });
+  });
+
+  ([
+    [BUTTON_ICON_POSITIONS[0], "right"],
+    [BUTTON_ICON_POSITIONS[1], "left"],
+  ] as [ButtonMinorProps["iconPosition"], string][]).forEach(
+    ([iconPosition, margin]) => {
+      test(`should set position to ${iconPosition} for icon in a button`, async ({
+        mount,
+        page,
+      }) => {
+        await mount(
+          <ButtonMinorCustom iconType="add" iconPosition={iconPosition} />
+        );
+
+        await expect(icon(page)).toHaveCSS(`margin-${margin}`, "8px");
+      });
+    }
+  );
+
+  test("should render Button Minor with full width", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<ButtonMinorCustom fullWidth />);
+
+    await assertCssValueIsApproximately(
+      buttonMinorComponent(page, 0),
+      "width",
+      1365
+    );
+  });
+
+  test("should render Button Minor with href", async ({ mount, page }) => {
+    await mount(<ButtonMinorCustom href="https://carbon.sage.com/" />);
+
+    await expect(buttonMinorComponent(page, 0)).toHaveAttribute(
+      "href",
+      "https://carbon.sage.com/"
+    );
+  });
+
+  ([
+    [true, "white-space"],
+    [false, "flex-wrap"],
+  ] as [ButtonMinorProps["noWrap"], string][]).forEach(
+    ([booleanState, cssValue]) => {
+      test(`should render the Button Minor text with noWrap prop set to ${booleanState}`, async ({
+        mount,
+        page,
+      }) => {
+        const assertion = booleanState ? "nowrap" : "wrap";
+        await mount(
+          <ButtonMinor noWrap={Boolean(booleanState)}>
+            {" "}
+            Long long long long long text{" "}
+          </ButtonMinor>
+        );
+
+        await expect(buttonMinorComponent(page, 0)).toHaveCSS(
+          cssValue,
+          assertion
+        );
+      });
+    }
+  );
+
+  ([...buttonPositions] as [string, number][]).forEach(([position, index]) => {
+    test(`should check Button Minor is disabled for the ${position} button`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonMinorDifferentTypes disabled />);
+
+      await expect(buttonMinorComponent(page, index)).toBeDisabled();
+    });
+  });
+
+  ([...buttonPositions] as [string, number][]).forEach(([position, index]) => {
+    test(`should check Button Minor is enabled for the ${position} button`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonMinorDifferentTypes />);
+
+      await expect(buttonMinorComponent(page, index)).toBeEnabled();
+    });
+  });
+
+  ([
+    ["1st", "primary", 0],
+    ["2nd", "secondary", 1],
+    ["3rd", "tertiary", 2],
+  ] as [string, ButtonMinorProps["buttonType"], number][]).forEach(
+    ([position, type, index]) => {
+      test(`should check Button Minor is destructive for the ${position} button when buttonType is ${type}`, async ({
+        mount,
+        page,
+      }) => {
+        await mount(
+          <ButtonMinorDifferentTypes buttonType={type} destructive />
+        );
+
+        await buttonMinorComponent(page, index).hover({ force: true });
+
+        await expect(buttonMinorComponent(page, index)).toHaveCSS(
+          "background",
+          `${destructive} none repeat scroll 0% 0% / auto padding-box border-box`
+        );
+        await expect(buttonMinorComponent(page, index)).toHaveCSS(
+          "border-color",
+          transparent
+        );
+        await expect(buttonMinorComponent(page, index)).toHaveCSS(
+          "color",
+          "rgb(255, 255, 255)"
+        );
+      });
+    }
+  );
+
+  ["_blank", "_self", "_parent", "_top"].forEach((target) => {
+    test(`should render Button Minor with target prop set to ${target}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonMinorCustom target={target} />);
+
+      await expect(buttonMinorComponent(page, 0)).toHaveAttribute(
+        "target",
+        target
+      );
+    });
+  });
+
+  ["add", "share", "tick"].forEach((type) => {
+    test(`should render Button Minor with type prop set to ${type}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonMinorCustom type={type} />);
+
+      await expect(buttonMinorComponent(page, 0)).toHaveAttribute("type", type);
+    });
+  });
+
+  ["noopener", "noreferrer", "opener"].forEach((rel) => {
+    test(`should render Button Minor with rel prop set to ${rel}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonMinorCustom rel={rel} />);
+
+      await expect(buttonMinorComponent(page, 0)).toHaveAttribute("rel", rel);
+    });
+  });
+
+  test("should render Button Minor with Children as button text", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<ButtonMinor>Children</ButtonMinor>);
+
+    await expect(buttonMinorComponent(page)).toHaveText("Children");
+  });
+});
+
+test.describe("check events for Button Minor component", () => {
+  test("should call onClick callback when a click event is triggered", async ({
+    mount,
+    page,
+  }) => {
+    let callbackCount = 0;
+    await mount(
+      <ButtonMinorCustom
+        onClick={() => {
+          callbackCount += 1;
+        }}
+      />
+    );
+
+    const button = buttonMinorComponent(page, 0);
+    await button.click();
+    expect(callbackCount).toBe(1);
+  });
+
+  test("should call onBlur callback when a blur event is triggered", async ({
+    mount,
+    page,
+  }) => {
+    let callbackCount = 0;
+    await mount(
+      <ButtonMinorCustom
+        onBlur={() => {
+          callbackCount += 1;
+        }}
+      />
+    );
+
+    const elementToFocus = buttonMinorComponent(page, 0);
+    await elementToFocus.focus();
+    const elementToBlur = buttonMinorComponent(page, 0);
+    await elementToBlur.blur();
+    expect(callbackCount).toBe(1);
+  });
+
+  [...keysToPress].forEach((key) => {
+    test(`should call onKeyDown callback when a keydown ${key} event is triggered`, async ({
+      mount,
+      page,
+    }) => {
+      let callbackCount = 0;
+      await mount(
+        <ButtonMinorCustom
+          onKeyDown={() => {
+            callbackCount += 1;
+          }}
+        />
+      );
+      const elementToFocus = buttonMinorComponent(page, 0);
+      await elementToFocus.focus();
+      await elementToFocus.press(key);
+      expect(callbackCount).toBe(1);
+    });
+  });
+
+  test("should call onFocus callback when a focus event is triggered", async ({
+    mount,
+    page,
+  }) => {
+    let callbackCount = 0;
+    await mount(
+      <ButtonMinorCustom
+        onFocus={() => {
+          callbackCount += 1;
+        }}
+      />
+    );
+
+    const elementToFocus = buttonMinorComponent(page, 0);
+    await elementToFocus.focus();
+    expect(callbackCount).toBe(1);
+  });
+});
+
+test.describe("accessibility tests", () => {
+  test("should check accessibility for primary Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<PrimaryButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for primary destructive Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<PrimaryDestructiveButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for primary disabled Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<PrimaryDisabledButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for primary icon before and after Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<PrimaryIconButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for primary full width Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<PrimaryFullWidthButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for primary no wrap Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<PrimaryNoWrapButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for secondary Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<SecondaryButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for secondary destrictive Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<SecondaryDestructiveButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for secondary disabled Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<SecondaryDisabledButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for secondary icon before and after Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<SecondaryIconButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for secondary full width Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<SecondaryFullWidthButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for secondary no wrap Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<SecondaryNoWrapButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for tertiary Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<TertiaryButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for tertiary destructive Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<TertiaryDestructiveButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for tertiary disabled Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<TertiaryDisabledButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for tertiary icon before and after Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<TertiaryIconButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for tertiary full width Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<TertiaryFullWidthButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for tertiary no wrap Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<TertiaryNoWrapButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for icon only Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<IconOnlyButton />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility for icon only with tooltip Button Minor", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<IconOnlyWithTooltipButton />);
+
+    await checkAccessibility(page);
+  });
+});
diff --git a/src/components/button-minor/components.test-pw.tsx b/src/components/button-minor/components.test-pw.tsx
new file mode 100644
index 0000000000..581e71209b
--- /dev/null
+++ b/src/components/button-minor/components.test-pw.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import ButtonMinor, { ButtonMinorProps } from "./button-minor.component";
+
+const Default = (props: ButtonMinorProps) => <ButtonMinor {...props} />;
+
+const ButtonMinorCustom = (props: ButtonMinorProps) => (
+  <ButtonMinor {...props}>Example Button</ButtonMinor>
+);
+const ButtonMinorDifferentTypes = (props: ButtonMinorProps) => {
+  return (
+    <div>
+      <ButtonMinor buttonType="primary" {...props}>
+        Primary
+      </ButtonMinor>
+      <ButtonMinor buttonType="secondary" {...props}>
+        Secondary
+      </ButtonMinor>
+      <ButtonMinor buttonType="tertiary" {...props}>
+        Tertiary
+      </ButtonMinor>
+    </div>
+  );
+};
+
+export { Default, ButtonMinorCustom, ButtonMinorDifferentTypes };