@cratis/scene.react 4.2.0 → 4.2.1

package/for_panelLayout/when_arranging_a_panel.ts

@@ -1,135 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { Canvas, ColumnDefinition, Dock, DockPanel, Grid, GridUnitType, HorizontalAlignment, Orientation, RowDefinition, SceneElement, StackPanel, VerticalAlignment, Visibility, WrapPanel } from '@cratis/scene.model';
-import { childStyle, panelStyle } from '../renderer/panelLayout';
-
-const base = {
-    id: 'panel',
-    properties: {},
-    visibility: Visibility.Visible,
-    isEnabled: true,
-    opacity: 1,
-    zIndex: 0,
-    size: {},
-    name: 'panel',
-    minimumSize: {},
-    maximumSize: {},
-    margin: { left: 0, top: 0, right: 0, bottom: 0 },
-    horizontalAlignment: HorizontalAlignment.Stretch,
-    verticalAlignment: VerticalAlignment.Stretch,
-    children: [] as SceneElement[],
-};
-
-const child = (properties: Record<string, unknown> = {}): SceneElement => ({ id: 'child', properties });
-
-const star = (value: number): RowDefinition['height'] => ({ value, unitType: GridUnitType.Star });
-const row = (over: Partial<RowDefinition> = {}): RowDefinition => ({ height: star(1), minimumHeight: 0, maximumHeight: Number.POSITIVE_INFINITY, ...over });
-const column = (over: Partial<ColumnDefinition> = {}): ColumnDefinition => ({ width: star(1), minimumWidth: 0, maximumWidth: Number.POSITIVE_INFINITY, ...over });
-
-describe('when arranging a panel', () => {
-    it('should make a canvas the coordinate space its children are placed against', () => {
-        const panel: Canvas = { ...base, extent: {} };
-        panelStyle(panel)!.position!.should.equal('relative');
-    });
-
-    it('should size a canvas to its extent', () => {
-        const panel: Canvas = { ...base, extent: { width: 1280, height: 800 } };
-        const style = panelStyle(panel)!;
-        [style.width, style.height].should.have.members([1280, 800]);
-    });
-
-    it('should place a canvas child at the edges it names', () => {
-        const panel: Canvas = { ...base, extent: {} };
-        const style = childStyle(panel, child({ 'Canvas.Left': 40, 'Canvas.Top': 24 }), 0)!;
-        style.position!.should.equal('absolute');
-        [style.left, style.top].should.have.members([40, 24]);
-    });
-
-    it('should leave a canvas child that names no edge in flow', () => {
-        const panel: Canvas = { ...base, extent: {} };
-        (childStyle(panel, child(), 0) === undefined).should.be.true;
-    });
-
-    it('should lay a stack panel out along its orientation', () => {
-        const panel: StackPanel = { ...base, orientation: Orientation.Horizontal, spacing: 8 };
-        panelStyle(panel)!.flexDirection!.should.equal('row');
-    });
-
-    it('should space a stack panel by its spacing', () => {
-        const panel: StackPanel = { ...base, orientation: Orientation.Vertical, spacing: 12 };
-        panelStyle(panel)!.gap!.should.equal('12px');
-    });
-
-    it('should wrap a wrap panel', () => {
-        const panel: WrapPanel = { ...base, orientation: Orientation.Horizontal };
-        panelStyle(panel)!.flexWrap!.should.equal('wrap');
-    });
-
-    it('should turn star tracks into fractions', () => {
-        const panel: Grid = { ...base, rows: [row(), row({ height: star(2) })], columns: [] };
-        panelStyle(panel)!.gridTemplateRows!.should.equal('1fr 2fr');
-    });
-
-    it('should turn an absolute track into pixels', () => {
-        const panel: Grid = { ...base, rows: [], columns: [column({ width: { value: 240, unitType: GridUnitType.Absolute } })] };
-        panelStyle(panel)!.gridTemplateColumns!.should.equal('240px');
-    });
-
-    it('should turn a content-sized track into auto', () => {
-        const panel: Grid = { ...base, rows: [], columns: [column({ width: { value: 0, unitType: GridUnitType.Auto } })] };
-        panelStyle(panel)!.gridTemplateColumns!.should.equal('auto');
-    });
-
-    it('should bound a track that states a minimum', () => {
-        const panel: Grid = { ...base, rows: [row({ minimumHeight: 40 })], columns: [] };
-        panelStyle(panel)!.gridTemplateRows!.should.equal('minmax(40px, 1fr)');
-    });
-
-    it('should leave a plain panel unstyled', () => (panelStyle({ ...base }) === undefined).should.be.true);
-});
-
-describe('when placing a child in a panel', () => {
-    it('should place a grid child in the cell it names, one-based for CSS', () => {
-        const panel: Grid = { ...base, rows: [row()], columns: [column()] };
-        childStyle(panel, child({ 'Grid.Row': 1, 'Grid.Column': 2 }), 0)!.gridRow!.should.equal('2 / span 1');
-    });
-
-    it('should span a grid child that asks for it', () => {
-        const panel: Grid = { ...base, rows: [row()], columns: [column()] };
-        childStyle(panel, child({ 'Grid.Column': 0, 'Grid.ColumnSpan': 3 }), 0)!.gridColumn!.should.equal('1 / span 3');
-    });
-
-    it('should leave a grid child that names no cell to the implicit flow', () => {
-        const panel: Grid = { ...base, rows: [row()], columns: [column()] };
-        (childStyle(panel, child(), 0) === undefined).should.be.true;
-    });
-
-    it('should let a dock panel last child fill what is left', () => {
-        const kid = child();
-        const panel: DockPanel = { ...base, lastChildFill: true, children: [kid] };
-        childStyle(panel, kid, 0)!.flex!.should.equal('1 1 auto');
-    });
-
-    it('should keep a docked child at its natural size', () => {
-        const first = child({ Dock: Dock.Top });
-        const panel: DockPanel = { ...base, lastChildFill: true, children: [first, child()] };
-        childStyle(panel, first, 0)!.flex!.should.equal('0 0 auto');
-    });
-
-    it('should not let the last child fill when the panel says not to', () => {
-        const kid = child();
-        const panel: DockPanel = { ...base, lastChildFill: false, children: [kid] };
-        childStyle(panel, kid, 0)!.flex!.should.equal('0 0 auto');
-    });
-
-    it('should size wrap panel children when the panel sizes them', () => {
-        const panel: WrapPanel = { ...base, orientation: Orientation.Horizontal, itemWidth: 120 };
-        childStyle(panel, child(), 0)!.width!.should.equal(120);
-    });
-
-    it('should leave wrap panel children their own size when the panel sizes neither axis', () => {
-        const panel: WrapPanel = { ...base, orientation: Orientation.Horizontal };
-        (childStyle(panel, child(), 0) === undefined).should.be.true;
-    });
-});

