konnosDashboard
pagesHooks.test.tsx136 lines · main
1import { act, render, screen, waitFor } from '@testing-library/react'
2import userEvent from '@testing-library/user-event'
3import { useEffect, useState } from 'react'
4import { describe, expect, it } from 'vitest'
5
6import { CommandProvider } from '../CommandProvider'
7import { PageType } from '../utils'
8import { useCurrentPage, useRegisterPage, useSetPage } from './pagesHooks'
9
10const PageAdderOne = ({ enabled = true }) => {
11 useRegisterPage('Page one', { type: PageType.Commands, sections: [] }, { enabled })
12 const setPage = useSetPage()
13
14 useEffect(() => {
15 if (enabled) {
16 setPage('Page one')
17 }
18 }, [enabled])
19
20 return <div>Page Adder One</div>
21}
22
23const TogglePageAdder = () => {
24 const [mounted, setIsMounted] = useState(true)
25
26 return (
27 <>
28 <button onClick={() => setIsMounted((mounted) => !mounted)}>
29 {mounted ? 'Dismount' : 'Mount'}
30 </button>
31 {mounted && <PageAdderOne />}
32 </>
33 )
34}
35
36const TogglePageEnabled = () => {
37 const [enabled, setIsEnabled] = useState(true)
38
39 return (
40 <>
41 <button onClick={() => setIsEnabled((enabled) => !enabled)}>
42 {enabled ? 'Disable' : 'Enable'}
43 </button>
44 <PageAdderOne enabled={enabled} />
45 </>
46 )
47}
48
49const PageDisplay = () => {
50 const currentPage = useCurrentPage()
51
52 return <div data-testid="current-page">{currentPage?.name ?? '[None]'}</div>
53}
54
55describe('useRegisterPage', () => {
56 it('registers a page on mount', async () => {
57 act(() => {
58 render(
59 <CommandProvider>
60 <PageAdderOne />
61 <PageDisplay />
62 </CommandProvider>
63 )
64 })
65
66 await waitFor(() => {
67 expect(screen.getByTestId('current-page')).toHaveTextContent('Page one')
68 })
69 })
70
71 it("doesn't register a page on mount if disabled", async () => {
72 act(() => {
73 render(
74 <CommandProvider>
75 <PageAdderOne enabled={false} />
76 <PageDisplay />
77 </CommandProvider>
78 )
79 })
80
81 await waitFor(() => {
82 expect(screen.getByTestId('current-page')).toHaveTextContent('[None]')
83 })
84 })
85
86 it('unregisters a page on dismount', async () => {
87 act(() => {
88 render(
89 <CommandProvider>
90 <TogglePageAdder />
91 <PageDisplay />
92 </CommandProvider>
93 )
94 })
95
96 await waitFor(() => {
97 expect(screen.getByTestId('current-page')).toHaveTextContent('Page one')
98 })
99
100 await act(async () => {
101 await userEvent.click(screen.getByRole('button'))
102 })
103 await waitFor(() => {
104 expect(screen.getByTestId('current-page')).toHaveTextContent('[None]')
105 })
106 })
107
108 it('unregisters and reregisters a page if disabled toggled', async () => {
109 act(() => {
110 render(
111 <CommandProvider>
112 <TogglePageEnabled />
113 <PageDisplay />
114 </CommandProvider>
115 )
116 })
117
118 await waitFor(() => {
119 expect(screen.getByTestId('current-page')).toHaveTextContent('Page one')
120 })
121
122 await act(async () => {
123 await userEvent.click(screen.getByRole('button'))
124 })
125 await waitFor(() => {
126 expect(screen.getByTestId('current-page')).toHaveTextContent('[None]')
127 })
128
129 await act(async () => {
130 await userEvent.click(screen.getByRole('button'))
131 })
132 await waitFor(() => {
133 expect(screen.getByTestId('current-page')).toHaveTextContent('Page one')
134 })
135 })
136})