|
| 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 | + * The dependency-gate hint must actually REACH a registered option widget |
| 11 | + * (objectui#3231) — the producer half of "declared ≠ delivered". |
| 12 | + * |
| 13 | + * `emptyHint` was declared on the widget contract, computed here for a gated |
| 14 | + * option list (#2284) and handed to `renderFieldComponent` … and then lost |
| 15 | + * twice on the way out, so no registered widget could ever render it: |
| 16 | + * |
| 17 | + * 1. `isOptionField` compared the RAW resolved type against `'select'` etc. |
| 18 | + * Object-derived forms emit `mapFieldTypeToFormType`'s prefixed ids |
| 19 | + * (`field:select`), which matched nothing — so for every option field that |
| 20 | + * came from an object schema (the normal case in the console) the whole |
| 21 | + * cascade block was skipped and no hint was computed at all. |
| 22 | + * 2. `stripRegisteredFieldProps` then removed the `emptyHint` key from what |
| 23 | + * was left, so even the bare-type forms that DID compute a hint delivered |
| 24 | + * nothing. |
| 25 | + * |
| 26 | + * The strip is otherwise correct — every other registered widget spreads its |
| 27 | + * leftover props onto a DOM node, where an unknown `emptyHint` attribute is a |
| 28 | + * React warning — so the forward is an ALLOW-LIST over the cascade option |
| 29 | + * types. Both directions are pinned below. |
| 30 | + */ |
| 31 | + |
| 32 | +import { describe, it, expect, beforeAll } from 'vitest'; |
| 33 | +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; |
| 34 | +import { ComponentRegistry } from '@object-ui/core'; |
| 35 | +// Module scope, not `beforeAll` — the cold transform must not be billed to |
| 36 | +// `hookTimeout`. See object-ui/no-dynamic-import-in-test-hook (objectui#3010). |
| 37 | +import '../../../renderers'; |
| 38 | + |
| 39 | +/** |
| 40 | + * Surfaces the received `emptyHint` so the injection can be asserted — both |
| 41 | + * its VALUE and whether the key was passed at all. The renderer always sets |
| 42 | + * `emptyHint` on the props object (`undefined` when the list is not gated), so |
| 43 | + * key presence is what distinguishes "stripped" from "forwarded, empty". |
| 44 | + */ |
| 45 | +function EmptyHintProbe(props: any) { |
| 46 | + return ( |
| 47 | + <div |
| 48 | + data-testid={`hint-probe-${props.name}`} |
| 49 | + data-has-key={'emptyHint' in props ? 'yes' : 'no'} |
| 50 | + > |
| 51 | + {props.emptyHint === undefined ? 'NO-HINT' : String(props.emptyHint)} |
| 52 | + </div> |
| 53 | + ); |
| 54 | +} |
| 55 | + |
| 56 | +const OPTION_TYPES = ['select', 'radio', 'multiselect', 'checkboxes'] as const; |
| 57 | + |
| 58 | +beforeAll(() => { |
| 59 | + // The fields package owns the real widgets; components tests never load it, |
| 60 | + // so stand the probe in for each registered option widget. |
| 61 | + for (const type of OPTION_TYPES) { |
| 62 | + ComponentRegistry.register(`field:${type}`, EmptyHintProbe, { namespace: 'test' }); |
| 63 | + } |
| 64 | + // A registered widget that is NOT an option field — the strip must still |
| 65 | + // hold for it (its props land on a DOM node). |
| 66 | + ComponentRegistry.register('field:lookup', EmptyHintProbe, { namespace: 'test' }); |
| 67 | +}, 30000); |
| 68 | + |
| 69 | +function renderForm(fields: any[]) { |
| 70 | + const Form = ComponentRegistry.get('form')!; |
| 71 | + return render(<Form schema={{ type: 'form', showSubmit: false, showCancel: false, fields }} />); |
| 72 | +} |
| 73 | + |
| 74 | +const gatedField = (type: string) => ({ |
| 75 | + name: 'province', |
| 76 | + label: 'Province', |
| 77 | + type, |
| 78 | + dependsOn: 'country', |
| 79 | + options: [ |
| 80 | + { label: 'Zhejiang', value: 'zj', visibleWhen: "record.country == 'cn'" }, |
| 81 | + { label: 'California', value: 'ca', visibleWhen: "record.country == 'us'" }, |
| 82 | + ], |
| 83 | +}); |
| 84 | + |
| 85 | +const emptyParent = { name: 'country', label: 'Country', type: 'input', defaultValue: '' }; |
| 86 | + |
| 87 | +describe('form renderer — emptyHint delivery to registered option widgets (objectui#3231)', () => { |
| 88 | + // The prefixed ids are what `mapFieldTypeToFormType` emits, i.e. what every |
| 89 | + // object-derived form in the console actually renders. |
| 90 | + it.each(OPTION_TYPES)('a registered field:%s receives the computed gate hint', (type) => { |
| 91 | + renderForm([emptyParent, gatedField(`field:${type}`)]); |
| 92 | + |
| 93 | + // Built from the controlling field's LABEL ("Country"), not its raw name — |
| 94 | + // that label resolution is the reason the host owns this string at all. |
| 95 | + const probe = screen.getByTestId('hint-probe-province'); |
| 96 | + expect(probe).toHaveTextContent('Select Country first'); |
| 97 | + expect(probe).toHaveAttribute('data-has-key', 'yes'); |
| 98 | + }); |
| 99 | + |
| 100 | + // `select` is a BUILTIN_FIELD_TYPE, so a bare `type: 'select'` never reaches |
| 101 | + // the registry at all — it renders the inline branch, which already consumed |
| 102 | + // `emptyHint`. The other three do resolve through `field:<type>`. |
| 103 | + it.each(['radio', 'multiselect', 'checkboxes'] as const)( |
| 104 | + 'a hand-written `type: %s` schema delivers it too', |
| 105 | + (type) => { |
| 106 | + renderForm([emptyParent, gatedField(type)]); |
| 107 | + |
| 108 | + expect(screen.getByTestId('hint-probe-province')).toHaveTextContent('Select Country first'); |
| 109 | + }, |
| 110 | + ); |
| 111 | + |
| 112 | + it('withdraws the hint once the gate lifts — an ungated list is not "empty"', async () => { |
| 113 | + renderForm([emptyParent, gatedField('field:select')]); |
| 114 | + |
| 115 | + expect(screen.getByTestId('hint-probe-province')).toHaveTextContent('Select Country first'); |
| 116 | + |
| 117 | + // Picking the parent lifts the gate, so the host has nothing to say and the |
| 118 | + // widget goes back to owning its own (now non-empty) list. |
| 119 | + fireEvent.change(screen.getByLabelText(/country/i), { target: { value: 'cn' } }); |
| 120 | + await waitFor(() => { |
| 121 | + expect(screen.getByTestId('hint-probe-province')).toHaveTextContent('NO-HINT'); |
| 122 | + }); |
| 123 | + }); |
| 124 | + |
| 125 | + it('still withholds the key from registered widgets that would spread it onto the DOM', () => { |
| 126 | + // The renderer sets `emptyHint` on the props of EVERY field, so without the |
| 127 | + // strip this probe would report `data-has-key="yes"` — and a real widget |
| 128 | + // would spread an unknown `emptyHint` attribute onto its DOM node. The |
| 129 | + // forward is an allow-list over the four cascade option types, not a |
| 130 | + // blanket "stop stripping it". |
| 131 | + renderForm([emptyParent, { name: 'contact', label: 'Contact', type: 'lookup', dependsOn: 'country' }]); |
| 132 | + |
| 133 | + const probe = screen.getByTestId('hint-probe-contact'); |
| 134 | + expect(probe).toHaveAttribute('data-has-key', 'no'); |
| 135 | + expect(probe).toHaveTextContent('NO-HINT'); |
| 136 | + }); |
| 137 | +}); |
0 commit comments