package/for_themeTokens/when_converting_a_token_name.ts

@@ -1,22 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { themeTokenProperty } from '../index';
-
-describe('when converting a token name', () => {
-    it('should prefix a single-segment name', () => {
-        themeTokenProperty('primary').should.equal('--scene-primary');
-    });
-
-    it('should join dotted segments with dashes', () => {
-        themeTokenProperty('primary.color').should.equal('--scene-primary-color');
-    });
-
-    it('should split camelCase within a segment', () => {
-        themeTokenProperty('surface.borderColor').should.equal('--scene-surface-border-color');
-    });
-
-    it('should handle a segment with a digit boundary', () => {
-        themeTokenProperty('surface.level2Background').should.equal('--scene-surface-level2-background');
-    });
-});

package/for_useInteractionHosts/when_a_document_asks_the_user_something.tsx

@@ -1,106 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { render, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { useMemo } from 'react';
-import { InteractionActionKind, InteractionTriggerKind, Behavior, NotificationLevel } from '@cratis/scene.model';
-import { InteractionScope, createBrowserDispatcher, useInteractionHosts, useInteractions } from '../interactions';
-
-const executed: string[] = [];
-
-const confirmThenExecute: Behavior = {
-    name: 'CancelInvoice',
-    bindings: [
-        {
-            trigger: { kind: InteractionTriggerKind.Click } as never,
-            actions: [
-                { kind: InteractionActionKind.Confirm, message: { text: 'Cancel this invoice?' } } as never,
-                { kind: InteractionActionKind.ExecuteCommand, command: 'CancelInvoice' } as never,
-                { kind: InteractionActionKind.Notify, level: NotificationLevel.Info, message: { text: 'Invoice cancelled' } } as never,
-            ],
-        },
-    ],
-};
-
-function Button({ behaviors }: { behaviors: Behavior[] }) {
-    const handlers = useInteractions('element', behaviors);
-    return <button type="button" {...handlers}>Cancel</button>;
-}
-
-function Application({ behaviors }: { behaviors: Behavior[] }) {
-    const { host, surfaces } = useInteractionHosts();
-    const dispatcher = useMemo(() => createBrowserDispatcher({
-        ...host,
-        executeCommand: async command => {
-            executed.push(command);
-            return { isSuccess: true };
-        },
-    }), [host]);
-
-    return (
-        <InteractionScope dispatcher={dispatcher} attachments={[]}>
-            <Button behaviors={behaviors} />
-            {surfaces}
-        </InteractionScope>
-    );
-}
-
-describe('when a document asks the user something', () => {
-    beforeEach(() => { executed.length = 0; });
-
-    it('should ask in the page rather than in a browser prompt', async () => {
-        render(<Application behaviors={[confirmThenExecute]} />);
-
-        await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-
-        screen.getByRole('alertdialog').getAttribute('aria-label')!.should.equal('Cancel this invoice?');
-    });
-
-    // The reason a confirm exists at all: what follows it runs only if the answer was yes.
-    it('should not run what follows until the question is answered', async () => {
-        render(<Application behaviors={[confirmThenExecute]} />);
-
-        await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-
-        executed.should.have.lengthOf(0);
-    });
-
-    it('should run what follows when the answer is yes', async () => {
-        render(<Application behaviors={[confirmThenExecute]} />);
-
-        await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-        await userEvent.click(screen.getByRole('button', { name: 'OK' }));
-
-        executed.should.eql(['CancelInvoice']);
-    });
-
-    it('should abandon the sequence when the answer is no', async () => {
-        render(<Application behaviors={[confirmThenExecute]} />);
-
-        await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-        // Two buttons say 'Cancel' now - the modelled one and the declining choice - so the question has to
-        // be answered through the dialog it belongs to.
-        await userEvent.click(within(screen.getByRole('alertdialog')).getByRole('button', { name: 'Cancel' }));
-
-        executed.should.have.lengthOf(0);
-    });
-
-    it('should take the question down once it is answered', async () => {
-        render(<Application behaviors={[confirmThenExecute]} />);
-
-        await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-        await userEvent.click(screen.getByRole('button', { name: 'OK' }));
-
-        (screen.queryByRole('alertdialog') === null).should.equal(true);
-    });
-
-    it('should show what the document said after the command ran', async () => {
-        render(<Application behaviors={[confirmThenExecute]} />);
-
-        await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-        await userEvent.click(screen.getByRole('button', { name: 'OK' }));
-
-        screen.getByText('Invoice cancelled').textContent!.should.equal('Invoice cancelled');
-    });
-});

package/for_useInteractionHosts/when_the_host_cannot_do_what_was_asked.tsx

@@ -1,66 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { useMemo } from 'react';
-import { InteractionActionKind, InteractionTriggerKind, Behavior } from '@cratis/scene.model';
-import { InteractionScope, createBrowserDispatcher, useInteractionHosts, useInteractions } from '../interactions';
-
-const navigateSomewhere: Behavior = {
-    name: 'GoToInvoice',
-    bindings: [
-        {
-            trigger: { kind: InteractionTriggerKind.Click } as never,
-            actions: [{ kind: InteractionActionKind.Navigate, screen: 'InvoiceDetails' } as never],
-        },
-    ],
-};
-
-function Button() {
-    const handlers = useInteractions('element', [navigateSomewhere]);
-    return <button type="button" {...handlers}>Open</button>;
-}
-
-/**
- * A host that can do nothing at all - a preview surface, or an application half-way through being wired.
- */
-function Application() {
-    const { host, surfaces } = useInteractionHosts();
-    const dispatcher = useMemo(() => createBrowserDispatcher(host), [host]);
-
-    return (
-        <InteractionScope dispatcher={dispatcher} attachments={[]}>
-            <Button />
-            {surfaces}
-        </InteractionScope>
-    );
-}
-
-describe('when the host cannot do what was asked', () => {
-    it('should say so on the screen rather than do nothing', async () => {
-        render(<Application />);
-
-        await userEvent.click(screen.getByRole('button', { name: 'Open' }));
-
-        screen.getByText('navigate to InvoiceDetails').textContent!.should.equal('navigate to InvoiceDetails');
-    });
-
-    // A trigger that repeats would otherwise grow the report until it covered the application it is
-    // describing, which turns a useful warning into something to be closed without reading.
-    it('should report the same action once however often it is asked for', async () => {
-        render(<Application />);
-
-        await userEvent.click(screen.getByRole('button', { name: 'Open' }));
-        await userEvent.click(screen.getByRole('button', { name: 'Open' }));
-        await userEvent.click(screen.getByRole('button', { name: 'Open' }));
-
-        screen.getAllByText('navigate to InvoiceDetails').should.have.lengthOf(1);
-    });
-
-    it('should say nothing when nothing has failed', () => {
-        render(<Application />);
-
-        (screen.queryByText(/cannot do what the document asked/) === null).should.equal(true);
-    });
-});

package/for_useInteractions/when_clicking_an_element_that_executes_a_command.tsx

@@ -1,141 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ActionDispatcher, CommandOutcome, InteractionContext } from '@cratis/scene.engine';
-import { Behavior, InteractionActionKind, InteractionTriggerKind, NotificationLevel } from '@cratis/scene.model';
-import { InteractionScope, useInteractions } from '../interactions';
-
-const calls: string[] = [];
-
-const dispatcher = {
-    async executeCommand(command: string, args: Record<string, unknown>): Promise<CommandOutcome> {
-        calls.push(`executeCommand:${command}:${JSON.stringify(args)}`);
-        return { isSuccess: true };
-    },
-    navigate: (screenName: string) => { calls.push(`navigate:${screenName}`); },
-    navigateBack: () => { calls.push('navigateBack'); },
-    openDialog: async () => { calls.push('openDialog'); return { isConfirmed: true }; },
-    closeDialog: () => { calls.push('closeDialog'); },
-    refreshQuery: async (query: string) => { calls.push(`refreshQuery:${query}`); },
-    setState: (target: string) => { calls.push(`setState:${target}`); },
-    notify: (level: NotificationLevel, message: string) => { calls.push(`notify:${level}:${message}`); },
-    confirm: async () => { calls.push('confirm'); return true; },
-    raise: async (trigger: string) => { calls.push(`raise:${trigger}`); },
-} satisfies ActionDispatcher;
-
-const context: InteractionContext = { resolve: binding => `<${binding.path}>` };
-
-const cancelOnClick: Behavior = {
-    name: 'CancelInvoice',
-    bindings: [
-        {
-            trigger: { kind: InteractionTriggerKind.Click } as never,
-            actions: [
-                {
-                    kind: InteractionActionKind.ExecuteCommand,
-                    command: 'CancelInvoice',
-                    arguments: [{ name: 'invoiceId', value: { path: 'item.invoiceId' } }],
-                    onSuccess: [{ kind: InteractionActionKind.RefreshQuery, query: 'Invoices' }],
-                } as never,
-            ],
-        },
-    ],
-};
-
-function Button({ behaviors }: { behaviors?: Behavior[] }) {
-    const handlers = useInteractions('element', behaviors);
-    return <button type="button" {...handlers}>Cancel</button>;
-}
-
-function renderInScope(behaviors?: Behavior[]) {
-    return render(
-        <InteractionScope dispatcher={dispatcher} context={context} attachments={[]}>
-            <Button behaviors={behaviors} />
-        </InteractionScope>
-    );
-}
-
-describe('when clicking an element that executes a command', () => {
-    beforeEach(() => { calls.length = 0; });
-
-    // The whole point of everything beneath this: a document said what a click does, and a click does it.
-    it('should execute the command the document declared', async () => {
-        renderInScope([cancelOnClick]);
-
-        await userEvent.click(screen.getByRole('button'));
-
-        calls.should.eql(['executeCommand:CancelInvoice:{"invoiceId":"<item.invoiceId>"}', 'refreshQuery:Invoices']);
-    });
-
-    it('should not make an element interactive when nothing is attached', async () => {
-        renderInScope();
-
-        await userEvent.click(screen.getByRole('button'));
-        calls.should.have.lengthOf(0);
-    });
-
-    // A handler attached for a trigger the document never mentioned would swallow the event from whatever
-    // encloses the element, which is a bug you find by accident and spend an afternoon on.
-    it('should attach no handler for a trigger the document does not use', async () => {
-        renderInScope([cancelOnClick]);
-
-        await userEvent.dblClick(screen.getByRole('button'));
-
-        // The two clicks a double click is made of still run the click binding - that is what a double click
-        // is. What must not happen is a double-click handler existing when no binding asked for one.
-        calls.filter(call => call.startsWith('executeCommand')).should.have.lengthOf(2);
-    });
-
-    it('should run a behavior attached further out as well as its own', async () => {
-        render(
-            <InteractionScope
-                dispatcher={dispatcher}
-                context={context}
-                attachments={[{
-                    level: 'module',
-                    behaviors: [{
-                        name: 'ModuleWide',
-                        bindings: [{
-                            trigger: { kind: InteractionTriggerKind.Click } as never,
-                            actions: [{ kind: InteractionActionKind.Notify, level: NotificationLevel.Info, message: { text: 'from the module' } } as never],
-                        }],
-                    }],
-                }]}>
-                <Button behaviors={[cancelOnClick]} />
-            </InteractionScope>
-        );
-
-        await userEvent.click(screen.getByRole('button'));
-
-        calls.should.eql([
-            'notify:Info:from the module',
-            'executeCommand:CancelInvoice:{"invoiceId":"<item.invoiceId>"}',
-            'refreshQuery:Invoices',
-        ]);
-    });
-
-    it('should not run a binding whose guard is false', async () => {
-        render(
-            <InteractionScope
-                dispatcher={dispatcher}
-                // The guard has to actually resolve to false; a context echoing the path would make every
-                // guard a non-empty string, and so always true.
-                context={{ resolve: () => false }}
-                attachments={[]}>
-                <Button behaviors={[{
-            name: 'Guarded',
-            bindings: [{
-                trigger: { kind: InteractionTriggerKind.Click } as never,
-                condition: { path: 'item.canCancel' },
-                actions: [{ kind: InteractionActionKind.ExecuteCommand, command: 'CancelInvoice' } as never],
-            }],
-                }]} />
-            </InteractionScope>
-        );
-
-        await userEvent.click(screen.getByRole('button'));
-        calls.should.have.lengthOf(0);
-    });
-});

