From 75463e866611be5538e870e10a6b082ecd87b76f Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Wed, 12 Feb 2025 17:44:32 -0500 Subject: [PATCH] tests: update all tests to mock channels instead of fetch --- .../detourListPage.test.tsx.snap | 112 +++------ .../detours/detourListPage.test.tsx | 234 ++++-------------- .../detoursListPage.addDetour.test.tsx | 4 +- .../detoursListPage.openDetour.test.tsx | 23 +- .../detours/diversionPage.delete.test.tsx | 36 +-- .../diversionPage.editDuration.test.tsx | 21 +- 6 files changed, 119 insertions(+), 311 deletions(-) diff --git a/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap index 11dae2c62..fbb7a50d8 100644 --- a/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap +++ b/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap @@ -73,7 +73,7 @@ exports[`DetourListPage orders active detour list by activatedAt value 1`] = `
- 3 + 15
- Headsign 3 + Headsign 15
- Street A3 & Avenue B3 + Street A15 & Avenue B15 23 hours ago - - 2 hours - - 1 + 13
- Headsign 1 + Headsign 13
- Street A1 & Avenue B1 + Street A13 & Avenue B13 54 hours ago - - 2 hours - - 2 + 14
- Headsign 2 + Headsign 14
- Street A2 & Avenue B2 + Street A14 & Avenue B14 84 hours ago - - 2 hours - @@ -310,7 +295,7 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
- Headsign A + Headsign 1
- Street A & Avenue B + Street A1 & Avenue B1 - 26 hours ago + Just now - Headsign B + Headsign A
- Street C & Avenue D + Street A2 & Avenue B2 - 29 hours ago + Just now - 3 hours + 2 hours @@ -540,46 +525,7 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
- 1 -
-
-
- Headsign A -
-
- Inbound -
-
-
- - - Street E & Avenue F - - - 26 hours ago - - - - -
-
- 1 + 3
- Outbound + Inbound
@@ -600,7 +546,7 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = ` - Street C & Avenue D + Street A3 & Avenue B3 - 1 + 4
- Headsign A + Headsign 4
- Street A & Avenue B + Street A4 & Avenue B4 - 26 hours ago + Just now - 4 hours + 2 hours @@ -732,7 +678,7 @@ exports[`DetourListPage renders limited detour list page for non-dispatchers 1`]
- 2 + 5
- Headsign B + Headsign A
- Street C & Avenue D + Street A5 & Avenue B5 - 29 hours ago + Just now - Until end of service + 2 hours diff --git a/assets/tests/components/detours/detourListPage.test.tsx b/assets/tests/components/detours/detourListPage.test.tsx index 3f322c1be..ee17ebfa2 100644 --- a/assets/tests/components/detours/detourListPage.test.tsx +++ b/assets/tests/components/detours/detourListPage.test.tsx @@ -2,27 +2,41 @@ import { describe, test, expect, jest, beforeEach } from "@jest/globals" import "@testing-library/jest-dom/jest-globals" import React from "react" import { DetourListPage } from "../../../src/components/detourListPage" -import { fetchDetours } from "../../../src/api" -import { neverPromise } from "../../testHelpers/mockHelpers" -import { Ok } from "../../../src/util/result" import { render, screen, waitFor } from "@testing-library/react" import getTestGroups from "../../../src/userTestGroups" import { TestGroups } from "../../../src/userInTestGroup" import { byRole } from "testing-library-selector" -import { groupedDetoursFromData } from "../../../src/models/detoursList" -import { activeDetourDataFactory } from "../../factories/detourListFactory" +import { + activeDetourDataFactory, + simpleDetourFactory, +} from "../../factories/detourListFactory" +import { + useActiveDetours, + useDraftDetours, + usePastDetours, +} from "../../../src/hooks/useDetours" +import { simpleDetourFromActivatedData } from "../../../src/models/detoursList" jest.useFakeTimers().setSystemTime(new Date("2024-08-29T20:00:00")) -jest.mock("../../../src/api") +jest.mock("../../../src/hooks/useDetours") jest.mock("../../../src/userTestGroups") beforeEach(() => { - jest.mocked(fetchDetours).mockReturnValue(neverPromise()) - + jest.mocked(useActiveDetours).mockReturnValue([ + simpleDetourFromActivatedData(activeDetourDataFactory.build()), + simpleDetourFromActivatedData( + activeDetourDataFactory.build({ + details: { name: "Headsign A", direction: "Outbound" }, + }) + ), + ]) + jest.mocked(useDraftDetours).mockReturnValue([]) jest - .mocked(getTestGroups) - .mockReturnValue([TestGroups.DetoursPilot, TestGroups.DetoursList]) + .mocked(usePastDetours) + .mockReturnValue([simpleDetourFactory.build({ name: "Headsign Z" })]) + + jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursPilot]) }) const activeTableHeading = byRole("heading", { name: "Active detours" }) @@ -33,56 +47,6 @@ const addDetourButton = byRole("button", { name: "Add detour" }) describe("DetourListPage", () => { test("renders detour list page for dispatchers", async () => { - jest.mocked(fetchDetours).mockResolvedValue( - Ok({ - active: [ - { - id: 1, - route: "1", - viaVariant: "X", - direction: "Inbound", - name: "Headsign A", - intersection: "Street A & Avenue B", - updatedAt: 1724866392, - activatedAt: new Date(1724866392000), - estimatedDuration: "2 hours", - }, - { - id: 8, - route: "2", - viaVariant: "Y", - direction: "Outbound", - name: "Headsign B", - intersection: "Street C & Avenue D", - updatedAt: 1724856392, - activatedAt: new Date(1724856392000), - estimatedDuration: "3 hours", - }, - ], - draft: [], - past: [ - { - id: 10, - route: "1", - viaVariant: "X", - direction: "Inbound", - name: "Headsign A", - intersection: "Street E & Avenue F", - updatedAt: 1724866392, - }, - { - id: 7, - route: "1", - viaVariant: "Z", - direction: "Outbound", - name: "Headsign Z", - intersection: "Street C & Avenue D", - updatedAt: 1724866392, - }, - ], - }) - ) - const { baseElement } = render() await screen.findByText("Headsign Z") @@ -99,59 +63,9 @@ describe("DetourListPage", () => { test("renders limited detour list page for non-dispatchers", async () => { jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursList]) - jest.mocked(fetchDetours).mockResolvedValue( - Ok({ - active: [ - { - id: 1, - route: "1", - viaVariant: "X", - direction: "Inbound", - name: "Headsign A", - intersection: "Street A & Avenue B", - updatedAt: 1724866392, - activatedAt: new Date(1724866392000), - estimatedDuration: "4 hours", - }, - { - id: 8, - route: "2", - viaVariant: "Y", - direction: "Outbound", - name: "Headsign B", - intersection: "Street C & Avenue D", - updatedAt: 1724856392, - activatedAt: new Date(1724856392000), - estimatedDuration: "Until end of service", - }, - ], - draft: [], - past: [ - { - id: 10, - route: "1", - viaVariant: "X", - direction: "Inbound", - name: "Headsign A", - intersection: "Street E & Avenue F", - updatedAt: 1724866392, - }, - { - id: 7, - route: "1", - viaVariant: "Z", - direction: "Outbound", - name: "Headsign Z", - intersection: "Street C & Avenue D", - updatedAt: 1724866392, - }, - ], - }) - ) - const { baseElement } = render() - await screen.findByText("Headsign B") + await screen.findByText("Headsign A") expect(screen.queryByText("Headsign Z")).not.toBeInTheDocument() @@ -165,36 +79,6 @@ describe("DetourListPage", () => { }) test("renders empty tables when needed", async () => { - jest.mocked(fetchDetours).mockResolvedValue( - Ok({ - active: [ - { - id: 1, - route: "1", - viaVariant: "X", - direction: "Inbound", - name: "Headsign A", - intersection: "Street A & Avenue B", - updatedAt: 1724866392, - activatedAt: new Date(1724866392000), - estimatedDuration: "4 hours", - }, - ], - draft: [], - past: [ - { - id: 10, - route: "1", - viaVariant: "X", - direction: "Inbound", - name: "Headsign A", - intersection: "Street E & Avenue F", - updatedAt: 1724866392, - }, - ], - }) - ) - render() await waitFor(() => @@ -207,46 +91,34 @@ describe("DetourListPage", () => { test("orders active detour list by activatedAt value", async () => { jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursList]) - jest.mocked(fetchDetours).mockResolvedValue( - Ok( - groupedDetoursFromData({ - active: [ - activeDetourDataFactory.build({ - details: { - // Drafted third - id: 8, - // Updated second - updated_at: 1724876500, - }, - // Activated second - activated_at: new Date(1724766392000), - }), - activeDetourDataFactory.build({ - details: { - // Drafted second - id: 7, - // Updated third - updated_at: 1724876600, - }, - // Activated first - activated_at: new Date(1724656392000), - }), - activeDetourDataFactory.build({ - details: { - // Drafted first - id: 1, - // Updated first - updated_at: 1724876400, - }, - // Activated third - activated_at: new Date(1724876392000), - }), - ], - draft: [], - past: [], - }) - ) - ) + jest.mocked(useActiveDetours).mockReturnValue({ + "8": simpleDetourFactory.build({ + // Drafted third + id: 8, + // Updated second + updatedAt: 1724876500, + // Activated second + activatedAt: new Date(1724766392000), + }), + "7": simpleDetourFactory.build({ + // Drafted second + id: 7, + // Updated third + updatedAt: 1724876600, + // Activated first + activatedAt: new Date(1724656392000), + }), + "1": simpleDetourFactory.build({ + // Drafted first + id: 1, + // Updated first + updatedAt: 1724876400, + // Activated third + activatedAt: new Date(1724876392000), + }), + }) + jest.mocked(useDraftDetours).mockReturnValue({}) + jest.mocked(usePastDetours).mockReturnValue({}) const { baseElement } = render() diff --git a/assets/tests/components/detours/detoursListPage.addDetour.test.tsx b/assets/tests/components/detours/detoursListPage.addDetour.test.tsx index 330bd45e9..fd664a9c0 100644 --- a/assets/tests/components/detours/detoursListPage.addDetour.test.tsx +++ b/assets/tests/components/detours/detoursListPage.addDetour.test.tsx @@ -11,14 +11,12 @@ import { DetourListPage } from "../../../src/components/detourListPage" import { TestGroups } from "../../../src/userInTestGroup" import getTestGroups from "../../../src/userTestGroups" import { neverPromise } from "../../testHelpers/mockHelpers" -import { fetchDetour, fetchDetours } from "../../../src/api" +import { fetchDetour } from "../../../src/api" jest.mock("../../../src/userTestGroups") - jest.mock("../../../src/api") beforeEach(() => { - jest.mocked(fetchDetours).mockReturnValue(neverPromise()) jest.mocked(fetchDetour).mockReturnValue(neverPromise()) }) diff --git a/assets/tests/components/detours/detoursListPage.openDetour.test.tsx b/assets/tests/components/detours/detoursListPage.openDetour.test.tsx index c8476f29e..9e6b7b582 100644 --- a/assets/tests/components/detours/detoursListPage.openDetour.test.tsx +++ b/assets/tests/components/detours/detoursListPage.openDetour.test.tsx @@ -8,7 +8,7 @@ import { render } from "@testing-library/react" import userEvent from "@testing-library/user-event" import { DetourListPage } from "../../../src/components/detourListPage" -import { fetchDetour, fetchDetours } from "../../../src/api" +import { fetchDetour } from "../../../src/api" import { Ok } from "../../../src/util/result" import { mockScreenSize, neverPromise } from "../../testHelpers/mockHelpers" import getTestGroups from "../../../src/userTestGroups" @@ -16,25 +16,32 @@ import { detourListFactory } from "../../factories/detourListFactory" import { TestGroups } from "../../../src/userInTestGroup" import { detourInProgressFactory } from "../../factories/detourStateMachineFactory" import { viewDraftDetourHeading } from "../../testHelpers/selectors/components/detours/diversionPage" +import { + useActiveDetours, + useDraftDetours, + usePastDetours, +} from "../../../src/hooks/useDetours" jest .useFakeTimers({ doNotFake: ["setTimeout"] }) .setSystemTime(new Date("2024-08-29T20:00:00")) jest.mock("../../../src/userTestGroups") - +jest.mock("../../../src/hooks/useDetours") jest.mock("../../../src/api") beforeEach(() => { - jest.mocked(fetchDetours).mockReturnValue(neverPromise()) + const detourList = detourListFactory.build() + jest.mocked(useActiveDetours).mockReturnValue(detourList.active) + jest.mocked(useDraftDetours).mockReturnValue(detourList.draft) + jest.mocked(usePastDetours).mockReturnValue(detourList.past) + jest.mocked(fetchDetour).mockReturnValue(neverPromise()) jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursPilot]) }) describe("Detours Page: Open a Detour", () => { test("calls API with correct detour ID", async () => { - jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build())) - render() await userEvent.click(await screen.findByText("Headsign 1")) @@ -42,8 +49,6 @@ describe("Detours Page: Open a Detour", () => { }) test("renders detour details modal to match mocked fetchDetour", async () => { - jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build())) - // Return the state of the machine as the fetchDetour mocked value, // even if it doesn't match the detour clicked jest @@ -65,8 +70,6 @@ describe("Detours Page: Open a Detour", () => { test("renders detour details in an open drawer on mobile", async () => { mockScreenSize("mobile") - jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build())) - jest .mocked(fetchDetour) .mockResolvedValue(Ok(detourInProgressFactory.build())) @@ -81,8 +84,6 @@ describe("Detours Page: Open a Detour", () => { test("detour details drawer is collapsible on mobile", async () => { mockScreenSize("mobile") - jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build())) - jest .mocked(fetchDetour) .mockResolvedValue(Ok(detourInProgressFactory.build())) diff --git a/assets/tests/components/detours/diversionPage.delete.test.tsx b/assets/tests/components/detours/diversionPage.delete.test.tsx index f98e79fc2..54b4af511 100644 --- a/assets/tests/components/detours/diversionPage.delete.test.tsx +++ b/assets/tests/components/detours/diversionPage.delete.test.tsx @@ -8,12 +8,7 @@ import { render } from "@testing-library/react" import userEvent from "@testing-library/user-event" import { DetourListPage } from "../../../src/components/detourListPage" -import { - deleteDetour, - fetchDetour, - fetchDetours, - putDetourUpdate, -} from "../../../src/api" +import { deleteDetour, fetchDetour, putDetourUpdate } from "../../../src/api" import { Ok } from "../../../src/util/result" import { neverPromise } from "../../testHelpers/mockHelpers" import getTestGroups from "../../../src/userTestGroups" @@ -25,17 +20,26 @@ import { deleteDetourButton, } from "../../testHelpers/selectors/components/detours/diversionPage" import { draftDetourFactory } from "../../factories/detourStateMachineFactory" +import { + useActiveDetours, + useDraftDetours, + usePastDetours, +} from "../../../src/hooks/useDetours" jest .useFakeTimers({ doNotFake: ["setTimeout"] }) .setSystemTime(new Date("2024-08-29T20:00:00")) jest.mock("../../../src/userTestGroups") - +jest.mock("../../../src/hooks/useDetours") jest.mock("../../../src/api") beforeEach(() => { - jest.mocked(fetchDetours).mockReturnValue(neverPromise()) + const detours = detourListFactoryWithDraft.build() + jest.mocked(useActiveDetours).mockReturnValue(detours.active) + jest.mocked(useDraftDetours).mockReturnValue(detours.draft) + jest.mocked(usePastDetours).mockReturnValue(detours.past) + jest.mocked(fetchDetour).mockReturnValue(neverPromise()) jest.mocked(putDetourUpdate).mockReturnValue(neverPromise()) jest.mocked(deleteDetour).mockReturnValue(neverPromise()) @@ -50,10 +54,6 @@ beforeEach(() => { describe("Detours Page: Open a Detour", () => { test("calls API with correct detour ID", async () => { - jest - .mocked(fetchDetours) - .mockResolvedValue(Ok(detourListFactoryWithDraft.build())) - render() await userEvent.click(await screen.findByText("Draft Detour 123")) @@ -61,9 +61,6 @@ describe("Detours Page: Open a Detour", () => { }) test("renders detour details modal with delete draft button", async () => { - jest - .mocked(fetchDetours) - .mockResolvedValue(Ok(detourListFactoryWithDraft.build())) jest.mocked(fetchDetour).mockResolvedValue(Ok(draftDetourFactory.build())) render() @@ -74,9 +71,6 @@ describe("Detours Page: Open a Detour", () => { }) test("delete draft detour confirmation modal displays when Delete Draft button clicked", async () => { - jest - .mocked(fetchDetours) - .mockResolvedValue(Ok(detourListFactoryWithDraft.build())) jest.mocked(fetchDetour).mockResolvedValue(Ok(draftDetourFactory.build())) render() @@ -90,9 +84,6 @@ describe("Detours Page: Open a Detour", () => { }) test("Clicking the Delete Draft button on the Delete Draft Detour confirmation modal calls the deleteDetour api function", async () => { - jest - .mocked(fetchDetours) - .mockResolvedValue(Ok(detourListFactoryWithDraft.build())) jest.mocked(fetchDetour).mockResolvedValue(Ok(draftDetourFactory.build())) render() @@ -110,9 +101,6 @@ describe("Detours Page: Open a Detour", () => { }) test("Clicking the Cancel button on the Delete Draft Detour confirmation modal closes the modal", async () => { - jest - .mocked(fetchDetours) - .mockResolvedValue(Ok(detourListFactoryWithDraft.build())) jest.mocked(fetchDetour).mockResolvedValue(Ok(draftDetourFactory.build())) render() diff --git a/assets/tests/components/detours/diversionPage.editDuration.test.tsx b/assets/tests/components/detours/diversionPage.editDuration.test.tsx index 9897e4917..22c8024fe 100644 --- a/assets/tests/components/detours/diversionPage.editDuration.test.tsx +++ b/assets/tests/components/detours/diversionPage.editDuration.test.tsx @@ -6,7 +6,7 @@ import userEvent from "@testing-library/user-event" import { screen } from "@testing-library/dom" import { render } from "@testing-library/react" import "@testing-library/jest-dom/jest-globals" -import { fetchDetours, fetchDetour, putDetourUpdate } from "../../../src/api" +import { fetchDetour, putDetourUpdate } from "../../../src/api" import { DetourListPage } from "../../../src/components/detourListPage" import { Ok } from "../../../src/util/result" import { detourListFactory } from "../../factories/detourListFactory" @@ -21,12 +21,22 @@ import { DiversionPageProps, } from "../../../src/components/detours/diversionPage" import { byRole } from "testing-library-selector" +import { + useActiveDetours, + useDraftDetours, + usePastDetours, +} from "../../../src/hooks/useDetours" jest.mock("../../../src/api") +jest.mock("../../../src/hooks/useDetours") jest.mock("../../../src/userTestGroups") beforeEach(() => { - jest.mocked(fetchDetours).mockReturnValue(neverPromise()) + const detours = detourListFactory.build() + jest.mocked(useActiveDetours).mockReturnValue(detours.active) + jest.mocked(useDraftDetours).mockReturnValue(detours.draft) + jest.mocked(usePastDetours).mockReturnValue(detours.past) + jest.mocked(fetchDetour).mockReturnValue(neverPromise()) jest.mocked(putDetourUpdate).mockReturnValue(neverPromise()) @@ -56,7 +66,6 @@ const changeDurationHeading = byRole("heading", { describe("DiversionPage edit duration workflow", () => { describe("before change duration modal", () => { test("does not have a change duration button if not an active detour", async () => { - jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build())) jest .mocked(fetchDetour) .mockResolvedValue(Ok(detourInProgressFactory.build())) @@ -69,7 +78,6 @@ describe("DiversionPage edit duration workflow", () => { }) test("has a change duration button on the review details screen", async () => { - jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build())) jest .mocked(fetchDetour) .mockResolvedValue(Ok(activeDetourFactory.build())) @@ -82,7 +90,6 @@ describe("DiversionPage edit duration workflow", () => { }) test("does not show change duration modal before clicking the button", async () => { - jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build())) jest .mocked(fetchDetour) .mockResolvedValue(Ok(activeDetourFactory.build())) @@ -95,7 +102,6 @@ describe("DiversionPage edit duration workflow", () => { }) test("clicking change duration button shows the modal", async () => { - jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build())) jest .mocked(fetchDetour) .mockResolvedValue(Ok(activeDetourFactory.build())) @@ -128,7 +134,6 @@ describe("DiversionPage edit duration workflow", () => { }) test("changing duration and clicking cancel does not save the duration", async () => { - jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build())) jest .mocked(fetchDetour) .mockResolvedValue( @@ -155,7 +160,6 @@ describe("DiversionPage edit duration workflow", () => { }) test("changing the duration and clicking done saves the duration", async () => { - jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build())) jest .mocked(fetchDetour) .mockResolvedValue( @@ -182,7 +186,6 @@ describe("DiversionPage edit duration workflow", () => { }) test("not changing duration and clicking done doesn't change the duration", async () => { - jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build())) jest .mocked(fetchDetour) .mockResolvedValue(