diff options
| author | tanaka takashi <isazaka@gmail.com> | 2026-09-01 20:38:17 +0900 |
|---|---|---|
| committer | tanaka takashi <isazaka@gmail.com> | 2026-09-01 20:38:17 +0900 |
| commit | bb06e0e58dcb90eceede6f0b05743fdccc8f51af (patch) | |
| tree | aa239db6e1a1d695c651c363702182c24b57c4cd /tests/ui-smoke-tests.js | |
| parent | 55e581bab9b600e7c070ec596d3109fc897d2d86 (diff) | |
fix: options page never ran due to missing export; unify settings handling
Root cause of the broken options page (audit finding):
- options.js imported CONTEXT_PRESETS from settings-schema.js, but that
module never exported it. A named-import mismatch in ES modules is a
SyntaxError, so the entire options page script silently never executed.
This is why the settings page rendered its static HTML but was dead:
no language options, no model list, no save handler.
Fixes
- options.js: import CONTEXT_PRESETS from shared/constants.js (where it
is defined) instead of settings-schema.js
- options.js: save flow now merges the validated form over the stored
settings (sanitize again) so fields saved by the popup in the meantime
are preserved instead of being dropped
- popup.js: populate language options inside loadSettings and sanitize
settings before every save, matching the options page behavior
- settings-schema.js: add normalizeOllamaHost() and use it in
sanitizeSettings so trailing-slash variants are stored identically
- content.js: consolidate popover state - remove the duplicate outer
lastSourceText and keep regenerate source inside the popover module;
regenerate now calls portClient.translate directly
Test hardening (would have caught the original bug)
- tests/ui-smoke-tests.js: new smoke tests that install a fake browser
API, run the real popup.js / options.js page scripts as ES modules
against representative markup, and assert that language options are
populated, the model select is filled from the mocked model list, and
the stored host is reflected. The runner result elements are preserved
across the sandboxed DOM swap
- test.html: include the smoke test module
Results: 73 passed, 0 failed (71 existing + 2 smoke). dist rebuilt.
Diffstat (limited to 'tests/ui-smoke-tests.js')
| -rw-r--r-- | tests/ui-smoke-tests.js | 156 |
1 files changed, 156 insertions, 0 deletions
diff --git a/tests/ui-smoke-tests.js b/tests/ui-smoke-tests.js new file mode 100644 index 0000000..84fe4c4 --- /dev/null +++ b/tests/ui-smoke-tests.js @@ -0,0 +1,156 @@ +/** + * UI smoke tests: load the real page scripts (popup.js / options.js) as ES + * modules against a mocked browser API and verify that they initialize the + * DOM. This catches import/export mismatches that pure unit tests miss + * (e.g. a named import that the module does not export -> SyntaxError and + * the whole page script never runs). + */ + +import { LANGUAGES } from '../src/shared/constants.js'; + +const { describe, it, assertTrue, assertEqual } = window.TestRunner; + +/** + * Install a fake `browser` global before importing page scripts. + */ +function installFakeBrowser() { + const data = new Map(); + const listeners = []; + const local = { + async get(defaults) { + const result = {}; + for (const key of Object.keys(defaults)) { + result[key] = data.has(key) ? data.get(key) : defaults[key]; + } + return result; + }, + async set(obj) { + const changes = {}; + for (const [key, value] of Object.entries(obj)) { + changes[key] = { oldValue: data.get(key), newValue: value }; + data.set(key, value); + } + for (const listener of listeners) listener(changes, 'local'); + } + }; + globalThis.browser = { + storage: { + local, + onChanged: { + addListener(fn) { + listeners.push(fn); + } + } + }, + runtime: { + /** @returns {Promise<{ok: boolean, models?: string[]}>} */ + sendMessage: async () => ({ ok: true, models: ['fake-model'] }), + openOptionsPage: () => {} + } + }; + return globalThis.browser; +} + +/** + * Run an ES module script by importing it with a cache-busting query. + * The page's markup is added inside a sandbox container; the script runs, + * async init settles, assertions are collected via a probe callback, and + * finally the sandbox is removed and the runner's own elements restored. + * @param {string} scriptPath + * @param {string} markup + * @param {() => *} probe assertions to run while the sandbox is attached + */ +async function runPageScript(scriptPath, markup, probe) { + installFakeBrowser(); + // Preserve the runner's result elements across the DOM swap. + const results = document.getElementById('results'); + const summary = document.getElementById('summary'); + const resultsParent = results ? results.parentNode : null; + const summaryParent = summary ? summary.parentNode : null; + const resultsNext = results ? results.nextSibling : null; + const summaryNext = summary ? summary.nextSibling : null; + + const sandbox = document.createElement('div'); + sandbox.id = 'smoke-sandbox'; + sandbox.innerHTML = markup; + document.body.append(sandbox); + + try { + // Import with cache-buster so repeated runs re-execute the script. + await import(`${scriptPath}?smoke=${Date.now()}-${Math.random().toString(36).slice(2)}`); + // Let async init settle. + await new Promise((resolve) => setTimeout(resolve, 50)); + return probe(); + } finally { + sandbox.remove(); + if (results && resultsParent) resultsParent.insertBefore(results, resultsNext); + if (summary && summaryParent) summaryParent.insertBefore(summary, summaryNext); + // Reset the fake browser so later tests use the real API if needed. + delete globalThis.browser; + } +} + +describe('popup page script smoke', () => { + it('initializes language options and model select from markup', async () => { + const r = await runPageScript('../src/popup/popup.js', ` + <input type="checkbox" id="enabled-toggle"> + <select id="model-select"></select> + <button id="reload-models"></button> + <p id="model-status" hidden></p> + <select id="language-select"></select> + <button id="open-options"></button> + `, () => ({ + langOptions: document.getElementById('language-select').options.length, + langValue: document.getElementById('language-select').value, + modelOptions: document.getElementById('model-select').options.length, + firstModel: document.getElementById('model-select').options[0]?.textContent ?? null + })); + assertEqual(r.langOptions, LANGUAGES.length); + assertEqual(r.langValue, 'ja'); // default target language + assertTrue(r.modelOptions > 0, 'model select should be populated'); + assertEqual(r.firstModel, 'fake-model'); + }); +}); + +describe('options page script smoke', () => { + it('initializes language options and loads models into the select', async () => { + const r = await runPageScript('../src/options/options.js', ` + <form id="options-form"> + <input type="checkbox" id="enabled"> + <input type="text" id="ollama-host"> + <select id="model"></select> + <button id="reload-models" type="button"></button> + <p id="model-status" hidden></p> + <select id="target-language"></select> + <select id="thinking"> + <option value="off">off</option><option value="on">on</option> + <option value="low">low</option><option value="medium">medium</option> + <option value="high">high</option> + </select> + <input type="range" id="temperature" min="0" max="2" step="0.1"> + <output id="temperature-value"></output> + <input type="range" id="context-length" min="0" max="5" step="1"> + <output id="context-length-value"></output> + <input type="radio" name="seed-mode" value="random"> + <input type="radio" name="seed-mode" value="fixed"> + <div id="seed-value-row"></div> + <input type="number" id="seed-value"> + <textarea id="user-system-prompt"></textarea> + <div id="advanced-fields"></div> + <textarea id="stop"></textarea> + <span id="save-status"></span> + </form> + `, () => ({ + langOptions: document.getElementById('target-language').options.length, + langValue: document.getElementById('target-language').value, + modelOptions: document.getElementById('model').options.length, + firstModel: document.getElementById('model').options[0]?.textContent ?? null, + host: document.getElementById('ollama-host').value + })); + assertEqual(r.langOptions, LANGUAGES.length); + assertEqual(r.langValue, 'ja'); + assertTrue(r.modelOptions > 0, 'model select should be populated by loadModels'); + assertEqual(r.firstModel, 'fake-model'); + assertEqual(r.host, 'http://localhost:11434'); + }); +});
\ No newline at end of file |
