@cratis/scene.react 3.2.0 → 3.3.1

package/for_ScreenplayCoreComponents/when_rendering_a_translated_screen.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Control, ExternalComponent, HorizontalAlignment, VerticalAlignment, Visibility } from '@cratis/scene.model';
+import { SceneElementView } from '../SceneElementView';
+import { coreComponents } from '../core';
+
+function control(id: string): Control {
+    return {
+        id,
+        name: id,
+        properties: {},
+        visibility: Visibility.Visible,
+        isEnabled: true,
+        opacity: 1,
+        size: {},
+        zIndex: 0,
+        minimumSize: {},
+        maximumSize: {},
+        margin: { left: 0, top: 0, right: 0, bottom: 0 },
+        horizontalAlignment: HorizontalAlignment.Stretch,
+        verticalAlignment: VerticalAlignment.Stretch,
+        borderThickness: { left: 0, top: 0, right: 0, bottom: 0 },
+        padding: { left: 0, top: 0, right: 0, bottom: 0 },
+        tabIndex: 0,
+    };
+}
+
+const component = (
+    id: string,
+    componentName: string,
+    properties: Record<string, unknown> = {},
+    slots: Record<string, ExternalComponent[]> = {},
+): ExternalComponent => ({ ...control(id), componentName, properties, slots });
+
+describe('when rendering a translated Screenplay screen', () => {
+    const title = component('title', 'core:title', { text: 'Invoices' });
+    const action = component('create', 'core:action', { command: 'CreateInvoice', label: 'Create invoice' });
+    const section = component('section', 'core:section', { name: 'Open invoices' }, { content: [title, action] });
+
+    beforeEach(() => {
+        render(<SceneElementView element={section} registry={coreComponents} resolveBinding={() => undefined} />);
+    });
+
+    it('should render the section heading', () => expect(screen.getByRole('heading', { name: 'Open invoices' })).to.exist);
+    it('should render the translated title', () => expect(screen.getByRole('heading', { name: 'Invoices' })).to.exist);
+    it('should render the modeled action', () => expect(screen.getByRole('button', { name: 'Create invoice' })).to.exist);
+
+    it('should announce the modeled command to the host', () => {
+        let command = '';
+        const listener = (event: Event) => { command = (event as CustomEvent).detail.command; };
+        globalThis.addEventListener('cratis.scene.command', listener, { once: true });
+
+        fireEvent.click(screen.getByRole('button', { name: 'Create invoice' }));
+
+        command.should.equal('CreateInvoice');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.react",
-    "version": "3.2.0",
+    "version": "3.3.1",
     "description": "The React renderer implementing Scene.Engine's Renderer contract against real React/DOM.",
     "keywords": [
         "cratis",
@@ -50,18 +50,18 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/scene.engine": "3.2.0",
-        "@cratis/scene.model": "3.2.0"
+        "@cratis/scene.engine": "3.3.1",
+        "@cratis/scene.model": "3.3.1"
     },
     "devDependencies": {
-        "@cratis/scene.engine": "3.2.0",
-        "@cratis/scene.model": "3.2.0",
-        "@storybook/addon-links": "^10.4.1",
-        "@storybook/react": "^10.4.1",
-        "@storybook/react-vite": "^10.4.1",
-        "react": "^19.2.6",
-        "react-dom": "^19.2.6",
-        "storybook": "^10.4.1"
+        "@cratis/scene.engine": "3.3.1",
+        "@cratis/scene.model": "3.3.1",
+        "@storybook/addon-links": "^10.6.0",
+        "@storybook/react": "^10.6.0",
+        "@storybook/react-vite": "^10.6.0",
+        "react": "^19.3.0",
+        "react-dom": "^19.3.0",
+        "storybook": "^10.6.0"
     },
     "peerDependencies": {
         "react": "^18.0.0 || ^19.0.0",