test(webui): verify applied light overrides and the U5 shot recipe (#1873)

packages/webui/tests/appearance-browser.test.mjs

@@ -28,6 +28,32 @@ const state = b => b.evaluate('JSON.parse(JSON.stringify(window.MosaicAppearance
 const stored = (b, key) => b.evaluate(`localStorage.getItem(${JSON.stringify(key)})`);
 const inline = b => b.evaluate('document.documentElement.getAttribute("style")');
 
+test('an organization browser override draws system and explicit light from the light colours, including after reload', { timeout: 90000 }, async t => {
+  const { b, f } = await open(t, { saved: { theme: 'rosewood', mode: 'dark' } });
+  const rgb = hex => `rgb(${hex.slice(1).match(/../g).map(n => parseInt(n, 16)).join(', ')})`;
+  const theme = THEMES.find(t => t.id === 'rosewood');
+  for (const scheme of ['light', 'dark']) {
+    await b.call('Emulation.setEmulatedMedia', { features: [{ name: 'prefers-color-scheme', value: scheme }] });
+    for (const mode of ['system', 'light']) {
+      await b.evaluate(`window.MosaicAppearance.set({ mode: ${JSON.stringify(mode)} })`);
+      // Read the actual scoped storage on a new document, not only the in-memory choice.
+      await b.navigate(`${f.base}/?appearance=${scheme}-${mode}`);
+      await b.evaluate('window.MosaicAppearance.ready.then(() => true)');
+      const expected = mode === 'system' ? scheme : mode;
+      const drawn = await b.evaluate(`({
+        palette: document.documentElement.dataset.palette,
+        mode: document.documentElement.getAttribute('data-mode'),
+        canvas: getComputedStyle(document.body).backgroundColor,
+        source: window.MosaicAppearance.state().modeSource,
+        override: JSON.parse(localStorage.getItem('mosaic-console-appearance:acme')),
+      })`);
+      assert.deepEqual(drawn, { palette: 'rosewood', mode: mode === 'system' ? null : mode,
+        canvas: rgb(theme.tokens[expected]['--canvas']), source: 'browser', override: { mode } }, `${scheme}/${mode}`);
+      t.diagnostic(JSON.stringify({ scheme, requested: mode, ...drawn }));
+    }
+  }
+});
+
 test('the built-in default is drawn by tokens.css alone: Harbor, dark, no inline colour, no warning, no cue, nothing stored', { timeout: 90000 }, async t => {
   const { b } = await open(t, { org: null });
   assert.equal(await b.evaluate('document.documentElement.dataset.palette'), 'harbor');

packages/webui/tests/side-by-side-browser.test.mjs

@@ -53,6 +53,31 @@ const title = key => `(document.querySelector("#pane-${key} [data-pane-ttl]")?.t
 const query = '(() => Object.fromEntries(new URLSearchParams(location.hash.split("?")[1] || "")))()';
 const pick = (b, key, value) => b.evaluate(`(() => { const s = document.querySelector("#pane-${key}-pick"); s.value = ${JSON.stringify(value)}; if (s.value !== ${JSON.stringify(value)}) throw Error("no option " + ${JSON.stringify(value)}); s.dispatchEvent(new Event("change", { bubbles: true })); })()`);
 
+test('side by side stays dark by default under light media, and applying system or light really draws light', async t => {
+  const { b, wait, base } = await open(t);
+  await wait(`${title('a')}.length > 0 && ${title('b')}.length > 0`);
+  await b.evaluate('window.MosaicAppearance.ready.then(() => true)');
+  await b.call('Emulation.setEmulatedMedia', { features: [{ name: 'prefers-color-scheme', value: 'light' }] });
+  const drawn = () => b.evaluate(`({ mode: document.documentElement.getAttribute('data-mode'),
+    palette: document.documentElement.dataset.palette, canvas: getComputedStyle(document.body).backgroundColor,
+    source: window.MosaicAppearance.state().modeSource })`);
+  assert.deepEqual(await drawn(), { mode: 'dark', palette: 'rosewood', canvas: 'rgb(26, 20, 23)', source: 'default' });
+  for (const mode of ['system', 'light']) {
+    // U5's corrected shot recipe seeds the per-org key, then loads a fresh document.
+    const before = await drawn();
+    await b.evaluate(`localStorage.setItem('mosaic-console-appearance:ddigital', JSON.stringify({ mode: ${JSON.stringify(mode)} }))`);
+    assert.deepEqual(await drawn(), before, 'writing storage alone does not apply an override to this document');
+    await b.navigate('about:blank');
+    await b.navigate(`${base}?appearance=${mode}#/orgs/ddigital/side-by-side`);
+    await wait(`${title('a')}.length > 0 && ${title('b')}.length > 0`);
+    await b.evaluate('window.MosaicAppearance.ready.then(() => true)');
+    const result = await drawn();
+    assert.deepEqual(result, { mode: mode === 'system' ? null : 'light', palette: 'rosewood',
+      canvas: 'rgb(246, 243, 245)', source: 'browser' });
+    t.diagnostic(JSON.stringify({ scheme: 'light', requested: mode, ...result }));
+  }
+});
+
 test('the Side by side nav item opens two panes with different organizations, and the URL restores both after a reload', async t => {
   const state = { flip: false, seen: [] };
   const { b, base, wait } = await open(t, { hash: '#/orgs/ddigital/organization', state });