|
| 1 | +// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license. |
| 2 | + |
| 3 | +/** |
| 4 | + * objectstack#26745 — the dashboard's two widget-type pickers read ONE registry |
| 5 | + * of the renderable spec types. |
| 6 | + * |
| 7 | + * Measured on `main` before this change: the designer's Add-widget menu offered |
| 8 | + * 11 types, the widget inspector's Type select 10 (no `scatter`), and the spec's |
| 9 | + * `ChartTypeSchema` accepts 20 — every one of which the dashboard draws when |
| 10 | + * written through the API. Each picker kept its own hand-written list. |
| 11 | + * |
| 12 | + * Pinned here, each through the rendered control: |
| 13 | + * - the registry IS the spec vocabulary (`WIDGET_TYPE_IDS` = `ChartTypeSchema`); |
| 14 | + * - the Add menu offers exactly that set, and so does the Type select; |
| 15 | + * - every offered type renders through the real `DashboardRenderer` — no |
| 16 | + * "not supported yet" placeholder, no red unknown-component panel; |
| 17 | + * - every offered type has its two names in both catalogues (en + zh). |
| 18 | + */ |
| 19 | + |
| 20 | +import '@testing-library/jest-dom/vitest'; |
| 21 | +import * as React from 'react'; |
| 22 | +import { afterEach, describe, expect, it, vi } from 'vitest'; |
| 23 | +import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'; |
| 24 | +import { ChartTypeSchema } from '@objectstack/spec/ui'; |
| 25 | +import { enumOptions } from '@object-ui/test-support'; |
| 26 | +// Module-scope import of the lazily loaded renderer, so the preview's |
| 27 | +// `React.lazy` factory resolves at once instead of racing the test's wait |
| 28 | +// window (AGENTS.md, flaky-test discipline). |
| 29 | +import '@object-ui/plugin-dashboard'; |
| 30 | +// The console registers the chart renderer the series families draw through. |
| 31 | +import '@object-ui/plugin-charts'; |
| 32 | + |
| 33 | +vi.mock('@object-ui/react', async (importOriginal) => { |
| 34 | + const mod = await importOriginal<typeof import('@object-ui/react')>(); |
| 35 | + return { ...mod, useAdapter: () => ({}) }; |
| 36 | +}); |
| 37 | +// Network-free dataset catalog for the widget inspector. |
| 38 | +vi.mock('./useDatasetCatalog', () => ({ |
| 39 | + useDatasetCatalog: () => ({ datasets: [], loading: false, error: null }), |
| 40 | + useDatasetSemantics: () => ({ dimensions: [], measures: [], loading: false, error: null }), |
| 41 | +})); |
| 42 | + |
| 43 | +import { t } from '../i18n'; |
| 44 | +import { WIDGET_TYPE_IDS, WIDGET_TYPE_META } from './widget-types'; |
| 45 | +import { DashboardPreview } from './DashboardPreview'; |
| 46 | +import { DashboardDefaultInspector } from '../inspectors/DashboardDefaultInspector'; |
| 47 | +import { DashboardWidgetInspector } from '../inspectors/DashboardWidgetInspector'; |
| 48 | +// The `engine.inspector.*` rows live in `@object-ui/i18n`'s `studio` namespace, |
| 49 | +// whose `zh` catalogue is fetched on demand (objectstack#25922). Resident before |
| 50 | +// any case, so the zh rows below read synchronously. |
| 51 | +import { loadStudioCatalogue } from '@object-ui/i18n/namespaces/studio'; |
| 52 | +await loadStudioCatalogue('zh'); |
| 53 | + |
| 54 | +// Radix Select reads pointer capture, which jsdom does not implement. |
| 55 | +for (const m of ['hasPointerCapture', 'setPointerCapture', 'releasePointerCapture'] as const) { |
| 56 | + if (!(m in Element.prototype)) { |
| 57 | + (Element.prototype as unknown as Record<string, unknown>)[m] = m === 'hasPointerCapture' ? () => false : () => {}; |
| 58 | + } |
| 59 | +} |
| 60 | +if (!Element.prototype.scrollIntoView) Element.prototype.scrollIntoView = () => {}; |
| 61 | + |
| 62 | +afterEach(cleanup); |
| 63 | + |
| 64 | +const specTypes: string[] = enumOptions(ChartTypeSchema); |
| 65 | + |
| 66 | +async function flush() { |
| 67 | + await act(async () => { |
| 68 | + await new Promise((r) => setTimeout(r, 0)); |
| 69 | + }); |
| 70 | +} |
| 71 | + |
| 72 | +/** The stored types the Add-widget menu lists, read off its rendered entries. */ |
| 73 | +async function addMenuTypes(): Promise<string[]> { |
| 74 | + render( |
| 75 | + <DashboardDefaultInspector |
| 76 | + type="dashboard" |
| 77 | + name="sales" |
| 78 | + locale="en-US" |
| 79 | + draft={{ name: 'sales', label: 'Sales', widgets: [] }} |
| 80 | + onPatch={() => {}} |
| 81 | + onSelectionChange={() => {}} |
| 82 | + readOnly={false} |
| 83 | + />, |
| 84 | + ); |
| 85 | + fireEvent.click(screen.getByRole('button', { name: t('engine.inspector.add.widget', 'en-US') })); |
| 86 | + await flush(); |
| 87 | + const picker = screen.getByRole('dialog'); |
| 88 | + return Array.from(picker.querySelectorAll('button code')).map((c) => c.textContent ?? ''); |
| 89 | +} |
| 90 | + |
| 91 | +/** The option names the widget inspector's Type select lists. */ |
| 92 | +async function typeSelectOptions(): Promise<string[]> { |
| 93 | + render( |
| 94 | + <DashboardWidgetInspector |
| 95 | + type="dashboard" |
| 96 | + name="sales" |
| 97 | + locale="en-US" |
| 98 | + draft={{ widgets: [{ id: 'w1', type: 'bar', title: 'Revenue' }] }} |
| 99 | + selection={{ kind: 'widget', id: 'w1' }} |
| 100 | + onPatch={() => {}} |
| 101 | + onClearSelection={() => {}} |
| 102 | + onSelectionChange={() => {}} |
| 103 | + readOnly={false} |
| 104 | + />, |
| 105 | + ); |
| 106 | + fireEvent.keyDown(document.getElementById('widget-type')!, { key: 'ArrowDown' }); |
| 107 | + const listbox = await screen.findByRole('listbox'); |
| 108 | + return within(listbox) |
| 109 | + .getAllByRole('option') |
| 110 | + .map((o) => o.textContent ?? ''); |
| 111 | +} |
| 112 | + |
| 113 | +describe('one widget-type registry, derived from the spec (objectstack#26745)', () => { |
| 114 | + it('reads a non-empty enum from the spec', () => { |
| 115 | + expect(specTypes, 'could not read ChartTypeSchema.options from the spec').not.toEqual([]); |
| 116 | + }); |
| 117 | + |
| 118 | + it('the registry is the spec vocabulary, in the spec order', () => { |
| 119 | + expect([...WIDGET_TYPE_IDS]).toEqual(specTypes); |
| 120 | + expect(Object.keys(WIDGET_TYPE_META).sort()).toEqual([...specTypes].sort()); |
| 121 | + }); |
| 122 | + |
| 123 | + it('the Add-widget menu offers exactly the spec types', async () => { |
| 124 | + expect((await addMenuTypes()).sort()).toEqual([...specTypes].sort()); |
| 125 | + }); |
| 126 | + |
| 127 | + it('the Type select offers exactly the spec types, named from the same registry', async () => { |
| 128 | + expect(await typeSelectOptions()).toEqual( |
| 129 | + specTypes.map((id) => t(WIDGET_TYPE_META[id].selectLabelKey, 'en-US')), |
| 130 | + ); |
| 131 | + }); |
| 132 | + |
| 133 | + /** Render one widget per type through the real renderer; the drawn text once every cell is laid out. */ |
| 134 | + async function renderedText(types: readonly string[]): Promise<string> { |
| 135 | + const widgets = types.map((type, i) => ({ |
| 136 | + id: `w_${i}`, |
| 137 | + type, |
| 138 | + title: `Widget ${type}`, |
| 139 | + layout: { x: (i % 4) * 3, y: Math.floor(i / 4) * 2, w: 3, h: 2 }, |
| 140 | + })); |
| 141 | + const { container } = render( |
| 142 | + <DashboardPreview |
| 143 | + type="dashboard" |
| 144 | + name="all_types" |
| 145 | + draft={{ name: 'all_types', label: 'All types', widgets }} |
| 146 | + editing={false} |
| 147 | + selection={null} |
| 148 | + onSelectionChange={() => {}} |
| 149 | + onPatch={() => {}} |
| 150 | + locale="en-US" |
| 151 | + />, |
| 152 | + ); |
| 153 | + await waitFor(() => { |
| 154 | + const cells = container.querySelectorAll('[style*="grid-column"]'); |
| 155 | + if (cells.length !== widgets.length) throw new Error(`expected ${widgets.length} widget cells, saw ${cells.length}`); |
| 156 | + }); |
| 157 | + return container.textContent ?? ''; |
| 158 | + } |
| 159 | + |
| 160 | + it('every offered type renders through the real DashboardRenderer — no placeholder, no red panel', async () => { |
| 161 | + const text = await renderedText(WIDGET_TYPE_IDS); |
| 162 | + expect(text).not.toMatch(/chart type is not supported yet/); |
| 163 | + expect(text).not.toMatch(/Unknown component type/); |
| 164 | + }); |
| 165 | + |
| 166 | + it('control: the same probe sees the placeholder a family with no renderer draws', async () => { |
| 167 | + expect(await renderedText(['heatmap'])).toMatch(/chart type is not supported yet/); |
| 168 | + }); |
| 169 | + |
| 170 | + it('every offered type has its Add-menu name and its Type-select name in en and zh', () => { |
| 171 | + for (const meta of Object.values(WIDGET_TYPE_META)) { |
| 172 | + for (const key of [meta.labelKey, meta.selectLabelKey]) { |
| 173 | + expect(t(key, 'en-US'), `${key}: missing en row`).not.toBe(key); |
| 174 | + // A missing zh row reads the en one back. |
| 175 | + expect(t(key, 'zh-CN'), `${key}: missing zh row`).not.toBe(t(key, 'en-US')); |
| 176 | + } |
| 177 | + // The Add menu's en name is the English the stored default title is written from. |
| 178 | + expect(t(meta.labelKey, 'en-US'), meta.id).toBe(meta.label); |
| 179 | + } |
| 180 | + }); |
| 181 | +}); |
![objectstack-fleet[bot]](https://avatars.githubusercontent.com/u/254823548?v=4&size=40){kind=avatar}
0 commit comments