test: add reviewed 200 percent help goldens

Capture the general-settings help surface at 390 CSS pixels and DPR 2 in
both themes, assert its viewport contract, and teach the golden runner to
select a renderer scale per scenario.

Issue: #86
User-Visible: no

custom_components/houseplan/frontend/houseplan-assets/editor-Ry5eRqA9.js

@@ -1,4 +1,4 @@
-globalThis.__HOUSEPLAN_BUILD_FINGERPRINT__="aedf12cc2ee13fb750d6b78c875fe0fb41cad372eff12d24406f3d9a36e11101";import{b as e,l as o,t,d3 as s,A as a,d4 as i,d5 as l,d6 as n,E as r,c}from"./houseplan-card-Kg1OpfZE.js";class f extends e{constructor(){super(...arguments),this._spaces=null,this._spacesLoading=!1,this._spacesAuthoritative=!1}setConfig(e){this._config=e}async _loadSpaces(){if(!this._spaces&&!this._spacesLoading&&this.hass){this._spacesLoading=!0;try{const e=await this.hass.callWS({type:"houseplan/config/get"});this._spaces=(e?.config?.spaces||[]).map(e=>({value:e.id,label:e.title||e.id})),this._spacesAuthoritative=!0}catch{this._spaces=[],this._spacesAuthoritative=!1}finally{this._spacesLoading=!1}}}get _lang(){return o(this.hass,this._config?.language)}get _floorToken(){const e=this._config?.floor;return"number"==typeof e?`__houseplan_yaml_floor_index__:${String(e)}`:null}get _formData(){const e={...this._config},o=this._floorToken;return o?e.floor=o:Object.prototype.hasOwnProperty.call(e,"floor")||(e.floor=""),e}get _schema(){const e=this._spaces||[],o=this._lang,a=[{value:"",label:t(o,"editor.floor_none")}],i=this._floorToken;i&&a.push({value:i,label:t(o,"editor.floor_index",{index:String(this._config?.floor)})});const l="string"==typeof this._config?.floor?this._config.floor:"";l&&!e.some(e=>e.value===l)&&a.push({value:l,label:l}),a.push(...e);const n="string"==typeof this._config?.default_floor?this._config.default_floor:"",r=[...e];return n&&!e.some(e=>e.value===n)&&r.unshift({value:n,label:n}),[{name:"title",selector:{text:{}}},{name:"floor",selector:{select:{mode:"dropdown",options:a}}},e.length?{name:"default_floor",selector:{select:{mode:"dropdown",options:r}}}:{name:"default_floor",selector:{text:{}}},{name:"language",selector:{select:{mode:"dropdown",options:s(t(o,"editor.lang_auto"),this._config?.language)}}},{name:"icon_size",selector:{number:{min:1,max:6,step:.1,mode:"box"}}},{name:"show_temperature",selector:{boolean:{}}},{name:"live_states",selector:{boolean:{}}},{name:"show_signal",selector:{boolean:{}}},{name:"kiosk",selector:{boolean:{}}},{name:"cycle",selector:{number:{min:0,max:3600,step:5,mode:"box"}}}]}render(){if(!this.hass||!this._config)return a;const e=i(this,l,o(this.hass,this._config.language));if("cold"===e)return n();if("warm"===e)return r;this._loadSpaces();const s=this._lang,f={title:t(s,"editor.title"),floor:t(s,"editor.floor"),default_floor:t(s,"editor.default_floor"),language:t(s,"editor.language"),icon_size:t(s,"editor.icon_size"),show_temperature:t(s,"editor.show_temperature"),live_states:t(s,"editor.live_states"),show_signal:t(s,"editor.show_signal"),kiosk:t(s,"editor.kiosk"),cycle:t(s,"editor.cycle")},h=this._schema,_=function(e,o,t){if(!t||null===o)return null;const s="string"==typeof e?.default_floor?e.default_floor:"";return!s||o.some(e=>e.value===s)?null:s}(this._config,this._spaces,this._spacesAuthoritative),d=e=>c`<ha-form
+globalThis.__HOUSEPLAN_BUILD_FINGERPRINT__="c63e55839e4e87dfffefae928d34c030e38064a799953b0ffd7b14052ef53d85";import{b as e,l as o,t,d3 as s,A as a,d4 as i,d5 as l,d6 as n,E as r,c}from"./houseplan-card-DIUE3MmY.js";class f extends e{constructor(){super(...arguments),this._spaces=null,this._spacesLoading=!1,this._spacesAuthoritative=!1}setConfig(e){this._config=e}async _loadSpaces(){if(!this._spaces&&!this._spacesLoading&&this.hass){this._spacesLoading=!0;try{const e=await this.hass.callWS({type:"houseplan/config/get"});this._spaces=(e?.config?.spaces||[]).map(e=>({value:e.id,label:e.title||e.id})),this._spacesAuthoritative=!0}catch{this._spaces=[],this._spacesAuthoritative=!1}finally{this._spacesLoading=!1}}}get _lang(){return o(this.hass,this._config?.language)}get _floorToken(){const e=this._config?.floor;return"number"==typeof e?`__houseplan_yaml_floor_index__:${String(e)}`:null}get _formData(){const e={...this._config},o=this._floorToken;return o?e.floor=o:Object.prototype.hasOwnProperty.call(e,"floor")||(e.floor=""),e}get _schema(){const e=this._spaces||[],o=this._lang,a=[{value:"",label:t(o,"editor.floor_none")}],i=this._floorToken;i&&a.push({value:i,label:t(o,"editor.floor_index",{index:String(this._config?.floor)})});const l="string"==typeof this._config?.floor?this._config.floor:"";l&&!e.some(e=>e.value===l)&&a.push({value:l,label:l}),a.push(...e);const n="string"==typeof this._config?.default_floor?this._config.default_floor:"",r=[...e];return n&&!e.some(e=>e.value===n)&&r.unshift({value:n,label:n}),[{name:"title",selector:{text:{}}},{name:"floor",selector:{select:{mode:"dropdown",options:a}}},e.length?{name:"default_floor",selector:{select:{mode:"dropdown",options:r}}}:{name:"default_floor",selector:{text:{}}},{name:"language",selector:{select:{mode:"dropdown",options:s(t(o,"editor.lang_auto"),this._config?.language)}}},{name:"icon_size",selector:{number:{min:1,max:6,step:.1,mode:"box"}}},{name:"show_temperature",selector:{boolean:{}}},{name:"live_states",selector:{boolean:{}}},{name:"show_signal",selector:{boolean:{}}},{name:"kiosk",selector:{boolean:{}}},{name:"cycle",selector:{number:{min:0,max:3600,step:5,mode:"box"}}}]}render(){if(!this.hass||!this._config)return a;const e=i(this,l,o(this.hass,this._config.language));if("cold"===e)return n();if("warm"===e)return r;this._loadSpaces();const s=this._lang,f={title:t(s,"editor.title"),floor:t(s,"editor.floor"),default_floor:t(s,"editor.default_floor"),language:t(s,"editor.language"),icon_size:t(s,"editor.icon_size"),show_temperature:t(s,"editor.show_temperature"),live_states:t(s,"editor.live_states"),show_signal:t(s,"editor.show_signal"),kiosk:t(s,"editor.kiosk"),cycle:t(s,"editor.cycle")},h=this._schema,_=function(e,o,t){if(!t||null===o)return null;const s="string"==typeof e?.default_floor?e.default_floor:"";return!s||o.some(e=>e.value===s)?null:s}(this._config,this._spaces,this._spacesAuthoritative),d=e=>c`<ha-form
         .hass=${this.hass}
         .data=${this._formData}
         .schema=${e}

demo/golden/harness.mjs

@@ -1556,6 +1556,31 @@ export async function prepareGoldenScenario(page, scenario) {
       await frame();
       trigger.click();
       await picker.updateComplete;
+    } else if (scenario.dialog === 'general-help') {
+      card._openSettingsDialog();
+      await card.updateComplete;
+      const dialog = card.renderRoot.querySelector('hp-dialog');
+      const help = dialog?.querySelector(`hp-help[data-help-key="${scenario.openHelp}"]`);
+      await help?.updateComplete;
+      const trigger = help?.renderRoot?.querySelector('.trigger');
+      if (!dialog || !trigger)
+        throw new Error(`golden general-settings help trigger missing: ${scenario.openHelp}`);
+      trigger.scrollIntoView({ block: 'center', inline: 'nearest' });
+      await frame();
+      trigger.click();
+      await help.updateComplete;
+      await frame();
+      const surface = help.renderRoot?.querySelector('.tooltip:popover-open')
+        || dialog.renderRoot?.querySelector('[data-hp-overlay="help"]')
+          ?.shadowRoot?.querySelector('.tooltip');
+      const viewport = { width: innerWidth, height: innerHeight };
+      const triggerRect = trigger.getBoundingClientRect();
+      const surfaceRect = surface?.getBoundingClientRect();
+      const inside = (rect) => !!rect && rect.left >= -1 && rect.top >= -1
+        && rect.right <= viewport.width + 1 && rect.bottom <= viewport.height + 1;
+      if (trigger.getAttribute('aria-expanded') !== 'true' || !inside(triggerRect)
+          || !inside(surfaceRect) || dialog.scrollWidth > dialog.clientWidth + 1)
+        throw new Error(`golden general-settings help is clipped: ${scenario.openHelp}`);
     } else if (scenario.dialog === 'device-ripple-color') {
       card._setMode('devices');
       await card.updateComplete;

demo/golden/matrix.mjs

@@ -1,7 +1,7 @@
 import { fixtureWallKey } from '../fixtures/visual-matrix.mjs';
 
 /** Data-only HP-QA-01 capture matrix. Bump when framing or scenarios change. */
-export const GOLDEN_MATRIX_VERSION = 52;
+export const GOLDEN_MATRIX_VERSION = 53;
 
 const stage = { capture: 'stage', threshold: { maxChannelDelta: 10, maxDiffRatio: 0.0005 } };
 const page = { capture: 'page', threshold: { maxChannelDelta: 10, maxDiffRatio: 0.0008 } };
@@ -789,6 +789,17 @@ export const GOLDEN_SCENARIOS = Object.freeze([
   { id: 'general-color-popover-desktop-en', fixture: 'visual', space: 'golden-geometry',
     dialog: 'general-color', language: 'en', theme: 'light',
     viewport: { width: 900, height: 900 }, ...page },
+  // #86 AC7: renderer-level 200% browser zoom is 390 CSS px at DPR 2
+  // (780 physical px). Keep both themes reviewed because help placement and
+  // contrast are part of the visual contract, not just a DOM assertion.
+  { id: 'settings-help-zoom-200-en-light', fixture: 'visual', space: 'golden-geometry',
+    dialog: 'general-help', openHelp: 'gs.bg_mode.help', deviceScaleFactor: 2,
+    helpTextRegion: { key: 'gs.bg_mode.help', minPixels: 30 },
+    language: 'en', theme: 'light', viewport: { width: 390, height: 900 }, ...page },
+  { id: 'settings-help-zoom-200-ru-dark', fixture: 'visual', space: 'golden-geometry',
+    dialog: 'general-help', openHelp: 'gs.bg_mode.help', deviceScaleFactor: 2,
+    helpTextRegion: { key: 'gs.bg_mode.help', minPixels: 30 },
+    language: 'ru', theme: 'dark', viewport: { width: 390, height: 900 }, ...page },
   { id: 'device-ripple-color-popover-mobile-ru', fixture: 'visual', space: 'golden-lighting',
     dialog: 'device-ripple-color', deviceId: 'golden-light-two',
     language: 'ru', theme: 'dark', viewport: { width: 390, height: 1000 }, ...page },

demo/golden/run.mjs

@@ -605,7 +605,7 @@ if (existsSync(baselineManifestPath)) {
 
 const browserArgs = ['--force-color-profile=srgb', '--font-render-hinting=none', '--disable-lcd-text'];
 const browserContext = { locale: 'en-US', timezoneId: 'UTC', colorScheme: 'dark', reducedMotion: 'reduce' };
-const { page, browser } = await launch(
+const { page: primaryPage, browser } = await launch(
   { width: 1000, height: 900 },
   1,
   browserArgs,
@@ -613,12 +613,30 @@ const { page, browser } = await launch(
 );
 const chromium = await browser.version();
 const results = [];
-const pageErrors = [];
-page.on('pageerror', (error) => pageErrors.push(error.message));
+const pagesByScale = new Map([[1, primaryPage]]);
+const extraBrowsers = [];
+for (const scale of new Set(scenarios.map((scenario) => scenario.deviceScaleFactor || 1))) {
+  if (scale === 1) continue;
+  const scaled = await launch(
+    { width: 1000, height: 900 }, scale, browserArgs, browserContext,
+  );
+  pagesByScale.set(scale, scaled.page);
+  extraBrowsers.push(scaled.browser);
+}
+const pageErrors = new Map();
+for (const page of pagesByScale.values()) {
+  const errors = [];
+  pageErrors.set(page, errors);
+  page.on('pageerror', (error) => errors.push(error.message));
+}
 let buildFingerprint = null;
 try {
-  buildFingerprint = await assertFreshDemoBundle(page, ROOT);
+  buildFingerprint = await assertFreshDemoBundle(primaryPage, ROOT);
   for (const scenario of scenarios) {
+    const expectedScale = scenario.deviceScaleFactor || 1;
+    const page = pagesByScale.get(expectedScale);
+    if (!page) throw new Error(`golden renderer scale is unavailable: ${expectedScale}`);
+    const activePageErrors = pageErrors.get(page);
     const result = {
       id: scenario.id,
       threshold: scenario.threshold,
@@ -626,9 +644,14 @@ try {
       actualSha256: null,
     };
     try {
-      pageErrors.length = 0;
+      activePageErrors.length = 0;
       result.runtime = await prepareGoldenScenario(page, scenario);
-      if (pageErrors.length) throw new Error(`browser exception: ${pageErrors.join(' | ')}`);
+      const actualScale = await page.evaluate(() => devicePixelRatio);
+      result.deviceScaleFactor = actualScale;
+      if (Math.abs(actualScale - expectedScale) > 0.001)
+        throw new Error(`golden renderer scale mismatch: ${actualScale} != ${expectedScale}`);
+      if (activePageErrors.length)
+        throw new Error(`browser exception: ${activePageErrors.join(' | ')}`);
       if (scenario.openingSymbolContract) {
         result.openingSymbolContract = await assertOpeningSymbolContract(
           page, scenario.openingSymbolContract,
@@ -851,7 +874,7 @@ try {
     console.log(`${result.status.padEnd(17)} ${scenario.id}`);
   }
 } finally {
-  await browser.close();
+  await Promise.all([...extraBrowsers.map((item) => item.close()), browser.close()]);
 }
 
 const expectedScenarioIds = GOLDEN_SCENARIOS.map((scenario) => scenario.id);

dist/houseplan-assets/editor-Ry5eRqA9.js

@@ -1,4 +1,4 @@
-globalThis.__HOUSEPLAN_BUILD_FINGERPRINT__="aedf12cc2ee13fb750d6b78c875fe0fb41cad372eff12d24406f3d9a36e11101";import{b as e,l as o,t,d3 as s,A as a,d4 as i,d5 as l,d6 as n,E as r,c}from"./houseplan-card-Kg1OpfZE.js";class f extends e{constructor(){super(...arguments),this._spaces=null,this._spacesLoading=!1,this._spacesAuthoritative=!1}setConfig(e){this._config=e}async _loadSpaces(){if(!this._spaces&&!this._spacesLoading&&this.hass){this._spacesLoading=!0;try{const e=await this.hass.callWS({type:"houseplan/config/get"});this._spaces=(e?.config?.spaces||[]).map(e=>({value:e.id,label:e.title||e.id})),this._spacesAuthoritative=!0}catch{this._spaces=[],this._spacesAuthoritative=!1}finally{this._spacesLoading=!1}}}get _lang(){return o(this.hass,this._config?.language)}get _floorToken(){const e=this._config?.floor;return"number"==typeof e?`__houseplan_yaml_floor_index__:${String(e)}`:null}get _formData(){const e={...this._config},o=this._floorToken;return o?e.floor=o:Object.prototype.hasOwnProperty.call(e,"floor")||(e.floor=""),e}get _schema(){const e=this._spaces||[],o=this._lang,a=[{value:"",label:t(o,"editor.floor_none")}],i=this._floorToken;i&&a.push({value:i,label:t(o,"editor.floor_index",{index:String(this._config?.floor)})});const l="string"==typeof this._config?.floor?this._config.floor:"";l&&!e.some(e=>e.value===l)&&a.push({value:l,label:l}),a.push(...e);const n="string"==typeof this._config?.default_floor?this._config.default_floor:"",r=[...e];return n&&!e.some(e=>e.value===n)&&r.unshift({value:n,label:n}),[{name:"title",selector:{text:{}}},{name:"floor",selector:{select:{mode:"dropdown",options:a}}},e.length?{name:"default_floor",selector:{select:{mode:"dropdown",options:r}}}:{name:"default_floor",selector:{text:{}}},{name:"language",selector:{select:{mode:"dropdown",options:s(t(o,"editor.lang_auto"),this._config?.language)}}},{name:"icon_size",selector:{number:{min:1,max:6,step:.1,mode:"box"}}},{name:"show_temperature",selector:{boolean:{}}},{name:"live_states",selector:{boolean:{}}},{name:"show_signal",selector:{boolean:{}}},{name:"kiosk",selector:{boolean:{}}},{name:"cycle",selector:{number:{min:0,max:3600,step:5,mode:"box"}}}]}render(){if(!this.hass||!this._config)return a;const e=i(this,l,o(this.hass,this._config.language));if("cold"===e)return n();if("warm"===e)return r;this._loadSpaces();const s=this._lang,f={title:t(s,"editor.title"),floor:t(s,"editor.floor"),default_floor:t(s,"editor.default_floor"),language:t(s,"editor.language"),icon_size:t(s,"editor.icon_size"),show_temperature:t(s,"editor.show_temperature"),live_states:t(s,"editor.live_states"),show_signal:t(s,"editor.show_signal"),kiosk:t(s,"editor.kiosk"),cycle:t(s,"editor.cycle")},h=this._schema,_=function(e,o,t){if(!t||null===o)return null;const s="string"==typeof e?.default_floor?e.default_floor:"";return!s||o.some(e=>e.value===s)?null:s}(this._config,this._spaces,this._spacesAuthoritative),d=e=>c`<ha-form
+globalThis.__HOUSEPLAN_BUILD_FINGERPRINT__="c63e55839e4e87dfffefae928d34c030e38064a799953b0ffd7b14052ef53d85";import{b as e,l as o,t,d3 as s,A as a,d4 as i,d5 as l,d6 as n,E as r,c}from"./houseplan-card-DIUE3MmY.js";class f extends e{constructor(){super(...arguments),this._spaces=null,this._spacesLoading=!1,this._spacesAuthoritative=!1}setConfig(e){this._config=e}async _loadSpaces(){if(!this._spaces&&!this._spacesLoading&&this.hass){this._spacesLoading=!0;try{const e=await this.hass.callWS({type:"houseplan/config/get"});this._spaces=(e?.config?.spaces||[]).map(e=>({value:e.id,label:e.title||e.id})),this._spacesAuthoritative=!0}catch{this._spaces=[],this._spacesAuthoritative=!1}finally{this._spacesLoading=!1}}}get _lang(){return o(this.hass,this._config?.language)}get _floorToken(){const e=this._config?.floor;return"number"==typeof e?`__houseplan_yaml_floor_index__:${String(e)}`:null}get _formData(){const e={...this._config},o=this._floorToken;return o?e.floor=o:Object.prototype.hasOwnProperty.call(e,"floor")||(e.floor=""),e}get _schema(){const e=this._spaces||[],o=this._lang,a=[{value:"",label:t(o,"editor.floor_none")}],i=this._floorToken;i&&a.push({value:i,label:t(o,"editor.floor_index",{index:String(this._config?.floor)})});const l="string"==typeof this._config?.floor?this._config.floor:"";l&&!e.some(e=>e.value===l)&&a.push({value:l,label:l}),a.push(...e);const n="string"==typeof this._config?.default_floor?this._config.default_floor:"",r=[...e];return n&&!e.some(e=>e.value===n)&&r.unshift({value:n,label:n}),[{name:"title",selector:{text:{}}},{name:"floor",selector:{select:{mode:"dropdown",options:a}}},e.length?{name:"default_floor",selector:{select:{mode:"dropdown",options:r}}}:{name:"default_floor",selector:{text:{}}},{name:"language",selector:{select:{mode:"dropdown",options:s(t(o,"editor.lang_auto"),this._config?.language)}}},{name:"icon_size",selector:{number:{min:1,max:6,step:.1,mode:"box"}}},{name:"show_temperature",selector:{boolean:{}}},{name:"live_states",selector:{boolean:{}}},{name:"show_signal",selector:{boolean:{}}},{name:"kiosk",selector:{boolean:{}}},{name:"cycle",selector:{number:{min:0,max:3600,step:5,mode:"box"}}}]}render(){if(!this.hass||!this._config)return a;const e=i(this,l,o(this.hass,this._config.language));if("cold"===e)return n();if("warm"===e)return r;this._loadSpaces();const s=this._lang,f={title:t(s,"editor.title"),floor:t(s,"editor.floor"),default_floor:t(s,"editor.default_floor"),language:t(s,"editor.language"),icon_size:t(s,"editor.icon_size"),show_temperature:t(s,"editor.show_temperature"),live_states:t(s,"editor.live_states"),show_signal:t(s,"editor.show_signal"),kiosk:t(s,"editor.kiosk"),cycle:t(s,"editor.cycle")},h=this._schema,_=function(e,o,t){if(!t||null===o)return null;const s="string"==typeof e?.default_floor?e.default_floor:"";return!s||o.some(e=>e.value===s)?null:s}(this._config,this._spaces,this._spacesAuthoritative),d=e=>c`<ha-form
         .hass=${this.hass}
         .data=${this._formData}
         .schema=${e}

docs/specs/086-settings-help-content-party1.md

@@ -215,7 +215,11 @@ save paths всех настроек остаются прежними. Мигр
 
 - general settings and space dialog with help open;
 - space zero-wall style and Device show-hidden at desktop/narrow widths;
-- light/dark and 200% zoom; full Linux artifact review required.
+- light/dark and 200% zoom; full Linux artifact review required. The dedicated
+  `settings-help-zoom-200-en-light` and `settings-help-zoom-200-ru-dark`
+  scenarios use a 390 CSS px viewport with `deviceScaleFactor: 2`, assert that
+  the trigger and open surface remain inside the viewport, and capture the
+  page at CSS scale so both reviewed baselines stay 390 px wide.
 
 ### Mutant
 

test/golden-matrix.test.mjs

@@ -373,7 +373,7 @@ test('sun-ray golden requires browser-painted light from a state-only sun entity
   assert.ok(scenario);
   const fixture = prepareGoldenFixture(scenario);
   const space = fixture.config.spaces.find((item) => item.id === scenario.space);
-  assert.equal(GOLDEN_MATRIX_VERSION, 52);
+  assert.equal(GOLDEN_MATRIX_VERSION, 53);
   assert.equal(space.settings.sun_rays, true);
   assert.equal(scenario.northDeg, 90,
     'the sign-sensitive golden must keep a non-zero north direction');
@@ -945,3 +945,18 @@ test('help affordance golden covers an open text-bearing surface in both themes'
     assert.equal(scenario.helpTextRegion?.minPixels >= 30, true, scenario.id);
   }
 });
+
+test('issue 86 help goldens render browser zoom 200% in both themes', () => {
+  const zoom = GOLDEN_SCENARIOS.filter((scenario) =>
+    scenario.id.startsWith('settings-help-zoom-200-'));
+  assert.equal(zoom.length, 2);
+  assert.deepEqual(new Set(zoom.map((scenario) => scenario.theme)), new Set(['light', 'dark']));
+  assert.deepEqual(new Set(zoom.map((scenario) => scenario.language)), new Set(['en', 'ru']));
+  for (const scenario of zoom) {
+    assert.equal(scenario.deviceScaleFactor, 2);
+    assert.deepEqual(scenario.viewport, { width: 390, height: 900 });
+    assert.equal(scenario.dialog, 'general-help');
+    assert.equal(scenario.openHelp, 'gs.bg_mode.help');
+    assert.equal(scenario.capture, 'page');
+  }
+});