jsgui3-server 0.0.144 → 0.0.146

package/tests/sass-controls.e2e.test.js

@@ -26,6 +26,7 @@ const sass_mix_client_js = [
     "const jsgui = require('jsgui3-html');",
     "const { Control } = jsgui;",
     "const { controls } = jsgui;",
+    "const Active_HTML_Document = controls.Active_HTML_Document;",
     "",
     "class Sass_Mix_Control extends Control {",
     "    constructor(spec = {}) {",
@@ -51,7 +52,20 @@ const sass_mix_client_js = [
     "}",
     "`;",
     "",
+    "class Demo_UI extends Active_HTML_Document {",
+    "    constructor(spec = {}) {",
+    "        spec.__type_name = spec.__type_name || 'demo_ui';",
+    "        super(spec);",
+    "        const { context } = this;",
+    "        if (!spec.el) {",
+    "            const control = new Sass_Mix_Control({ context });",
+    "            this.body.add(control);",
+    "        }",
+    "    }",
+    "}",
+    "",
     "controls.Sass_Mix_Control = Sass_Mix_Control;",
+    "controls.Demo_UI = Demo_UI;",
     "module.exports = jsgui;",
     ""
 ].join('\n');
@@ -60,6 +74,7 @@ const sass_only_client_js = [
     "const jsgui = require('jsgui3-html');",
     "const { Control } = jsgui;",
     "const { controls } = jsgui;",
+    "const Active_HTML_Document = controls.Active_HTML_Document;",
     "",
     "class Sass_Only_Control extends Control {",
     "    constructor(spec = {}) {",
@@ -80,7 +95,20 @@ const sass_only_client_js = [
     "    color: #000000",
     "`;",
     "",
+    "class Demo_UI extends Active_HTML_Document {",
+    "    constructor(spec = {}) {",
+    "        spec.__type_name = spec.__type_name || 'demo_ui';",
+    "        super(spec);",
+    "        const { context } = this;",
+    "        if (!spec.el) {",
+    "            const control = new Sass_Only_Control({ context });",
+    "            this.body.add(control);",
+    "        }",
+    "    }",
+    "}",
+    "",
     "controls.Sass_Only_Control = Sass_Only_Control;",
+    "controls.Demo_UI = Demo_UI;",
     "module.exports = jsgui;",
     ""
 ].join('\n');
@@ -89,6 +117,7 @@ const sass_css_mix_client_js = [
     "const jsgui = require('jsgui3-html');",
     "const { Control } = jsgui;",
     "const { controls } = jsgui;",
+    "const Active_HTML_Document = controls.Active_HTML_Document;",
     "",
     "class Sass_Css_Mix_Control extends Control {",
     "    constructor(spec = {}) {",
@@ -111,7 +140,61 @@ const sass_css_mix_client_js = [
     "  color: $mix_color",
     "`;",
     "",
+    "class Demo_UI extends Active_HTML_Document {",
+    "    constructor(spec = {}) {",
+    "        spec.__type_name = spec.__type_name || 'demo_ui';",
+    "        super(spec);",
+    "        const { context } = this;",
+    "        if (!spec.el) {",
+    "            const control = new Sass_Css_Mix_Control({ context });",
+    "            this.body.add(control);",
+    "        }",
+    "    }",
+    "}",
+    "",
     "controls.Sass_Css_Mix_Control = Sass_Css_Mix_Control;",
+    "controls.Demo_UI = Demo_UI;",
+    "module.exports = jsgui;",
+    ""
+].join('\n');
+
+const sass_theme_client_js = [
+    "const jsgui = require('jsgui3-html');",
+    "const { Control } = jsgui;",
+    "const { controls } = jsgui;",
+    "const Active_HTML_Document = controls.Active_HTML_Document;",
+    "",
+    "class Sass_Theme_Control extends Control {",
+    "    constructor(spec = {}) {",
+    "        super(spec);",
+    "        const { context } = this;",
+    "        if (!spec.el) {",
+    "            const container = new controls.div({ context, class: 'sass-theme-control' });",
+    "            this.add(container);",
+    "        }",
+    "    }",
+    "}",
+    "",
+    "Sass_Theme_Control.scss = `",
+    ".sass-theme-control {",
+    "  color: var(--accent-color);",
+    "}",
+    "`;",
+    "",
+    "class Demo_UI extends Active_HTML_Document {",
+    "    constructor(spec = {}) {",
+    "        spec.__type_name = spec.__type_name || 'demo_ui';",
+    "        super(spec);",
+    "        const { context } = this;",
+    "        if (!spec.el) {",
+    "            const control = new Sass_Theme_Control({ context });",
+    "            this.body.add(control);",
+    "        }",
+    "    }",
+    "}",
+    "",
+    "controls.Sass_Theme_Control = Sass_Theme_Control;",
+    "controls.Demo_UI = Demo_UI;",
     "module.exports = jsgui;",
     ""
 ].join('\n');
@@ -167,7 +250,17 @@ const remove_file_if_exists = async (file_path) => {
     }
 };
 
-const start_test_server = async ({ client_path, control_name }) => {
+const merge_style_config = (overrides = {}) => {
+    const merged = Object.assign({}, style_config, overrides);
+    merged.sourcemaps = Object.assign(
+        {},
+        style_config.sourcemaps || {},
+        overrides.sourcemaps || {}
+    );
+    return merged;
+};
+
+const start_test_server = async ({ client_path, control_name, style_overrides }) => {
     delete require.cache[require.resolve(client_path)];
     const client_module = require(client_path);
     const ctrl = client_module.controls && client_module.controls[control_name];
@@ -178,7 +271,7 @@ const start_test_server = async ({ client_path, control_name }) => {
         src_path_client_js: client_path,
         name: `tests/${control_name}`,
         debug: true,
-        style: style_config
+        style: merge_style_config(style_overrides)
     });
 
     server.allowed_addresses = ['127.0.0.1'];
@@ -228,7 +321,7 @@ describe('Sass/CSS Control E2E Tests', function() {
         const client_path = await write_temp_client_file('temp_sass_mix_client.js', sass_mix_client_js);
         const { server, port } = await start_test_server({
             client_path,
-            control_name: 'Sass_Mix_Control'
+            control_name: 'Demo_UI'
         });
 
         try {
@@ -266,7 +359,7 @@ describe('Sass/CSS Control E2E Tests', function() {
         const client_path = await write_temp_client_file('temp_sass_only_client.js', sass_only_client_js);
         const { server, port } = await start_test_server({
             client_path,
-            control_name: 'Sass_Only_Control'
+            control_name: 'Demo_UI'
         });
 
         try {
@@ -280,10 +373,7 @@ describe('Sass/CSS Control E2E Tests', function() {
             assert(css_text.includes('color: #336699'), 'Expected Sass variable compilation');
             assert(css_text.includes('.sass-only-control:hover'), 'Expected nested Sass selector output');
 
-            const css_sourcemap = extract_inline_sourcemap(css_text);
-            assert(Array.isArray(css_sourcemap.sources), 'Expected sourcemap sources array');
-            assert(Array.isArray(css_sourcemap.sourcesContent), 'Expected sourcemap sourcesContent array');
-            assert(sourcemap_contains(css_sourcemap, '$primary_color'), 'Expected sourcemap to include Sass source content');
+            assert(!css_text.includes('/*# sourceMappingURL='), 'Expected no inline sourcemap with multiple style segments');
 
             const js_response = await make_request(`${base_url}/js/js.js`);
             assert.strictEqual(js_response.status_code, 200);
@@ -298,7 +388,7 @@ describe('Sass/CSS Control E2E Tests', function() {
         const client_path = await write_temp_client_file('temp_sass_css_mix_client.js', sass_css_mix_client_js);
         const { server, port } = await start_test_server({
             client_path,
-            control_name: 'Sass_Css_Mix_Control'
+            control_name: 'Demo_UI'
         });
 
         try {
@@ -324,4 +414,28 @@ describe('Sass/CSS Control E2E Tests', function() {
             await remove_file_if_exists(client_path);
         }
     });
+
+    it('should apply scss_sources overrides from server config', async function() {
+        const client_path = await write_temp_client_file('temp_sass_theme_client.js', sass_theme_client_js);
+        const { server, port } = await start_test_server({
+            client_path,
+            control_name: 'Demo_UI',
+            style_overrides: {
+                scss_sources: [':root { --accent-color: #00aa88; }']
+            }
+        });
+
+        try {
+            const base_url = `http://127.0.0.1:${port}`;
+            const css_response = await make_request(`${base_url}/css/css.css`);
+            assert.strictEqual(css_response.status_code, 200);
+            assert((css_response.headers['content-type'] || '').includes('css'), 'Expected CSS content-type');
+
+            const css_text = css_response.body;
+            assert(css_text.includes('--accent-color: #00aa88'), 'Expected scss_sources to compile into CSS');
+        } finally {
+            await close_server(server);
+            await remove_file_if_exists(client_path);
+        }
+    });
 });

package/tests/test-runner.js

@@ -33,6 +33,7 @@ class TestRunner {
             'error-handling.test.js',
             'examples-controls.e2e.test.js',
             'sass-controls.e2e.test.js',
+            'jsgui3-html-examples.puppeteer.test.js',
             'window-examples.puppeteer.test.js'
         ];
     }

package/tests/window-examples.puppeteer.test.js

@@ -1,4 +1,5 @@
 const assert = require('assert');
+const fs = require('fs');
 const path = require('path');
 const { describe, it, before, after } = require('mocha');
 
@@ -7,6 +8,7 @@ const { get_free_port } = require('../port-utils');
 
 const repo_root_path = path.join(__dirname, '..');
 const examples_controls_root_path = path.join(repo_root_path, 'examples', 'controls');
+const screenshots_root_path = path.join(repo_root_path, 'tests', 'screenshots', 'windows');
 
 let puppeteer;
 let browser;
@@ -65,11 +67,38 @@ const open_example_page = async (port) => {
     await page.setViewport({ width: 1280, height: 720 });
 
     const base_url = `http://127.0.0.1:${port}/`;
-    await page.goto(base_url, { waitUntil: 'domcontentloaded' });
+    await page.goto(base_url, { waitUntil: 'load' });
 
     return page;
 };
 
+const normalize_screenshot_label = (value) => {
+    return String(value)
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '');
+};
+
+const build_screenshot_name = (story_name, step_name) => {
+    const story_label = normalize_screenshot_label(story_name);
+    const step_label = normalize_screenshot_label(step_name);
+    return `${story_label}__${step_label}`;
+};
+
+const ensure_screenshots_dir = () => {
+    fs.mkdirSync(screenshots_root_path, { recursive: true });
+};
+
+const capture_screenshot = async (page, story_name, step_name) => {
+    ensure_screenshots_dir();
+    const screenshot_name = build_screenshot_name(story_name, step_name);
+    const file_path = path.join(screenshots_root_path, `${screenshot_name}.png`);
+    await page.screenshot({ path: file_path, fullPage: true });
+    const stats = fs.statSync(file_path);
+    assert.ok(stats.size > 0, `Expected screenshot to be written: ${file_path}`);
+    return file_path;
+};
+
 const wait_for_class_state = async (page, selector, class_name, expected) => {
     await page.waitForFunction(
         (selector_arg, class_arg, expected_arg) => {
@@ -85,6 +114,46 @@ const wait_for_class_state = async (page, selector, class_name, expected) => {
     );
 };
 
+const get_window_bcr = async (page, selector = '.window') => {
+    return page.$eval(selector, (el) => {
+        const rect = el.getBoundingClientRect();
+        return {
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height,
+            right: rect.right,
+            bottom: rect.bottom
+        };
+    });
+};
+
+const drag_window_by = async (page, selector, delta_x, delta_y) => {
+    const handle = await page.$(selector);
+    assert(handle, `Missing drag handle for selector: ${selector}`);
+    const box = await handle.boundingBox();
+    assert(box, `Missing bounding box for selector: ${selector}`);
+    const start_x = box.x + box.width / 2;
+    const start_y = box.y + box.height / 2;
+    await page.mouse.move(start_x, start_y);
+    await page.mouse.down();
+    await page.mouse.move(start_x + delta_x, start_y + delta_y, { steps: 10 });
+    await page.mouse.up();
+};
+
+const resize_window_by = async (page, selector, delta_x, delta_y) => {
+    const handle = await page.$(selector);
+    assert(handle, `Missing resize handle for selector: ${selector}`);
+    const box = await handle.boundingBox();
+    assert(box, `Missing bounding box for selector: ${selector}`);
+    const start_x = box.x + box.width / 2;
+    const start_y = box.y + box.height / 2;
+    await page.mouse.move(start_x, start_y);
+    await page.mouse.down();
+    await page.mouse.move(start_x + delta_x, start_y + delta_y, { steps: 10 });
+    await page.mouse.up();
+};
+
 const get_tab_page_display = async (page) => {
     return page.evaluate(() => {
         return Array.from(document.querySelectorAll('.tab-page')).map((page_el) => {
@@ -137,11 +206,158 @@ describe('Window Examples Puppeteer Tests', function () {
             const button_handles = await page.$$('.window .title.bar button.button');
             assert.strictEqual(button_handles.length, 3, 'Expected minimize/maximize/close buttons');
 
+            await capture_screenshot(page, '1) window', 'before_minimize');
             await button_handles[0].click();
             await wait_for_class_state(page, '.window', 'minimized', true);
+            await capture_screenshot(page, '1) window', 'after_minimize');
 
             await button_handles[0].click();
             await wait_for_class_state(page, '.window', 'minimized', false);
+            await capture_screenshot(page, '1) window', 'after_restore');
+        } finally {
+            if (page) {
+                await page.close();
+            }
+            await stop_example_server(server);
+        }
+    });
+
+    it('maximize button toggles window state in "1) window"', async function () {
+        const { server, port } = await start_example_server({
+            dir_name: '1) window',
+            ctrl_name: 'Demo_UI'
+        });
+
+        let page;
+        try {
+            page = await open_example_page(port);
+            await page.waitForSelector('.window .title.bar');
+
+            const button_handles = await page.$$('.window .title.bar button.button');
+            assert.strictEqual(button_handles.length, 3, 'Expected minimize/maximize/close buttons');
+
+            await capture_screenshot(page, '1) window', 'before_maximize');
+            await button_handles[1].click();
+            await wait_for_class_state(page, '.window', 'maximized', true);
+            await capture_screenshot(page, '1) window', 'after_maximize');
+
+            await button_handles[1].click();
+            await wait_for_class_state(page, '.window', 'maximized', false);
+            await capture_screenshot(page, '1) window', 'after_unmaximize');
+        } finally {
+            if (page) {
+                await page.close();
+            }
+            await stop_example_server(server);
+        }
+    });
+
+    it('dragging the title bar moves the window in "1) window"', async function () {
+        const { server, port } = await start_example_server({
+            dir_name: '1) window',
+            ctrl_name: 'Demo_UI'
+        });
+
+        let page;
+        try {
+            page = await open_example_page(port);
+            await page.waitForSelector('.window .title.bar');
+
+            const initial_bcr = await get_window_bcr(page);
+            await capture_screenshot(page, '1) window', 'before_drag');
+
+            await drag_window_by(page, '.window .title.bar', 120, 80);
+            await page.waitForTimeout(150);
+
+            const moved_bcr = await get_window_bcr(page);
+            assert.ok(
+                moved_bcr.left > initial_bcr.left + 10,
+                `Expected window to move right (from ${initial_bcr.left} to ${moved_bcr.left})`
+            );
+            assert.ok(
+                moved_bcr.top > initial_bcr.top + 10,
+                `Expected window to move down (from ${initial_bcr.top} to ${moved_bcr.top})`
+            );
+            await capture_screenshot(page, '1) window', 'after_drag');
+        } finally {
+            if (page) {
+                await page.close();
+            }
+            await stop_example_server(server);
+        }
+    });
+
+    it('resizing updates window bounds in "1) window"', async function () {
+        const { server, port } = await start_example_server({
+            dir_name: '1) window',
+            ctrl_name: 'Demo_UI'
+        });
+
+        let page;
+        try {
+            page = await open_example_page(port);
+            await page.waitForSelector('.window .bottom-right.resize-handle');
+
+            const initial_bcr = await get_window_bcr(page);
+            await capture_screenshot(page, '1) window', 'before_resize');
+
+            await resize_window_by(page, '.window .bottom-right.resize-handle', 120, 80);
+            await page.waitForTimeout(150);
+
+            const resized_bcr = await get_window_bcr(page);
+            assert.ok(
+                resized_bcr.width > initial_bcr.width + 20,
+                `Expected width to increase (from ${initial_bcr.width} to ${resized_bcr.width})`
+            );
+            assert.ok(
+                resized_bcr.height > initial_bcr.height + 20,
+                `Expected height to increase (from ${initial_bcr.height} to ${resized_bcr.height})`
+            );
+            await capture_screenshot(page, '1) window', 'after_resize');
+        } finally {
+            if (page) {
+                await page.close();
+            }
+            await stop_example_server(server);
+        }
+    });
+
+    it('focus and close behaviors work in "2) two windows"', async function () {
+        const { server, port } = await start_example_server({
+            dir_name: '2) two windows',
+            ctrl_name: 'Demo_UI'
+        });
+
+        let page;
+        try {
+            page = await open_example_page(port);
+            await page.waitForSelector('.window .title.bar');
+
+            const window_handles = await page.$$('.window');
+            assert.strictEqual(window_handles.length, 2, 'Expected two windows');
+
+            await capture_screenshot(page, '2) two windows', 'initial');
+
+            const title_handle = await window_handles[1].$('.title.bar');
+            assert(title_handle, 'Missing title bar for second window');
+            await title_handle.click();
+
+            await page.waitForFunction(() => {
+                const windows = document.querySelectorAll('.window');
+                if (windows.length < 2) return false;
+                const z_first = parseInt(window.getComputedStyle(windows[0]).zIndex, 10) || 0;
+                const z_second = parseInt(window.getComputedStyle(windows[1]).zIndex, 10) || 0;
+                return z_second > z_first;
+            });
+
+            await capture_screenshot(page, '2) two windows', 'after_focus');
+
+            const button_handles = await window_handles[1].$$('.title.bar button.button');
+            assert.strictEqual(button_handles.length, 3, 'Expected minimize/maximize/close buttons');
+            await button_handles[2].click();
+
+            await page.waitForFunction(() => document.querySelectorAll('.window').length === 1);
+            await capture_screenshot(page, '2) two windows', 'after_close');
         } finally {
             if (page) {
                 await page.close();