@things-factory/apptool-ui 10.1.27 → 10.1.29

package/tests/header-band.test.ts

@@ -0,0 +1,207 @@
+import { readFileSync } from 'fs'
+import path from 'path'
+
+import {
+  menuButtonShown,
+  scopeName,
+  scopeShape,
+  SLOT_ORDER,
+  toolsBySlot,
+  unreadLabel,
+  wordmark
+} from '../client/layout/header-band-model'
+
+/**
+ * The shared header band (ADR-0060 decision 4 and its 2026-09-18 addendum).
+ *
+ * The drawing needs a DOM and this repository's runner has none, so what a test can reach is the
+ * deciding: which slot a tool belongs to, whether the menu button is drawn, what shape a scope
+ * takes. The rest is held by reading the band's own source - the rules that matter there are about
+ * what the band must not do (keep a second registry, know an app's words), and those are visible in
+ * the text.
+ */
+
+const BAND = path.resolve(__dirname, '../client/layout/app-header-band.ts')
+const bandSource = readFileSync(BAND, 'utf-8')
+
+/** The source with its comments stripped, so prose about a rule cannot satisfy the rule. */
+const bandCode = bandSource.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*\/\/.*$/gm, '')
+
+describe('the band splits one registry', () => {
+  it('★ the five slot names are still the ones @operato/layout declares', () => {
+    /*
+     * The model writes the five out rather than importing the enum: @operato/layout is an ES module
+     * and this runner does not transform node_modules, so an import there would put every decision
+     * out of reach of every test. This reads the installed declaration instead, so the two cannot
+     * drift apart in silence.
+     */
+    const declaration = readFileSync(
+      path.resolve(__dirname, '../../../node_modules/@operato/layout/dist/src/actions/layout.d.ts'),
+      'utf-8'
+    )
+    const body = declaration.slice(declaration.indexOf('enum TOOL_POSITION'))
+    const declared = [...body.slice(0, body.indexOf('}')).matchAll(/(\w+) = "(\w+)"/g)].map(match => match[2])
+
+    expect(declared).toEqual([...SLOT_ORDER])
+  })
+
+  it('★ every tool lands in the slot it declared', () => {
+    const tools = [
+      { name: 'hamburger', position: 'FRONT_END' },
+      { name: 'favorite', position: 'REAR' },
+      { name: 'more', position: 'REAR_END' },
+      { name: 'title-bar', position: 'CENTER' },
+      { name: 'unplaced' }
+    ]
+
+    const bySlot = toolsBySlot(tools)
+
+    expect(SLOT_ORDER.map(slot => bySlot[slot].map(tool => tool.name))).toEqual([
+      ['hamburger'],
+      [],
+      ['title-bar'],
+      ['favorite'],
+      ['more']
+    ])
+  })
+
+  it('★ and it reads the registry the app toolbar reads, rather than keeping one of its own', () => {
+    /*
+     * A second registry would make every contributor pick a side: lite-menu's hamburger and
+     * more-ui's morenda button are dispatched once, to one place, by packages that do not know
+     * which of the two is drawing.
+     */
+    expect(bandCode).toContain('store.getState()')
+    expect(bandCode).toContain('apptool')
+    expect(bandCode).not.toContain('APPEND_APP_TOOL')
+    expect(bandCode).not.toContain('store.dispatch')
+  })
+
+  it('★ and it draws the five slots left to right in the declared order', () => {
+    const order = ['frontEnd', 'front', 'center', 'rear', 'rearEnd']
+    const template = bandCode.slice(bandCode.indexOf('<div class="band">'))
+    const drawn = order
+      .map(name => ({ name, at: template.indexOf(`${name}.map(`) }))
+      .filter(({ at }) => at >= 0)
+
+    expect(drawn.map(({ name }) => name)).toEqual(order)
+    expect(drawn.map(({ at }) => at)).toEqual([...drawn.map(({ at }) => at)].sort((a, b) => a - b))
+  })
+})
+
+describe('the way into the menu', () => {
+  const hamburger = [{ name: 'hamburger', position: 'FRONT_END' }]
+
+  it('★ the band draws a menu button while the rail is hidden', () => {
+    /*
+     * lite-menu puts the rail away on a mobile device in portrait, or when the app asks for
+     * `hovering`, and registers its hamburger in the app toolbar - which a band app has turned off.
+     * twin had no button of its own, so on a phone there was no way to leave the screen you were on
+     * (2026-09-18, seen under mobile emulation).
+     *
+     * A narrowed desktop window is not that case: the rail stays and spreads to the window's width.
+     * Warehouse looked for it at 375px on a desktop and it did not happen, then saw it under a
+     * Pixel 8 user agent (:3500, 2026-09-18) - the device check runs once at boot, so emulation
+     * only counts after a reload.
+     */
+    expect(menuButtonShown(false, [])).toBe(true)
+  })
+
+  it('and not while the rail is on screen, or before the menu part has registered', () => {
+    expect(menuButtonShown(true, [])).toBe(false)
+    /* Absent reads as shown, so the button does not flash on during boot. */
+    expect(menuButtonShown(undefined, [])).toBe(false)
+  })
+
+  it('★ and not when something already registered one, so there are never two', () => {
+    expect(menuButtonShown(false, hamburger)).toBe(false)
+  })
+})
+
+describe('the notification count', () => {
+  it('★ nothing is drawn for nothing unread', () => {
+    expect(unreadLabel(0)).toBeUndefined()
+    expect(unreadLabel(undefined)).toBeUndefined()
+  })
+
+  it('and the exact number stops being worth the width past 99', () => {
+    expect(unreadLabel(1)).toEqual('1')
+    expect(unreadLabel(99)).toEqual('99')
+    expect(unreadLabel(100)).toEqual('99+')
+  })
+
+  it('★ the bell opens the side panel, rather than navigating to a page', () => {
+    /*
+     * plant sent this to `notification-list-page` for a while. An alarm is glanced at without
+     * leaving the screen you are on, and navigating away is the thing that was wrong with it.
+     */
+    expect(bandCode).toContain("toggleOverlay('notification'")
+    expect(bandCode).not.toContain('notification-list-page')
+  })
+})
+
+describe('the scope the app hands over', () => {
+  it('★ one of something draws its name, with nothing to press', () => {
+    const scope = { label: 'factory', items: [{ id: 'a', label: '미라텍' }], selectedId: 'a' }
+
+    expect(scopeShape(scope)).toEqual('name')
+    expect(scopeName(scope)).toEqual('미라텍')
+  })
+
+  it('and several draw a picker, and none draws nothing', () => {
+    const two = {
+      label: 'factory',
+      items: [
+        { id: 'a', label: '미라텍' },
+        { id: 'b', label: '제2공장' }
+      ],
+      selectedId: 'a'
+    }
+
+    expect(scopeShape(two)).toEqual('picker')
+    expect(scopeShape(undefined)).toEqual('none')
+    expect(scopeShape({ label: 'factory', items: [] })).toEqual('none')
+  })
+
+  it('★ and the band never spells a scope word of its own', () => {
+    /*
+     * ADR-0048 · 0058: the shared band does not know the app's vocabulary. plant's scope is a
+     * factory, twin's is a site, warehouse's is a warehouse, and each of those words belongs to the
+     * app that passes it.
+     */
+    const theirs = ['factory', 'site', 'warehouse', '공장', '현장', '창고', 'domain', 'subdomain']
+
+    expect(theirs.filter(word => bandCode.toLowerCase().includes(word.toLowerCase()))).toEqual([])
+  })
+})
+
+describe('a tool from the registry', () => {
+  it('★ takes the band control shape rather than the toolbar one', () => {
+    /*
+     * lite-menu's hamburger and more-ui's morenda button are a bare md-icon apiece, written for the
+     * coloured app toolbar. On warehouse they came out as 18x18 marks with `cursor: auto` beside
+     * this row's 28px pill buttons (:3500, 2026-09-18) - nothing said they could be pressed.
+     *
+     * The rule reaches a tool because its template renders inside the band's own shadow root. The
+     * band's buttons keep their icons inside a `.ctl`, so the direct-child selector leaves them be.
+     */
+    const styles = bandSource.slice(bandSource.indexOf('static styles = ['), bandSource.indexOf('@property'))
+
+    expect(styles).toContain('.slot > md-icon')
+    expect(styles).toContain('.slot > button:not(.ctl)')
+    /* Pressable, and the same box the band's own buttons have. */
+    expect(styles.slice(styles.indexOf('.slot > md-icon'))).toContain('cursor: pointer')
+  })
+})
+
+describe('the product name', () => {
+  it('★ the band owns the shape and the app gives one word', () => {
+    expect(wordmark('plant')).toEqual({ lead: 'operato', name: 'plant' })
+    expect(wordmark('  figure  ')).toEqual({ lead: 'operato', name: 'figure' })
+  })
+
+  it('and an app that gives no word gets no wordmark', () => {
+    expect(wordmark(undefined)).toBeUndefined()
+    expect(wordmark('')).toBeUndefined()
+  })
+})

