test(quick-261022-imo): settings section panel coverage

- settingsSectionOf: null cases, category order, link entry placement
- SettingsPanel: labels, links, current entry, empty category, collapse
- AppShell: hidden cases, settings-link controllers, collapse, offset, narrow, focus hand-off

admin/tests/shell/AppShell.test.ts

@@ -151,4 +151,85 @@ describe('settings section panel', () => {
     expect(links[0]!.attributes('aria-current')).toBe('page')
     expect(links[1]!.attributes('aria-current')).toBeUndefined()
   })
+
+  const link = (code: string, label: string, controller: string) => ({
+    ...settingsFixture.list.data[0]!,
+    code,
+    label,
+    model: '',
+    controller,
+    order: 15,
+  })
+
+  it('is hidden for a one-entry category and on the settings index', async () => {
+    setSettings(settingsFixture.list.data)
+    const branding = await mountShell('/settings/branding')
+    expect(branding.find('[data-settings-panel]').exists()).toBe(false)
+    expect(branding.find('aside').exists()).toBe(false)
+    branding.unmount()
+    const index = await mountShell('/settings')
+    expect(index.find('aside').exists()).toBe(false)
+  })
+
+  it('never lists an entry of another category', async () => {
+    setSettings(settingsFixture.list.data)
+    const wrapper = await mountShell('/settings/mail')
+    expect(wrapper.find('[data-settings-panel-item="branding"]').exists()).toBe(false)
+    expect(wrapper.text()).not.toContain('Branding')
+  })
+
+  it.each(['/acme/lang/locales', '/acme/lang/locales/5'])(
+    'shows on a settings-link controller without its own navigation entry (%s)',
+    async (path) => {
+      setSettings([...settingsFixture.list.data, link('locales', 'Locales', 'acme.lang.locales')])
+      const wrapper = await mountShell(path)
+      const panel = wrapper.find('aside[data-settings-panel]')
+      expect(panel.exists()).toBe(true)
+      expect(panel.find('[aria-current="page"]').text()).toBe('Locales')
+      expect(panel.findAll('[data-settings-panel-item]').map((item) => item.text())).toEqual(['Mail', 'Locales', 'Search'])
+    },
+  )
+
+  it('keeps the plugin panel on a settings-link controller with its own navigation entry', async () => {
+    setSettings([...settingsFixture.list.data, link('widgets', 'Widgets', 'acme.demo.widgets')])
+    const wrapper = await mountShell('/acme/demo/widgets')
+    expect(wrapper.find('[data-settings-panel]').exists()).toBe(false)
+    expect(wrapper.find('aside span').text()).toBe('Demo')
+  })
+
+  it('collapses with the sidebar and offsets the shell like the plugin panel', async () => {
+    setSettings(settingsFixture.list.data)
+    const wrapper = await mountShell('/settings/mail')
+    const root = wrapper.element as HTMLElement
+    expect(root.style.getPropertyValue('--shell-offset')).toBe('calc(var(--spacing-rail) + var(--spacing-panel))')
+    setCollapsed(true)
+    await flushPromises()
+    expect(wrapper.find('[data-settings-panel]').exists()).toBe(false)
+    expect(root.style.getPropertyValue('--shell-offset')).toBe('var(--spacing-rail)')
+    setCollapsed(false)
+    await flushPromises()
+    expect(wrapper.find('[data-settings-panel]').exists()).toBe(true)
+    expect(root.style.getPropertyValue('--shell-offset')).toBe('calc(var(--spacing-rail) + var(--spacing-panel))')
+  })
+
+  it('is hidden on a narrow viewport', async () => {
+    fakeMedia({ [NARROW_QUERY]: true })
+    setSettings(settingsFixture.list.data)
+    const wrapper = await mountShell('/settings/mail')
+    expect(wrapper.find('[data-settings-panel]').exists()).toBe(false)
+    expect((wrapper.element as HTMLElement).style.getPropertyValue('--shell-offset')).toBe('var(--spacing-rail)')
+  })
+
+  it('hands focus to the rail expand button and back', async () => {
+    setSettings(settingsFixture.list.data)
+    const wrapper = await mountShell('/settings/mail')
+    await wrapper.find('[data-settings-panel] [data-sidebar-collapse]').trigger('click')
+    await flushPromises()
+    expect(wrapper.find('[data-settings-panel]').exists()).toBe(false)
+    expect(document.activeElement?.matches('[data-sidebar-expand]')).toBe(true)
+    await wrapper.find('[data-sidebar-expand]').trigger('click')
+    await flushPromises()
+    expect(wrapper.find('aside[data-settings-panel]').exists()).toBe(true)
+    expect(document.activeElement?.matches('[data-sidebar-collapse]')).toBe(true)
+  })
 })