@happyvertical/smrt-fields 0.40.59 → 0.40.61

package/dist/svelte/__tests__/FieldPolicyGear.test.js

@@ -0,0 +1,503 @@
+// @vitest-environment jsdom
+import { expectNoA11yViolations, render, screen, userEvent, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it } from 'vitest';
+import FieldPolicyEditor from '../components/FieldPolicyEditor.svelte';
+import { editorStateErrorMessage, isFieldPolicyEditorState, mutationFromDraft, registerFieldPolicyFocusTool, requiredVisibilityIsInvalid, serializeDefaultValue, } from '../field-policy-editor.js';
+const fields = {
+    title: { type: 'text', required: true },
+    enabled: { type: 'boolean' },
+};
+function stateFor(capabilities = {
+    manage: true,
+    personalize: true,
+}) {
+    return {
+        capabilities,
+        personalLowerDefaultUsable: { title: false, enabled: false },
+        policy: {
+            objectRef: '@test:Widget',
+            fields: {
+                title: {
+                    fieldName: 'title',
+                    hasDefault: false,
+                    defaultValue: undefined,
+                    visibility: 'basic',
+                    help: null,
+                    label: 'Title',
+                    order: 1,
+                    group: null,
+                    locked: false,
+                    required: true,
+                },
+                enabled: {
+                    fieldName: 'enabled',
+                    hasDefault: true,
+                    defaultValue: false,
+                    visibility: 'basic',
+                    help: null,
+                    label: 'Enabled',
+                    order: 2,
+                    group: null,
+                    locked: true,
+                    required: false,
+                },
+            },
+            layers: { title: [], enabled: [] },
+        },
+        rows: { app: [], tenant: [], user: [] },
+    };
+}
+function adapter() {
+    return {
+        load: async () => stateFor(),
+        create: async () => undefined,
+        update: async () => undefined,
+        delete: async () => undefined,
+    };
+}
+/** Small round-trip transport double: tenant rows are shared, user rows aren't. */
+class InMemoryPolicyTransport {
+    organization = null;
+    personal = new Map();
+    forUser(userId, capabilities = { manage: true, personalize: true }) {
+        return {
+            load: async () => {
+                if (!capabilities.manage && !capabilities.personalize) {
+                    return {
+                        ok: false,
+                        code: 'permission_denied',
+                        status: 403,
+                        message: 'Permission denied',
+                    };
+                }
+                const base = stateFor(capabilities);
+                const own = this.personal.get(userId);
+                const resolved = own ?? this.organization;
+                if (resolved) {
+                    base.policy.fields.title.label =
+                        resolved.label ?? base.policy.fields.title.label;
+                    base.policy.fields.title.visibility =
+                        resolved.visibility ?? base.policy.fields.title.visibility;
+                }
+                return base;
+            },
+            create: async (mutation) => {
+                if (mutation.scopeType === 'user') {
+                    if (this.organization?.locked)
+                        throw new Error('locked by organization');
+                    this.personal.set(userId, mutation);
+                }
+                else
+                    this.organization = mutation;
+            },
+            update: async (mutation) => {
+                if (mutation.scopeType === 'user') {
+                    if (this.organization?.locked)
+                        throw new Error('locked by organization');
+                    this.personal.set(userId, mutation);
+                }
+                else
+                    this.organization = mutation;
+            },
+            delete: async ({ id }) => {
+                if (id === `user:${userId}`)
+                    this.personal.delete(userId);
+                if (id === 'organization')
+                    this.organization = null;
+            },
+        };
+    }
+}
+describe('FieldPolicy gear', () => {
+    it('keeps mutation identities context-derived and JSON encodes defaults', () => {
+        expect(mutationFromDraft('@test:Widget', 'title', 'user', {
+            defaultEnabled: true,
+            defaultValue: 'Hello',
+            displayOrder: null,
+            help: null,
+            label: null,
+            locked: true,
+            visibility: 'basic',
+        })).toEqual({
+            objectRef: '@test:Widget',
+            fieldName: 'title',
+            scopeType: 'user',
+            defaultValue: '"Hello"',
+            displayOrder: null,
+            help: null,
+            label: null,
+            locked: null,
+            visibility: 'basic',
+        });
+    });
+    it('fails closed for missing or non-serializable explicit defaults, but keeps JSON null', () => {
+        expect(() => serializeDefaultValue(undefined)).toThrow(/Choose a default/);
+        expect(() => serializeDefaultValue(BigInt(1))).toThrow(/JSON-serializable/);
+        expect(serializeDefaultValue(null)).toBe('null');
+    });
+    it('rejects a well-shaped editor response for a different object', () => {
+        expect(isFieldPolicyEditorState(stateFor(), '@test:Other')).toBe(false);
+        expect(isFieldPolicyEditorState(stateFor(), '@test:Widget')).toBe(true);
+    });
+    it('fails closed when the personal lower-default signal is absent or malformed', () => {
+        const missing = stateFor();
+        delete missing.personalLowerDefaultUsable;
+        expect(isFieldPolicyEditorState(missing)).toBe(false);
+        const malformed = stateFor();
+        malformed.personalLowerDefaultUsable.title =
+            'yes';
+        expect(isFieldPolicyEditorState(malformed)).toBe(false);
+    });
+    it('guards required no-default demotion before transport', () => {
+        expect(requiredVisibilityIsInvalid(true, 'hidden', undefined)).toBe(true);
+        expect(requiredVisibilityIsInvalid(true, 'advanced', 'seed')).toBe(false);
+    });
+    it('round-trips shared organization, isolated personal, lock, and reset semantics', async () => {
+        const transport = new InMemoryPolicyTransport();
+        const alice = transport.forUser('alice');
+        const bob = transport.forUser('bob');
+        const organization = mutationFromDraft('@test:Widget', 'title', 'tenant', {
+            defaultEnabled: false,
+            defaultValue: undefined,
+            displayOrder: null,
+            help: null,
+            label: 'Organization title',
+            locked: false,
+            visibility: 'advanced',
+        });
+        await alice.create(organization);
+        expect((await alice.load()).policy.fields.title
+            .label).toBe('Organization title');
+        expect((await bob.load()).policy.fields.title
+            .visibility).toBe('advanced');
+        const personal = {
+            ...organization,
+            scopeType: 'user',
+            label: 'Alice title',
+        };
+        await alice.create(personal);
+        expect((await alice.load()).policy.fields.title
+            .label).toBe('Alice title');
+        expect((await bob.load()).policy.fields.title.label).toBe('Organization title');
+        await alice.delete({ id: 'user:alice' });
+        expect((await alice.load()).policy.fields.title
+            .label).toBe('Organization title');
+        await alice.update({ ...organization, id: 'organization', locked: true });
+        await expect(bob.create(personal)).rejects.toThrow(/locked by organization/);
+        await expect(transport.forUser('nobody', { manage: false, personalize: false }).load()).resolves.toMatchObject({ ok: false, status: 403 });
+    });
+    it('registers a structural AdminShell focus tool and returns its disposer', () => {
+        let captured;
+        let disposed = false;
+        const component = (() => null);
+        const render = (() => undefined);
+        const dispose = registerFieldPolicyFocusTool({
+            registerFocusTool(tool) {
+                captured = tool;
+                return () => {
+                    disposed = true;
+                };
+            },
+        }, '@test:Widget', { id: 'widget-settings', label: 'Field settings', component, render });
+        expect(captured).toMatchObject({
+            subject: { type: 'object-form', id: '@test:Widget' },
+            component,
+            render,
+        });
+        dispose();
+        expect(disposed).toBe(true);
+    });
+    it('fails closed when a generated custom-action response is malformed', () => {
+        expect(editorStateErrorMessage({})).toBe('Unable to load field settings.');
+    });
+    it('links scope tabs to their panel and activates them with roving keyboard navigation', async () => {
+        render(FieldPolicyEditor, {
+            props: {
+                state: stateFor(),
+                adapter: adapter(),
+                fields,
+                onclose: () => undefined,
+                onmutated: async () => undefined,
+            },
+        });
+        const organization = screen.getByRole('tab', { name: 'Organization' });
+        const personal = screen.getByRole('tab', { name: 'Just me' });
+        const panel = screen.getByRole('tabpanel');
+        expect(organization).toHaveAttribute('aria-selected', 'true');
+        expect(organization).toHaveAttribute('tabindex', '0');
+        expect(personal).toHaveAttribute('aria-selected', 'false');
+        expect(personal).toHaveAttribute('tabindex', '-1');
+        expect(organization).toHaveAttribute('aria-controls', panel.id);
+        expect(panel).toHaveAttribute('aria-labelledby', organization.id);
+        organization.focus();
+        await userEvent.keyboard('{ArrowRight}');
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        expect(personal).toHaveFocus();
+        expect(personal).toHaveAttribute('aria-selected', 'true');
+        expect(personal).toHaveAttribute('tabindex', '0');
+        expect(organization).toHaveAttribute('tabindex', '-1');
+        expect(personal).toHaveAttribute('aria-controls', panel.id);
+        expect(panel).toHaveAttribute('aria-labelledby', personal.id);
+        await userEvent.keyboard('{Home}');
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        expect(organization).toHaveFocus();
+        await userEvent.keyboard('{End}');
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        expect(personal).toHaveFocus();
+        await userEvent.keyboard('{ArrowLeft}');
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        expect(organization).toHaveFocus();
+    });
+    it('permission-gates tabs, disables locked personal fields, and is axe-clean', async () => {
+        const { container } = render(FieldPolicyEditor, {
+            props: {
+                state: stateFor({ manage: false, personalize: true }),
+                adapter: adapter(),
+                fields,
+                onclose: () => undefined,
+                onmutated: async () => undefined,
+            },
+        });
+        expect(screen.queryByRole('tab', { name: 'Organization' })).toBeNull();
+        const personal = screen.getByRole('tab', { name: 'Just me' });
+        const panel = screen.getByRole('tabpanel');
+        expect(personal).toBeInTheDocument();
+        expect(personal).toHaveAttribute('aria-selected', 'true');
+        expect(personal).toHaveAttribute('tabindex', '0');
+        expect(personal).toHaveAttribute('aria-controls', panel.id);
+        expect(panel).toHaveAttribute('aria-labelledby', personal.id);
+        personal.focus();
+        await userEvent.keyboard('{ArrowLeft}{ArrowRight}{Home}{End}');
+        expect(personal).toHaveFocus();
+        expect(screen.getByText(/locked by your organization/i)).toBeInTheDocument();
+        expect(screen.getAllByRole('button', { name: 'Save', exact: true })[1]).toBeDisabled();
+        await expectNoA11yViolations(container);
+    });
+    it('keeps a manage-only scope tab linked and selected', async () => {
+        render(FieldPolicyEditor, {
+            props: {
+                state: stateFor({ manage: true, personalize: false }),
+                adapter: adapter(),
+                fields,
+                onclose: () => undefined,
+                onmutated: async () => undefined,
+            },
+        });
+        const organization = screen.getByRole('tab', { name: 'Organization' });
+        const panel = screen.getByRole('tabpanel');
+        expect(screen.queryByRole('tab', { name: 'Just me' })).toBeNull();
+        expect(organization).toHaveAttribute('aria-selected', 'true');
+        expect(organization).toHaveAttribute('tabindex', '0');
+        expect(organization).toHaveAttribute('aria-controls', panel.id);
+        expect(panel).toHaveAttribute('aria-labelledby', organization.id);
+        organization.focus();
+        await userEvent.keyboard('{ArrowLeft}{ArrowRight}{Home}{End}');
+        expect(organization).toHaveFocus();
+    });
+    it('prevents a required defaultless field from being hidden', async () => {
+        render(FieldPolicyEditor, {
+            props: {
+                state: stateFor(),
+                adapter: adapter(),
+                fields,
+                onclose: () => undefined,
+                onmutated: async () => undefined,
+            },
+        });
+        const visibility = screen.getAllByLabelText('Visibility')[0];
+        await userEvent.selectOptions(visibility, 'hidden');
+        expect(screen.getByText(/Add a usable default/i)).toBeInTheDocument();
+        expect(screen.getAllByRole('button', { name: 'Save', exact: true })[0]).toBeDisabled();
+    });
+    it('blocks an app-row default removal when no lower code default exists', async () => {
+        const state = stateFor();
+        state.policy.fields.title.hasDefault = true;
+        state.policy.fields.title.defaultValue = 'app default';
+        state.policy.layers.title = [
+            {
+                layer: 'app',
+                delta: { default: { value: 'app default' } },
+            },
+        ];
+        state.rows.app = [
+            {
+                id: 'app-title',
+                fieldName: 'title',
+                scopeType: 'app',
+                tenantId: null,
+                userId: null,
+                updatedBy: null,
+                defaultValue: '"app default"',
+                displayOrder: null,
+                help: null,
+                label: null,
+                locked: null,
+                visibility: null,
+            },
+        ];
+        render(FieldPolicyEditor, {
+            props: {
+                state,
+                adapter: adapter(),
+                fields,
+                organizationScope: 'app',
+                onclose: () => undefined,
+                onmutated: async () => undefined,
+            },
+        });
+        await userEvent.click(screen.getAllByRole('checkbox', { name: 'Override default value' })[0]);
+        await userEvent.selectOptions(screen.getAllByLabelText('Visibility')[0], 'hidden');
+        expect(screen.getAllByRole('button', { name: 'Save', exact: true })[0]).toBeDisabled();
+    });
+    it('permits a personal required-default removal when the server reports a usable lower default', async () => {
+        const state = stateFor({ manage: false, personalize: true });
+        state.personalLowerDefaultUsable.title = true;
+        state.policy.fields.title.hasDefault = true;
+        state.policy.fields.title.defaultValue = 'personal default';
+        state.policy.fields.title.visibility = 'hidden';
+        // Personal-only state deliberately has no app/tenant explanation layer or
+        // raw row, so the boolean signal is the only fallback information.
+        state.policy.layers.title = [
+            {
+                layer: 'user',
+                delta: { default: { value: 'personal default' }, visibility: 'hidden' },
+            },
+        ];
+        state.rows.user = [
+            {
+                id: 'user-title',
+                fieldName: 'title',
+                scopeType: 'user',
+                tenantId: null,
+                userId: 'alice',
+                updatedBy: null,
+                defaultValue: '"personal default"',
+                displayOrder: null,
+                help: null,
+                label: null,
+                locked: null,
+                visibility: 'hidden',
+            },
+        ];
+        render(FieldPolicyEditor, {
+            props: {
+                state,
+                adapter: adapter(),
+                fields,
+                onclose: () => undefined,
+                onmutated: async () => undefined,
+            },
+        });
+        await userEvent.click(screen.getAllByRole('checkbox', { name: 'Override default value' })[0]);
+        expect(screen.getAllByRole('button', { name: 'Save', exact: true })[0]).toBeEnabled();
+    });
+    it('permits clearing a current app default when the generated field has a code default', async () => {
+        const state = stateFor();
+        state.policy.fields.title.hasDefault = true;
+        state.policy.fields.title.defaultValue = 'app default';
+        state.rows.app = [
+            {
+                id: 'app-title',
+                fieldName: 'title',
+                scopeType: 'app',
+                tenantId: null,
+                userId: null,
+                updatedBy: null,
+                defaultValue: '"app default"',
+                displayOrder: null,
+                help: null,
+                label: null,
+                locked: null,
+                visibility: null,
+            },
+        ];
+        render(FieldPolicyEditor, {
+            props: {
+                state,
+                adapter: adapter(),
+                fields: {
+                    ...fields,
+                    title: { type: 'text', required: true, default: 'code default' },
+                },
+                organizationScope: 'app',
+                onclose: () => undefined,
+                onmutated: async () => undefined,
+            },
+        });
+        await userEvent.click(screen.getAllByRole('checkbox', { name: 'Override default value' })[0]);
+        await userEvent.selectOptions(screen.getAllByLabelText('Visibility')[0], 'hidden');
+        expect(screen.getAllByRole('button', { name: 'Save', exact: true })[0]).toBeEnabled();
+    });
+    it('clears invalid JSON default state when its override is disabled', async () => {
+        const state = stateFor();
+        state.rows.tenant = [
+            {
+                id: 'tenant-title',
+                fieldName: 'title',
+                scopeType: 'tenant',
+                tenantId: 'tenant-a',
+                userId: null,
+                updatedBy: null,
+                defaultValue: '"seed"',
+                displayOrder: null,
+                help: null,
+                label: null,
+                locked: null,
+                visibility: null,
+            },
+        ];
+        render(FieldPolicyEditor, {
+            props: {
+                state,
+                adapter: adapter(),
+                fields: { ...fields, title: { type: 'json', required: true } },
+                onclose: () => undefined,
+                onmutated: async () => undefined,
+            },
+        });
+        const json = screen.getByLabelText('Default value');
+        json.value = '{bad';
+        json.dispatchEvent(new Event('input', { bubbles: true }));
+        await Promise.resolve();
+        expect(screen.getAllByRole('button', { name: 'Save', exact: true })[0]).toBeDisabled();
+        await userEvent.click(screen.getAllByRole('checkbox', { name: 'Override default value' })[0]);
+        expect(screen.getAllByRole('button', { name: 'Save', exact: true })[0]).toBeEnabled();
+    });
+    it('remounts default JSON inputs across scope tabs without leaking invalid drafts', async () => {
+        const state = stateFor();
+        state.rows.tenant = [
+            {
+                id: 'tenant-title',
+                fieldName: 'title',
+                scopeType: 'tenant',
+                tenantId: 'tenant-a',
+                userId: null,
+                updatedBy: null,
+                defaultValue: '"seed"',
+                displayOrder: null,
+                help: null,
+                label: null,
+                locked: null,
+                visibility: null,
+            },
+        ];
+        render(FieldPolicyEditor, {
+            props: {
+                state,
+                adapter: adapter(),
+                fields: { ...fields, title: { type: 'json', required: true } },
+                onclose: () => undefined,
+                onmutated: async () => undefined,
+            },
+        });
+        const json = screen.getByLabelText('Default value');
+        json.value = '{bad';
+        json.dispatchEvent(new Event('input', { bubbles: true }));
+        await Promise.resolve();
+        expect(screen.getAllByText(/Enter valid JSON/i).length).toBeGreaterThan(0);
+        await userEvent.click(screen.getByRole('tab', { name: 'Just me' }));
+        await userEvent.click(screen.getByRole('tab', { name: 'Organization' }));
+        expect(screen.queryByText(/Enter valid JSON/i)).toBeNull();
+        expect(screen.getAllByRole('button', { name: 'Save', exact: true })[0]).toBeEnabled();
+    });
+});

