From 4809b4168c5b69b03d59f2a3e9cb8f549ca9c670 Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Fri, 16 Aug 2024 09:56:32 -0400 Subject: [PATCH 1/8] Add AnnouncementBanner tests; Fix defaultState location --- package-lock.json | 23 ++----- package.json | 1 + public/locales/en/translation.json | 3 +- .../{AnnouncementBanner.tsx => index.tsx} | 19 +++++- .../AnnouncementBanner/tests/index.test.tsx | 65 +++++++++++++++++++ src/components/App/DefaultState.ts | 34 ---------- .../App/{component.tsx => index.tsx} | 2 +- .../{App.test.tsx => tests/index.test.tsx} | 11 ++-- .../AppBar/tests/AppBarComponent.test.tsx | 2 +- .../DataEntryTable/tests/RecentEntry.test.tsx | 2 +- .../DataEntryTable/tests/index.test.tsx | 2 +- .../Project/tests/ProjectActions.test.tsx | 12 +--- .../Redux/tests/ExportProjectActions.test.tsx | 12 +--- .../Pronunciations/tests/AudioPlayer.test.tsx | 3 +- .../tests/AudioRecorder.test.tsx | 3 +- .../tests/PronunciationsBackend.test.tsx | 2 +- .../tests/PronunciationsFrontend.test.tsx | 2 +- .../tests/RecorderIcon.test.tsx | 3 +- .../Redux/tests/TreeViewActions.test.tsx | 12 +--- .../tests/CharacterInventoryActions.test.tsx | 8 +-- .../MergeDragDrop/tests/index.test.tsx | 2 +- .../Redux/tests/MergeDupsActions.test.tsx | 2 +- .../Redux/tests/MergeDupsDataMock.ts | 8 +-- .../EditCell/tests/EditSenseDialog.test.tsx | 3 +- src/index.tsx | 2 +- src/rootRedux/testTypes.ts | 10 +++ src/utilities/testingLibraryUtilities.tsx | 2 +- 27 files changed, 130 insertions(+), 120 deletions(-) rename src/components/AnnouncementBanner/{AnnouncementBanner.tsx => index.tsx} (78%) create mode 100644 src/components/AnnouncementBanner/tests/index.test.tsx delete mode 100644 src/components/App/DefaultState.ts rename src/components/App/{component.tsx => index.tsx} (86%) rename src/components/App/{App.test.tsx => tests/index.test.tsx} (72%) create mode 100644 src/rootRedux/testTypes.ts diff --git a/package-lock.json b/package-lock.json index ba646cd875..1349e80c18 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,6 +57,7 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", @@ -7351,11 +7352,10 @@ } }, "node_modules/@testing-library/dom": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.2.0.tgz", - "integrity": "sha512-CytIvb6tVOADRngTHGWNxH8LPgO/3hi/BdCEHOf7Qd2GvZVClhVP0Wo/QHzWhpki49Bk0b4VT6xpt3fx8HTSIw==", + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", "dev": true, - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -7375,7 +7375,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, - "peer": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -7391,7 +7390,6 @@ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, - "peer": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -7408,7 +7406,6 @@ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, - "peer": true, "dependencies": { "color-name": "~1.1.4" }, @@ -7420,15 +7417,13 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@testing-library/dom/node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true, - "peer": true, "engines": { "node": ">=8" } @@ -7438,7 +7433,6 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dev": true, - "peer": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -7602,8 +7596,7 @@ "version": "5.0.4", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -11264,8 +11257,7 @@ "version": "0.5.16", "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", - "dev": true, - "peer": true + "dev": true }, "node_modules/dom-converter": { "version": "0.2.0", @@ -17555,7 +17547,6 @@ "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, - "peer": true, "bin": { "lz-string": "bin/bin.js" } diff --git a/package.json b/package.json index 8182b7227e..e91dfa112c 100644 --- a/package.json +++ b/package.json @@ -85,6 +85,7 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 4b4b3fdebe..af40d841b8 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -121,7 +121,8 @@ "banners": { "title": "Banners", "loginBanner": "Login Banner", - "announcementBanner": "Announcement Banner" + "announcementBanner": "Announcement Banner", + "bannerCloseButton": "Close banner" } }, "userSettings": { diff --git a/src/components/AnnouncementBanner/AnnouncementBanner.tsx b/src/components/AnnouncementBanner/index.tsx similarity index 78% rename from src/components/AnnouncementBanner/AnnouncementBanner.tsx rename to src/components/AnnouncementBanner/index.tsx index 769199275c..dec2122367 100644 --- a/src/components/AnnouncementBanner/AnnouncementBanner.tsx +++ b/src/components/AnnouncementBanner/index.tsx @@ -8,6 +8,7 @@ import { useEffect, useState, } from "react"; +import { useTranslation } from "react-i18next"; import { BannerType } from "api/models"; import { getBannerText } from "backend"; @@ -18,10 +19,20 @@ import { type StoreState } from "rootRedux/types"; import { Path } from "types/path"; import theme, { themeColors } from "types/theme"; +enum AnnouncementBannerId { + ButtonClose = "announcement-banner-close-button", +} + +export enum AnnouncementBannerTextId { + ButtonClose = "siteSettings.banners.bannerCloseButton", +} + export default function AnnouncementBanner(): ReactElement { const [banner, setBanner] = useState(""); const [margins, setMargins] = useState({}); + const { t } = useTranslation(); + // Adjust the margins depending on whether there is an AppBar. const loc = useAppSelector( (state: StoreState) => state.analyticsState.currentPage @@ -48,7 +59,13 @@ export default function AnnouncementBanner(): ReactElement { return banner ? ( - + diff --git a/src/components/AnnouncementBanner/tests/index.test.tsx b/src/components/AnnouncementBanner/tests/index.test.tsx new file mode 100644 index 0000000000..e29c83a077 --- /dev/null +++ b/src/components/AnnouncementBanner/tests/index.test.tsx @@ -0,0 +1,65 @@ +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { act } from "react"; +import { Provider } from "react-redux"; +import createMockStore from "redux-mock-store"; + +import AnnouncementBanner, { + AnnouncementBannerTextId, +} from "components/AnnouncementBanner"; +import { defaultState } from "rootRedux/types"; + +jest.mock("backend", () => ({ + getBannerText: () => mockGetBannerText(), +})); + +const mockBannerText = "I'm a banner!"; +const mockGetBannerText = jest.fn(); +const mockStore = createMockStore()(defaultState); + +const renderAnnouncementBanner = async (bannerText?: string): Promise => { + mockGetBannerText.mockResolvedValue(bannerText ?? ""); + await act(async () => { + render( + + + + ); + }); +}; + +beforeEach(() => { + jest.clearAllMocks(); +}); + +describe("AnnouncementBanner", () => { + it("doesn't load if no banner text", async () => { + await renderAnnouncementBanner(); + expect( + screen.queryByTitle(AnnouncementBannerTextId.ButtonClose) + ).toBeNull(); + }); + + it("loads banner with text", async () => { + await renderAnnouncementBanner(mockBannerText); + expect(screen.queryByText(mockBannerText)).not.toBeNull(); + }); + + it("has button to close banner", async () => { + // Setup + const agent = userEvent.setup(); + await renderAnnouncementBanner(mockBannerText); + + // Find and click close button + const closeButton = await screen.findByTitle( + AnnouncementBannerTextId.ButtonClose + ); + await agent.click(closeButton); + + // Confirm closed + expect(screen.queryByText(mockBannerText)).toBeNull(); + expect( + screen.queryByTitle(AnnouncementBannerTextId.ButtonClose) + ).toBeNull(); + }); +}); diff --git a/src/components/App/DefaultState.ts b/src/components/App/DefaultState.ts deleted file mode 100644 index e872be5aed..0000000000 --- a/src/components/App/DefaultState.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { defaultState as loginState } from "components/Login/Redux/LoginReduxTypes"; -import { defaultState as currentProjectState } from "components/Project/ProjectReduxTypes"; -import { defaultState as exportProjectState } from "components/ProjectExport/Redux/ExportProjectReduxTypes"; -import { defaultState as pronunciationsState } from "components/Pronunciations/Redux/PronunciationsReduxTypes"; -import { defaultState as treeViewState } from "components/TreeView/Redux/TreeViewReduxTypes"; -import { defaultState as characterInventoryState } from "goals/CharacterInventory/Redux/CharacterInventoryReduxTypes"; -import { defaultState as mergeDuplicateGoal } from "goals/MergeDuplicates/Redux/MergeDupsReduxTypes"; -import { defaultState as goalsState } from "goals/Redux/GoalReduxTypes"; -import { defaultState as analyticsState } from "types/Redux/analyticsReduxTypes"; - -export const defaultState = { - //login and signup - loginState: { ...loginState }, - - //project - currentProjectState: { ...currentProjectState }, - exportProjectState: { ...exportProjectState }, - - //data entry and review entries goal - treeViewState: { ...treeViewState }, - pronunciationsState: { ...pronunciationsState }, - - //goal timeline and current goal - goalsState: { ...goalsState }, - - //merge duplicates goal and review deferred duplicates goal - mergeDuplicateGoal: { ...mergeDuplicateGoal }, - - //character inventory goal - characterInventoryState: { ...characterInventoryState }, - - //analytics state - analyticsState: { ...analyticsState }, -}; diff --git a/src/components/App/component.tsx b/src/components/App/index.tsx similarity index 86% rename from src/components/App/component.tsx rename to src/components/App/index.tsx index 12c2152216..d66ae6d3d1 100644 --- a/src/components/App/component.tsx +++ b/src/components/App/index.tsx @@ -1,7 +1,7 @@ import { ReactElement, Suspense } from "react"; import { RouterProvider } from "react-router-dom"; -import AnnouncementBanner from "components/AnnouncementBanner/AnnouncementBanner"; +import AnnouncementBanner from "components/AnnouncementBanner"; import UpperRightToastContainer from "components/Toast/UpperRightToastContainer"; import router from "router/browserRouter"; diff --git a/src/components/App/App.test.tsx b/src/components/App/tests/index.test.tsx similarity index 72% rename from src/components/App/App.test.tsx rename to src/components/App/tests/index.test.tsx index 52b24c6cca..de656201c8 100644 --- a/src/components/App/App.test.tsx +++ b/src/components/App/tests/index.test.tsx @@ -1,16 +1,15 @@ +import { render } from "@testing-library/react"; import "jest-canvas-mock"; +import { act } from "react"; import { Provider } from "react-redux"; -import { act, create } from "react-test-renderer"; import configureMockStore from "redux-mock-store"; import thunk from "redux-thunk"; -import { defaultState } from "components/App/DefaultState"; -import App from "components/App/component"; +import App from "components/App"; +import { defaultState } from "rootRedux/types"; jest.mock("react-router-dom"); -jest.mock("components/AnnouncementBanner/AnnouncementBanner", () => "div"); - const createMockStore = configureMockStore([thunk]); const mockStore = createMockStore(defaultState); @@ -22,7 +21,7 @@ global.analytics = { track: jest.fn() } as any; describe("App", () => { it("renders without crashing", async () => { await act(async () => { - create( + render( diff --git a/src/components/AppBar/tests/AppBarComponent.test.tsx b/src/components/AppBar/tests/AppBarComponent.test.tsx index 6c100b69e6..a3c78dee6e 100644 --- a/src/components/AppBar/tests/AppBarComponent.test.tsx +++ b/src/components/AppBar/tests/AppBarComponent.test.tsx @@ -3,8 +3,8 @@ import { MemoryRouter } from "react-router-dom"; import { act, create } from "react-test-renderer"; import configureMockStore from "redux-mock-store"; -import { defaultState } from "components/App/DefaultState"; import AppBar from "components/AppBar/AppBarComponent"; +import { defaultState } from "rootRedux/types"; jest.mock("backend", () => ({ isSiteAdmin: () => mockIsSiteAdmin(), diff --git a/src/components/DataEntry/DataEntryTable/tests/RecentEntry.test.tsx b/src/components/DataEntry/DataEntryTable/tests/RecentEntry.test.tsx index 1732ba67b3..c125693b58 100644 --- a/src/components/DataEntry/DataEntryTable/tests/RecentEntry.test.tsx +++ b/src/components/DataEntry/DataEntryTable/tests/RecentEntry.test.tsx @@ -9,7 +9,6 @@ import { import configureMockStore from "redux-mock-store"; import { Word } from "api/models"; -import { defaultState } from "components/App/DefaultState"; import { NoteButton } from "components/Buttons"; import { DeleteEntry, @@ -21,6 +20,7 @@ import { EditTextDialog } from "components/Dialogs"; import AudioPlayer from "components/Pronunciations/AudioPlayer"; import AudioRecorder from "components/Pronunciations/AudioRecorder"; import PronunciationsBackend from "components/Pronunciations/PronunciationsBackend"; +import { defaultState } from "rootRedux/types"; import theme from "types/theme"; import { newPronunciation, simpleWord } from "types/word"; import { newWritingSystem } from "types/writingSystem"; diff --git a/src/components/DataEntry/DataEntryTable/tests/index.test.tsx b/src/components/DataEntry/DataEntryTable/tests/index.test.tsx index d733021b16..de83d8082c 100644 --- a/src/components/DataEntry/DataEntryTable/tests/index.test.tsx +++ b/src/components/DataEntry/DataEntryTable/tests/index.test.tsx @@ -9,7 +9,6 @@ import { import configureMockStore from "redux-mock-store"; import { Gloss, SemanticDomain, Sense, Word } from "api/models"; -import { defaultState } from "components/App/DefaultState"; import DataEntryTable, { WordAccess, addSemanticDomainToSense, @@ -20,6 +19,7 @@ import DataEntryTable, { updateEntryGloss, } from "components/DataEntry/DataEntryTable"; import NewEntry from "components/DataEntry/DataEntryTable/NewEntry"; +import { defaultState } from "rootRedux/types"; import { newProject } from "types/project"; import { newSemanticDomain, diff --git a/src/components/Project/tests/ProjectActions.test.tsx b/src/components/Project/tests/ProjectActions.test.tsx index 0890475e08..b321627221 100644 --- a/src/components/Project/tests/ProjectActions.test.tsx +++ b/src/components/Project/tests/ProjectActions.test.tsx @@ -1,7 +1,4 @@ -import { type PreloadedState } from "redux"; - import { type Project, type Speaker } from "api/models"; -import { defaultState } from "components/App/DefaultState"; import { asyncRefreshProjectUsers, asyncSetNewCurrentProject, @@ -9,7 +6,8 @@ import { clearCurrentProject, } from "components/Project/ProjectActions"; import { defaultState as currentProjectState } from "components/Project/ProjectReduxTypes"; -import { type RootState, setupStore } from "rootRedux/store"; +import { setupStore } from "rootRedux/store"; +import { persistedDefaultState } from "rootRedux/testTypes"; import { newProject } from "types/project"; import { newUser } from "types/user"; @@ -26,12 +24,6 @@ const mockGetAllSemDomNames = jest.fn(); const mockUpdateProject = jest.fn(); const mockProjId = "project-id"; -// Preloaded values for store when testing -const persistedDefaultState: PreloadedState = { - ...defaultState, - _persist: { version: 1, rehydrated: false }, -}; - beforeEach(() => { jest.resetAllMocks(); }); diff --git a/src/components/ProjectExport/Redux/tests/ExportProjectActions.test.tsx b/src/components/ProjectExport/Redux/tests/ExportProjectActions.test.tsx index 0e03482671..d664a23f6d 100644 --- a/src/components/ProjectExport/Redux/tests/ExportProjectActions.test.tsx +++ b/src/components/ProjectExport/Redux/tests/ExportProjectActions.test.tsx @@ -1,13 +1,11 @@ -import { PreloadedState } from "redux"; - -import { defaultState } from "components/App/DefaultState"; import { asyncDownloadExport, asyncExportProject, asyncResetExport, } from "components/ProjectExport/Redux/ExportProjectActions"; import { ExportStatus } from "components/ProjectExport/Redux/ExportProjectReduxTypes"; -import { RootState, setupStore } from "rootRedux/store"; +import { setupStore } from "rootRedux/store"; +import { persistedDefaultState } from "rootRedux/testTypes"; jest.mock("backend", () => ({ deleteLift: jest.fn, @@ -20,12 +18,6 @@ const mockDownloadList = jest.fn(); const mockExportLift = jest.fn(); const mockProjId = "project-id"; -// Preloaded values for store when testing -const persistedDefaultState: PreloadedState = { - ...defaultState, - _persist: { version: 1, rehydrated: false }, -}; - describe("ExportProjectActions", () => { describe("asyncDownloadExport", () => { it("correctly affects state on success", async () => { diff --git a/src/components/Pronunciations/tests/AudioPlayer.test.tsx b/src/components/Pronunciations/tests/AudioPlayer.test.tsx index acd768ebe3..466f2dfa25 100644 --- a/src/components/Pronunciations/tests/AudioPlayer.test.tsx +++ b/src/components/Pronunciations/tests/AudioPlayer.test.tsx @@ -3,14 +3,13 @@ import { Provider } from "react-redux"; import { type ReactTestRenderer, act, create } from "react-test-renderer"; import configureMockStore from "redux-mock-store"; -import { defaultState } from "components/App/DefaultState"; import AudioPlayer, { longPressDelay, playButtonId, playMenuId, } from "components/Pronunciations/AudioPlayer"; import { PronunciationsStatus } from "components/Pronunciations/Redux/PronunciationsReduxTypes"; -import { type StoreState } from "rootRedux/types"; +import { defaultState, type StoreState } from "rootRedux/types"; import { newPronunciation } from "types/word"; // Mock out Menu to avoid issues with setting its anchor. diff --git a/src/components/Pronunciations/tests/AudioRecorder.test.tsx b/src/components/Pronunciations/tests/AudioRecorder.test.tsx index b9653d69fd..92b0394012 100644 --- a/src/components/Pronunciations/tests/AudioRecorder.test.tsx +++ b/src/components/Pronunciations/tests/AudioRecorder.test.tsx @@ -3,11 +3,10 @@ import { Provider } from "react-redux"; import { ReactTestRenderer, act, create } from "react-test-renderer"; import configureMockStore from "redux-mock-store"; -import { defaultState } from "components/App/DefaultState"; import AudioRecorder from "components/Pronunciations/AudioRecorder"; import { recordIconId } from "components/Pronunciations/RecorderIcon"; import { PronunciationsStatus } from "components/Pronunciations/Redux/PronunciationsReduxTypes"; -import { type StoreState } from "rootRedux/types"; +import { type StoreState, defaultState } from "rootRedux/types"; import theme, { themeColors } from "types/theme"; let testRenderer: ReactTestRenderer; diff --git a/src/components/Pronunciations/tests/PronunciationsBackend.test.tsx b/src/components/Pronunciations/tests/PronunciationsBackend.test.tsx index 5b9460e2b2..e4e7d4ec0b 100644 --- a/src/components/Pronunciations/tests/PronunciationsBackend.test.tsx +++ b/src/components/Pronunciations/tests/PronunciationsBackend.test.tsx @@ -3,10 +3,10 @@ import { Provider } from "react-redux"; import { ReactTestRenderer, act, create } from "react-test-renderer"; import configureMockStore from "redux-mock-store"; -import { defaultState } from "components/App/DefaultState"; import AudioPlayer from "components/Pronunciations/AudioPlayer"; import AudioRecorder from "components/Pronunciations/AudioRecorder"; import PronunciationsBackend from "components/Pronunciations/PronunciationsBackend"; +import { defaultState } from "rootRedux/types"; import theme from "types/theme"; import { newPronunciation } from "types/word"; diff --git a/src/components/Pronunciations/tests/PronunciationsFrontend.test.tsx b/src/components/Pronunciations/tests/PronunciationsFrontend.test.tsx index e559277b85..97f04046ac 100644 --- a/src/components/Pronunciations/tests/PronunciationsFrontend.test.tsx +++ b/src/components/Pronunciations/tests/PronunciationsFrontend.test.tsx @@ -3,10 +3,10 @@ import { Provider } from "react-redux"; import renderer from "react-test-renderer"; import configureMockStore from "redux-mock-store"; -import { defaultState } from "components/App/DefaultState"; import AudioPlayer from "components/Pronunciations/AudioPlayer"; import AudioRecorder from "components/Pronunciations/AudioRecorder"; import PronunciationsFrontend from "components/Pronunciations/PronunciationsFrontend"; +import { defaultState } from "rootRedux/types"; import theme from "types/theme"; import { newPronunciation } from "types/word"; diff --git a/src/components/Pronunciations/tests/RecorderIcon.test.tsx b/src/components/Pronunciations/tests/RecorderIcon.test.tsx index 91d308c8ce..6fda104dac 100644 --- a/src/components/Pronunciations/tests/RecorderIcon.test.tsx +++ b/src/components/Pronunciations/tests/RecorderIcon.test.tsx @@ -8,12 +8,11 @@ import { } from "react-test-renderer"; import configureMockStore from "redux-mock-store"; -import { defaultState } from "components/App/DefaultState"; import RecorderIcon, { recordButtonId, } from "components/Pronunciations/RecorderIcon"; import { PronunciationsStatus } from "components/Pronunciations/Redux/PronunciationsReduxTypes"; -import { type StoreState } from "rootRedux/types"; +import { type StoreState, defaultState } from "rootRedux/types"; import theme from "types/theme"; let testRenderer: ReactTestRenderer; diff --git a/src/components/TreeView/Redux/tests/TreeViewActions.test.tsx b/src/components/TreeView/Redux/tests/TreeViewActions.test.tsx index 63b2149978..051fa8b414 100644 --- a/src/components/TreeView/Redux/tests/TreeViewActions.test.tsx +++ b/src/components/TreeView/Redux/tests/TreeViewActions.test.tsx @@ -1,12 +1,10 @@ -import { PreloadedState } from "redux"; - -import { defaultState } from "components/App/DefaultState"; import { initTreeDomain, setDomainLanguage, traverseTree, } from "components/TreeView/Redux/TreeViewActions"; -import { RootState, setupStore } from "rootRedux/store"; +import { setupStore } from "rootRedux/store"; +import { persistedDefaultState } from "rootRedux/testTypes"; import { newSemanticDomain, newSemanticDomainTreeNode, @@ -27,12 +25,6 @@ global.analytics = { identify: jest.fn(), track: jest.fn() } as any; const mockId = "1.2.3"; const mockLang = "lang"; -// Preloaded values for store when testing -const persistedDefaultState: PreloadedState = { - ...defaultState, - _persist: { version: 1, rehydrated: false }, -}; - describe("TreeViewActions", () => { describe("setDomainLanguage", () => { it("correctly affects state", async () => { diff --git a/src/goals/CharacterInventory/Redux/tests/CharacterInventoryActions.test.tsx b/src/goals/CharacterInventory/Redux/tests/CharacterInventoryActions.test.tsx index 9e59de3ea9..2baebb20a9 100644 --- a/src/goals/CharacterInventory/Redux/tests/CharacterInventoryActions.test.tsx +++ b/src/goals/CharacterInventory/Redux/tests/CharacterInventoryActions.test.tsx @@ -1,7 +1,6 @@ import { type Action, type PreloadedState } from "redux"; import { type Project, type Word } from "api/models"; -import { defaultState } from "components/App/DefaultState"; import { type CharInvChanges, type CharacterChange, @@ -23,6 +22,7 @@ import { type CharacterSetEntry, } from "goals/CharacterInventory/Redux/CharacterInventoryReduxTypes"; import { type RootState, setupStore } from "rootRedux/store"; +import { persistedDefaultState } from "rootRedux/testTypes"; import { newProject } from "types/project"; import { newWord } from "types/word"; @@ -56,12 +56,6 @@ const setMockFunctions = (): void => { mockUpdateWord.mockImplementation((w: Word) => ({ ...w, id: bumpId(w.id) })); }; -// Preloaded values for store when testing -const persistedDefaultState: PreloadedState = { - ...defaultState, - _persist: { version: 1, rehydrated: false }, -}; - beforeEach(() => { jest.resetAllMocks(); setMockFunctions(); diff --git a/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/tests/index.test.tsx b/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/tests/index.test.tsx index 723156a92e..dc72809bb9 100644 --- a/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/tests/index.test.tsx +++ b/src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/tests/index.test.tsx @@ -4,7 +4,6 @@ import { type ReactTestRenderer, act, create } from "react-test-renderer"; import configureMockStore from "redux-mock-store"; import { GramCatGroup, type Sense } from "api/models"; -import { defaultState } from "components/App/DefaultState"; import MergeDragDrop from "goals/MergeDuplicates/MergeDupsStep/MergeDragDrop"; import DragSense from "goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DragSense"; import DropWord from "goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/DropWord"; @@ -17,6 +16,7 @@ import { type MergeTreeState, defaultState as mergeState, } from "goals/MergeDuplicates/Redux/MergeDupsReduxTypes"; +import { defaultState } from "rootRedux/types"; import { newSemanticDomain } from "types/semanticDomain"; import { newDefinition, diff --git a/src/goals/MergeDuplicates/Redux/tests/MergeDupsActions.test.tsx b/src/goals/MergeDuplicates/Redux/tests/MergeDupsActions.test.tsx index 73c5cab2a1..f5d395bbbf 100644 --- a/src/goals/MergeDuplicates/Redux/tests/MergeDupsActions.test.tsx +++ b/src/goals/MergeDuplicates/Redux/tests/MergeDupsActions.test.tsx @@ -5,7 +5,6 @@ import { Status, type Word, } from "api/models"; -import { defaultState } from "components/App/DefaultState"; import { type MergeData, type MergeTree, @@ -26,6 +25,7 @@ import { } from "goals/MergeDuplicates/Redux/MergeDupsReduxTypes"; import { goalDataMock } from "goals/MergeDuplicates/Redux/tests/MergeDupsDataMock"; import { setupStore } from "rootRedux/store"; +import { defaultState } from "rootRedux/types"; import { GoalType } from "types/goals"; import { multiSenseWord, newFlag, newWord } from "types/word"; diff --git a/src/goals/MergeDuplicates/Redux/tests/MergeDupsDataMock.ts b/src/goals/MergeDuplicates/Redux/tests/MergeDupsDataMock.ts index e4ccc153e6..1f66b63766 100644 --- a/src/goals/MergeDuplicates/Redux/tests/MergeDupsDataMock.ts +++ b/src/goals/MergeDuplicates/Redux/tests/MergeDupsDataMock.ts @@ -1,7 +1,6 @@ import { type PreloadedState } from "@reduxjs/toolkit"; import { type Definition, type SemanticDomain, type Word } from "api/models"; -import { defaultState } from "components/App/DefaultState"; import { convertSenseToMergeTreeSense, convertWordToMergeTreeWord, @@ -11,6 +10,7 @@ import { import { type MergeDupsData } from "goals/MergeDuplicates/MergeDupsTypes"; import { defaultState as mergeState } from "goals/MergeDuplicates/Redux/MergeDupsReduxTypes"; import { type RootState } from "rootRedux/store"; +import { persistedDefaultState } from "rootRedux/testTypes"; import { newSense, newWord, simpleWord } from "types/word"; const wordsArrayMock = (): Word[] => [ @@ -84,12 +84,6 @@ const wordFoo2 = { senses: [senseBar, senseBaz], }; -// Preloaded values for store when testing the MergeDups Goal -const persistedDefaultState: PreloadedState = { - ...defaultState, - _persist: { version: 1, rehydrated: false }, -}; - export type ExpectedScenarioResult = { // wordId for the parent word parent: string; diff --git a/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/tests/EditSenseDialog.test.tsx b/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/tests/EditSenseDialog.test.tsx index 9ecfdbca90..a780be6d65 100644 --- a/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/tests/EditSenseDialog.test.tsx +++ b/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/tests/EditSenseDialog.test.tsx @@ -4,11 +4,10 @@ import { type ReactTestRenderer, act, create } from "react-test-renderer"; import configureMockStore from "redux-mock-store"; import { Project, type Sense } from "api/models"; -import { defaultState } from "components/App/DefaultState"; import EditSenseDialog, { EditSenseDialogId, } from "goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditSenseDialog"; -import { type StoreState } from "rootRedux/types"; +import { type StoreState, defaultState } from "rootRedux/types"; import { newSense } from "types/word"; // Container uses Portal, not supported in react-test-renderer diff --git a/src/index.tsx b/src/index.tsx index ce9efbbfb2..9cee0e29b3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,7 +5,7 @@ import { Provider } from "react-redux"; import { PersistGate } from "redux-persist/integration/react"; import "i18n"; -import App from "components/App/component"; +import App from "components/App"; import { persistor, store } from "rootRedux/store"; import theme from "types/theme"; diff --git a/src/rootRedux/testTypes.ts b/src/rootRedux/testTypes.ts new file mode 100644 index 0000000000..e2308f4048 --- /dev/null +++ b/src/rootRedux/testTypes.ts @@ -0,0 +1,10 @@ +import { type PreloadedState } from "redux"; + +import { type RootState } from "rootRedux/store"; +import { defaultState } from "rootRedux/types"; + +/** Preloaded values for store when testing */ +export const persistedDefaultState: PreloadedState = { + ...defaultState, + _persist: { version: 1, rehydrated: false }, +}; diff --git a/src/utilities/testingLibraryUtilities.tsx b/src/utilities/testingLibraryUtilities.tsx index 6ccb5eac9b..edcf76be7f 100644 --- a/src/utilities/testingLibraryUtilities.tsx +++ b/src/utilities/testingLibraryUtilities.tsx @@ -4,13 +4,13 @@ import { type PropsWithChildren, type ReactElement } from "react"; import { Provider } from "react-redux"; import { PersistGate } from "redux-persist/integration/react"; -import { defaultState } from "components/App/DefaultState"; import { type AppStore, type RootState, persistor, setupStore, } from "rootRedux/store"; +import { defaultState } from "rootRedux/types"; /** This extends the default options for `render` from `@testing-library/react`, * allowing the user to specify other things such as `initialState`, `store`. */ From 8f4d42d95c537509d0c863cb4767f6f9a0961f07 Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Fri, 16 Aug 2024 09:59:36 -0400 Subject: [PATCH 2/8] Revert dep changes --- package-lock.json | 23 ++++++++++++++++------- package.json | 1 - 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1349e80c18..ba646cd875 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,7 +57,6 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", @@ -7352,10 +7351,11 @@ } }, "node_modules/@testing-library/dom": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", - "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.2.0.tgz", + "integrity": "sha512-CytIvb6tVOADRngTHGWNxH8LPgO/3hi/BdCEHOf7Qd2GvZVClhVP0Wo/QHzWhpki49Bk0b4VT6xpt3fx8HTSIw==", "dev": true, + "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -7375,6 +7375,7 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, + "peer": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -7390,6 +7391,7 @@ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, + "peer": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -7406,6 +7408,7 @@ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, + "peer": true, "dependencies": { "color-name": "~1.1.4" }, @@ -7417,13 +7420,15 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "dev": true, + "peer": true }, "node_modules/@testing-library/dom/node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true, + "peer": true, "engines": { "node": ">=8" } @@ -7433,6 +7438,7 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dev": true, + "peer": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -7596,7 +7602,8 @@ "version": "5.0.4", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", - "dev": true + "dev": true, + "peer": true }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -11257,7 +11264,8 @@ "version": "0.5.16", "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", - "dev": true + "dev": true, + "peer": true }, "node_modules/dom-converter": { "version": "0.2.0", @@ -17547,6 +17555,7 @@ "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, + "peer": true, "bin": { "lz-string": "bin/bin.js" } diff --git a/package.json b/package.json index e91dfa112c..8182b7227e 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,6 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", From cbd3f7f2c9d9098099b124c0caafb7133be31b4d Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Fri, 16 Aug 2024 10:03:19 -0400 Subject: [PATCH 3/8] Fix import order --- src/components/Pronunciations/tests/AudioPlayer.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Pronunciations/tests/AudioPlayer.test.tsx b/src/components/Pronunciations/tests/AudioPlayer.test.tsx index 466f2dfa25..d25bdb6d71 100644 --- a/src/components/Pronunciations/tests/AudioPlayer.test.tsx +++ b/src/components/Pronunciations/tests/AudioPlayer.test.tsx @@ -9,7 +9,7 @@ import AudioPlayer, { playMenuId, } from "components/Pronunciations/AudioPlayer"; import { PronunciationsStatus } from "components/Pronunciations/Redux/PronunciationsReduxTypes"; -import { defaultState, type StoreState } from "rootRedux/types"; +import { type StoreState, defaultState } from "rootRedux/types"; import { newPronunciation } from "types/word"; // Mock out Menu to avoid issues with setting its anchor. From 330d68a4b9f1a711fa2a10c242502fa4036216fc Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Fri, 16 Aug 2024 10:23:30 -0400 Subject: [PATCH 4/8] Retract title; Use aria-label for testing --- src/components/AnnouncementBanner/index.tsx | 1 - .../AnnouncementBanner/tests/index.test.tsx | 16 ++++++++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/AnnouncementBanner/index.tsx b/src/components/AnnouncementBanner/index.tsx index dec2122367..495ddc2c9f 100644 --- a/src/components/AnnouncementBanner/index.tsx +++ b/src/components/AnnouncementBanner/index.tsx @@ -64,7 +64,6 @@ export default function AnnouncementBanner(): ReactElement { id={AnnouncementBannerId.ButtonClose} onClick={closeBanner} size="large" - title={t(AnnouncementBannerTextId.ButtonClose)} > diff --git a/src/components/AnnouncementBanner/tests/index.test.tsx b/src/components/AnnouncementBanner/tests/index.test.tsx index e29c83a077..1df05e61dc 100644 --- a/src/components/AnnouncementBanner/tests/index.test.tsx +++ b/src/components/AnnouncementBanner/tests/index.test.tsx @@ -36,30 +36,34 @@ describe("AnnouncementBanner", () => { it("doesn't load if no banner text", async () => { await renderAnnouncementBanner(); expect( - screen.queryByTitle(AnnouncementBannerTextId.ButtonClose) + screen.queryByLabelText(AnnouncementBannerTextId.ButtonClose) ).toBeNull(); }); it("loads banner with text", async () => { await renderAnnouncementBanner(mockBannerText); + expect( + screen.queryByLabelText(AnnouncementBannerTextId.ButtonClose) + ).not.toBeNull(); expect(screen.queryByText(mockBannerText)).not.toBeNull(); }); - it("has button to close banner", async () => { + it("closes when button is clicked", async () => { // Setup const agent = userEvent.setup(); await renderAnnouncementBanner(mockBannerText); + expect(screen.queryByText(mockBannerText)).not.toBeNull(); - // Find and click close button - const closeButton = await screen.findByTitle( + // Click close button + const closeButton = await screen.findByLabelText( AnnouncementBannerTextId.ButtonClose ); await agent.click(closeButton); // Confirm closed - expect(screen.queryByText(mockBannerText)).toBeNull(); expect( - screen.queryByTitle(AnnouncementBannerTextId.ButtonClose) + screen.queryByLabelText(AnnouncementBannerTextId.ButtonClose) ).toBeNull(); + expect(screen.queryByText(mockBannerText)).toBeNull(); }); }); From a00f6bad69e9b5e0b16263ece6c01dd100e0bdf3 Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Fri, 16 Aug 2024 10:30:18 -0400 Subject: [PATCH 5/8] Use .getBy instead of await .findBy --- src/components/AnnouncementBanner/tests/index.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AnnouncementBanner/tests/index.test.tsx b/src/components/AnnouncementBanner/tests/index.test.tsx index 1df05e61dc..50007da82b 100644 --- a/src/components/AnnouncementBanner/tests/index.test.tsx +++ b/src/components/AnnouncementBanner/tests/index.test.tsx @@ -55,7 +55,7 @@ describe("AnnouncementBanner", () => { expect(screen.queryByText(mockBannerText)).not.toBeNull(); // Click close button - const closeButton = await screen.findByLabelText( + const closeButton = screen.getByLabelText( AnnouncementBannerTextId.ButtonClose ); await agent.click(closeButton); From 01b319f706d5af71415f6bb19e24769b1a0ad083 Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Fri, 16 Aug 2024 15:05:52 -0400 Subject: [PATCH 6/8] Use persistedDefaultState everywhere --- .../MergeDuplicates/Redux/tests/MergeDupsActions.test.tsx | 5 ++--- src/rootRedux/testTypes.ts | 2 +- src/utilities/testingLibraryUtilities.tsx | 7 ++----- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/goals/MergeDuplicates/Redux/tests/MergeDupsActions.test.tsx b/src/goals/MergeDuplicates/Redux/tests/MergeDupsActions.test.tsx index f5d395bbbf..25d0c2ee19 100644 --- a/src/goals/MergeDuplicates/Redux/tests/MergeDupsActions.test.tsx +++ b/src/goals/MergeDuplicates/Redux/tests/MergeDupsActions.test.tsx @@ -25,7 +25,7 @@ import { } from "goals/MergeDuplicates/Redux/MergeDupsReduxTypes"; import { goalDataMock } from "goals/MergeDuplicates/Redux/tests/MergeDupsDataMock"; import { setupStore } from "rootRedux/store"; -import { defaultState } from "rootRedux/types"; +import { persistedDefaultState } from "rootRedux/testTypes"; import { GoalType } from "types/goals"; import { multiSenseWord, newFlag, newWord } from "types/word"; @@ -63,7 +63,7 @@ mockGoal.data = goalDataMock; mockGoal.steps = [{ words: [] }, { words: [] }]; const preloadedState = { - ...defaultState, + ...persistedDefaultState, goalsState: { allGoalTypes: [], currentGoal: new MergeDups(), @@ -76,7 +76,6 @@ const preloadedState = { tree: {} as MergeTree, mergeWords: [], }, - _persist: { version: 1, rehydrated: false }, }; const vernA = "AAA"; diff --git a/src/rootRedux/testTypes.ts b/src/rootRedux/testTypes.ts index e2308f4048..7ac80b965b 100644 --- a/src/rootRedux/testTypes.ts +++ b/src/rootRedux/testTypes.ts @@ -6,5 +6,5 @@ import { defaultState } from "rootRedux/types"; /** Preloaded values for store when testing */ export const persistedDefaultState: PreloadedState = { ...defaultState, - _persist: { version: 1, rehydrated: false }, + _persist: { rehydrated: false, version: 1 }, }; diff --git a/src/utilities/testingLibraryUtilities.tsx b/src/utilities/testingLibraryUtilities.tsx index edcf76be7f..ce384e48ef 100644 --- a/src/utilities/testingLibraryUtilities.tsx +++ b/src/utilities/testingLibraryUtilities.tsx @@ -10,7 +10,7 @@ import { persistor, setupStore, } from "rootRedux/store"; -import { defaultState } from "rootRedux/types"; +import { persistedDefaultState } from "rootRedux/testTypes"; /** This extends the default options for `render` from `@testing-library/react`, * allowing the user to specify other things such as `initialState`, `store`. */ @@ -26,10 +26,7 @@ interface ExtendedRenderOptions extends Omit { export function renderWithProviders( ui: ReactElement, { - preloadedState = { - ...defaultState, - _persist: { version: 0, rehydrated: false }, - }, + preloadedState = persistedDefaultState, // Automatically create a store instance if no store was passed in store = setupStore(preloadedState), ...renderOptions From db48f3f975725023970e4f1cedced17a4f133af0 Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Fri, 16 Aug 2024 15:18:24 -0400 Subject: [PATCH 7/8] Set version to default (-1) --- src/rootRedux/testTypes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/rootRedux/testTypes.ts b/src/rootRedux/testTypes.ts index 7ac80b965b..9eecc4494f 100644 --- a/src/rootRedux/testTypes.ts +++ b/src/rootRedux/testTypes.ts @@ -6,5 +6,5 @@ import { defaultState } from "rootRedux/types"; /** Preloaded values for store when testing */ export const persistedDefaultState: PreloadedState = { ...defaultState, - _persist: { rehydrated: false, version: 1 }, + _persist: { rehydrated: false, version: -1 }, }; From 5b074aa2d97464170249c9407846309137c7cd34 Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Wed, 21 Aug 2024 12:50:50 -0400 Subject: [PATCH 8/8] Add test comments --- src/components/AnnouncementBanner/tests/index.test.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/AnnouncementBanner/tests/index.test.tsx b/src/components/AnnouncementBanner/tests/index.test.tsx index 50007da82b..dab689f225 100644 --- a/src/components/AnnouncementBanner/tests/index.test.tsx +++ b/src/components/AnnouncementBanner/tests/index.test.tsx @@ -35,6 +35,8 @@ beforeEach(() => { describe("AnnouncementBanner", () => { it("doesn't load if no banner text", async () => { await renderAnnouncementBanner(); + + // Confirm no banner by the absence of its close button expect( screen.queryByLabelText(AnnouncementBannerTextId.ButtonClose) ).toBeNull(); @@ -42,6 +44,8 @@ describe("AnnouncementBanner", () => { it("loads banner with text", async () => { await renderAnnouncementBanner(mockBannerText); + + // Confirm open banner by the presence of its close button and text expect( screen.queryByLabelText(AnnouncementBannerTextId.ButtonClose) ).not.toBeNull();