|
| 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 | + * `object-form.customFields` under explicit `sections`, on every arm that |
| 11 | + * takes them (objectui#10254). |
| 12 | + * |
| 13 | + * The registered description of `customFields` is one sentence for every |
| 14 | + * `formType`: "Field definitions merged over the set generated from object |
| 15 | + * metadata." objectui#10073 brought the drawer and modal to the default arm's |
| 16 | + * merge for a form with NO sections (`drawerModalCustomFieldsMerge-10073`). |
| 17 | + * With explicit `sections`, the `drawer`, `modal`, `tabbed`, `wizard` and |
| 18 | + * `split` arms still rebuilt every section member from the object schema |
| 19 | + * alone, so the authored member was dropped: same schema, `INLINE NOTE` on the |
| 20 | + * default arm, `Note` on the other five. |
| 21 | + * |
| 22 | + * What this card unifies is the BASE definition a section member starts from: |
| 23 | + * a member naming the field supplies the whole definition, in place of the |
| 24 | + * generated one, through the one lookup the default arm's merge uses |
| 25 | + * (`findCustomFieldMember`). What it deliberately does NOT unify is each arm's |
| 26 | + * section-entry override rules, which differ (the default arm copies only |
| 27 | + * `visibleOn` / `colSpan` / `span` from a spec entry; the other five apply |
| 28 | + * `normalizeSectionField`'s full set) — no row below authors an override the |
| 29 | + * two rule sets answer differently. |
| 30 | + * |
| 31 | + * Every row mounts the real `ObjectForm` with the arm's `formType`, the path an |
| 32 | + * author reaches. The `simple` rows are the default-arm control: that arm |
| 33 | + * already resolved section members against its merged pool, and they stay |
| 34 | + * green without the fix. Every schema below has ONE section, so the wizard's |
| 35 | + * rendered step is the section under test — and a wizard draws only its |
| 36 | + * current step's fields, which the `drawnFields()` equalities pin. On a tree |
| 37 | + * where an arm's `buildSectionFields` context does not carry `customFields`, |
| 38 | + * that arm's LABEL, REQUIRED, SPEC ENTRY and UNDECLARED NAME rows are red; |
| 39 | + * UNNAMED MEMBER is green on every arm either way (the arms already agreed |
| 40 | + * there, and it pins that the fix did not start drawing members no section |
| 41 | + * lists). |
| 42 | + */ |
| 43 | + |
| 44 | +import { describe, it, expect, vi } from 'vitest'; |
| 45 | +import { render, waitFor, fireEvent } from '@testing-library/react'; |
| 46 | +import React from 'react'; |
| 47 | +import { registerAllFields } from '@object-ui/fields'; |
| 48 | +import { ObjectForm } from '../ObjectForm'; |
| 49 | + |
| 50 | +registerAllFields(); |
| 51 | + |
| 52 | +const OBJECT_SCHEMA = { |
| 53 | + name: 'invoice', |
| 54 | + fields: { |
| 55 | + customer: { type: 'text', label: 'Customer' }, |
| 56 | + note: { type: 'text', label: 'Note' }, |
| 57 | + amount: { type: 'text', label: 'Amount' }, |
| 58 | + }, |
| 59 | +}; |
| 60 | + |
| 61 | +const makeDataSource = () => |
| 62 | + ({ |
| 63 | + getObjectSchema: vi.fn().mockResolvedValue(OBJECT_SCHEMA), |
| 64 | + findOne: vi.fn(), |
| 65 | + create: vi.fn(async (_object: string, data: Record<string, unknown>) => ({ id: 'r1', ...data })), |
| 66 | + update: vi.fn(), |
| 67 | + }) as any; |
| 68 | + |
| 69 | +const ARMS = ['simple', 'drawer', 'modal', 'tabbed', 'wizard', 'split'] as const; |
| 70 | +type Arm = (typeof ARMS)[number]; |
| 71 | + |
| 72 | +/** The drawer and modal portal their content, so every read is off `document.body`. */ |
| 73 | +const drawnFields = (): string[] => |
| 74 | + [...document.body.querySelectorAll('[data-field]')].map((el) => el.getAttribute('data-field') as string); |
| 75 | + |
| 76 | +const labelOf = (name: string): string | null => |
| 77 | + document.body.querySelector(`[data-field="${name}"] label`)?.textContent ?? null; |
| 78 | + |
| 79 | +const controlOf = (name: string): HTMLInputElement | HTMLTextAreaElement | null => |
| 80 | + document.body.querySelector(`[data-field="${name}"] input, [data-field="${name}"] textarea`); |
| 81 | + |
| 82 | +const MAIN_SECTION = (fields: Array<string | Record<string, unknown>>) => [ |
| 83 | + { name: 'main', label: 'Main', fields }, |
| 84 | +]; |
| 85 | + |
| 86 | +async function mount(arm: Arm, schema: Record<string, unknown>) { |
| 87 | + const adapter = makeDataSource(); |
| 88 | + const utils = render( |
| 89 | + <ObjectForm |
| 90 | + schema={ |
| 91 | + { |
| 92 | + type: 'object-form', |
| 93 | + objectName: 'invoice', |
| 94 | + mode: 'create', |
| 95 | + ...(arm === 'simple' ? {} : { formType: arm, open: true }), |
| 96 | + ...schema, |
| 97 | + } as any |
| 98 | + } |
| 99 | + dataSource={adapter} |
| 100 | + />, |
| 101 | + ); |
| 102 | + await waitFor(() => { |
| 103 | + if (!document.body.querySelector('form [data-field]')) throw new Error('form not ready'); |
| 104 | + }); |
| 105 | + return { ...utils, adapter }; |
| 106 | +} |
| 107 | + |
| 108 | +describe.each(ARMS)('`object-form` `formType: %s` — explicit `sections` draw a `customFields` member as the field', (arm) => { |
| 109 | + it('LABEL — a section naming a member field renders the member\'s label', async () => { |
| 110 | + const { unmount } = await mount(arm, { |
| 111 | + sections: MAIN_SECTION(['customer', 'note']), |
| 112 | + customFields: [{ name: 'note', label: 'INLINE NOTE', type: 'text' }], |
| 113 | + }); |
| 114 | + expect(drawnFields()).toEqual(['customer', 'note']); |
| 115 | + expect(labelOf('note'), 'the member supplies the whole definition').toBe('INLINE NOTE'); |
| 116 | + expect(labelOf('customer'), 'a field no member names keeps the object\'s definition').toBe('Customer'); |
| 117 | + unmount(); |
| 118 | + }); |
| 119 | + |
| 120 | + it('REQUIRED — a member\'s `required` refuses an empty submit and lets a filled one through', async () => { |
| 121 | + const { adapter, unmount } = await mount(arm, { |
| 122 | + sections: MAIN_SECTION(['customer', 'note']), |
| 123 | + customFields: [{ name: 'note', label: 'INLINE NOTE', type: 'text', required: true }], |
| 124 | + }); |
| 125 | + expect(controlOf('note')?.getAttribute('aria-required')).toBe('true'); |
| 126 | + expect(controlOf('customer')?.getAttribute('aria-required'), 'the object does not require customer').toBeNull(); |
| 127 | + |
| 128 | + const form = document.body.querySelector('form') as HTMLFormElement; |
| 129 | + fireEvent.submit(form); |
| 130 | + await waitFor(() => expect(document.body.textContent).toContain('INLINE NOTE is required')); |
| 131 | + expect(adapter.create, 'the member\'s required refused the empty submit').not.toHaveBeenCalled(); |
| 132 | + |
| 133 | + fireEvent.change(controlOf('note') as HTMLInputElement, { target: { value: 'filled' } }); |
| 134 | + fireEvent.submit(form); |
| 135 | + await waitFor(() => |
| 136 | + expect(adapter.create).toHaveBeenCalledWith('invoice', expect.objectContaining({ note: 'filled' })), |
| 137 | + ); |
| 138 | + unmount(); |
| 139 | + }); |
| 140 | + |
| 141 | + it('SPEC ENTRY — a spec `{ field }` entry starts from the member, not the generated field', async () => { |
| 142 | + const { unmount } = await mount(arm, { |
| 143 | + // `colSpan` is a layout key both override rule sets carry; nothing here |
| 144 | + // restates `label`, `required` or `type`, so the member is what shows. |
| 145 | + sections: MAIN_SECTION(['customer', { field: 'note', colSpan: 1 }]), |
| 146 | + customFields: [{ name: 'note', label: 'INLINE NOTE', type: 'textarea', required: true }], |
| 147 | + }); |
| 148 | + expect(labelOf('note')).toBe('INLINE NOTE*'); |
| 149 | + expect(controlOf('note')?.getAttribute('aria-required')).toBe('true'); |
| 150 | + expect( |
| 151 | + controlOf('note')?.tagName, |
| 152 | + 'the member\'s own `type` renders — the object schema\'s `text` is the generated definition\'s', |
| 153 | + ).toBe('TEXTAREA'); |
| 154 | + unmount(); |
| 155 | + }); |
| 156 | + |
| 157 | + it('UNDECLARED NAME — a section naming a field only a member supplies renders the member', async () => { |
| 158 | + const { unmount } = await mount(arm, { |
| 159 | + sections: MAIN_SECTION(['customer', 'extra']), |
| 160 | + customFields: [{ name: 'extra', label: 'EXTRA', type: 'text' }], |
| 161 | + }); |
| 162 | + expect(drawnFields()).toEqual(['customer', 'extra']); |
| 163 | + expect(labelOf('extra')).toBe('EXTRA'); |
| 164 | + unmount(); |
| 165 | + }); |
| 166 | + |
| 167 | + it('UNNAMED MEMBER — a member no section lists is not drawn under explicit sections', async () => { |
| 168 | + const { unmount } = await mount(arm, { |
| 169 | + sections: MAIN_SECTION(['customer', 'note']), |
| 170 | + customFields: [ |
| 171 | + { name: 'extra', label: 'EXTRA', type: 'text' }, |
| 172 | + { name: 'amount', label: 'INLINE AMOUNT', type: 'text' }, |
| 173 | + ], |
| 174 | + }); |
| 175 | + expect( |
| 176 | + drawnFields(), |
| 177 | + 'sections draw what they list — neither an appended member nor an overriding one', |
| 178 | + ).toEqual(['customer', 'note']); |
| 179 | + unmount(); |
| 180 | + }); |
| 181 | +}); |
![objectstack-fleet[bot]](https://avatars.githubusercontent.com/u/254823548?v=4&size=40){kind=avatar}
0 commit comments