package/dist/svelte/__tests__/FormHelp.test.js

@@ -0,0 +1,138 @@
+// @vitest-environment jsdom
+/**
+ * Component tests for FormHelp (#2048).
+ */
+import { expectNoA11yViolations, render, screen, userEvent, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it } from 'vitest';
+import FieldPolicyProvider from '../components/FieldPolicyProvider.svelte';
+import FormHelp from '../components/FormHelp.svelte';
+import FormHelpFixture from './fixtures/FormHelpFixture.svelte';
+function makePolicy() {
+    return {
+        objectRef: '@test:Widget',
+        fields: {
+            name: {
+                fieldName: 'name',
+                hasDefault: false,
+                defaultValue: undefined,
+                visibility: 'basic',
+                help: 'The display name for this widget',
+                label: 'Name',
+                order: 2,
+                group: null,
+                locked: false,
+                required: true,
+            },
+            sku: {
+                fieldName: 'sku',
+                hasDefault: true,
+                defaultValue: 'W-001',
+                visibility: 'basic',
+                help: 'Stock keeping unit code',
+                label: 'SKU',
+                order: 1,
+                group: null,
+                locked: false,
+                required: false,
+            },
+            wholesalePrice: {
+                fieldName: 'wholesalePrice',
+                hasDefault: false,
+                defaultValue: undefined,
+                visibility: 'advanced',
+                help: 'Price for wholesale customers',
+                label: 'Wholesale Price',
+                order: 4,
+                group: null,
+                locked: false,
+                required: false,
+            },
+            hidden: {
+                fieldName: 'hidden',
+                hasDefault: false,
+                defaultValue: undefined,
+                visibility: 'hidden',
+                help: 'Should not appear in glossary',
+                label: 'Hidden',
+                order: 3,
+                group: null,
+                locked: false,
+                required: false,
+            },
+        },
+    };
+}
+describe('FormHelp', () => {
+    it('renders a help toggle button', () => {
+        render(FormHelpFixture, {
+            props: { policy: makePolicy() },
+        });
+        expect(screen.getByText('Help')).toBeInTheDocument();
+    });
+    it('shows glossary entries when expanded', async () => {
+        render(FormHelpFixture, {
+            props: { policy: makePolicy() },
+        });
+        // Open the help panel
+        await userEvent.click(screen.getByText('Help'));
+        expect(screen.getByText('The display name for this widget')).toBeInTheDocument();
+        expect(screen.getByText('Stock keeping unit code')).toBeInTheDocument();
+    });
+    it('excludes hidden-tier fields from the glossary', async () => {
+        render(FormHelpFixture, {
+            props: { policy: makePolicy() },
+        });
+        await userEvent.click(screen.getByText('Help'));
+        expect(screen.queryByText('Should not appear in glossary')).not.toBeInTheDocument();
+    });
+    it('excludes advanced-tier fields from the glossary in basic mode', async () => {
+        // The glossary mirrors PolicyField visibility: advanced-tier fields are
+        // not visible in basic mode, so their help must not be listed either.
+        render(FormHelpFixture, {
+            props: { policy: makePolicy(), mode: 'basic' },
+        });
+        await userEvent.click(screen.getByText('Help'));
+        expect(screen.queryByText('Price for wholesale customers')).not.toBeInTheDocument();
+        // Basic-tier entries still present.
+        expect(screen.getByText('The display name for this widget')).toBeInTheDocument();
+    });
+    it('includes advanced-tier fields in the glossary in advanced mode', async () => {
+        render(FormHelpFixture, {
+            props: { policy: makePolicy(), mode: 'advanced' },
+        });
+        await userEvent.click(screen.getByText('Help'));
+        expect(screen.getByText('Price for wholesale customers')).toBeInTheDocument();
+    });
+    it('shows object description when provided', async () => {
+        render(FormHelpFixture, {
+            props: {
+                policy: makePolicy(),
+                objectDescription: 'A widget is a configurable thing.',
+            },
+        });
+        await userEvent.click(screen.getByText('Help'));
+        expect(screen.getByText('A widget is a configurable thing.')).toBeInTheDocument();
+    });
+    it('orders glossary by resolved order (SKU before Name)', async () => {
+        render(FormHelpFixture, {
+            props: { policy: makePolicy() },
+        });
+        await userEvent.click(screen.getByText('Help'));
+        const terms = screen.getAllByRole('term');
+        expect(terms[0]).toHaveTextContent('SKU');
+        expect(terms[1]).toHaveTextContent('Name');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(FormHelpFixture, {
+            props: { policy: makePolicy() },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean when expanded', async () => {
+        const { container } = render(FormHelpFixture, {
+            props: { policy: makePolicy() },
+        });
+        await userEvent.click(screen.getByText('Help'));
+        await expectNoA11yViolations(container);
+    });
+});