From ba0796113a2da80aff47fe812546c905d323d9a4 Mon Sep 17 00:00:00 2001 From: Haider Alshamma Date: Mon, 6 Jan 2025 15:18:39 -0500 Subject: [PATCH] chore: allow tests to change their window width --- package.json | 2 ++ src/Pagination/Pagination.spec.tsx | 28 +++++++++++----------- src/Pagination/Pagination.story.tsx | 2 +- src/Pagination/PaginationCount.tsx | 1 - src/Table/Table.spec.tsx | 29 +++++++++++++---------- src/utils/testHelpers/createMatchMedia.ts | 20 ++++++++++++++++ yarn.lock | 10 ++++++++ 7 files changed, 63 insertions(+), 29 deletions(-) create mode 100644 src/utils/testHelpers/createMatchMedia.ts diff --git a/package.json b/package.json index 4fe91242e..b502cd852 100644 --- 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 index 4df0436a9..577f01eba 100644 --- a/src/Pagination/Pagination.spec.tsx +++ b/src/Pagination/Pagination.spec.tsx @@ -1,12 +1,13 @@ 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]); @@ -14,9 +15,8 @@ describe("Pagination", () => { 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,6 +51,8 @@ describe("Pagination", () => { const onPreviousCallback = jest.fn(); it("onSelectPage: returns current page when a page is selected", () => { + window.matchMedia = createMatchMedia(1024); + const { getAllByLabelText } = renderWithNDSProvider( { 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 index c2f8ea0c7..d50f28377 100644 --- 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 index 218dffb44..a5927875f 100644 --- 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 index 46c261103..3720f564c 100644 --- 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( - +
, ); fireEvent.click(container.querySelectorAll("input")[1]); @@ -29,7 +30,7 @@ describe("Table", () => { const callback = jest.fn(); const { container } = renderWithNDSProvider( -
+
, ); fireEvent.click(container.querySelectorAll("input")[0]); @@ -66,7 +67,7 @@ describe("Table", () => { const callback = jest.fn(); const { container } = renderWithNDSProvider( -
+
, ); fireEvent.click(container.querySelectorAll("button")[0]); @@ -98,7 +99,7 @@ describe("Table", () => { const callback = jest.fn(); const { container } = renderWithNDSProvider( -
+
, ); 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(
{ 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,7 +168,7 @@ describe("Table", () => { keyField="c1" rowsPerPage={6} onPageChange={pageChangeCallback} - /> + />, ); const rows = wrapper.find("tbody tr"); expect(rows.length).toEqual(ROWS_PER_PAGE); @@ -173,7 +176,7 @@ describe("Table", () => { it("renders the inner Pagination with correct props", () => { const wrapper = mountWithNDSProvider( -
+
, ); 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( -
+
, ); 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( -
+
, ); 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( -
+
, ); 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( -
+
, ); fireEvent.mouseEnter(getAllByTestId("table-row")[1]); @@ -242,7 +245,7 @@ describe("Table", () => { const callback = jest.fn(); const { getAllByTestId } = renderWithNDSProvider( -
+
, ); fireEvent.mouseLeave(getAllByTestId("table-row")[1]); diff --git a/src/utils/testHelpers/createMatchMedia.ts b/src/utils/testHelpers/createMatchMedia.ts new file mode 100644 index 000000000..710484685 --- /dev/null +++ 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 index 60ee4728a..e0b049876 100644 --- 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"