jsgui3-server 0.0.148 → 0.0.149

package/tests/fixtures/resource-monitor-client.js

@@ -0,0 +1,319 @@
+const jsgui = require('jsgui3-client');
+const Active_HTML_Document = require('../../controls/Active_HTML_Document');
+
+const { controls } = jsgui;
+const { Button } = controls;
+
+class Resource_Monitor_App extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'resource_monitor_app';
+        super(spec);
+
+        const { context } = this;
+
+        this._event_source = null;
+        this._events_count = 0;
+
+        const compose = () => {
+            const monitor_window = new controls.Window({
+                context,
+                title: 'Resource Monitor',
+                pos: [24, 24]
+            });
+            monitor_window.size = [560, 360];
+
+            const root = new controls.div({ context });
+            root.dom.attributes.id = 'resource-monitor-root';
+
+            const heading = new controls.h3({ context });
+            heading.add('Server Resource Control');
+            root.add(heading);
+
+            const controls_row = new controls.div({ context });
+            controls_row.dom.attributes.class = 'controls-row';
+
+            const start_button = new Button({ context, text: 'Start' });
+            start_button.dom.attributes.id = 'resource-start-btn';
+            controls_row.add(start_button);
+
+            const stop_button = new Button({ context, text: 'Stop' });
+            stop_button.dom.attributes.id = 'resource-stop-btn';
+            controls_row.add(stop_button);
+
+            const restart_button = new Button({ context, text: 'Restart' });
+            restart_button.dom.attributes.id = 'resource-restart-btn';
+            controls_row.add(restart_button);
+
+            const refresh_button = new Button({ context, text: 'Refresh' });
+            refresh_button.dom.attributes.id = 'resource-refresh-btn';
+            controls_row.add(refresh_button);
+
+            root.add(controls_row);
+
+            const state_line = new controls.div({ context });
+            state_line.dom.attributes.class = 'state-line';
+
+            const state_label = new controls.span({ context });
+            state_label.add('State: ');
+            state_line.add(state_label);
+
+            const state_value = new controls.span({ context });
+            state_value.dom.attributes.id = 'resource-state';
+            state_value.dom.attributes.class = 'resource-state-value';
+            state_value.add('unknown');
+            state_line.add(state_value);
+
+            root.add(state_line);
+
+            const events_line = new controls.div({ context });
+            events_line.dom.attributes.class = 'events-line';
+
+            const events_count_label = new controls.span({ context });
+            events_count_label.add('Events: ');
+            events_line.add(events_count_label);
+
+            const events_count_value = new controls.span({ context });
+            events_count_value.dom.attributes.id = 'resource-events-count';
+            events_count_value.dom.attributes.class = 'resource-events-count-value';
+            events_count_value.add('0');
+            events_line.add(events_count_value);
+
+            root.add(events_line);
+
+            const events_title = new controls.h4({ context });
+            events_title.add('Latest Events');
+            root.add(events_title);
+
+            const events_list = new controls.ul({ context });
+            events_list.dom.attributes.id = 'resource-events-list';
+            root.add(events_list);
+
+            monitor_window.inner.add(root);
+            this.body.add(monitor_window);
+        };
+
+        if (!spec.el) {
+            compose();
+        }
+    }
+
+    _set_state_text(next_state) {
+        const state_element = document.getElementById('resource-state');
+        if (state_element) {
+            state_element.textContent = String(next_state || 'unknown');
+        }
+    }
+
+    _append_event(event_name, payload = {}) {
+        this._events_count += 1;
+
+        const events_count_element = document.getElementById('resource-events-count');
+        if (events_count_element) {
+            events_count_element.textContent = String(this._events_count);
+        }
+
+        const events_list_element = document.getElementById('resource-events-list');
+        if (!events_list_element) {
+            return;
+        }
+
+        const list_item = document.createElement('li');
+        const summary = payload && typeof payload === 'object'
+            ? `${event_name}: ${payload.resourceName || payload.name || ''} ${payload.from || ''} -> ${payload.to || ''}`.trim()
+            : event_name;
+        list_item.textContent = summary;
+        events_list_element.prepend(list_item);
+
+        while (events_list_element.childElementCount > 12) {
+            events_list_element.removeChild(events_list_element.lastChild);
+        }
+    }
+
+    async _read_status() {
+        const response = await fetch('/api/resource/status');
+        const status_result = await response.json();
+        if (status_result && status_result.status && status_result.status.state) {
+            this._set_state_text(status_result.status.state);
+        }
+
+        window.__resource_client_debug = window.__resource_client_debug || {
+            api_calls: [],
+            sse_events: []
+        };
+        window.__resource_client_debug.api_calls.push({
+            route: '/api/resource/status',
+            timestamp: Date.now(),
+            state: status_result && status_result.status ? status_result.status.state : null
+        });
+
+        return status_result;
+    }
+
+    async _invoke_action(action_name) {
+        const response = await fetch(`/api/resource/${action_name}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({})
+        });
+
+        const action_result = await response.json();
+
+        window.__resource_client_debug = window.__resource_client_debug || {
+            api_calls: [],
+            sse_events: []
+        };
+        window.__resource_client_debug.api_calls.push({
+            route: `/api/resource/${action_name}`,
+            timestamp: Date.now(),
+            response_state: action_result && action_result.status ? action_result.status.state : null
+        });
+
+        await this._read_status();
+        return action_result;
+    }
+
+    _bind_buttons() {
+        const start_button = document.getElementById('resource-start-btn');
+        if (start_button) {
+            start_button.addEventListener('click', () => this._invoke_action('start').catch(console.error));
+        }
+
+        const stop_button = document.getElementById('resource-stop-btn');
+        if (stop_button) {
+            stop_button.addEventListener('click', () => this._invoke_action('stop').catch(console.error));
+        }
+
+        const restart_button = document.getElementById('resource-restart-btn');
+        if (restart_button) {
+            restart_button.addEventListener('click', () => this._invoke_action('restart').catch(console.error));
+        }
+
+        const refresh_button = document.getElementById('resource-refresh-btn');
+        if (refresh_button) {
+            refresh_button.addEventListener('click', () => this._read_status().catch(console.error));
+        }
+    }
+
+    _bind_sse() {
+        this._event_source = new EventSource('/events');
+
+        const observed_event_names = [
+            'resource_state_change',
+            'crashed',
+            'unhealthy',
+            'unreachable',
+            'recovered'
+        ];
+
+        for (const event_name of observed_event_names) {
+            this._event_source.addEventListener(event_name, (event) => {
+                let payload = {};
+                if (event && typeof event.data === 'string' && event.data.length > 0) {
+                    try {
+                        payload = JSON.parse(event.data);
+                    } catch {
+                        payload = { raw: event.data };
+                    }
+                }
+
+                if (event_name === 'resource_state_change' && payload.to) {
+                    this._set_state_text(payload.to);
+                }
+
+                this._append_event(event_name, payload);
+
+                window.__resource_client_debug = window.__resource_client_debug || {
+                    api_calls: [],
+                    sse_events: []
+                };
+                window.__resource_client_debug.sse_events.push({
+                    event_name,
+                    payload,
+                    timestamp: Date.now()
+                });
+            });
+        }
+    }
+
+    activate() {
+        if (this.__active) {
+            return;
+        }
+
+        super.activate();
+
+        this._bind_buttons();
+        this._bind_sse();
+
+        this._read_status().catch(console.error);
+
+        window.addEventListener('beforeunload', () => {
+            if (this._event_source) {
+                this._event_source.close();
+                this._event_source = null;
+            }
+        });
+    }
+}
+
+Resource_Monitor_App.css = `
+body {
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(145deg, #1f2937, #111827);
+    color: #f9fafb;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+#resource-monitor-root {
+    padding: 14px;
+}
+
+#resource-monitor-root h3,
+#resource-monitor-root h4 {
+    margin: 0 0 10px 0;
+}
+
+.controls-row {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 10px;
+}
+
+.controls-row button {
+    min-width: 86px;
+}
+
+.state-line,
+.events-line {
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+
+#resource-events-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    max-height: 180px;
+    overflow: auto;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    background: rgba(17, 24, 39, 0.8);
+}
+
+#resource-events-list li {
+    font-size: 12px;
+    line-height: 1.4;
+    padding: 6px 8px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+#resource-events-list li:last-child {
+    border-bottom: none;
+}
+`;
+
+controls.Resource_Monitor_App = Resource_Monitor_App;
+module.exports = jsgui;

package/tests/helpers/puppeteer-e2e-harness.js

@@ -0,0 +1,317 @@
+const assert = require('assert');
+const path = require('path');
+
+const Server = require('../../server');
+const { get_free_port } = require('../../port-utils');
+
+const default_viewport = {
+    width: 1366,
+    height: 900
+};
+
+const ensure_puppeteer_module = () => {
+    try {
+        return require('puppeteer');
+    } catch {
+        return null;
+    }
+};
+
+const launch_puppeteer_browser = async (puppeteer_module, launch_options = {}) => {
+    const resolved_puppeteer = puppeteer_module || ensure_puppeteer_module();
+    if (!resolved_puppeteer) {
+        throw new Error('Puppeteer is unavailable in this environment.');
+    }
+
+    const normalized_options = {
+        headless: true,
+        args: ['--no-sandbox', '--disable-setuid-sandbox'],
+        ...launch_options
+    };
+
+    if (!normalized_options.executablePath && process.env.PUPPETEER_EXECUTABLE_PATH) {
+        normalized_options.executablePath = process.env.PUPPETEER_EXECUTABLE_PATH;
+    }
+
+    return resolved_puppeteer.launch(normalized_options);
+};
+
+const start_control_example_server = async ({
+    examples_root_path,
+    dir_name,
+    ctrl_name,
+    server_name_prefix = 'examples/controls'
+}) => {
+    const example_dir_path = path.join(examples_root_path, dir_name);
+    const example_client_path = path.join(example_dir_path, 'client.js');
+
+    const jsgui_module = require(example_client_path);
+    const ctrl_constructor = jsgui_module.controls && jsgui_module.controls[ctrl_name];
+    assert(ctrl_constructor, `Missing exported control jsgui.controls.${ctrl_name} in ${example_client_path}`);
+
+    const server_instance = new Server({
+        Ctrl: ctrl_constructor,
+        src_path_client_js: example_client_path,
+        name: `${server_name_prefix}/${dir_name}`
+    });
+
+    server_instance.allowed_addresses = ['127.0.0.1'];
+
+    await new Promise((resolve, reject) => {
+        const timeout_handle = setTimeout(() => reject(new Error('Publisher ready timeout')), 60000);
+        server_instance.on('ready', () => {
+            clearTimeout(timeout_handle);
+            resolve();
+        });
+    });
+
+    const port = await get_free_port();
+
+    await new Promise((resolve, reject) => {
+        server_instance.start(port, (error) => {
+            if (error) reject(error);
+            else resolve();
+        });
+    });
+
+    return {
+        server_instance,
+        port,
+        example_client_path
+    };
+};
+
+const stop_server_instance = async (server_instance) => {
+    if (!server_instance) {
+        return;
+    }
+
+    await new Promise((resolve) => {
+        server_instance.close(() => resolve());
+    });
+};
+
+const attach_page_probe = (page) => {
+    const probe = {
+        console_errors: [],
+        page_errors: [],
+        request_failures: []
+    };
+
+    const console_handler = (message) => {
+        if (message.type() === 'error') {
+            probe.console_errors.push(message.text());
+        }
+    };
+
+    const page_error_handler = (error) => {
+        probe.page_errors.push(error instanceof Error ? error.message : String(error));
+    };
+
+    const request_failed_handler = (request) => {
+        const failure = request.failure();
+        probe.request_failures.push({
+            url: request.url(),
+            method: request.method(),
+            error_text: failure ? failure.errorText : 'unknown'
+        });
+    };
+
+    page.on('console', console_handler);
+    page.on('pageerror', page_error_handler);
+    page.on('requestfailed', request_failed_handler);
+
+    probe.detach = () => {
+        page.off('console', console_handler);
+        page.off('pageerror', page_error_handler);
+        page.off('requestfailed', request_failed_handler);
+    };
+
+    return probe;
+};
+
+const assert_clean_page_probe = (probe, {
+    allowed_console_error_patterns = [],
+    allowed_page_error_patterns = [],
+    allowed_request_failure_patterns = []
+} = {}) => {
+    const is_allowed_message = (message, allowed_patterns) => {
+        return allowed_patterns.some((pattern) => {
+            if (pattern instanceof RegExp) {
+                return pattern.test(message);
+            }
+            return String(message).includes(String(pattern));
+        });
+    };
+
+    const blocked_console_errors = probe.console_errors.filter((message) => {
+        return !is_allowed_message(message, allowed_console_error_patterns);
+    });
+
+    const blocked_page_errors = probe.page_errors.filter((message) => {
+        return !is_allowed_message(message, allowed_page_error_patterns);
+    });
+
+    const blocked_request_failures = probe.request_failures.filter((failure_item) => {
+        const label = `${failure_item.method} ${failure_item.url} ${failure_item.error_text}`;
+        return !is_allowed_message(label, allowed_request_failure_patterns);
+    });
+
+    assert.strictEqual(
+        blocked_console_errors.length,
+        0,
+        `Unexpected browser console errors: ${blocked_console_errors.join(' | ')}`
+    );
+    assert.strictEqual(
+        blocked_page_errors.length,
+        0,
+        `Unexpected browser page errors: ${blocked_page_errors.join(' | ')}`
+    );
+    assert.strictEqual(
+        blocked_request_failures.length,
+        0,
+        `Unexpected browser request failures: ${JSON.stringify(blocked_request_failures)}`
+    );
+};
+
+const open_page = async (browser_instance, target_url, options = {}) => {
+    const viewport = options.viewport || default_viewport;
+
+    const page = await browser_instance.newPage();
+    await page.setViewport(viewport);
+
+    const page_probe = attach_page_probe(page);
+
+    await page.goto(target_url, {
+        waitUntil: options.wait_until || 'load'
+    });
+
+    return {
+        page,
+        page_probe
+    };
+};
+
+const set_input_value_with_events = async (
+    page,
+    selector,
+    next_value,
+    event_names = ['input', 'change']
+) => {
+    await page.$eval(selector, (element, value, events) => {
+        element.value = String(value);
+        for (const event_name of events) {
+            element.dispatchEvent(new Event(event_name, { bubbles: true }));
+        }
+    }, next_value, event_names);
+};
+
+const wait_for_text_content = async (page, selector, expected_text_or_regex, timeout_ms = 6000) => {
+    if (expected_text_or_regex instanceof RegExp) {
+        await page.waitForFunction(
+            (selector_arg, regex_source, regex_flags) => {
+                const element = document.querySelector(selector_arg);
+                if (!element) return false;
+                const value = (element.textContent || '').trim();
+                const expected_regex = new RegExp(regex_source, regex_flags);
+                return expected_regex.test(value);
+            },
+            { timeout: timeout_ms },
+            selector,
+            expected_text_or_regex.source,
+            expected_text_or_regex.flags
+        );
+        return;
+    }
+
+    const expected_text = String(expected_text_or_regex);
+    await page.waitForFunction(
+        (selector_arg, expected_text_arg) => {
+            const element = document.querySelector(selector_arg);
+            if (!element) return false;
+            return (element.textContent || '').trim() === expected_text_arg;
+        },
+        { timeout: timeout_ms },
+        selector,
+        expected_text
+    );
+};
+
+const drag_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: 12 });
+    await page.mouse.up();
+};
+
+const run_interaction_story = async ({
+    page,
+    story_name,
+    steps
+}) => {
+    assert(Array.isArray(steps) && steps.length > 0, 'Interaction story requires at least one step');
+
+    const step_results = [];
+
+    for (let index = 0; index < steps.length; index += 1) {
+        const step_spec = steps[index] || {};
+        const step_name = step_spec.name || `step_${index + 1}`;
+        const started_at = Date.now();
+
+        try {
+            if (typeof step_spec.run === 'function') {
+                await step_spec.run(page);
+            }
+            if (typeof step_spec.assert === 'function') {
+                await step_spec.assert(page);
+            }
+
+            step_results.push({
+                step_name,
+                duration_ms: Date.now() - started_at
+            });
+        } catch (error) {
+            error.message = `[${story_name} :: ${step_name}] ${error.message}`;
+            throw error;
+        }
+    }
+
+    return step_results;
+};
+
+const wait_for_condition = async (condition_fn, timeout_ms = 6000, interval_ms = 25) => {
+    const started_at = Date.now();
+
+    while ((Date.now() - started_at) <= timeout_ms) {
+        const condition_result = await condition_fn();
+        if (condition_result) {
+            return true;
+        }
+        await new Promise((resolve) => setTimeout(resolve, interval_ms));
+    }
+
+    return false;
+};
+
+module.exports = {
+    ensure_puppeteer_module,
+    launch_puppeteer_browser,
+    start_control_example_server,
+    stop_server_instance,
+    open_page,
+    attach_page_probe,
+    assert_clean_page_probe,
+    set_input_value_with_events,
+    wait_for_text_content,
+    drag_by,
+    run_interaction_story,
+    wait_for_condition
+};