@owlmeans/web-panel 0.1.18-rc.9 → 0.1.18

package/tests/scheme.spec.ts

@@ -0,0 +1,149 @@
+import { afterAll, describe, expect, test } from 'bun:test'
+import { readdirSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { mountComponent, browserHelper } from '@owlmeans/test-ui'
+import { HARNESS_URL } from './context.js'
+import { COLOR_SCHEME_KEY, colorSchemeHelper } from '../src/scheme/index.js'
+
+const TIMEOUT = 30_000
+
+afterAll(async () => {
+  await browserHelper.closeBrowser()
+})
+
+const open = async (path: string) => mountComponent({ url: `${HARNESS_URL.replace(/\/$/, '')}${path}` })
+
+const rootClasses = (page: Awaited<ReturnType<typeof open>>['page']) =>
+  page.evaluate(() => ['light', 'dark'].filter(name => document.documentElement.classList.contains(name)))
+
+const stored = (page: Awaited<ReturnType<typeof open>>['page']) =>
+  page.evaluate(key => window.localStorage.getItem(key), COLOR_SCHEME_KEY)
+
+describe('@owlmeans/web-panel/scheme — the React-free half', () => {
+  test('imports nothing outside its own folder, so a Node build script can load it', () => {
+    // It was just imported above by this very (non-browser) test process as well.
+    const dir = join(import.meta.dir, '../src/scheme')
+    for (const file of readdirSync(dir)) {
+      const source = readFileSync(join(dir, file), 'utf8')
+      const specifiers = [...source.matchAll(/from\s+['"]([^'"]+)['"]/g)].map(match => match[1])
+      expect({ file, outside: specifiers.filter(specifier => !specifier.startsWith('./')) })
+        .toEqual({ file, outside: [] })
+    }
+    expect(COLOR_SCHEME_KEY).toBe('owlmeans:color-scheme')
+  })
+
+  test('the head bootstrap applies a stored choice, and nothing without one', async () => {
+    const { page, close } = await open('/prefs')
+    try {
+      await page.waitForSelector('#prefs')
+      const run = (value: string | null) => page.evaluate(({ key, value, script }) => {
+        if (value == null) {
+          window.localStorage.removeItem(key)
+        } else {
+          window.localStorage.setItem(key, value)
+        }
+        document.documentElement.classList.remove('light', 'dark')
+        // Indirect eval — the script runs as the head would run it, in global scope.
+        ;(0, eval)(script)
+        return ['light', 'dark'].filter(name => document.documentElement.classList.contains(name))
+      }, { key: COLOR_SCHEME_KEY, value, script: colorSchemeHelper.colorSchemeBootstrapScript() })
+
+      expect(await run('dark')).toEqual(['dark'])
+      expect(await run('light')).toEqual(['light'])
+      expect(await run(null)).toEqual([])
+      expect(await run('sepia')).toEqual([])
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+})
+
+describe('@owlmeans/web-panel — the footer theme switcher', () => {
+  test('renders beside the credit, flips the class on <html> and persists the choice', async () => {
+    const { page, close } = await open('/prefs?themeToggle=1')
+    try {
+      await page.waitForSelector('#prefs')
+      const toggle = page.locator('footer > div [data-footer-bottom] [data-theme-toggle]')
+      await toggle.waitFor()
+      expect(await page.locator('footer [data-footer-bottom] > [data-shell-credit] + [data-theme-toggle]').count()).toBe(1)
+      const box = await toggle.boundingBox()
+      expect((box?.width ?? 0) >= 44 && (box?.height ?? 0) >= 44).toBe(true)
+      expect(await toggle.getAttribute('type')).toBe('button')
+
+      // No choice stored, the system light: the page is light, so the press means "dark".
+      expect(await toggle.getAttribute('aria-label')).toBe('Switch to dark mode')
+      expect(await rootClasses(page)).toEqual([])
+
+      await toggle.click()
+      expect(await rootClasses(page)).toEqual(['dark'])
+      expect(await stored(page)).toBe('dark')
+      expect(await toggle.getAttribute('aria-label')).toBe('Switch to light mode')
+
+      await toggle.click()
+      expect(await rootClasses(page)).toEqual(['light'])
+      expect(await stored(page)).toBe('light')
+
+      // The choice outlives the page: a reload comes back to it.
+      await page.reload()
+      await page.waitForSelector('#prefs')
+      await toggle.waitFor()
+      expect(await toggle.getAttribute('aria-label')).toBe('Switch to dark mode')
+      expect(await rootClasses(page)).toEqual(['light'])
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('flips the RESOLVED scheme when the system prefers dark and nothing is stored', async () => {
+    const { page, close } = await open('/prefs?themeToggle=1')
+    try {
+      await page.waitForSelector('#prefs')
+      const toggle = page.locator('footer [data-theme-toggle]')
+      await toggle.waitFor()
+      await page.emulateMedia({ colorScheme: 'dark' })
+      await page.waitForFunction(() =>
+        document.querySelector('[data-theme-toggle]')?.getAttribute('data-scheme') === 'dark')
+      expect(await toggle.getAttribute('aria-label')).toBe('Switch to light mode')
+      expect(await rootClasses(page)).toEqual([])
+
+      await toggle.click()
+      expect(await rootClasses(page)).toEqual(['light'])
+      expect(await stored(page)).toBe('light')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('works with a node footer and keeps the footer pins', async () => {
+    const { page, close } = await open('/prefs?themeToggle=1&footer=node')
+    try {
+      await page.waitForSelector('#prefs')
+      await page.locator('footer [data-theme-toggle]').waitFor()
+      expect(await page.locator('footer > div > [data-footer-content]').count()).toBe(1)
+      const container = page.locator('footer > div').first()
+      expect(await container.evaluate(el => window.getComputedStyle(el).alignItems)).toBe('center')
+      const box = async (sel: string) => {
+        const b = await page.locator(sel).first().boundingBox()
+        if (b == null) throw new Error(`no box for ${sel}`)
+        return { x: Math.round(b.x), w: Math.round(b.width) }
+      }
+      expect(await box('footer > div')).toEqual(await box('header > div'))
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('absent, the footer is unchanged: no switcher, the credit is the last child', async () => {
+    const { page, close } = await open('/prefs')
+    try {
+      await page.waitForSelector('#prefs')
+      await page.locator('footer [data-shell-credit]').waitFor()
+      expect(await page.locator('[data-theme-toggle]').count()).toBe(0)
+      expect(await page.locator('[data-footer-bottom]').count()).toBe(0)
+      expect(await page.locator('footer > div').first()
+        .evaluate(el => el.lastElementChild?.hasAttribute('data-shell-credit'))).toBe(true)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+})

package/tests/smoke.spec.ts

@@ -1,5 +1,5 @@
 import { afterAll, describe, expect, test } from 'bun:test'
-import { closeBrowser, mountComponent } from '@owlmeans/test-ui'
+import { mountComponent, browserHelper } from '@owlmeans/test-ui'
 
 const harness = `data:text/html,${encodeURIComponent(`
 <!doctype html>
@@ -13,7 +13,7 @@ const harness = `data:text/html,${encodeURIComponent(`
 const TIMEOUT = 30_000
 
 afterAll(async () => {
-  await closeBrowser()
+  await browserHelper.closeBrowser()
 })
 
 describe('@owlmeans/web-panel — Playwright-library smoke', () => {

package/tests/socket-dialog.spec.ts

@@ -0,0 +1,154 @@
+import { afterAll, describe, expect, test } from 'bun:test'
+import { mountComponent, browserHelper } from '@owlmeans/test-ui'
+import { HARNESS_URL } from './context.js'
+
+// Browser work does not fit the 5s default: a cold harness compiles the app on first request.
+const TIMEOUT = 30_000
+
+afterAll(async () => {
+  await browserHelper.closeBrowser()
+})
+
+const open = async (path: string) => mountComponent({ url: `${HARNESS_URL.replace(/\/$/, '')}${path}` })
+
+type Page = Awaited<ReturnType<typeof open>>['page']
+
+// The modal overlay covers the harness buttons and would take a pointer click itself.
+const clickBehindDialog = async (page: Page, selector: string) =>
+  page.evaluate(sel => document.querySelector<HTMLButtonElement>(sel)?.click(), selector)
+
+const revivedCount = async (page: Page, count: number) =>
+  page.waitForFunction(n => document.querySelector('#revived')?.textContent === String(n), count)
+
+const retryDisabled = async (page: Page, disabled: boolean) => page.waitForFunction(
+  d => document.querySelector<HTMLButtonElement>('[data-socket-retry-action]')?.disabled === d, disabled
+)
+
+describe('@owlmeans/web-panel — the socket reload dialog', () => {
+  test('stays unmounted until the connection is reported lost', async () => {
+    const { page, close } = await open('/socket')
+    try {
+      await page.waitForSelector('#socket-status')
+      expect(await page.locator('[data-socket-reload-dialog]').count()).toBe(0)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('opens on "lost", blocks Escape and outside clicks, and Reload reloads the page', async () => {
+    const { page, close } = await open('/socket')
+    try {
+      await page.waitForSelector('#socket-status')
+      await page.locator('#report-lost').click()
+
+      const dialog = page.locator('[data-socket-reload-dialog]')
+      await dialog.waitFor({ state: 'visible' })
+
+      // Neither Escape nor a click outside the dialog may close it — there is nothing else the
+      // budget-exhausted state can resolve into, so the only exit is the action button.
+      await page.keyboard.press('Escape')
+      expect(await dialog.isVisible()).toBe(true)
+      await page.mouse.click(2, 2)
+      expect(await dialog.isVisible()).toBe(true)
+
+      // The secondary button's label must be readable, not the primary's text on an outline fill.
+      const reloadColors = await page.locator('[data-socket-reload-action]').evaluate(el => {
+        const style = getComputedStyle(el)
+        return { color: style.color, background: style.backgroundColor }
+      })
+      expect(reloadColors.color).not.toBe(reloadColors.background)
+
+      const [navigated] = await Promise.all([
+        page.waitForEvent('load'),
+        page.locator('[data-socket-reload-action]').click(),
+      ])
+      expect(navigated).toBeTruthy()
+
+      // A fresh boot: the in-memory status service starts at `'online'` again, so the dialog it
+      // was showing is gone without anything having to dismiss it.
+      await page.waitForSelector('#socket-status')
+      expect(await page.locator('[data-socket-reload-dialog]').count()).toBe(0)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('Try again revives the lost connection, shows progress, and closes once it is back', async () => {
+    const { page, close } = await open('/socket')
+    try {
+      await page.waitForSelector('#socket-status')
+      await page.locator('#report-lost').click()
+
+      const dialog = page.locator('[data-socket-reload-dialog]')
+      const retry = page.locator('[data-socket-retry-action]')
+      await dialog.waitFor({ state: 'visible' })
+      expect(await retry.isEnabled()).toBe(true)
+
+      await retry.click()
+      await revivedCount(page, 1)
+      await retryDisabled(page, true)
+      // Still up while the revived connection is retrying — closing now would read as "fixed".
+      expect(await dialog.isVisible()).toBe(true)
+      expect(await retry.getAttribute('aria-busy')).toBe('true')
+
+      await clickBehindDialog(page, '#report-online')
+      await dialog.waitFor({ state: 'detached' })
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('a retry that fails again offers both buttons again', async () => {
+    const { page, close } = await open('/socket')
+    try {
+      await page.waitForSelector('#socket-status')
+      await page.locator('#report-lost').click()
+      const retry = page.locator('[data-socket-retry-action]')
+      await retry.click()
+      await retryDisabled(page, true)
+
+      await clickBehindDialog(page, '#report-lost')
+      await retryDisabled(page, false)
+      expect(await page.locator('[data-socket-reload-dialog]').isVisible()).toBe(true)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('retries on its own when the tab or window becomes active again', async () => {
+    const { page, close } = await open('/socket')
+    try {
+      await page.waitForSelector('#socket-status')
+      await page.locator('#report-lost').click()
+      await page.locator('[data-socket-reload-dialog]').waitFor({ state: 'visible' })
+
+      await page.evaluate(() => document.dispatchEvent(new Event('visibilitychange')))
+      await revivedCount(page, 1)
+
+      // Nothing is lost any more, so a second activation has nothing to revive.
+      await page.evaluate(() => window.dispatchEvent(new Event('focus')))
+      await page.waitForTimeout(100)
+      expect(await page.locator('#revived').textContent()).toBe('1')
+
+      await clickBehindDialog(page, '#report-lost')
+      await page.evaluate(() => window.dispatchEvent(new Event('focus')))
+      await revivedCount(page, 2)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('never mounts when the app has not opted in via cfg.socket.reloadDialog', async () => {
+    const { page, close } = await open('/socket?reloadDialog=0')
+    try {
+      await page.waitForSelector('#socket-status')
+      await page.locator('#report-lost').click()
+      // Give a mount a moment it would otherwise use — asserting immediately after a click that
+      // triggers no render at all would pass even if the gate were backwards.
+      await page.waitForTimeout(200)
+      expect(await page.locator('[data-socket-reload-dialog]').count()).toBe(0)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+})

package/tests/toaster.spec.ts

@@ -0,0 +1,59 @@
+import { afterAll, describe, expect, test } from 'bun:test'
+import { mountComponent, browserHelper } from '@owlmeans/test-ui'
+import { HARNESS_URL } from './context.js'
+
+// Browser work does not fit the 5s default: a cold harness compiles the app on first request.
+const TIMEOUT = 30_000
+
+afterAll(async () => {
+  await browserHelper.closeBrowser()
+})
+
+const open = async (path: string) => mountComponent({ url: `${HARNESS_URL.replace(/\/$/, '')}${path}` })
+
+describe('@owlmeans/web-panel — the toast surface', () => {
+  test('an action reports its outcome, once, through the layout-mounted Toaster', async () => {
+    // The whole point of shipping the Toaster from the panel: a screen calls `toast()` from
+    // `sonner` and something the LAYOUT mounted renders it. Both failure modes are silent —
+    // no mount renders nothing at all, two mounts render every message twice — so the count
+    // is asserted rather than the mere presence.
+    const { page, close } = await open('/prefs')
+    try {
+      await page.waitForSelector('#prefs')
+      await page.locator('#fire-toast').click()
+
+      const toast = page.locator('[data-sonner-toast]')
+      await toast.first().waitFor({ state: 'visible' })
+      expect(await page.locator('[data-sonner-toaster]').count()).toBe(1)
+      expect(await toast.count()).toBe(1)
+      expect(await toast.first().textContent()).toContain('preferences saved')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the toasts follow the document theme class', async () => {
+    // The panel reads `.dark` off the document element rather than a theme provider's hook, so
+    // it follows next-themes, the owl theme provider and a hand-set class alike. A toast painted
+    // in the wrong theme is the visible half; the invisible half is a package that would have
+    // forced `next-themes` on every consumer.
+    const { page, close } = await open('/prefs')
+    try {
+      await page.waitForSelector('#prefs')
+      await page.locator('#fire-sticky').click()
+      // The toast is what becomes visible; the list around it is a zero-box positioning
+      // container, so waiting on the list itself never resolves.
+      await page.locator('[data-sonner-toast]').first().waitFor({ state: 'visible' })
+      const toaster = page.locator('[data-sonner-toaster]')
+      expect(await toaster.getAttribute('data-sonner-theme')).toBe('light')
+
+      await page.evaluate(() => document.documentElement.classList.add('dark'))
+      await page.waitForFunction(
+        () => document.querySelector('[data-sonner-toaster]')?.getAttribute('data-sonner-theme') === 'dark'
+      )
+      expect(await toaster.getAttribute('data-sonner-theme')).toBe('dark')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+})

package/zz-tw.d.mts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=zz-tw.d.mts.map

package/zz-tw.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zz-tw.d.mts","sourceRoot":"","sources":["zz-tw.mjs"],"names":[],"mappings":""}

package/src/auth/modules.ts

@@ -1,5 +0,0 @@
-
-import { modules as list } from '@owlmeans/client-auth/manager/modules'
-import { modules as config } from '@owlmeans/api-config-client'
-
-export const modules = [...list, ...config]

package/src/modules.ts

@@ -1,5 +0,0 @@
-
-import { modules as list } from '@owlmeans/web-client'
-import { modules as config } from '@owlmeans/api-config-client'
-
-export const modules = [...list, ...config]