package/for_validatePackageBundle/when_the_bundle_and_manifest_disagree.ts

@@ -1,72 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { PackageKind, ScenePackage } from '@cratis/scene.model';
-import { ScenePackageBundle, componentRegistryKey, validatePackageBundle } from '../index';
-import { CoreText } from '../core';
-
-function manifestFor(components: string[], layouts: string[] = [], themes: string[] = [], screenTemplates: string[] = []): ScenePackage {
-    return {
-        name: 'Test',
-        version: '1.0.0',
-        kind: PackageKind.ComponentLibrary,
-        dependencies: [],
-        components,
-        layouts,
-        screenTemplates,
-        dialogTemplates: [],
-        themes,
-    };
-}
-
-describe('when the bundle and manifest disagree', () => {
-    const declaredButNotRegistered = validatePackageBundle({
-        manifest: manifestFor(['text', 'missing']),
-        components: { [componentRegistryKey('Test', 'text')]: CoreText },
-    } as ScenePackageBundle);
-
-    const registeredButNotDeclared = validatePackageBundle({
-        manifest: manifestFor([]),
-        components: { [componentRegistryKey('Test', 'text')]: CoreText },
-    } as ScenePackageBundle);
-
-    const layoutDeclaredButNotProvided = validatePackageBundle({
-        manifest: manifestFor([], ['AppShell']),
-        components: {},
-    } as ScenePackageBundle);
-
-    const screenTemplateDeclaredButNotProvided = validatePackageBundle({
-        manifest: manifestFor([], [], [], ['ModuleWorkspace']),
-        components: {},
-    } as ScenePackageBundle);
-
-    const themeDeclaredButNotProvided = validatePackageBundle({
-        manifest: manifestFor([], [], ['Midnight']),
-        components: {},
-    } as ScenePackageBundle);
-
-    it('should report a component the manifest declares without an implementation', () => {
-        declaredButNotRegistered.should.have.lengthOf(1);
-        declaredButNotRegistered[0].should.contain("'missing'");
-    });
-
-    it('should report a component registered without being declared', () => {
-        registeredButNotDeclared.should.have.lengthOf(1);
-        registeredButNotDeclared[0].should.contain('Test:text');
-    });
-
-    it('should report a layout the manifest declares without a definition', () => {
-        layoutDeclaredButNotProvided.should.have.lengthOf(1);
-        layoutDeclaredButNotProvided[0].should.contain("'AppShell'");
-    });
-
-    it('should report a screen template the manifest declares without a definition', () => {
-        screenTemplateDeclaredButNotProvided.should.have.lengthOf(1);
-        screenTemplateDeclaredButNotProvided[0].should.contain("'ModuleWorkspace'");
-    });
-
-    it('should report a theme the manifest declares without a definition', () => {
-        themeDeclaredButNotProvided.should.have.lengthOf(1);
-        themeDeclaredButNotProvided[0].should.contain("'Midnight'");
-    });
-});

package/for_validatePackageBundle/when_the_bundle_matches_its_manifest.ts

@@ -1,12 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { corePackage, validatePackageBundle } from '../index';
-
-describe('when the bundle matches its manifest', () => {
-    const problems = validatePackageBundle(corePackage);
-
-    it('should report no problems', () => {
-        problems.should.be.empty;
-    });
-});