package/tests/mdibar-setting-state.test.ts

@@ -0,0 +1,78 @@
+import { readFileSync } from 'fs'
+import path from 'path'
+
+import { mdibarShownNow, resolveMdibarShow } from '../client/mdibar-setting-state'
+
+/**
+ * The MDI setting row must say what the tab bar is doing.
+ *
+ * It read the stored setting alone, so in an app that starts the bar on
+ * (`setupAppToolPart({ mdibar: { default: true } })`) the row drew an empty checkbox over a bar that
+ * was on screen. Seen on operato-plant at :4000, 2026-09-18.
+ */
+
+describe('what the MDI setting row shows', () => {
+  const stateWith = (show: boolean | undefined) => ({ layout: { viewparts: { appmdibar: { show } } } })
+
+  it('★ on, when the app starts the bar on and the user has stored nothing', () => {
+    /* setupAppToolPart folded `{ default: true }` into the viewpart; nothing is in clientSettingStore. */
+    expect(mdibarShownNow(stateWith(true))).toBe(true)
+  })
+
+  it('off, when the user turned the bar off', () => {
+    expect(mdibarShownNow(stateWith(false))).toBe(false)
+  })
+
+  it('off, when there is no bar to speak of', () => {
+    expect(mdibarShownNow({ layout: { viewparts: {} } })).toBe(false)
+    expect(mdibarShownNow({ layout: {} })).toBe(false)
+    expect(mdibarShownNow({})).toBe(false)
+    expect(mdibarShownNow(undefined)).toBe(false)
+  })
+
+  it('a half-written viewpart is not "on" — only an explicit true is', () => {
+    expect(mdibarShownNow(stateWith(undefined))).toBe(false)
+    expect(mdibarShownNow({ layout: { viewparts: { appmdibar: { show: 'yes' } } } })).toBe(false)
+  })
+
+  it('★ follows the bar while the settings card is on screen — a card that read once drew the old answer', () => {
+    const code = readFileSync(path.resolve(__dirname, '../client/mdibar-setting-let.ts'), 'utf-8')
+
+    expect(code).toMatch(/connectedCallback\(\)[\s\S]*store\.subscribe\(/)
+    expect(code).toMatch(/disconnectedCallback\(\)[\s\S]*this\._unsubscribe\?\.\(\)/)
+    expect(code).not.toMatch(/firstUpdated/)
+  })
+
+  it('the row reads the bar, not the stored setting', () => {
+    const code = readFileSync(path.resolve(__dirname, '../client/mdibar-setting-let.ts'), 'utf-8')
+
+    const body = code.match(/connectedCallback\(\) \{([\s\S]*?)\n  \}/)?.[1]
+
+    expect(body).toMatch(/this\.show = mdibarShownNow\(store\.getState\(\)\)/)
+    /* The stored value is the user's own choice; the viewpart already carries it, folded with the app's default. */
+    expect(body).not.toMatch(/clientSettingStore/)
+    /* Writing the default into the store would freeze it — the app could never change its own default again. */
+    expect(code).not.toMatch(/clientSettingStore\.put[\s\S]{0,120}default/)
+  })
+
+  describe('the state the bar starts in', () => {
+    it("★ the app's default holds until the user picks — one rule, shared with setupAppToolPart", () => {
+      expect(resolveMdibarShow(undefined, { default: true })).toBe(true)
+      expect(resolveMdibarShow(undefined, { default: false })).toBe(false)
+      expect(resolveMdibarShow(undefined, true)).toBe(false)
+    })
+
+    it('the stored choice wins once it exists', () => {
+      expect(resolveMdibarShow(false, { default: true })).toBe(false)
+      expect(resolveMdibarShow(true, true)).toBe(true)
+      expect(resolveMdibarShow(true, { default: false })).toBe(true)
+    })
+
+    it('setupAppToolPart uses that one rule instead of writing its own', () => {
+      const code = readFileSync(path.resolve(__dirname, '../client/index.ts'), 'utf-8')
+
+      expect(code).toMatch(/const show = resolveMdibarShow\(stored, mdibar\)/)
+      expect(code).not.toMatch(/stored === undefined \? fallback : stored/)
+    })
+  })
+})

package/translations/en.json

@@ -1,5 +1,6 @@
 {
   "label.home": "home",
-  "title.mdibar setting": "MDI setting",
-  "text.confirm_close_all_tabs": "Are you sure you want to close all tabs?"
+  "label.show": "show",
+  "text.confirm_close_all_tabs": "Are you sure you want to close all tabs?",
+  "title.mdibar setting": "MDI setting"
 }

package/translations/ja.json

@@ -1,5 +1,6 @@
 {
   "label.home": "ホーム",
-  "title.mdibar setting": "MDI設定",
-  "text.confirm_close_all_tabs": "開いているすべてのタブを閉じますか？"
+  "label.show": "表示",
+  "text.confirm_close_all_tabs": "開いているすべてのタブを閉じますか？",
+  "title.mdibar setting": "MDI設定"
 }

package/translations/ko.json

@@ -1,5 +1,6 @@
 {
   "label.home": "홈",
-  "title.mdibar setting": "MDI 설정",
-  "text.confirm_close_all_tabs": "열려있는 모든 탭을 닫으시겠습니까?"
+  "label.show": "보이기",
+  "text.confirm_close_all_tabs": "열려있는 모든 탭을 닫으시겠습니까?",
+  "title.mdibar setting": "MDI 설정"
 }

package/translations/ms.json

@@ -1,5 +1,6 @@
 {
   "label.home": "Rumah",
-  "title.mdibar setting": "Tetapan MDI",
-  "text.confirm_close_all_tabs": "Adakah anda pasti mahu menutup semua tab?"
+  "label.show": "tunjuk",
+  "text.confirm_close_all_tabs": "Adakah anda pasti mahu menutup semua tab?",
+  "title.mdibar setting": "Tetapan MDI"
 }

package/translations/zh.json

@@ -1,5 +1,6 @@
 {
   "label.home": "首页",
-  "title.mdibar setting": "MDI设置",
-  "text.confirm_close_all_tabs": "确定要关闭所有标签页吗？"
+  "label.show": "显示",
+  "text.confirm_close_all_tabs": "确定要关闭所有标签页吗？",
+  "title.mdibar setting": "MDI设置"
 }