jsgui3-server 0.0.142 → 0.0.144

package/tests/README.md

@@ -26,6 +26,8 @@ tests/
 ├── performance.test.js           # Performance benchmarks
 ├── error-handling.test.js        # Error handling and edge cases
 ├── examples-controls.e2e.test.js # Example apps regression (controls)
+├── sass-controls.e2e.test.js     # Sass/CSS controls E2E coverage
+├── window-examples.puppeteer.test.js # Puppeteer interaction tests (window examples)
 ├── test-runner.js                # Custom test runner with reporting
 └── README.md                     # This file
 ```
@@ -51,6 +53,11 @@ npx mocha tests/bundlers.test.js
 npm run test:examples:controls
 ```
 
+### Run Puppeteer Window Example Tests
+```bash
+npm run test:puppeteer:windows
+```
+
 ### Run Tests with Options
 ```bash
 # Debug mode (enables sourcemaps)
@@ -132,6 +139,26 @@ Regression coverage for a representative set of `examples/controls/*` apps:
 - Verifies `/`, `/js/js.js`, and `/css/css.css` routes
 - Ensures HTML rendering works without `Accept-Encoding`
 
+### 8. Puppeteer Window Example Tests (`window-examples.puppeteer.test.js`)
+
+Browser-level interaction checks for selected window examples:
+
+- Minimize/restore window state (class toggling)
+- Tabbed panel tab switching visibility
+- Checkbox label toggling checked state
+- Date picker month header rendering
+
+### 9. Sass/CSS Controls E2E Tests (`sass-controls.e2e.test.js`)
+
+Server-level integration tests for controls that define `.scss` or `.sass` styles:
+
+- Verifies CSS + SCSS mixing order in bundled CSS output
+- Confirms indented Sass compiles and is removed from JS bundles
+- Checks inline CSS sourcemaps include original Sass/SCSS sources
+- Ensures mixed CSS + Sass output preserves order without emitting inaccurate sourcemaps
+
+Note: These tests are skipped if the `sass` dependency is not installed.
+
 ## Configuration Examples
 
 ### Basic Minification
@@ -205,12 +232,13 @@ Total Test Suites: 8
 🎉 All tests passed! The minification, compression, and sourcemap features are working correctly.
 ```
 
-## Environment Requirements
+## Environment Requirements
 
 - Node.js >= 15.0.0
 - Mocha test framework (included in package.json)
-- ESBuild (included in package.json)
-- zlib (built-in Node.js module)
+- ESBuild (included in package.json)
+- zlib (built-in Node.js module)
+- Puppeteer (dev dependency; set `PUPPETEER_EXECUTABLE_PATH` to a local Chrome/Chromium if downloads are disabled)
 
 ## Troubleshooting
 

package/tests/bundlers.test.js

@@ -16,29 +16,34 @@ this.timeout(30000); // Increase timeout for bundling operations
 
     beforeEach(async function() {
         // Create a temporary test JS file
-        testJsContent = `
-            // Test JavaScript with CSS
-            const css = \`
-                .test-class {
-                    color: red;
-                    font-size: 14px;
-                }
-            \`;
-
-            // Add CSS to document
-            const style = document.createElement('style');
-            style.textContent = css;
-            document.head.appendChild(style);
-
-            // Test function
-            function testFunction() {
-                console.log('Hello from test function');
-                return 'test result';
-            }
-
-            // Export for testing
-            module.exports = { testFunction };
-        `;
+        testJsContent = `
+            class Test_Class {
+                constructor() {}
+            }
+
+            Test_Class.css = \`
+                .test-class {
+                    color: red;
+                    font-size: 14px;
+                }
+            \`;
+
+            Test_Class.scss = \`
+                $accent-color: #33aacc;
+                .sass-class {
+                    color: $accent-color;
+                }
+            \`;
+
+            // Test function
+            function testFunction() {
+                console.log('Hello from test function');
+                return 'test result';
+            }
+
+            // Export for testing
+            module.exports = { testFunction, Test_Class };
+        `;
 
         testJsFile = path.join(__dirname, 'temp_test.js');
         await fs.writeFile(testJsFile, testJsContent);
@@ -242,14 +247,18 @@ this.timeout(30000); // Increase timeout for bundling operations
             assert.strictEqual(jsItem.extension, 'js');
             assert.strictEqual(cssItem.extension, 'css');
 
-            // Verify CSS was extracted
-            assert(cssItem.text.includes('.test-class'), 'CSS should contain the test class');
-            assert(cssItem.text.includes('color: red'), 'CSS should contain the color property');
-
-            // Verify JS no longer contains CSS
-            assert(!jsItem.text.includes('.test-class'), 'JS should not contain CSS after extraction');
-            assert(jsItem.text.includes('testFunction'), 'JS should still contain the test function');
-        });
+            // Verify CSS was extracted
+            assert(cssItem.text.includes('.test-class'), 'CSS should contain the test class');
+            assert(cssItem.text.includes('color: red'), 'CSS should contain the color property');
+            assert(cssItem.text.includes('.sass-class'), 'CSS should contain the SCSS class');
+            assert(cssItem.text.includes('#33aacc'), 'CSS should contain compiled SCSS color value');
+
+            // Verify JS no longer contains CSS
+            assert(!jsItem.text.includes('.test-class'), 'JS should not contain CSS after extraction');
+            assert(!jsItem.text.includes('.sass-class'), 'JS should not contain SCSS after extraction');
+            assert(!jsItem.text.includes('$accent-color'), 'JS should not contain SCSS variables');
+            assert(jsItem.text.includes('testFunction'), 'JS should still contain the test function');
+        });
 
         it('should handle debug mode with sourcemaps', async function() {
             const bundler = new Advanced_JS_Bundler_Using_ESBuild({
@@ -326,4 +335,4 @@ this.timeout(30000); // Increase timeout for bundling operations
             }
         });
     });
-});
+});

package/tests/content-analysis.test.js

@@ -46,23 +46,24 @@ describe('Content Analysis Tests', function() {
                 }
             }
 
-            // Some CSS embedded in JS
-            const css = \`
-                .test-class {
-                    background-color: #ffffff;
-                    border: 1px solid #cccccc;
-                    padding: 10px;
-                    margin: 5px;
-                }
-                .test-class:hover {
-                    background-color: #f0f0f0;
-                }
-            \`;
-
-            // Add CSS to document
-            const style = document.createElement('style');
-            style.textContent = css;
-            document.head.appendChild(style);
+            TestClass.css = \`
+                .test-class {
+                    background-color: #ffffff;
+                    border: 1px solid #cccccc;
+                    padding: 10px;
+                    margin: 5px;
+                }
+                .test-class:hover {
+                    background-color: #f0f0f0;
+                }
+            \`;
+
+            TestClass.scss = \`
+                $accent-color: #33aacc;
+                .sass-class {
+                    color: $accent-color;
+                }
+            \`;
 
             // Export
             module.exports = { testFunction, testObject, TestClass };
@@ -638,4 +639,4 @@ describe('Content Analysis Tests', function() {
             assert(brotliSize < originalSize * 0.5, 'Brotli should achieve >50% compression on repetitive content');
         });
     });
-});
+});

package/tests/error-handling.test.js

@@ -193,16 +193,18 @@ describe('Error Handling Tests', function() {
                 const bundler = new Advanced_JS_Bundler_Using_ESBuild();
 
                 // Create JS with malformed CSS
-                const malformedCssContent = `
-                    const css = \`
-                        .test-class {
-                            color: red;
-                            /* Missing closing brace
-                            background: blue
-                        \`;
-
-                    console.log('test');
-                `;
+                const malformedCssContent = `
+                    class Test_Class {}
+
+                    Test_Class.css = \`
+                        .test-class {
+                            color: red;
+                            /* Missing closing brace
+                            background: blue
+                        \`;
+
+                    console.log('test');
+                `;
 
                 const malformedFile = path.join(__dirname, 'temp_malformed.js');
                 await fs.writeFile(malformedFile, malformedCssContent);
@@ -743,4 +745,4 @@ describe('Error Handling Tests', function() {
             }
         });
     });
-});
+});

package/tests/observable-sse.test.js

@@ -9,8 +9,8 @@ const http = require('http');
 const path = require('path');
 const { get_free_port } = require('../port-utils');
 
-describe('Observable SSE Demo E2E Tests', function() {
-    this.timeout(30000); // Allow time for server startup and SSE streaming
+describe('Observable SSE Demo E2E Tests', function() {
+    this.timeout(90000); // Allow time for bundling + server startup + SSE streaming
 
     let server_process;
     let server_port;
@@ -140,9 +140,9 @@ describe('Observable SSE Demo E2E Tests', function() {
         // Wait for server to be ready
         await new Promise((resolve, reject) => {
             let output = '';
-            const timeout = setTimeout(() => {
-                reject(new Error('Server startup timeout'));
-            }, 15000);
+            const timeout = setTimeout(() => {
+                reject(new Error('Server startup timeout'));
+            }, 45000);
 
             server_process.stdout.on('data', (data) => {
                 output += data.toString();

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

@@ -0,0 +1,327 @@
+const assert = require('assert');
+const http = require('http');
+const path = require('path');
+const fs = require('fs').promises;
+const { describe, it, before } = require('mocha');
+
+const Server = require('../server');
+const { get_free_port } = require('../port-utils');
+
+const style_config = {
+    sourcemaps: {
+        enabled: true,
+        inline: true,
+        include_sources: true
+    }
+};
+
+let sass_available = true;
+try {
+    require('sass');
+} catch (error) {
+    sass_available = false;
+}
+
+const sass_mix_client_js = [
+    "const jsgui = require('jsgui3-html');",
+    "const { Control } = jsgui;",
+    "const { controls } = jsgui;",
+    "",
+    "class Sass_Mix_Control extends Control {",
+    "    constructor(spec = {}) {",
+    "        super(spec);",
+    "        const { context } = this;",
+    "        if (!spec.el) {",
+    "            const container = new controls.div({ context, class: 'sass-mix-control' });",
+    "            this.add(container);",
+    "        }",
+    "    }",
+    "}",
+    "",
+    "Sass_Mix_Control.css = `",
+    ".sass-mix-control { border-color: red; }",
+    "`;",
+    "",
+    "Sass_Mix_Control.scss = `",
+    "$accent_color: #ff7700;",
+    ".sass-mix-control {",
+    "  border-color: blue;",
+    "  background: $accent_color;",
+    "  &:hover { color: #222; }",
+    "}",
+    "`;",
+    "",
+    "controls.Sass_Mix_Control = Sass_Mix_Control;",
+    "module.exports = jsgui;",
+    ""
+].join('\n');
+
+const sass_only_client_js = [
+    "const jsgui = require('jsgui3-html');",
+    "const { Control } = jsgui;",
+    "const { controls } = jsgui;",
+    "",
+    "class Sass_Only_Control extends Control {",
+    "    constructor(spec = {}) {",
+    "        super(spec);",
+    "        const { context } = this;",
+    "        if (!spec.el) {",
+    "            const container = new controls.div({ context, class: 'sass-only-control' });",
+    "            this.add(container);",
+    "        }",
+    "    }",
+    "}",
+    "",
+    "Sass_Only_Control.sass = `",
+    "$primary_color: #336699",
+    ".sass-only-control",
+    "  color: $primary_color",
+    "  &:hover",
+    "    color: #000000",
+    "`;",
+    "",
+    "controls.Sass_Only_Control = Sass_Only_Control;",
+    "module.exports = jsgui;",
+    ""
+].join('\n');
+
+const sass_css_mix_client_js = [
+    "const jsgui = require('jsgui3-html');",
+    "const { Control } = jsgui;",
+    "const { controls } = jsgui;",
+    "",
+    "class Sass_Css_Mix_Control extends Control {",
+    "    constructor(spec = {}) {",
+    "        super(spec);",
+    "        const { context } = this;",
+    "        if (!spec.el) {",
+    "            const container = new controls.div({ context, class: 'sass-css-mix-control' });",
+    "            this.add(container);",
+    "        }",
+    "    }",
+    "}",
+    "",
+    "Sass_Css_Mix_Control.css = `",
+    ".sass-css-mix-control { padding: 4px; }",
+    "`;",
+    "",
+    "Sass_Css_Mix_Control.sass = `",
+    "$mix_color: #123456",
+    ".sass-css-mix-control",
+    "  color: $mix_color",
+    "`;",
+    "",
+    "controls.Sass_Css_Mix_Control = Sass_Css_Mix_Control;",
+    "module.exports = jsgui;",
+    ""
+].join('\n');
+
+const make_request = (url, { headers = {} } = {}) => {
+    return new Promise((resolve, reject) => {
+        const parsed_url = new URL(url);
+        const options = {
+            hostname: parsed_url.hostname,
+            port: parsed_url.port,
+            path: parsed_url.pathname,
+            method: 'GET',
+            headers: {
+                'User-Agent': 'JSGUI3-Sass-E2E/1.0',
+                ...headers
+            }
+        };
+
+        const req = http.request(options, (res) => {
+            const chunks = [];
+            res.on('data', (chunk) => chunks.push(chunk));
+            res.on('end', () => {
+                resolve({
+                    status_code: res.statusCode,
+                    headers: res.headers,
+                    body: Buffer.concat(chunks).toString('utf8')
+                });
+            });
+        });
+
+        req.on('error', reject);
+        req.setTimeout(15000, () => {
+            req.destroy();
+            reject(new Error('Request timeout'));
+        });
+        req.end();
+    });
+};
+
+const write_temp_client_file = async (file_name, file_contents) => {
+    const file_path = path.join(__dirname, file_name);
+    await fs.writeFile(file_path, file_contents, 'utf8');
+    return file_path;
+};
+
+const remove_file_if_exists = async (file_path) => {
+    try {
+        await fs.unlink(file_path);
+    } catch (error) {
+        if (error.code !== 'ENOENT') {
+            throw error;
+        }
+    }
+};
+
+const start_test_server = async ({ client_path, control_name }) => {
+    delete require.cache[require.resolve(client_path)];
+    const client_module = require(client_path);
+    const ctrl = client_module.controls && client_module.controls[control_name];
+    assert(ctrl, `Missing exported control jsgui.controls.${control_name} in ${client_path}`);
+
+    const server = new Server({
+        Ctrl: ctrl,
+        src_path_client_js: client_path,
+        name: `tests/${control_name}`,
+        debug: true,
+        style: style_config
+    });
+
+    server.allowed_addresses = ['127.0.0.1'];
+
+    await new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => reject(new Error('Publisher ready timeout')), 60000);
+        server.on('ready', () => {
+            clearTimeout(timeout);
+            resolve();
+        });
+    });
+
+    const port = await get_free_port();
+    await new Promise((resolve, reject) => {
+        server.start(port, (err) => (err ? reject(err) : resolve()));
+    });
+
+    return { server, port };
+};
+
+const close_server = async (server) => {
+    await new Promise((resolve) => server.close(resolve));
+};
+
+const extract_inline_sourcemap = (css_text) => {
+    const sourcemap_match = css_text.match(/\/\*# sourceMappingURL=data:application\/json;base64,([A-Za-z0-9+/=]+)\s*\*\//);
+    assert(sourcemap_match, 'Expected inline CSS sourcemap comment');
+    const sourcemap_json = Buffer.from(sourcemap_match[1], 'base64').toString('utf8');
+    return JSON.parse(sourcemap_json);
+};
+
+const sourcemap_contains = (sourcemap, needle) => {
+    const sources_content = Array.isArray(sourcemap.sourcesContent) ? sourcemap.sourcesContent : [];
+    return sources_content.some((content) => typeof content === 'string' && content.includes(needle));
+};
+
+describe('Sass/CSS Control E2E Tests', function() {
+    this.timeout(90000);
+
+    before(function() {
+        if (!sass_available) {
+            this.skip();
+        }
+    });
+
+    it('should compile mixed css + scss in order with sourcemaps', async 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'
+        });
+
+        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;
+            const red_index = css_text.indexOf('border-color: red');
+            const blue_index = css_text.indexOf('border-color: blue');
+            assert(red_index !== -1, 'Expected CSS from .css template literal');
+            assert(blue_index !== -1, 'Expected CSS from .scss template literal');
+            assert(red_index < blue_index, 'Expected .css output to precede .scss output');
+            assert(css_text.includes('background: #ff7700'), 'Expected SCSS variable compilation');
+            assert(css_text.includes('.sass-mix-control:hover'), 'Expected nested SCSS 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, '$accent_color'), 'Expected sourcemap to include SCSS source content');
+            assert(sourcemap_contains(css_sourcemap, 'border-color: red'), 'Expected sourcemap to include CSS source content');
+
+            const js_response = await make_request(`${base_url}/js/js.js`);
+            assert.strictEqual(js_response.status_code, 200);
+            assert(!js_response.body.includes('border-color: red'), 'Expected CSS template literal to be stripped from JS');
+            assert(!js_response.body.includes('$accent_color'), 'Expected SCSS template literal to be stripped from JS');
+        } finally {
+            await close_server(server);
+            await remove_file_if_exists(client_path);
+        }
+    });
+
+    it('should compile indented sass with sourcemaps', async 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'
+        });
+
+        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('.sass-only-control'), 'Expected Sass selector output');
+            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');
+
+            const js_response = await make_request(`${base_url}/js/js.js`);
+            assert.strictEqual(js_response.status_code, 200);
+            assert(!js_response.body.includes('$primary_color'), 'Expected Sass template literal to be stripped from JS');
+        } finally {
+            await close_server(server);
+            await remove_file_if_exists(client_path);
+        }
+    });
+
+    it('should compile mixed css + sass in order without inaccurate sourcemaps', async 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'
+        });
+
+        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;
+            const padding_index = css_text.indexOf('padding: 4px');
+            const color_index = css_text.indexOf('color: #123456');
+            assert(padding_index !== -1, 'Expected CSS output from .css template literal');
+            assert(color_index !== -1, 'Expected Sass output from .sass template literal');
+            assert(padding_index < color_index, 'Expected .css output to precede .sass output');
+            assert(!css_text.includes('/*# sourceMappingURL='), 'Expected no inline sourcemap for mixed css + sass compilation');
+
+            const js_response = await make_request(`${base_url}/js/js.js`);
+            assert.strictEqual(js_response.status_code, 200);
+            assert(!js_response.body.includes('padding: 4px'), 'Expected CSS template literal to be stripped from JS');
+            assert(!js_response.body.includes('$mix_color'), 'Expected Sass template literal to be stripped from JS');
+        } finally {
+            await close_server(server);
+            await remove_file_if_exists(client_path);
+        }
+    });
+});

package/tests/test-runner.js

@@ -31,7 +31,9 @@ class TestRunner {
             'content-analysis.test.js',
             'performance.test.js',
             'error-handling.test.js',
-            'examples-controls.e2e.test.js'
+            'examples-controls.e2e.test.js',
+            'sass-controls.e2e.test.js',
+            'window-examples.puppeteer.test.js'
         ];
     }