chore: allow tests to change their window width

nulogy · Jan 6, 2025 · ba07961 · ba07961
1 parent 9806d31
commit ba07961
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -90,6 +90,7 @@
     "@storybook/theming": "^6.1.9",
     "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "^12.1.5",
+    "@types/css-mediaquery": "^0.1.4",
     "@types/jest": "^29.5.1",
     "@types/node": "^14.0.14",
     "@types/react": "^17.0.39",
@@ -108,6 +109,7 @@
     "babel-preset-react": "6.24.1",
     "chromatic": "^6.0.6",
     "concurrently": "^5.2.0",
+    "css-mediaquery": "^0.1.2",
     "cypress": "^13.2.0",
     "cypress-enter-plugin": "^1.0.1",
     "cypress-plugin-tab": "^1.0.1",

diff --git a/src/Pagination/Pagination.spec.tsx b/src/Pagination/Pagination.spec.tsx
@@ -1,22 +1,22 @@
 import React from "react";
 import { fireEvent } from "@testing-library/react";
+import { createMatchMedia } from "../utils/testHelpers/createMatchMedia";
 import { renderWithNDSProvider } from "../NDSProvider/renderWithNDSProvider.spec-utils";
-import { getPageItemsToDisplay } from "./Pagination";
+import { getPageItemsToDisplay } from "./lib";
 import { Pagination } from ".";
 
 describe("Pagination", () => {
-  describe("pagination range", () => {
-    it("returns an array of page numbers without truncation when there are less than maxVisible pages", () => {
+  describe("getPageItemsToDisplay", () => {
+    it("returns an array of page numbers without truncation when there are less than maxVisiblePages default value", () => {
       expect(getPageItemsToDisplay({ totalPages: 6, currentPage: 2 })).toEqual([1, 2, 3, 4, 5, 6]);
 
       expect(getPageItemsToDisplay({ totalPages: 1, currentPage: 1 })).toEqual([1]);
 
       expect(getPageItemsToDisplay({ totalPages: 5, currentPage: 1 })).toEqual([1, 2, 3, 4, 5]);
     });
 
-    it("respects custom maxVisible value", () => {
-      expect(getPageItemsToDisplay({ totalPages: 10, currentPage: 5, maxVisible: 3 })).toEqual([1, "...", 5, 10]);
-      expect(getPageItemsToDisplay({ totalPages: 10, currentPage: 1, maxVisible: 1 })).toEqual([
+    it("respects custom maxVisiblePages value", () => {
+      expect(getPageItemsToDisplay({ totalPages: 10, currentPage: 5, maxVisiblePages: 3 })).toEqual([
         1,
         "...",
         5,
@@ -25,18 +25,16 @@ describe("Pagination", () => {
       ]);
     });
 
-    it("returns an array of page numbers with truncation at the beginning when current page is 5 pages from the end", () => {
+    it("always shows the page before and after the current page when the page is not the first or the last", () => {
       expect(getPageItemsToDisplay({ totalPages: 12, currentPage: 10 })).toEqual([1, "...", 8, 9, 10, 11, 12]);
 
       expect(getPageItemsToDisplay({ totalPages: 20, currentPage: 20 })).toEqual([1, "...", 16, 17, 18, 19, 20]);
 
       expect(getPageItemsToDisplay({ totalPages: 12, currentPage: 8 })).toEqual([1, "...", 7, 8, 9, 10, "...", 12]);
-    });
 
-    it("returns an array of page numbers with truncation at the end when current page is 5 pages from the beginning", () => {
       expect(getPageItemsToDisplay({ totalPages: 15, currentPage: 1 })).toEqual([1, 2, 3, 4, 5, "...", 15]);
 
-      expect(getPageItemsToDisplay({ totalPages: 7, currentPage: 5 })).toEqual([1, 2, 3, 4, 5, "...", 7]);
+      expect(getPageItemsToDisplay({ totalPages: 7, currentPage: 5 })).toEqual([1, "...", 3, 4, 5, 6, 7]);
 
       expect(getPageItemsToDisplay({ totalPages: 8, currentPage: 2 })).toEqual([1, 2, 3, 4, 5, "...", 8]);
     });
@@ -53,14 +51,16 @@ describe("Pagination", () => {
     const onPreviousCallback = jest.fn();
 
     it("onSelectPage: returns current page when a page is selected", () => {
+      window.matchMedia = createMatchMedia(1024);
+
       const { getAllByLabelText } = renderWithNDSProvider(
         <Pagination
           currentPage={1}
           totalPages={5}
           onNext={onNextCallback}
           onPrevious={onPreviousCallback}
           onSelectPage={onSelectPageCallback}
-        />
+        />,
       );
       const clickPage = (pageNum: number) => {
         fireEvent.click(getAllByLabelText("Go to page {{count}}")[pageNum]);
@@ -78,7 +78,7 @@ describe("Pagination", () => {
           onNext={onNextCallback}
           onPrevious={onPreviousCallback}
           onSelectPage={onSelectPageCallback}
-        />
+        />,
       );
       const clickPrevious = () => {
         const PreviousButton = getByLabelText("Go to previous results");
@@ -95,7 +95,7 @@ describe("Pagination", () => {
           onNext={onNextCallback}
           onPrevious={onPreviousCallback}
           onSelectPage={onSelectPageCallback}
-        />
+        />,
       );
       const clickPrevious = () => {
         const PreviousButton = getByLabelText("Go to previous results");
@@ -112,7 +112,7 @@ describe("Pagination", () => {
           onNext={onNextCallback}
           onPrevious={onPreviousCallback}
           onSelectPage={onSelectPageCallback}
-        />
+        />,
       );
       const NextButton = getByLabelText("Go to next results");
 

diff --git a/src/Pagination/Pagination.story.tsx b/src/Pagination/Pagination.story.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
+import { styled } from "styled-components";
 import { action } from "@storybook/addon-actions";
 import { Switch, Switcher } from "../Switcher";
 import { Flex } from "../Flex";
 import { Heading1, Text } from "../Type";
 import { Box } from "../Box";
 import { Pagination } from ".";
-import { styled } from "styled-components";
 
 export default {
   title: "Components/Pagination",

diff --git a/src/Pagination/PaginationCount.tsx b/src/Pagination/PaginationCount.tsx
@@ -8,7 +8,6 @@ type PaginationCountProps = {
 };
 
 const PaginationCount = ({ currentPage, totalPages }: PaginationCountProps) => {
-  console.log("asdasdkalksdlaksdlkasdl", { currentPage, totalPages });
   const { t } = useTranslation();
 
   return (

diff --git a/src/Table/Table.spec.tsx b/src/Table/Table.spec.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { fireEvent } from "@testing-library/react";
 import { Pagination } from "../Pagination";
+import { createMatchMedia } from "../utils/testHelpers/createMatchMedia";
 import { renderWithNDSProvider } from "../NDSProvider/renderWithNDSProvider.spec-utils";
 import { mountWithNDSProvider } from "../NDSProvider/mountWithNDSProvider.spec-utils";
 import { mockColumns, getMockRows, getMockColumns } from "./Table.mock-utils";
@@ -15,7 +16,7 @@ describe("Table", () => {
         const callback = jest.fn();
 
         const { container } = renderWithNDSProvider(
-          <Table columns={columns} rows={rowData} hasSelectableRows keyField="c1" onRowSelectionChange={callback} />
+          <Table columns={columns} rows={rowData} hasSelectableRows keyField="c1" onRowSelectionChange={callback} />,
         );
 
         fireEvent.click(container.querySelectorAll("input")[1]);
@@ -29,7 +30,7 @@ describe("Table", () => {
         const callback = jest.fn();
 
         const { container } = renderWithNDSProvider(
-          <Table columns={columns} rows={rowData} hasSelectableRows keyField="c1" onRowSelectionChange={callback} />
+          <Table columns={columns} rows={rowData} hasSelectableRows keyField="c1" onRowSelectionChange={callback} />,
         );
 
         fireEvent.click(container.querySelectorAll("input")[0]);
@@ -66,7 +67,7 @@ describe("Table", () => {
         const callback = jest.fn();
 
         const { container } = renderWithNDSProvider(
-          <Table columns={getMockColumns(3)} rows={rowData} hasExpandableRows onRowExpansionChange={callback} />
+          <Table columns={getMockColumns(3)} rows={rowData} hasExpandableRows onRowExpansionChange={callback} />,
         );
 
         fireEvent.click(container.querySelectorAll("button")[0]);
@@ -98,7 +99,7 @@ describe("Table", () => {
         const callback = jest.fn();
 
         const { container } = renderWithNDSProvider(
-          <Table columns={getMockColumns(3)} rows={rowData} hasExpandableRows onRowExpansionChange={callback} />
+          <Table columns={getMockColumns(3)} rows={rowData} hasExpandableRows onRowExpansionChange={callback} />,
         );
 
         fireEvent.click(container.querySelectorAll("button")[1]);
@@ -115,6 +116,8 @@ describe("Table", () => {
   describe("pagination", () => {
     describe("onPageChange:", () => {
       it("called when a new page is selected", () => {
+        window.matchMedia = createMatchMedia(1024);
+
         const pageChangeCallback = jest.fn();
         const wrapper = mountWithNDSProvider(
           <Table
@@ -124,7 +127,7 @@ describe("Table", () => {
             keyField="c1"
             rowsPerPage={6}
             onPageChange={pageChangeCallback}
-          />
+          />,
         );
         const onClickPage = (pageNum) => {
           wrapper.find("button").at(pageNum).simulate("click");
@@ -143,7 +146,7 @@ describe("Table", () => {
             keyField="c1"
             rowsPerPage={6}
             onPageChange={pageChangeCallback}
-          />
+          />,
         );
         const paginationButtons = wrapper.find("button");
         const nextButton = paginationButtons.last();
@@ -165,15 +168,15 @@ describe("Table", () => {
             keyField="c1"
             rowsPerPage={6}
             onPageChange={pageChangeCallback}
-          />
+          />,
         );
         const rows = wrapper.find("tbody tr");
         expect(rows.length).toEqual(ROWS_PER_PAGE);
       });
 
       it("renders the inner Pagination with correct props", () => {
         const wrapper = mountWithNDSProvider(
-          <Table columns={mockColumns} rows={getMockRows(20)} hasSelectableRows keyField="c1" rowsPerPage={6} />
+          <Table columns={mockColumns} rows={getMockRows(20)} hasSelectableRows keyField="c1" rowsPerPage={6} />,
         );
         const pagination = wrapper.find(Pagination);
         expect(pagination.length).toEqual(1);
@@ -183,7 +186,7 @@ describe("Table", () => {
 
       it("does not display pagination when rowsPerPage is falsy", () => {
         const wrapper = mountWithNDSProvider(
-          <Table columns={mockColumns} rows={getMockRows(20)} hasSelectableRows keyField="c1" />
+          <Table columns={mockColumns} rows={getMockRows(20)} hasSelectableRows keyField="c1" />,
         );
         const pagination = wrapper.find(Pagination);
         const rows = wrapper.find("tbody tr");
@@ -196,7 +199,7 @@ describe("Table", () => {
   describe("loading", () => {
     it("shows only loading text when loading", () => {
       const wrapper = mountWithNDSProvider(
-        <Table columns={mockColumns} rows={getMockRows(20)} hasSelectableRows loading />
+        <Table columns={mockColumns} rows={getMockRows(20)} hasSelectableRows loading />,
       );
       const rows = wrapper.find("tbody tr");
       const loadingCell = wrapper.find("tbody tr td");
@@ -207,7 +210,7 @@ describe("Table", () => {
     it("shows rows when not loading", () => {
       const rowData = getMockRows(20);
       const wrapper = mountWithNDSProvider(
-        <Table columns={mockColumns} rows={rowData} hasSelectableRows loading={false} />
+        <Table columns={mockColumns} rows={rowData} hasSelectableRows loading={false} />,
       );
       const rows = wrapper.find("tbody tr");
       const cell = wrapper.find("tbody tr td");
@@ -224,7 +227,7 @@ describe("Table", () => {
         const callback = jest.fn();
 
         const { getAllByTestId } = renderWithNDSProvider(
-          <Table columns={columns} rows={rowData} keyField="c1" onRowMouseEnter={callback} />
+          <Table columns={columns} rows={rowData} keyField="c1" onRowMouseEnter={callback} />,
         );
 
         fireEvent.mouseEnter(getAllByTestId("table-row")[1]);
@@ -242,7 +245,7 @@ describe("Table", () => {
         const callback = jest.fn();
 
         const { getAllByTestId } = renderWithNDSProvider(
-          <Table columns={columns} rows={rowData} keyField="c1" onRowMouseLeave={callback} />
+          <Table columns={columns} rows={rowData} keyField="c1" onRowMouseLeave={callback} />,
         );
 
         fireEvent.mouseLeave(getAllByTestId("table-row")[1]);

diff --git a/src/utils/testHelpers/createMatchMedia.ts b/src/utils/testHelpers/createMatchMedia.ts
@@ -0,0 +1,20 @@
+import mediaQuery from "css-mediaquery";
+
+/**
+ * Creates a mock implementation of the `window.matchMedia` function.
+ * This is useful for changing the width of the viewport in tests without
+ * needing to manipulate the actual browser environment.
+ *
+ */
+export const createMatchMedia =
+  (width: number) =>
+  (query: string): MediaQueryList => ({
+    matches: mediaQuery.match(query, { width }),
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+    media: query,
+    onchange: null,
+  });
diff --git a/yarn.lock b/yarn.lock
@@ -6264,6 +6264,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/css-mediaquery@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@types/css-mediaquery/-/css-mediaquery-0.1.4.tgz#8efbebbc0cebaf34c77db2b63892711e19143c63"
+  integrity sha512-DZyHAz716ZUctpqkUU2COwUoZ4gI6mZK2Q1oIz/fvNS6XHVpKSJgDnE7vRxZUBn9vjJHDVelCVW0dkshKOLFsA==
+
 "@types/emscripten@^1.39.6":
   version "1.39.6"
   resolved "https://registry.yarnpkg.com/@types/emscripten/-/emscripten-1.39.6.tgz#698b90fe60d44acf93c31064218fbea93fbfd85a"
@@ -10452,6 +10457,11 @@ css-loader@^3.5.3, css-loader@^3.6.0:
     schema-utils "^2.7.0"
     semver "^6.3.0"
 
+css-mediaquery@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
+  integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==
+
 css-select@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.3.tgz#a70440f70317f2669118ad74ff105e65849c7067"