|
| 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#28909 — the owner is named somewhere on the page at every width, |
| 11 | + * and once. From a real `RecordDetailView` mount (the `phoneFace-27058` |
| 12 | + * harness), with `owner_id` declared 5th in `highlightFields`, behind four |
| 13 | + * non-text highlights (so the phone subtitle takes none of them): |
| 14 | + * |
| 15 | + * - at 390 px the phone header draws four highlights after its subtitle, so |
| 16 | + * the owner is not in the strip and the meta line names it; |
| 17 | + * - at 1440 px the strip draws all five, the owner among them, and the meta |
| 18 | + * line leaves it out (objectstack#28868, the owner once). |
| 19 | + */ |
| 20 | + |
| 21 | +import * as React from 'react'; |
| 22 | +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; |
| 23 | +import { render, cleanup, waitFor } from '@testing-library/react'; |
| 24 | +import { MemoryRouter, Route, Routes } from 'react-router-dom'; |
| 25 | +import { MetadataCtx } from '@object-ui/react'; |
| 26 | +import { RelatedCountStore } from '@object-ui/components'; |
| 27 | + |
| 28 | +vi.mock('@object-ui/auth', async (importOriginal) => ({ |
| 29 | + ...(await importOriginal<Record<string, unknown>>()), |
| 30 | + useAuth: () => ({ user: { id: 'u1', name: 'Ada', image: null }, activeOrganization: null }), |
| 31 | + createAuthenticatedFetch: () => vi.fn(), |
| 32 | +})); |
| 33 | + |
| 34 | +vi.mock('@object-ui/collaboration', async (importOriginal) => ({ |
| 35 | + ...(await importOriginal<Record<string, unknown>>()), |
| 36 | + useRecordPresence: () => [], |
| 37 | + PresenceAvatars: () => null, |
| 38 | +})); |
| 39 | + |
| 40 | +vi.mock('sonner', () => ({ |
| 41 | + toast: Object.assign(vi.fn(), { |
| 42 | + success: vi.fn(), |
| 43 | + error: vi.fn(), |
| 44 | + info: vi.fn(), |
| 45 | + warning: vi.fn(), |
| 46 | + loading: vi.fn(), |
| 47 | + dismiss: vi.fn(), |
| 48 | + }), |
| 49 | +})); |
| 50 | + |
| 51 | +vi.mock('./ActionConfirmDialog', () => ({ ActionConfirmDialog: () => null })); |
| 52 | +vi.mock('./ActionParamDialog', () => ({ ActionParamDialog: () => null })); |
| 53 | +vi.mock('./ActionResultDialog', () => ({ ActionResultDialog: () => null })); |
| 54 | +vi.mock('./FlowRunner', () => ({ FlowRunner: () => null })); |
| 55 | +vi.mock('./MetadataInspector', () => ({ |
| 56 | + MetadataPanel: () => null, |
| 57 | + useMetadataInspector: () => ({ showDebug: false, toggle: () => {} }), |
| 58 | +})); |
| 59 | + |
| 60 | +import { RecordDetailView } from './RecordDetailView'; |
| 61 | + |
| 62 | +const APP = 'demo'; |
| 63 | +const LEAD = 'crm_lead'; |
| 64 | + |
| 65 | +const OBJECTS = [ |
| 66 | + { |
| 67 | + name: LEAD, |
| 68 | + label: 'Lead', |
| 69 | + pluralLabel: 'Leads', |
| 70 | + fields: { |
| 71 | + id: { type: 'text', label: 'Id' }, |
| 72 | + name: { type: 'text', label: 'Name' }, |
| 73 | + email: { type: 'email', label: 'Email' }, |
| 74 | + status: { type: 'select', label: 'Status', options: [{ value: 'new', label: 'New' }] }, |
| 75 | + phone: { type: 'phone', label: 'Phone' }, |
| 76 | + website: { type: 'url', label: 'Website' }, |
| 77 | + owner_id: { type: 'lookup', reference: 'sys_user', label: 'Owner' }, |
| 78 | + }, |
| 79 | + // The title field first (it is the page's name, never a highlight), then |
| 80 | + // four non-text highlights, then the owner, 5th. |
| 81 | + highlightFields: ['name', 'email', 'status', 'phone', 'website', 'owner_id'], |
| 82 | + }, |
| 83 | +]; |
| 84 | + |
| 85 | +const LEAD_ROW = { |
| 86 | + name: 'Mira Costa', |
| 87 | + email: 'mira@atlas.test', |
| 88 | + status: 'new', |
| 89 | + phone: '555-0100', |
| 90 | + website: 'https://atlas.test', |
| 91 | + owner_id: { id: 'u-ada', name: 'Ada Admin' }, |
| 92 | + created_at: '2026-10-16T00:00:00Z', |
| 93 | +}; |
| 94 | + |
| 95 | +let rootWidth = 390; |
| 96 | + |
| 97 | +function setWidth(width: number) { |
| 98 | + rootWidth = width; |
| 99 | + Object.defineProperty(window, 'innerWidth', { value: width, configurable: true, writable: true }); |
| 100 | +} |
| 101 | + |
| 102 | +function makeDataSource() { |
| 103 | + return { |
| 104 | + find: vi.fn(async () => ({ data: [], total: 0 })), |
| 105 | + create: vi.fn(async (_o: string, row: unknown) => row), |
| 106 | + findOne: vi.fn(async (_objectName: string, recordId: string) => ({ id: recordId, ...LEAD_ROW })), |
| 107 | + update: vi.fn(async () => ({})), |
| 108 | + delete: vi.fn(async () => ({})), |
| 109 | + }; |
| 110 | +} |
| 111 | + |
| 112 | +function metadataFor(objects: unknown[]) { |
| 113 | + return { |
| 114 | + objects, |
| 115 | + pages: [], |
| 116 | + loading: false, |
| 117 | + error: null, |
| 118 | + refresh: async () => {}, |
| 119 | + invalidate: () => {}, |
| 120 | + ensureType: async () => [], |
| 121 | + getItem: async () => null, |
| 122 | + getItemsByType: () => [], |
| 123 | + } as never; |
| 124 | +} |
| 125 | + |
| 126 | +function mountPage() { |
| 127 | + render( |
| 128 | + <MemoryRouter initialEntries={[`/apps/${APP}/${LEAD}/record/r-1`]}> |
| 129 | + <MetadataCtx.Provider value={metadataFor(OBJECTS)}> |
| 130 | + <Routes> |
| 131 | + <Route |
| 132 | + path="/apps/:appName/:objectName/record/:recordId" |
| 133 | + element={<RecordDetailView dataSource={makeDataSource() as never} objects={OBJECTS} onEdit={() => {}} />} |
| 134 | + /> |
| 135 | + </Routes> |
| 136 | + </MetadataCtx.Provider> |
| 137 | + </MemoryRouter>, |
| 138 | + ); |
| 139 | +} |
| 140 | + |
| 141 | +/** The strip and the meta line, once both are drawn. */ |
| 142 | +async function stripAndMetaLine(): Promise<{ strip: HTMLElement; metaLine: HTMLElement }> { |
| 143 | + return waitFor( |
| 144 | + () => { |
| 145 | + const strip = document.querySelector('[data-highlights-face]') as HTMLElement | null; |
| 146 | + const metaLine = document.querySelector('[data-testid="record-meta-footer"]') as HTMLElement | null; |
| 147 | + expect(strip).toBeTruthy(); |
| 148 | + expect(metaLine).toBeTruthy(); |
| 149 | + // The record has loaded: the strip shows its values. |
| 150 | + expect(strip!.textContent).toContain('mira@atlas.test'); |
| 151 | + return { strip: strip!, metaLine: metaLine! }; |
| 152 | + }, |
| 153 | + { timeout: 5000 }, |
| 154 | + ); |
| 155 | +} |
| 156 | + |
| 157 | +const ownerEntry = (metaLine: HTMLElement) => metaLine.querySelector('[data-record-meta-owner]'); |
| 158 | + |
| 159 | +beforeEach(() => { |
| 160 | + cleanup(); |
| 161 | + setWidth(390); |
| 162 | + window.localStorage.clear(); |
| 163 | + RelatedCountStore._reset(); |
| 164 | + vi.stubGlobal( |
| 165 | + 'fetch', |
| 166 | + vi.fn(async () => new Response(JSON.stringify({ data: [] }), { status: 200, headers: { 'content-type': 'application/json' } })), |
| 167 | + ); |
| 168 | + const measure = HTMLElement.prototype.getBoundingClientRect; |
| 169 | + vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) { |
| 170 | + if (!this.hasAttribute('data-record-page-root')) return measure.call(this); |
| 171 | + const width = rootWidth; |
| 172 | + return { x: 0, y: 0, top: 0, left: 0, right: width, bottom: 800, width, height: 800, toJSON: () => ({}) } as DOMRect; |
| 173 | + }); |
| 174 | +}); |
| 175 | + |
| 176 | +afterEach(() => { |
| 177 | + vi.unstubAllGlobals(); |
| 178 | + vi.restoreAllMocks(); |
| 179 | + setWidth(1440); |
| 180 | +}); |
| 181 | + |
| 182 | +describe('the owner at every width, once (objectstack#28909)', () => { |
| 183 | + it('on a phone: owner_id declared 5th is past the header\'s four, so the meta line names the owner', async () => { |
| 184 | + mountPage(); |
| 185 | + const { strip, metaLine } = await stripAndMetaLine(); |
| 186 | + // The phone header: four highlights, the owner not among them. |
| 187 | + expect(strip.children).toHaveLength(4); |
| 188 | + expect(strip.textContent).not.toContain('Ada Admin'); |
| 189 | + const owner = ownerEntry(metaLine); |
| 190 | + expect(owner).toBeTruthy(); |
| 191 | + expect(owner!.textContent).toContain('Ada Admin'); |
| 192 | + }); |
| 193 | + |
| 194 | + it('on a desktop: the strip names the owner and the meta line does not', async () => { |
| 195 | + setWidth(1440); |
| 196 | + mountPage(); |
| 197 | + const { strip, metaLine } = await stripAndMetaLine(); |
| 198 | + expect(strip.children).toHaveLength(5); |
| 199 | + expect(strip.textContent).toContain('Ada Admin'); |
| 200 | + expect(ownerEntry(metaLine)).toBeNull(); |
| 201 | + // The rest of the meta line is still drawn. |
| 202 | + expect(metaLine.querySelector('[data-record-meta-id]')!.textContent).toBe('r-1'); |
| 203 | + }); |
| 204 | +}); |
0 commit comments