konnosDashboard
ProductMenuShortcuts.test.tsx111 lines · main
1import { render } from '@testing-library/react'
2import { beforeEach, describe, expect, it, vi } from 'vitest'
3
4import type { ProductMenuGroup } from './ProductMenu.types'
5import { ProductMenuShortcuts } from './ProductMenuShortcuts'
6import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
7
8const { mockPush, mockUseShortcut } = vi.hoisted(() => ({
9 mockPush: vi.fn(),
10 mockUseShortcut: vi.fn(),
11}))
12
13vi.mock('next/router', () => ({
14 useRouter: () => ({
15 push: mockPush,
16 }),
17}))
18
19vi.mock('@/state/shortcuts/useShortcut', () => ({
20 useShortcut: mockUseShortcut,
21}))
22
23const menu: ProductMenuGroup[] = [
24 {
25 title: 'Visible',
26 items: [
27 {
28 name: 'Tables',
29 key: 'tables',
30 url: '/project/ref/database/tables',
31 shortcutId: SHORTCUT_IDS.NAV_DATABASE_TABLES,
32 },
33 {
34 name: 'Functions',
35 key: 'functions',
36 url: '/project/ref/database/functions',
37 shortcutId: SHORTCUT_IDS.NAV_DATABASE_FUNCTIONS,
38 disabled: true,
39 },
40 {
41 name: 'External',
42 key: 'external',
43 url: 'https://example.com',
44 shortcutId: SHORTCUT_IDS.NAV_DATABASE_EXTENSIONS,
45 isExternal: true,
46 },
47 {
48 name: 'No shortcut',
49 key: 'no-shortcut',
50 url: '/project/ref/database/triggers',
51 },
52 ],
53 },
54]
55
56describe('ProductMenuShortcuts', () => {
57 beforeEach(() => {
58 vi.clearAllMocks()
59 })
60
61 it('registers visible enabled internal shortcut items', () => {
62 render(<ProductMenuShortcuts menu={menu} />)
63
64 expect(mockUseShortcut).toHaveBeenCalledTimes(1)
65 expect(mockUseShortcut).toHaveBeenCalledWith(
66 SHORTCUT_IDS.NAV_DATABASE_TABLES,
67 expect.any(Function)
68 )
69 })
70
71 it('navigates to the item url when the shortcut fires', () => {
72 render(<ProductMenuShortcuts menu={menu} />)
73
74 const callback = mockUseShortcut.mock.calls[0][1]
75 callback()
76
77 expect(mockPush).toHaveBeenCalledWith('/project/ref/database/tables')
78 })
79
80 it('registers shortcut items nested under childItems', () => {
81 render(
82 <ProductMenuShortcuts
83 menu={[
84 {
85 title: 'Nested',
86 items: [
87 {
88 name: 'Parent',
89 key: 'parent',
90 url: '/project/ref/database',
91 childItems: [
92 {
93 name: 'Indexes',
94 key: 'indexes',
95 url: '/project/ref/database/indexes',
96 shortcutId: SHORTCUT_IDS.NAV_DATABASE_INDEXES,
97 },
98 ],
99 },
100 ],
101 },
102 ]}
103 />
104 )
105
106 expect(mockUseShortcut).toHaveBeenCalledWith(
107 SHORTCUT_IDS.NAV_DATABASE_INDEXES,
108 expect.any(Function)
109 )
110 })
111})