Merge pull request #6881 from Sage/FE-6607_loader-RTL

chore(loader): convert enzyme to RTL - FE-6607

src/components/loader/loader-square.test.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Loader from ".";
+
+jest.mock("../../hooks/useMediaQuery", () => {
+  return jest.fn(() => true);
+});
+
+it.each([0, 1, 2])("each loader square renders as expected", (index) => {
+  render(<Loader />);
+
+  const loaderSquares = screen.getAllByTestId("loader-square");
+
+  expect(loaderSquares[index]).toBeInTheDocument();
+});
+
+// These styling tests required for coverage
+test("when `size` prop is set to large, the expected width, height, and margin styles are applied", () => {
+  render(<Loader size="large" />);
+
+  const loaderSquares = screen.getAllByTestId("loader-square");
+
+  expect(loaderSquares[0]).toHaveStyle({
+    height: "20px",
+    width: "20px",
+    marginRight: "8px",
+  });
+
+  expect(loaderSquares[1]).toHaveStyle({
+    height: "20px",
+    width: "20px",
+    marginRight: "8px",
+  });
+
+  expect(loaderSquares[2]).toHaveStyle({
+    height: "20px",
+    width: "20px",
+  });
+});
+
+// These styling tests required for coverage
+test("when `size` prop is set to small, the expected width, height, and margin styles are applied", () => {
+  render(<Loader size="small" />);
+
+  const loaderSquares = screen.getAllByTestId("loader-square");
+
+  expect(loaderSquares[0]).toHaveStyle({
+    width: "12px",
+    marginRight: "6px",
+  });
+
+  expect(loaderSquares[1]).toHaveStyle({
+    width: "12px",
+    marginRight: "6px",
+  });
+
+  expect(loaderSquares[2]).toHaveStyle({
+    width: "12px",
+  });
+});
+
+// These styling tests required for coverage
+test("when inside button, the expected white background colour is applied", () => {
+  render(<Loader isInsideButton />);
+
+  const loaderSquares = screen.getAllByTestId("loader-square");
+
+  expect(loaderSquares[0]).toHaveStyleRule(
+    "backgroundColor: var(--colorsUtilityYang100)"
+  );
+
+  expect(loaderSquares[1]).toHaveStyleRule(
+    "backgroundColor: var(--colorsUtilityYang100)"
+  );
+
+  expect(loaderSquares[2]).toHaveStyleRule(
+    "backgroundColor: var(--colorsUtilityYang100)"
+  );
+});
+
+// These styling tests required for coverage
+test("when inside button and `isActive` prop is false, the expected background colour is applied", () => {
+  render(<Loader isInsideButton isActive={false} />);
+
+  const loaderSquares = screen.getAllByTestId("loader-square");
+
+  expect(loaderSquares[0]).toHaveStyleRule(
+    "backgroundColor: var(--colorsSemanticNeutral500)"
+  );
+
+  expect(loaderSquares[1]).toHaveStyleRule(
+    "backgroundColor: var(--colorsSemanticNeutral500)"
+  );
+
+  expect(loaderSquares[2]).toHaveStyleRule(
+    "backgroundColor: var(--colorsSemanticNeutral500)"
+  );
+});

src/components/loader/loader.component.tsx

@@ -56,9 +56,12 @@ export const Loader = ({
         <>
           {["#13A038", "#0092DB", "#8F49FE"].map((color) => (
             <StyledLoaderSquare
+              data-role="loader-square"
               key={color}
               backgroundColor={
-                variant === "gradient" ? color : "var(--colorsActionMajor500)"
+                variant === "gradient"
+                  ? /* istanbul ignore next */ color
+                  : "var(--colorsActionMajor500)"
               }
               {...loaderSquareProps}
             />

src/components/loader/loader.pw.tsx

@@ -181,6 +181,23 @@ test.describe("check props for Loader component test", () => {
     );
   });
 
+  [0, 1, 2].forEach((index) => {
+    test(`when the variant prop is set to 'gradient' it should apply correct colour to loader square ${
+      index + 1
+    }`, async ({ mount, page }) => {
+      await mount(<Loader variant="gradient" />);
+
+      const loaderNth = loader(page, index);
+      const squareColour = await getStyle(loaderNth, "color");
+
+      const expectedDelays = ["0s", "0.2s", "0.4s"];
+      const animationDelayVal = await getStyle(loaderNth, "animation-delay");
+
+      expect(squareColour).toBe(await getStyle(loaderNth, "color"));
+      expect(animationDelayVal).toBe(expectedDelays[index]);
+    });
+  });
+
   test.describe("Accessibility tests for Loader component", async () => {
     test("should pass accessibility tests for Loader default story", async ({
       mount,

src/components/loader/loader.test.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-utils";
+import Loader from ".";
+import useMediaQuery from "../../hooks/useMediaQuery";
+
+jest.mock("../../hooks/useMediaQuery", () => ({
+  __esModule: true,
+  default: jest.fn().mockReturnValue(false),
+}));
+
+testStyledSystemMargin((props) => <Loader {...props} />);
+
+test("when the user disallows animations or their preference cannot be determined, alternative loading text is rendered", () => {
+  render(<Loader />);
+
+  expect(screen.getByText("Loading")).toBeInTheDocument();
+});
+
+describe("when the user allows animations", () => {
+  beforeEach(() => {
+    const mockUseMediaQuery = useMediaQuery as jest.MockedFunction<
+      typeof useMediaQuery
+    >;
+    mockUseMediaQuery.mockReturnValueOnce(true);
+  });
+
+  test("renders three square animation", () => {
+    render(<Loader />);
+
+    const squares = screen.getAllByTestId("loader-square");
+
+    expect(squares).toHaveLength(3);
+  });
+
+  test("root element has accessible name", () => {
+    render(<Loader />);
+
+    expect(screen.getByRole("progressbar")).toHaveAccessibleName("Loading");
+  });
+
+  test("when custom `aria-label` is passed, set accessible name to its value", () => {
+    render(<Loader aria-label="Still loading" />);
+
+    expect(screen.getByRole("progressbar")).toHaveAccessibleName(
+      "Still loading"
+    );
+  });
+});