Merge pull request #6994 from Sage/FE-6549_tidy-up-RTL

test: tidy up new RTL tests - FE-6549
Sage · Oct 9, 2024 · 1fa5aa9 · 1fa5aa9
2 parents f8e383e + 39c3b5f
commit 1fa5aa9
Show file tree

Hide file tree

Showing 21 changed files with 3,040 additions and 3,023 deletions.
diff --git a/src/__internal__/focus-trap/focus-trap.test.tsx b/src/__internal__/focus-trap/focus-trap.test.tsx
diff --git a/src/__internal__/sticky-footer/sticky-footer.test.tsx b/src/__internal__/sticky-footer/sticky-footer.test.tsx
@@ -14,94 +14,90 @@ const MockFooterContainer = (props: Partial<StickyFooterProps> = {}) => {
   );
 };
 
-describe("StickyFooter component", () => {
-  it.each([true, false])(
-    "when disableSticky is %s, footer should have correct padding",
-    (disableSticky) => {
-      render(<MockFooterContainer disableSticky={disableSticky} />);
-
-      expect(screen.getByText("Some content")).toHaveStyle({
-        padding: "var(--spacing200) var(--spacing400)",
-        boxSizing: "border-box",
-      });
-    }
-  );
+test("when `disableSticky` is true, footer should have correct padding", () => {
+  render(<MockFooterContainer disableSticky />);
 
-  describe("scroll behaviour", () => {
-    beforeEach(() => {
-      jest.useFakeTimers();
-    });
+  expect(screen.getByText("Some content")).toHaveStyle({
+    padding: "var(--spacing200) var(--spacing400)",
+    boxSizing: "border-box",
+  });
+});
 
-    afterEach(() => {
-      jest.runOnlyPendingTimers();
-      jest.useRealTimers();
-    });
+test("when `disableSticky` is false, footer should have correct padding", () => {
+  render(<MockFooterContainer disableSticky={false} />);
 
-    it("should be sticky when the user has not scrolled to the bottom of containing element", () => {
-      render(<MockFooterContainer />);
-
-      const footer = screen.getByText("Some content");
-      const container = screen.getByTestId("container");
-      jest
-        .spyOn(container, "clientHeight", "get")
-        .mockImplementation(() => 1000);
-      jest
-        .spyOn(container, "scrollHeight", "get")
-        .mockImplementation(() => 1500);
-
-      fireEvent.scroll(container, { target: { scrollTop: 0 } });
-      jest.runAllTimers();
-
-      expect(footer).toHaveStyle({
-        position: "sticky",
-        width: "100%",
-        bottom: "0",
-        left: "0",
-        backgroundColor: "var(--colorsActionMinorYang100)",
-        boxShadow: "var(--boxShadow150)",
-        zIndex: "1000",
-      });
-    });
+  expect(screen.getByText("Some content")).toHaveStyle({
+    padding: "var(--spacing200) var(--spacing400)",
+    boxSizing: "border-box",
+  });
+});
 
-    it("should not be sticky when the user has scrolled to the bottom of containing element", () => {
-      render(<MockFooterContainer />);
-
-      const footer = screen.getByText("Some content");
-      const container = screen.getByTestId("container");
-      jest.spyOn(footer, "clientHeight", "get").mockImplementation(() => 40);
-      jest
-        .spyOn(container, "clientHeight", "get")
-        .mockImplementation(() => 1000);
-      jest
-        .spyOn(container, "scrollHeight", "get")
-        .mockImplementation(() => 1500);
-
-      fireEvent.scroll(container, { target: { scrollTop: 500 } });
-      jest.runAllTimers();
-
-      expect(footer).not.toHaveStyle({
-        position: "sticky",
-      });
-    });
+describe("scroll behaviour", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
 
-    it("removes scroll event listener when component unmounts", () => {
-      const { unmount } = render(<MockFooterContainer />);
+  it("should be sticky when the user has not scrolled to the bottom of containing element", () => {
+    render(<MockFooterContainer />);
 
-      const container = screen.getByTestId("container");
-      const remover = jest.spyOn(container, "removeEventListener");
+    const footer = screen.getByText("Some content");
+    const container = screen.getByTestId("container");
+    jest.spyOn(container, "clientHeight", "get").mockImplementation(() => 1000);
+    jest.spyOn(container, "scrollHeight", "get").mockImplementation(() => 1500);
 
-      unmount();
+    fireEvent.scroll(container, { target: { scrollTop: 0 } });
+    jest.runAllTimers();
 
-      expect(remover).toHaveBeenCalledTimes(1);
-      expect(remover.mock.lastCall?.[0]).toEqual("scroll");
+    expect(footer).toHaveStyle({
+      position: "sticky",
+      width: "100%",
+      bottom: "0",
+      left: "0",
+      backgroundColor: "var(--colorsActionMinorYang100)",
+      boxShadow: "var(--boxShadow150)",
+      zIndex: "1000",
     });
   });
 
-  it("when disableSticky prop is true, should disable the sticky behaviour", () => {
-    render(<MockFooterContainer disableSticky />);
+  it("should not be sticky when the user has scrolled to the bottom of containing element", () => {
+    render(<MockFooterContainer />);
+
+    const footer = screen.getByText("Some content");
+    const container = screen.getByTestId("container");
+    jest.spyOn(footer, "clientHeight", "get").mockImplementation(() => 40);
+    jest.spyOn(container, "clientHeight", "get").mockImplementation(() => 1000);
+    jest.spyOn(container, "scrollHeight", "get").mockImplementation(() => 1500);
+
+    fireEvent.scroll(container, { target: { scrollTop: 500 } });
+    jest.runAllTimers();
 
-    expect(screen.getByText("Some content")).not.toHaveStyle({
+    expect(footer).not.toHaveStyle({
       position: "sticky",
     });
   });
+
+  it("removes scroll event listener when component unmounts", () => {
+    const { unmount } = render(<MockFooterContainer />);
+
+    const container = screen.getByTestId("container");
+    const remover = jest.spyOn(container, "removeEventListener");
+
+    unmount();
+
+    expect(remover).toHaveBeenCalledTimes(1);
+    expect(remover.mock.lastCall?.[0]).toEqual("scroll");
+  });
+});
+
+test("when `disableSticky` prop is true, should disable the sticky behaviour", () => {
+  render(<MockFooterContainer disableSticky />);
+
+  expect(screen.getByText("Some content")).not.toHaveStyle({
+    position: "sticky",
+  });
 });
diff --git a/src/components/alert/alert.test.tsx b/src/components/alert/alert.test.tsx
@@ -44,7 +44,7 @@ test("has the expected border radius styling", () => {
 
   const dialog = screen.getByRole("alertdialog", { name: "Alert title" });
 
-  expect(dialog).toHaveStyle({ borderRadius: "var(--borderRadius200)" });
+  expect(dialog).toHaveStyleRule("border-radius", "var(--borderRadius200)");
 });
 
 test("should allow custom data props on close button to be assigned", () => {

diff --git a/src/components/breadcrumbs/crumb/crumb.test.tsx b/src/components/breadcrumbs/crumb/crumb.test.tsx
@@ -19,6 +19,7 @@ test("does not pass href to the anchor element when isCurrent is true", () => {
   );
 
   const anchor = screen.getByTestId("link-anchor");
+
   expect(anchor).not.toHaveAttribute("href", "foo");
 });
 

diff --git a/src/components/button-bar/button-bar.test.tsx b/src/components/button-bar/button-bar.test.tsx
@@ -61,10 +61,11 @@ describe("When ButtonBar children are Button components", () => {
     });
 
     buttonChildren.forEach((button) => {
-      expect(button).toHaveStyle({
-        fontSize: "var(--fontSizes100)",
-        minHeight: "40px",
-      });
+      expect(button).toHaveStyle("min-height: 40px");
+    });
+
+    buttonChildren.forEach((button) => {
+      expect(button).toHaveStyleRule("font-size", "var(--fontSizes100)");
     });
   });
 

diff --git a/src/components/button-toggle/button-toggle-group/button-toggle-group.test.tsx b/src/components/button-toggle/button-toggle-group/button-toggle-group.test.tsx
@@ -135,13 +135,16 @@ test("should render with disabled child buttons and expected styles when disable
 
   expect(screen.getByRole("button", { name: "Foo" })).toBeDisabled();
   expect(screen.getByRole("button", { name: "Bar" })).toBeDisabled();
-  expect(screen.getByRole("group")).toHaveStyle({
-    cursor: "not-allowed",
-    boxShadow: "inset 0px 0px 0px 1px var(--colorsActionDisabled600)",
-  });
-  expect(screen.getByText("Group Hint Text")).toHaveStyle({
-    color: "var(--colorsUtilityYin030)",
-  });
+  expect(screen.getByRole("group")).toHaveStyleRule(
+    "box-shadow",
+    "inset 0px 0px 0px 1px var(--colorsActionDisabled600)"
+  );
+  expect(screen.getByRole("group")).toHaveStyleRule("cursor: not-allowed");
+
+  expect(screen.getByText("Group Hint Text")).toHaveStyleRule(
+    "color",
+    "var(--colorsUtilityYin030)"
+  );
 });
 
 test("should render with expected styles when fullWidth prop is set", () => {