|
| 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-ai/objectstack#26172 — the record create and update success |
| 11 | + * toasts name the saved record (`ux-conventions.write-feedback`), e.g. |
| 12 | + * `Task "Quarterly review" created`, by its ADR-0079 display name. A record |
| 13 | + * with nothing nameable keeps the object-label toast (`Task created |
| 14 | + * successfully`). |
| 15 | + * |
| 16 | + * Measured from a real `AppContent` mount inside a real i18next instance (the |
| 17 | + * `AppContent.createLandingOriginPlural-11733` harness): the global record-form |
| 18 | + * modal is a stand-in whose `onSuccess` is called with the saved record. Two |
| 19 | + * paths raise the toast. The main path hands it to the action runner as a |
| 20 | + * `crud_success` message, read here off the runner's `execute`; the child-form |
| 21 | + * task (a subtable child opened over its parent's record page) toasts it |
| 22 | + * directly, read here off sonner's `toast.success`. |
| 23 | + * |
| 24 | + * Direction, written before the run: with the toast put back to the object |
| 25 | + * label alone, every "names the record" cell RED (`Task created |
| 26 | + * successfully`); every "no name" cell GREEN on both sides. |
| 27 | + */ |
| 28 | + |
| 29 | +import '@testing-library/jest-dom/vitest'; |
| 30 | +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; |
| 31 | +import React from 'react'; |
| 32 | +import { render, cleanup, waitFor } from '@testing-library/react'; |
| 33 | +import { MemoryRouter, Routes, Route } from 'react-router-dom'; |
| 34 | +import { toast } from 'sonner'; |
| 35 | +import { createI18n, I18nProvider } from '@object-ui/i18n'; |
| 36 | + |
| 37 | +/** The part of the modal's schema this file reads. */ |
| 38 | +interface ModalSchemaProbe { |
| 39 | + objectName?: string; |
| 40 | + onSuccess: (saved: Record<string, unknown>) => Promise<void> | void; |
| 41 | +} |
| 42 | +const { modalSchemas, execute } = vi.hoisted(() => ({ |
| 43 | + modalSchemas: [] as ModalSchemaProbe[], |
| 44 | + execute: vi.fn(), |
| 45 | +})); |
| 46 | + |
| 47 | +/** The global record-form modal: its schema carries the `onSuccess` under test. */ |
| 48 | +vi.mock('@object-ui/plugin-form', async (importOriginal) => ({ |
| 49 | + ...(await importOriginal<Record<string, unknown>>()), |
| 50 | + ModalForm: ({ schema }: { schema: ModalSchemaProbe }) => { |
| 51 | + modalSchemas.push(schema); |
| 52 | + return <div data-testid="modal-form" />; |
| 53 | + }, |
| 54 | +})); |
| 55 | + |
| 56 | +vi.mock('@object-ui/plugin-designer', async (importOriginal) => ({ |
| 57 | + ...(await importOriginal<typeof import('@object-ui/plugin-designer')>()), |
| 58 | + CreateAppPage: () => <div data-testid="create-app-page" />, |
| 59 | + EditAppPage: () => <div data-testid="edit-app-page" />, |
| 60 | + DashboardDesignPage: () => <div data-testid="dashboard-design-page" />, |
| 61 | +})); |
| 62 | + |
| 63 | +vi.mock('../../layout/ConsoleLayout', () => ({ |
| 64 | + ConsoleLayout: ({ children }: { children?: React.ReactNode }) => ( |
| 65 | + <div data-testid="console-layout">{children}</div> |
| 66 | + ), |
| 67 | +})); |
| 68 | +vi.mock('../../chrome/CommandPalette', () => ({ CommandPalette: () => null })); |
| 69 | +vi.mock('../../chrome/KeyboardShortcutsDialog', () => ({ KeyboardShortcutsDialog: () => null })); |
| 70 | +vi.mock('../../chrome/OnboardingWalkthrough', () => ({ OnboardingWalkthrough: () => null })); |
| 71 | +vi.mock('../../views/ObjectView', () => ({ ObjectView: () => <div data-testid="object-view" /> })); |
| 72 | +vi.mock('../../views/RecordDetailView', () => ({ RecordDetailView: () => <div data-testid="record-page" /> })); |
| 73 | + |
| 74 | +vi.mock('@object-ui/auth', async (importOriginal) => ({ |
| 75 | + ...(await importOriginal<Record<string, unknown>>()), |
| 76 | + useAuth: () => ({ |
| 77 | + user: { id: 'u1', name: 'Ada', email: 'ada@example.com', role: 'user' }, |
| 78 | + getAuthConfig: async () => ({ features: {} }), |
| 79 | + activeOrganization: null, |
| 80 | + }), |
| 81 | + useWorkspaceAdminStatus: () => ({ isAdmin: true, isResolved: true }), |
| 82 | +})); |
| 83 | + |
| 84 | +const dataSourceStub = { |
| 85 | + onConnectionStateChange: () => () => {}, |
| 86 | + getConnectionState: () => 'connected', |
| 87 | +}; |
| 88 | +vi.mock('../../providers/AdapterProvider', async (importOriginal) => ({ |
| 89 | + ...(await importOriginal<Record<string, unknown>>()), |
| 90 | + useAdapter: () => dataSourceStub, |
| 91 | +})); |
| 92 | + |
| 93 | +const OBJECTS = [ |
| 94 | + // Declares its name field: a saved task is named by `subject`. |
| 95 | + { |
| 96 | + name: 'showcase_task', |
| 97 | + label: 'Task', |
| 98 | + nameField: 'subject', |
| 99 | + fields: { subject: { type: 'text', label: 'Subject' }, done: { type: 'boolean', label: 'Done' } }, |
| 100 | + }, |
| 101 | + // The parent the child-form task opens over. |
| 102 | + { name: 'showcase_project', label: 'Project', fields: { name: { type: 'text', label: 'Name' } } }, |
| 103 | +]; |
| 104 | + |
| 105 | +const APPS = [{ name: 'crm', label: 'CRM', isDefault: true, navigation: [] }]; |
| 106 | + |
| 107 | +// One value for the whole run: the route's effects key on these members. |
| 108 | +const METADATA = { |
| 109 | + apps: APPS, |
| 110 | + objects: OBJECTS, |
| 111 | + loading: false, |
| 112 | + ensureType: undefined, |
| 113 | + error: null, |
| 114 | + refresh: async () => {}, |
| 115 | +}; |
| 116 | +vi.mock('../../providers/MetadataProvider', async (importOriginal) => ({ |
| 117 | + ...(await importOriginal<Record<string, unknown>>()), |
| 118 | + useMetadata: () => METADATA, |
| 119 | +})); |
| 120 | + |
| 121 | +const ACTION_RUNNER = { execute, runner: { registerHandler: () => {}, getContext: () => ({}) } }; |
| 122 | +vi.mock('@object-ui/react', async (importOriginal) => ({ |
| 123 | + ...(await importOriginal<Record<string, unknown>>()), |
| 124 | + useActionRunner: () => ACTION_RUNNER, |
| 125 | + useGlobalUndo: () => {}, |
| 126 | + useMutationInvalidationBridge: () => {}, |
| 127 | +})); |
| 128 | + |
| 129 | +import { AppContent } from '../AppContent'; |
| 130 | + |
| 131 | +type Lang = 'en' | 'zh-CN'; |
| 132 | + |
| 133 | +/** The catalog as the console loads it: `zh-CN` translates the task's label. */ |
| 134 | +const BUNDLE: Record<Lang, Record<string, unknown>> = { |
| 135 | + en: {}, |
| 136 | + 'zh-CN': { showcase: { objects: { showcase_task: { label: '任务' } } } }, |
| 137 | +}; |
| 138 | + |
| 139 | +const MAIN_CREATE = '/apps/crm/showcase_task?form=new'; |
| 140 | +const MAIN_EDIT = '/apps/crm/showcase_task?form=t1'; |
| 141 | +const CHILD_CREATE = '/apps/crm/showcase_project/record/p1?form=new&formObject=showcase_task'; |
| 142 | +const CHILD_EDIT = '/apps/crm/showcase_project/record/p1?form=t1&formObject=showcase_task'; |
| 143 | + |
| 144 | +let toastSuccess: ReturnType<typeof vi.spyOn>; |
| 145 | +beforeEach(() => { |
| 146 | + modalSchemas.length = 0; |
| 147 | + execute.mockClear(); |
| 148 | + toastSuccess = vi.spyOn(toast, 'success'); |
| 149 | +}); |
| 150 | +afterEach(() => { |
| 151 | + toastSuccess.mockRestore(); |
| 152 | + cleanup(); |
| 153 | +}); |
| 154 | + |
| 155 | +/** Mount at `url`, save `saved` through the record-form modal, and wait for its toast. */ |
| 156 | +async function saveFrom(url: string, saved: Record<string, unknown>, lang: Lang = 'en'): Promise<void> { |
| 157 | + const i18n = createI18n({ defaultLanguage: lang, detectBrowserLanguage: false }); |
| 158 | + expect(i18n.language).toBe(lang); |
| 159 | + i18n.addResourceBundle(lang, 'translation', BUNDLE[lang], true, true); |
| 160 | + render( |
| 161 | + <I18nProvider instance={i18n}> |
| 162 | + <MemoryRouter initialEntries={[url]}> |
| 163 | + <Routes> |
| 164 | + <Route path="/apps/:appName/*" element={<AppContent />} /> |
| 165 | + </Routes> |
| 166 | + </MemoryRouter> |
| 167 | + </I18nProvider>, |
| 168 | + ); |
| 169 | + await waitFor(() => expect(modalSchemas.length).toBeGreaterThan(0)); |
| 170 | + const schema = modalSchemas[modalSchemas.length - 1]; |
| 171 | + expect(schema.objectName).toBe('showcase_task'); |
| 172 | + // Not inside `act`, as in the harness this file copies: the save settles at once. |
| 173 | + await schema.onSuccess(saved); |
| 174 | +} |
| 175 | + |
| 176 | +/** The message the main path handed the runner as its `crud_success`. */ |
| 177 | +function crudSuccessMessage(): string | undefined { |
| 178 | + const call = execute.mock.calls.find(([action]) => action?.type === 'crud_success'); |
| 179 | + return call?.[0]?.params?.message; |
| 180 | +} |
| 181 | + |
| 182 | +/** The message the child-form task toasted directly. */ |
| 183 | +function childToastMessage(): string | undefined { |
| 184 | + return toastSuccess.mock.calls[0]?.[0] as string | undefined; |
| 185 | +} |
| 186 | + |
| 187 | +describe('AppContent — the record save toast names the saved record (objectstack-ai/objectstack#26172)', () => { |
| 188 | + describe('main path (crud_success)', () => { |
| 189 | + it('create: names the record by its declared name field', async () => { |
| 190 | + await saveFrom(MAIN_CREATE, { id: 't1', subject: 'Quarterly review' }); |
| 191 | + expect(crudSuccessMessage()).toBe('Task "Quarterly review" created'); |
| 192 | + }); |
| 193 | + |
| 194 | + it('update: names the record by its declared name field', async () => { |
| 195 | + await saveFrom(MAIN_EDIT, { id: 't1', subject: 'Quarterly review' }); |
| 196 | + expect(crudSuccessMessage()).toBe('Task "Quarterly review" updated'); |
| 197 | + }); |
| 198 | + |
| 199 | + it('create, no name: the object-label toast', async () => { |
| 200 | + await saveFrom(MAIN_CREATE, { id: 't2', done: false }); |
| 201 | + expect(crudSuccessMessage()).toBe('Task created successfully'); |
| 202 | + }); |
| 203 | + |
| 204 | + it('update, no name: the object-label toast', async () => { |
| 205 | + await saveFrom(MAIN_EDIT, { id: 't1', done: true }); |
| 206 | + expect(crudSuccessMessage()).toBe('Task updated successfully'); |
| 207 | + }); |
| 208 | + |
| 209 | + it('zh-CN: the pack string, with the translated object label', async () => { |
| 210 | + await saveFrom(MAIN_CREATE, { id: 't1', subject: '季度复盘' }, 'zh-CN'); |
| 211 | + expect(crudSuccessMessage()).toBe('任务“季度复盘”已创建'); |
| 212 | + }); |
| 213 | + }); |
| 214 | + |
| 215 | + describe('child-form task (direct toast)', () => { |
| 216 | + it('create: names the record', async () => { |
| 217 | + await saveFrom(CHILD_CREATE, { id: 't1', subject: 'Quarterly review' }); |
| 218 | + expect(childToastMessage()).toBe('Task "Quarterly review" created'); |
| 219 | + // The child task keeps the parent page as it is: no crud_success. |
| 220 | + expect(crudSuccessMessage()).toBeUndefined(); |
| 221 | + }); |
| 222 | + |
| 223 | + it('update: names the record', async () => { |
| 224 | + await saveFrom(CHILD_EDIT, { id: 't1', subject: 'Quarterly review' }); |
| 225 | + expect(childToastMessage()).toBe('Task "Quarterly review" updated'); |
| 226 | + }); |
| 227 | + |
| 228 | + it('create, no name: the object-label toast', async () => { |
| 229 | + await saveFrom(CHILD_CREATE, { id: 't2', done: false }); |
| 230 | + expect(childToastMessage()).toBe('Task created successfully'); |
| 231 | + }); |
| 232 | + |
| 233 | + it('update, no name: the object-label toast', async () => { |
| 234 | + await saveFrom(CHILD_EDIT, { id: 't1', done: true }); |
| 235 | + expect(childToastMessage()).toBe('Task updated successfully'); |
| 236 | + }); |
| 237 | + }); |
| 238 | +}); |
![objectstack-fleet[bot]](https://avatars.githubusercontent.com/u/254823548?v=4&size=40){kind=avatar}
0 commit comments