|
| 1 | +/** |
| 2 | + * ObjectUI |
| 3 | + * Copyright (c) 2024-present ObjectStack Inc. |
| 4 | + * |
| 5 | + * This source code is licensed under the MIT license found in the |
| 6 | + * LICENSE file in the root directory of this source tree. |
| 7 | + */ |
| 8 | + |
| 9 | +/** |
| 10 | + * objectstack#27950 — an object list's title names the object. |
| 11 | + * |
| 12 | + * Since objectstack#27594 the list title is the view switcher, and the app bar |
| 13 | + * draws no object crumb (objectui#12461: the page header is the one place a |
| 14 | + * page is named). The maintainer's ruling B puts the object's plural ahead of |
| 15 | + * the switcher: 「OBJECT / VIEW ▾ · COUNT」, the plural linking to the object's |
| 16 | + * default list; where the row is short the object label stays whole and the |
| 17 | + * view label gives way. |
| 18 | + * |
| 19 | + * The real chain, as `ObjectView.titleViewSwitcher-27594`: the real |
| 20 | + * `ObjectView`, the real plugin `ObjectView` and the real `ListView`. |
| 21 | + * |
| 22 | + * WHAT IS PINNED. |
| 23 | + * - On the object's bare address and on a view's, the heading reads the |
| 24 | + * plural, then the switcher; the plural is a link to `/apps/APP/OBJECT`, |
| 25 | + * and following it opens the object's default view. |
| 26 | + * - The same with the sidebar expanded and collapsed (the real |
| 27 | + * `SidebarProvider`, whose state is read back). |
| 28 | + * - A record open beside the list (the split pane) leaves one object label. |
| 29 | + * - A view with no label is the plural already: the heading names it once. |
| 30 | + * - Narrow rows: the object label is `shrink-0` and unwrapped, the view label |
| 31 | + * is the switcher's `truncate` span. The test DOM computes no layout, so the |
| 32 | + * classes that decide it are what is read. |
| 33 | + * - The phone bar's trigger reads 「OBJECT / VIEW」, the object first. |
| 34 | + * |
| 35 | + * The record route's crumb is not drawn by this page (`RecordDetailView`); |
| 36 | + * `AppHeader.appBarLeftGroup-12461` pins that it stays absent from the app bar. |
| 37 | + */ |
| 38 | + |
| 39 | +import * as React from 'react'; |
| 40 | +import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'; |
| 41 | +import { render, cleanup, screen, waitFor, within, fireEvent } from '@testing-library/react'; |
| 42 | +import { MemoryRouter, Routes, Route, useLocation } from 'react-router-dom'; |
| 43 | +import { createI18n, I18nProvider } from '@object-ui/i18n'; |
| 44 | +import { SidebarProvider, useSidebar } from '@object-ui/components'; |
| 45 | + |
| 46 | +vi.mock('@object-ui/permissions', async (importOriginal) => { |
| 47 | + const actual = await importOriginal<typeof import('@object-ui/permissions')>(); |
| 48 | + // Stable identities — `ListView` names `perms` in its fetch dependencies. |
| 49 | + const perms = { |
| 50 | + check: () => ({ allowed: true }), |
| 51 | + checkField: () => true, |
| 52 | + getFieldPermissions: () => [], |
| 53 | + getRowFilter: () => undefined, |
| 54 | + getObjectApiOperations: () => undefined, |
| 55 | + roles: [], |
| 56 | + isLoaded: false, |
| 57 | + hasCapabilities: () => true, |
| 58 | + can: () => true, |
| 59 | + cannot: () => false, |
| 60 | + }; |
| 61 | + const fieldPerms = { canRead: () => true, canWrite: () => true, permissions: [] }; |
| 62 | + return { ...actual, usePermissions: () => perms, useFieldPermissions: () => fieldPerms }; |
| 63 | +}); |
| 64 | + |
| 65 | +vi.mock('@object-ui/auth', async (importOriginal) => ({ |
| 66 | + ...(await importOriginal<Record<string, unknown>>()), |
| 67 | + useAuth: () => ({ user: { id: 'u1', name: 'Sales Manager' }, activeOrganization: { id: 'org1', name: 'Acme' } }), |
| 68 | + useWorkspaceAdminStatus: () => ({ isAdmin: false, isResolved: true }), |
| 69 | +})); |
| 70 | + |
| 71 | +vi.mock('@object-ui/collaboration', async (importOriginal) => ({ |
| 72 | + ...(await importOriginal<Record<string, unknown>>()), |
| 73 | + useRealtimeSubscription: () => ({ lastMessage: null }), |
| 74 | + useConflictResolution: () => ({ hasConflicts: false, resolveAllConflicts: () => {} }), |
| 75 | +})); |
| 76 | + |
| 77 | +vi.mock('./MetadataInspector', () => ({ |
| 78 | + MetadataPanel: () => null, |
| 79 | + useMetadataInspector: () => ({ showDebug: false, toggle: () => {} }), |
| 80 | +})); |
| 81 | +vi.mock('./RecordDetailView', () => ({ RecordDetailView: () => null })); |
| 82 | + |
| 83 | +import { ObjectView } from './ObjectView'; |
| 84 | +import { ExpressionProvider } from '../providers/ExpressionProvider'; |
| 85 | +import { RECORD_OPEN_PREFERENCE_KEY } from '../utils/recordOpenPreference'; |
| 86 | +import { MobileViewSwitcherProvider, useMobileViewSwitcher } from '../layout/MobileViewSwitcherContext'; |
| 87 | + |
| 88 | +// The page's own reads (the security `explain` probe among them) are relative |
| 89 | +// fetches, which happy-dom would send to a real socket. One double, installed |
| 90 | +// at module scope and never torn down, so no read the mounted tree issues |
| 91 | +// after a test body returns can reach the network. |
| 92 | +vi.stubGlobal('fetch', vi.fn(async () => |
| 93 | + new Response(JSON.stringify({ data: [] }), { status: 200, headers: { 'content-type': 'application/json' } }))); |
| 94 | + |
| 95 | +const LEAD = { |
| 96 | + name: 'crm_lead', |
| 97 | + label: 'Lead', |
| 98 | + pluralLabel: 'Leads', |
| 99 | + fields: { |
| 100 | + id: { type: 'text', label: 'Id' }, |
| 101 | + name: { type: 'text', label: 'Name' }, |
| 102 | + }, |
| 103 | + listViews: { |
| 104 | + all: { name: 'all', label: 'All Leads', type: 'grid', columns: ['name'] }, |
| 105 | + mine: { name: 'mine', label: 'My Leads', type: 'grid', columns: ['name'] }, |
| 106 | + }, |
| 107 | +}; |
| 108 | + |
| 109 | +/** An object whose one view the author left unnamed: the view is called by the plural. */ |
| 110 | +const NOTE = { |
| 111 | + name: 'crm_note', |
| 112 | + label: 'Note', |
| 113 | + pluralLabel: 'Notes', |
| 114 | + fields: { id: { type: 'text', label: 'Id' }, name: { type: 'text', label: 'Name' } }, |
| 115 | + listViews: { all: { type: 'grid', columns: ['name'] } }, |
| 116 | +}; |
| 117 | + |
| 118 | +const OBJECTS = [LEAD, NOTE]; |
| 119 | +const ROWS = [{ id: 'lead_1', name: 'Ada' }]; |
| 120 | + |
| 121 | +/** Where the router is, read back after a click. */ |
| 122 | +function LocationProbe() { |
| 123 | + const location = useLocation(); |
| 124 | + return <output data-testid="location">{location.pathname}</output>; |
| 125 | +} |
| 126 | + |
| 127 | +/** The sidebar state the page renders under, read back. */ |
| 128 | +function SidebarStateProbe() { |
| 129 | + return <output data-testid="sidebar-state">{useSidebar().state}</output>; |
| 130 | +} |
| 131 | + |
| 132 | +/** The phone bar's trigger label, as `AppHeader` reads it. */ |
| 133 | +function MobileTriggerProbe() { |
| 134 | + return <output data-testid="mobile-trigger">{useMobileViewSwitcher()?.triggerLabel ?? ''}</output>; |
| 135 | +} |
| 136 | + |
| 137 | +function mount(entry: string, { sidebarOpen = true }: { sidebarOpen?: boolean } = {}) { |
| 138 | + const i18n = createI18n({ defaultLanguage: 'en', detectBrowserLanguage: false }); |
| 139 | + const dataSource = { |
| 140 | + find: vi.fn(async () => ({ data: ROWS, total: ROWS.length })), |
| 141 | + findOne: vi.fn(async () => null), |
| 142 | + getObjectSchema: vi.fn(async (name: string) => OBJECTS.find((o) => o.name === name) ?? null), |
| 143 | + create: vi.fn(async () => ({})), |
| 144 | + update: vi.fn(async () => ({})), |
| 145 | + delete: vi.fn(async () => ({})), |
| 146 | + } as never; |
| 147 | + const page = <ObjectView dataSource={dataSource} objects={OBJECTS} onEdit={() => {}} />; |
| 148 | + return render( |
| 149 | + <I18nProvider instance={i18n}> |
| 150 | + <ExpressionProvider user={{ id: 'u1', name: 'Sales Manager' }}> |
| 151 | + <SidebarProvider open={sidebarOpen}> |
| 152 | + <MobileViewSwitcherProvider> |
| 153 | + <MemoryRouter initialEntries={[entry]}> |
| 154 | + <LocationProbe /> |
| 155 | + <SidebarStateProbe /> |
| 156 | + <MobileTriggerProbe /> |
| 157 | + <Routes> |
| 158 | + <Route path="/apps/:appName/:objectName/view/:viewId" element={page} /> |
| 159 | + <Route path="/apps/:appName/:objectName" element={page} /> |
| 160 | + </Routes> |
| 161 | + </MemoryRouter> |
| 162 | + </MobileViewSwitcherProvider> |
| 163 | + </SidebarProvider> |
| 164 | + </ExpressionProvider> |
| 165 | + </I18nProvider>, |
| 166 | + ); |
| 167 | +} |
| 168 | + |
| 169 | +/** The list's toolbar has drawn: its Filter control is on screen. */ |
| 170 | +const listToolbar = () => |
| 171 | + waitFor(() => expect(screen.getByTestId('toolbar-filter-trigger')).toBeInTheDocument(), { timeout: 5000 }); |
| 172 | + |
| 173 | +const heading = () => screen.getByRole('heading', { level: 1 }); |
| 174 | +const crumb = () => within(heading()).getByTestId('object-list-crumb'); |
| 175 | +const switcher = () => within(heading()).getByTestId('list-view-switcher'); |
| 176 | + |
| 177 | +beforeEach(() => { |
| 178 | + localStorage.clear(); |
| 179 | +}); |
| 180 | + |
| 181 | +afterEach(() => { |
| 182 | + cleanup(); |
| 183 | +}); |
| 184 | + |
| 185 | +describe('objectstack#27950 — the list title names the object ahead of the view switcher', () => { |
| 186 | + it.each([ |
| 187 | + ['the object\'s address', '/apps/crm/crm_lead', 'All Leads'], |
| 188 | + ['a view\'s address', '/apps/crm/crm_lead/view/mine', 'My Leads'], |
| 189 | + ])('on %s the heading reads 「Leads / VIEW ▾」, the plural linking to the default list', async (_where, entry, view) => { |
| 190 | + mount(entry); |
| 191 | + await listToolbar(); |
| 192 | + expect(crumb()).toHaveTextContent(/^Leads$/); |
| 193 | + expect(crumb().tagName).toBe('A'); |
| 194 | + expect(crumb()).toHaveAttribute('href', '/apps/crm/crm_lead'); |
| 195 | + expect(switcher()).toHaveTextContent(view); |
| 196 | + // The plural comes first, the switcher after it. |
| 197 | + expect(crumb().compareDocumentPosition(switcher()) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy(); |
| 198 | + expect(heading().textContent).toMatch(new RegExp(`^Leads/${view}`)); |
| 199 | + }); |
| 200 | + |
| 201 | + it('following the object label opens the object\'s default list', async () => { |
| 202 | + mount('/apps/crm/crm_lead/view/mine'); |
| 203 | + await listToolbar(); |
| 204 | + fireEvent.click(crumb()); |
| 205 | + await waitFor(() => expect(screen.getByTestId('location')).toHaveTextContent(/^\/apps\/crm\/crm_lead$/)); |
| 206 | + await waitFor(() => expect(switcher()).toHaveTextContent('All Leads')); |
| 207 | + expect(crumb()).toHaveTextContent(/^Leads$/); |
| 208 | + }); |
| 209 | + |
| 210 | + it.each([ |
| 211 | + ['expanded', true], |
| 212 | + ['collapsed', false], |
| 213 | + ])('with the sidebar %s the heading names the object once', async (state, open) => { |
| 214 | + mount('/apps/crm/crm_lead/view/mine', { sidebarOpen: open }); |
| 215 | + await listToolbar(); |
| 216 | + expect(screen.getByTestId('sidebar-state')).toHaveTextContent(state); |
| 217 | + expect(screen.getAllByTestId('object-list-crumb')).toHaveLength(1); |
| 218 | + expect(crumb()).toHaveTextContent(/^Leads$/); |
| 219 | + }); |
| 220 | + |
| 221 | + it('a record open beside the list (the split pane) leaves one object label and one switcher', async () => { |
| 222 | + localStorage.setItem(RECORD_OPEN_PREFERENCE_KEY, 'split'); |
| 223 | + mount('/apps/crm/crm_lead/view/mine?recordId=lead_1'); |
| 224 | + await listToolbar(); |
| 225 | + expect(screen.getAllByTestId('object-list-crumb')).toHaveLength(1); |
| 226 | + expect(screen.getAllByTestId('list-view-switcher')).toHaveLength(1); |
| 227 | + expect(crumb()).toHaveTextContent(/^Leads$/); |
| 228 | + }); |
| 229 | + |
| 230 | + it('a view with no label is the plural already: the heading names the object once', async () => { |
| 231 | + mount('/apps/crm/crm_note'); |
| 232 | + await listToolbar(); |
| 233 | + expect(within(heading()).queryByTestId('object-list-crumb')).toBeNull(); |
| 234 | + expect(switcher()).toHaveTextContent('Notes'); |
| 235 | + expect(screen.getByTestId('mobile-trigger')).toHaveTextContent(/^$/); |
| 236 | + }); |
| 237 | + |
| 238 | + it('a short row keeps the object label whole: it never shrinks, the view label truncates', async () => { |
| 239 | + mount('/apps/crm/crm_lead/view/mine'); |
| 240 | + await listToolbar(); |
| 241 | + expect(crumb()).toHaveClass('shrink-0', 'whitespace-nowrap'); |
| 242 | + const viewLabel = within(switcher()).getByText('My Leads'); |
| 243 | + expect(viewLabel).toHaveClass('truncate'); |
| 244 | + expect(switcher()).toHaveClass('min-w-0'); |
| 245 | + expect(within(heading()).getByTestId('object-list-title')).toHaveClass('min-w-0'); |
| 246 | + }); |
| 247 | + |
| 248 | + it('the phone bar\'s trigger reads 「Leads / VIEW」, the object first', async () => { |
| 249 | + mount('/apps/crm/crm_lead/view/mine'); |
| 250 | + await listToolbar(); |
| 251 | + await waitFor(() => expect(screen.getByTestId('mobile-trigger')).toHaveTextContent(/^Leads \/ My Leads$/)); |
| 252 | + }); |
| 253 | +}); |
0 commit comments