Add tests for custom utility hooks. Models for same w/ React-Testing-Library. (#84)

* Add tests for custom utility hooks. Models for same, RTL.

* Reduce repetitive code.

Author: jsoules

test/util/useRoute.test.tsx

@@ -0,0 +1,97 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React, { FunctionComponent } from 'react'
+import { MemoryRouter } from 'react-router-dom'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import useRoute, { Route } from '../../src/util/useRoute'
+
+type ConsumerProps = {
+    location: string
+    navigationTarget?: string
+}
+
+const InnerConsumer: FunctionComponent<ConsumerProps> = (props: ConsumerProps) => {
+    const { navigationTarget } = props
+    const { route, setRoute } = useRoute()
+    const splitTarget = navigationTarget?.split('/') || ["", "", ""]
+    const routeTarget = {
+        page: splitTarget[1],
+        runId: splitTarget[2]
+    } as unknown as Route
+
+    return (
+        <div>
+            <div>page: {route.page}</div>
+            <div>run id: {(route as unknown as {page: 'run', runId: string}).runId ?? '' }</div>
+            <button onClick={() => setRoute(routeTarget)}></button>
+        </div>
+    )
+
+}
+
+const Consumer: FunctionComponent<ConsumerProps> = (props: ConsumerProps) => {
+    const { location } = props
+    return (
+        <MemoryRouter initialEntries={[location]}>
+            <InnerConsumer {...props} />
+        </MemoryRouter>
+    )
+}
+
+describe("Navigation hook ", () => {
+    afterEach(() => {
+        cleanup()
+    })
+    test("Interprets route as home page if pathname does not begin with run", () => {
+        render(<Consumer location="/not-run/" />)
+        const pageInfo = screen.getByText(/page/).textContent ?? ''
+        expect(pageInfo.includes('home')).toBeTruthy()
+    })
+    test("Interprets route as run page if pathname begins with run", () => {
+        render(<Consumer location="/run/15" />)
+        const pageTxt = screen.getByText(/page/).textContent ?? ''
+        const runIdTxt = screen.getByText(/run id/).textContent ?? ''
+        expect(pageTxt.includes('run')).toBeTruthy()
+        expect(runIdTxt.includes('15')).toBeTruthy()
+    })
+})
+
+// Okay, in this case, with using hoisting to do this once for the whole file
+// (as we don't need to change anything about the mocking between tests)
+// Note the use of importActual, the way to use the 'real' underlying module in vi
+// equivalent to jest's requireActual
+const mockNavigate = vi.fn()
+vi.mock('react-router-dom', async () => {
+    const router = await vi.importActual('react-router-dom') as unknown as object
+    return { ...router, useNavigate: () => mockNavigate }
+})
+
+describe("Navigation hook--route-setting callback", () => {
+    let user
+    afterEach(() => cleanup())
+    beforeEach(() => {
+        vi.resetAllMocks()
+        user = userEvent.setup()
+    })
+    test("Navigates to empty path if route page is home", async () => {
+        render(<Consumer location="/not-run/" navigationTarget='/home/123' />)
+        await user.click(screen.getByRole('button'))
+        expect(mockNavigate).toHaveBeenCalledOnce()
+        const lastCall = mockNavigate.mock.lastCall[0]
+        expect(lastCall.pathname).toEqual('')
+    })
+    test("Navigates to run page if route page is run", async () => {
+        render(<Consumer location="/not-run/" navigationTarget='/run/123' />)
+        await user.click(screen.getByRole('button'))
+        expect(mockNavigate).toHaveBeenCalledOnce()
+        const lastCall = mockNavigate.mock.lastCall[0]
+        expect(lastCall.pathname).toEqual('/run/123')
+    })
+    test("Does nothing if route page is something else", async () => {
+        render(<Consumer location="/not-run/" navigationTarget='/bad-address/123' />)
+        await user.click(screen.getByRole('button'))
+        expect(mockNavigate).toHaveBeenCalledTimes(0)
+    })
+})

test/util/useWindowDimensions.test.tsx

@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, screen } from '@testing-library/react'
+import React, { FunctionComponent } from 'react'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import useWindowDimensions from '../../src/util/useWindowDimensions'
+
+const Consumer: FunctionComponent = () => {
+    const { width, height } = useWindowDimensions()
+    return (
+        <div>
+            <div>Width: {width}</div>
+            <div>Height: {height}</div>
+        </div>
+    )
+}
+
+describe("Window dimensions hook", () => {
+    const myWidth = 200
+    const myHeight = 500
+    const myNewWidth = 400
+    const myNewHeight = 800
+
+    afterEach(() => cleanup())
+
+    beforeEach(() => {
+        global.window.innerWidth = myWidth
+        global.window.innerHeight = myHeight
+    })
+
+    test("Begins with dimensions of surrounding window", () => {
+        render(<Consumer />)
+        const widthContext = screen.getByText(/Width/).textContent ?? ''
+        const heightContext = screen.getByText(/Height/).textContent ?? ''
+        expect(widthContext.includes(myWidth.toString())).toBeTruthy()
+        expect(heightContext.includes(myHeight.toString())).toBeTruthy()
+    })
+    test("Updates dimensions when window resizes", async () => {
+        render(<Consumer />)
+        
+        global.window.innerWidth = myNewWidth
+        global.window.innerHeight = myNewHeight
+        let widthContext = (await screen.findByText(/Width/)).textContent ?? ''
+        let heightContext = (await screen.findByText(/Height/)).textContent ?? ''
+        expect(widthContext.includes(myWidth.toString())).toBeTruthy()
+        expect(heightContext.includes(myHeight.toString())).toBeTruthy()
+
+        global.window.dispatchEvent(new Event('resize'))
+        widthContext = (await screen.findByText(/Width/)).textContent ?? ''
+        heightContext = (await screen.findByText(/Height/)).textContent ?? ''
+        expect(widthContext.includes(myNewWidth.toString())).toBeTruthy()
+        expect(heightContext.includes(myNewHeight.toString())).toBeTruthy()
+    })
+    test("Leaves no event listeners after component unmounts", async () => {
+        global.window.addEventListener = vi.fn()
+        global.window.removeEventListener = vi.fn()
+        render(<Consumer />)
+        expect(global.window.addEventListener).toHaveBeenCalledOnce()
+        expect(global.window.removeEventListener).toBeCalledTimes(0)
+        cleanup()
+        expect(global.window.removeEventListener).toHaveBeenCalledOnce()
+    })
+})