Merge pull request #6265 from Sage/hr-playwright-conversion

test(hr): migrate from cypress to playwright - FE-6126

cypress/components/split-button/split-button.cy.tsx

@@ -691,7 +691,7 @@ context("Tests for SplitButton component", () => {
         "have.css",
         "border-radius",
         "0px 32px 32px 0px"
-      )
+      );
     });
 
     it("should have the expected border radius on children container and buttons", () => {

playwright/components/hr/index.ts

@@ -0,0 +1,9 @@
+import type { Page } from "@playwright/test";
+import HR_COMPONENT from "./locators";
+
+// component preview locators
+const hrComponent = (page: Page) => {
+  return page.locator(HR_COMPONENT);
+};
+
+export default hrComponent;

playwright/components/hr/locators.ts

@@ -0,0 +1,4 @@
+// component preview locators
+const HR_COMPONENT = '[data-component="hr"]';
+
+export default HR_COMPONENT;

src/components/hr/components.test-pw.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import Hr, { HrProps } from ".";
+import Form from "../form";
+import Textbox from "../textbox";
+import Button from "../button";
+
+export const Default = (props: HrProps) => {
+  return <Hr {...props} />;
+};
+
+export const DifferentSpacing = () => <Hr mt={7} mb={7} />;
+
+export const InsideForm = () => (
+  <Form
+    onSubmit={() => {}}
+    leftSideButtons={<Button onClick={() => {}}>Cancel</Button>}
+    saveButton={
+      <Button buttonType="primary" type="submit">
+        Save
+      </Button>
+    }
+    stickyFooter={false}
+  >
+    <Textbox label="Textbox" />
+    <Textbox label="Textbox" />
+    <Hr mb={7} mt={7} />
+    <Textbox label="Textbox" />
+  </Form>
+);
+
+export const InsideFormInlineLabels = () => (
+  <Form
+    onSubmit={() => {}}
+    leftSideButtons={<Button onClick={() => {}}>Cancel</Button>}
+    saveButton={
+      <Button buttonType="primary" type="submit">
+        Save
+      </Button>
+    }
+    stickyFooter={false}
+  >
+    <Textbox
+      label="Textbox"
+      labelAlign="right"
+      labelInline
+      labelWidth={10}
+      inputWidth={50}
+    />
+    <Textbox
+      label="Textbox"
+      labelAlign="right"
+      labelInline
+      labelWidth={10}
+      inputWidth={50}
+    />
+    <Hr mb={7} mt={7} ml="10%" mr="40%" />
+    <Textbox
+      label="Textbox"
+      labelAlign="right"
+      labelInline
+      labelWidth={10}
+      inputWidth={50}
+    />
+  </Form>
+);
+
+export const EnablingAdaptiveBehaviour = () => (
+  <Hr mb={7} mt={7} ml="10%" mr="40%" adaptiveMxBreakpoint={960} />
+);

src/components/hr/hr.pw.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { test, expect } from "@playwright/experimental-ct-react17";
+import { checkAccessibility } from "../../../playwright/support/helper";
+
+import {
+  Default,
+  DifferentSpacing,
+  EnablingAdaptiveBehaviour,
+  InsideForm,
+  InsideFormInlineLabels,
+} from "../hr/components.test-pw";
+import hrComponent from "../../../playwright/components/hr/index";
+import HrComponent from "./hr.component";
+
+test.describe("Hr component", () => {
+  test("renders with expected margin", async ({ mount, page }) => {
+    await mount(<HrComponent />);
+
+    await expect(hrComponent(page)).toHaveCSS("margin-top", "24px");
+    await expect(hrComponent(page)).toHaveCSS("margin-bottom", "24px");
+  });
+
+  [
+    [799, 80, 320],
+    [800, 80, 320],
+    [801, 0, 0],
+  ].forEach(([breakpoint, leftMargin, rightMargin]) => {
+    test.use({ viewport: { width: 800, height: 300 } });
+
+    test(`adaptiveMaxBreakpoint props set to ${breakpoint} applies the expected left and right margins`, async ({
+      mount,
+      page,
+    }) => {
+      await await mount(
+        <HrComponent
+          mb={7}
+          mt={7}
+          ml="10%"
+          mr="40%"
+          adaptiveMxBreakpoint={breakpoint}
+        />
+      );
+
+      await expect(hrComponent(page)).toHaveCSS(
+        "margin-left",
+        `${leftMargin}px`
+      );
+      await expect(hrComponent(page)).toHaveCSS(
+        "margin-right",
+        `${rightMargin}px`
+      );
+    });
+  });
+});
+
+test.describe("Accessibility tests for Hr component", () => {
+  test("should pass accessibility tests for Default example", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<Default />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should pass accessibility tests for DifferentSpacing example", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DifferentSpacing />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should pass accessibility tests for EnablingAdaptiveBehaviour example", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<EnablingAdaptiveBehaviour />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should pass accessibility tests for InsideForm example", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<InsideForm />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should pass accessibility tests for InsideFormInlineLabels example", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<InsideFormInlineLabels />);
+
+    await checkAccessibility(page);
+  });
+});