test(phase-11): add Nyquist validation coverage

2026-06-17 09:58:59 +02:00
parent f5fc8d111b
commit 64aa960d20
2 changed files with 165 additions and 0 deletions
@@ -66,3 +66,59 @@ describe('Gap 1 regression: non-loading branches unchanged', () => {
    expect(w.text()).toContain('Empty')
  })
 })
+
+describe('Phase 11 validation: TreeItem visual invariants', () => {
+  it('applies focus-visible rings to the expand control and selectable row button', () => {
+    const w = mountItem()
+    const buttons = w.findAll('button')
+
+    expect(buttons).toHaveLength(2)
+    for (const button of buttons) {
+      const cls = button.attributes('class') || ''
+      expect(cls).toContain('focus-visible:outline-none')
+      expect(cls).toContain('focus-visible:ring-2')
+      expect(cls).toContain('focus-visible:ring-indigo-500')
+      expect(cls).toContain('focus-visible:ring-offset-1')
+    }
+  })
+
+  it('applies focus-visible rings to the router-link row', () => {
+    const w = mountItem({ to: '/folders/archive' })
+    const link = w.findComponent({ name: 'RouterLink' })
+
+    expect(link.exists()).toBe(true)
+    const cls = link.attributes('class') || ''
+    expect(cls).toContain('focus-visible:outline-none')
+    expect(cls).toContain('focus-visible:ring-2')
+    expect(cls).toContain('focus-visible:ring-indigo-500')
+    expect(cls).toContain('focus-visible:ring-offset-1')
+  })
+
+  it('uses Tailwind width classes for loading skeleton labels without inline width styles', async () => {
+    let resolveFn
+    const loadChildren = vi.fn()
+      .mockReturnValueOnce(Promise.resolve([]))
+      .mockReturnValue(new Promise(resolve => { resolveFn = resolve }))
+    const w = mountItem({ loadChildren })
+
+    await w.vm.$.setupState.toggleExpand()
+    await flushPromises()
+    w.vm.$.setupState.refresh()
+    await nextTick()
+
+    const skeletonLabels = w.findAll('.h-3.animate-pulse')
+    expect(skeletonLabels).toHaveLength(3)
+    expect(skeletonLabels.map(el => el.classes().find(cls => /^w-\d+$/.test(cls)))).toEqual([
+      'w-12',
+      'w-16',
+      'w-20',
+    ])
+
+    for (const label of skeletonLabels) {
+      expect(label.attributes('style') || '').not.toMatch(/width\s*:/)
+    }
+
+    resolveFn([])
+    await flushPromises()
+  })
+})