konnosDashboard
EditorBaseLayout.test.tsx116 lines · main
1import { render, screen } from '@testing-library/react'
2import type { ReactNode } from 'react'
3import { beforeEach, describe, expect, it, vi } from 'vitest'
4
5import { EditorBaseLayout } from './EditorBaseLayout'
6
7const { mockTabsState, mockEditorType } = vi.hoisted(() => ({
8 mockTabsState: {
9 activeTab: 'r-1',
10 openTabs: ['r-1'],
11 tabsMap: {
12 'r-1': {
13 id: 'r-1',
14 type: 'r',
15 label: 'routines',
16 metadata: {
17 name: 'tasks',
18 schema: 'public',
19 tableId: 1,
20 },
21 },
22 },
23 } as any,
24 mockEditorType: vi.fn(),
25}))
26
27vi.mock('common', () => ({
28 useParams: () => ({ ref: 'default' }),
29}))
30
31vi.mock('next/navigation', () => ({
32 usePathname: () => '/project/default/editor/1',
33}))
34
35vi.mock('@/state/tabs', () => ({
36 useTabsStateSnapshot: () => mockTabsState,
37}))
38
39vi.mock('ui', () => ({
40 cn: (...classes: Array<string | false | null | undefined>) => classes.filter(Boolean).join(' '),
41}))
42
43vi.mock('../ProjectLayout', () => ({
44 ProjectLayoutWithAuth: ({
45 browserTitle,
46 children,
47 }: {
48 browserTitle?: Record<string, string>
49 children: ReactNode
50 }) => (
51 <div>
52 <div data-testid="browser-title">{JSON.stringify(browserTitle ?? {})}</div>
53 {children}
54 </div>
55 ),
56}))
57
58vi.mock('../Tabs/CollapseButton', () => ({
59 CollapseButton: () => null,
60}))
61
62vi.mock('../Tabs/Tabs', () => ({
63 EditorTabs: () => null,
64}))
65
66vi.mock('./EditorsLayout.hooks', () => ({
67 useEditorType: () => mockEditorType(),
68}))
69
70describe('EditorBaseLayout browser title', () => {
71 beforeEach(() => {
72 mockEditorType.mockReturnValue('table')
73 mockTabsState.activeTab = 'r-1'
74 mockTabsState.openTabs = ['r-1']
75 mockTabsState.tabsMap = {
76 'r-1': {
77 id: 'r-1',
78 type: 'r',
79 label: 'routines',
80 metadata: {
81 name: 'tasks',
82 schema: 'public',
83 tableId: 1,
84 },
85 },
86 }
87 })
88
89 it('prefers the live tab label over stale metadata when composing the title entity', () => {
90 render(
91 <EditorBaseLayout title="Tables" product="Table Editor">
92 <div>Page content</div>
93 </EditorBaseLayout>
94 )
95
96 expect(JSON.parse(screen.getByTestId('browser-title').textContent ?? '{}')).toEqual({
97 section: 'Tables',
98 entity: 'routines',
99 })
100 })
101
102 it('falls back to metadata when a tab does not have a label yet', () => {
103 mockTabsState.tabsMap['r-1'].label = undefined
104
105 render(
106 <EditorBaseLayout title="Tables" product="Table Editor">
107 <div>Page content</div>
108 </EditorBaseLayout>
109 )
110
111 expect(JSON.parse(screen.getByTestId('browser-title').textContent ?? '{}')).toEqual({
112 section: 'Tables',
113 entity: 'tasks',
114 })
115 })
116})