@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.1

package/src/__tests__/components/PluginWorkspaceView.test.ts

@@ -9,27 +9,25 @@ import AppTopBar from '../../components/AppTopBar.vue'
 import ExperimentPopover from '../../components/ExperimentPopover.vue'
 import ExperimentSelectorModal from '../../components/ExperimentSelectorModal.vue'
 import PluginWorkspaceView from '../../components/PluginWorkspaceView.vue'
-import { defineDoseDesignControlModel } from '../../composables/useControlSchema'
-import { usePlatformContext } from '../../composables/usePlatformContext'
+import AppToastContainer from '../../components/AppToastContainer.vue'
+import { defineControlModel, defineDoseDesignControlModel } from '../../composables/useControlSchema'
+import { usePlatform } from '../../composables/usePlatform'
 import { useExperimentStore } from '../../stores/experiment'
 import type {
   ExperimentSummary,
-  PageSelectorItemInput,
   PillNavItem,
   SidebarToolSection,
 } from '../../types'
 
-vi.mock('../../composables/usePlatformContext', () => ({
-  usePlatformContext: vi.fn(() => ({
-    isIntegrated: computed(() => false),
-    context: ref({ isIntegrated: false, theme: 'system' }),
+vi.mock('../../composables/usePlatform', () => ({
+  usePlatform: vi.fn(() => ({
+    integrated: computed(() => false),
+    isAdmin: computed(() => true),
+    can: () => true,
     plugin: computed(() => undefined),
     user: computed(() => undefined),
     theme: computed(() => 'system' as const),
     features: computed(() => undefined),
-    navigate: vi.fn(),
-    notify: vi.fn(),
-    sendToPlatform: vi.fn(),
   })),
 }))
 
@@ -101,23 +99,20 @@ const globalOptions = {
   },
 }
 
-interface PageSelectorWorkspaceProps {
-  pageSelector?: PageSelectorItemInput[]
-  currentPageSelectorId?: string
-}
-
-function mountIntegratedPageSelectorWorkspace(
-  props: PageSelectorWorkspaceProps = {},
-): VueWrapper {
-  vi.mocked(usePlatformContext).mockReturnValueOnce({
-    isIntegrated: computed(() => true),
-    context: ref({ isIntegrated: true, theme: 'system' }),
+function mountIntegratedPageSelectorWorkspace(): VueWrapper {
+  vi.mocked(usePlatform).mockReturnValueOnce({
+    integrated: computed(() => true),
+    isAdmin: computed(() => true),
+    can: () => true,
     plugin: computed(() => ({
       id: 'workspace-plugin',
       name: 'Workspace Plugin',
+      display_name: 'Workspace Plugin',
       version: '1.0.0',
+      plugin_type: 'analysis',
       route_prefix: '/workspace-plugin',
       api_prefix: '/api/workspace-plugin',
+      settings_api: 'platform' as const,
       nav_items: [
         { path: '/platform-one', label: 'Platform One' },
         { path: '/platform-two', label: 'Platform Two' },
@@ -126,14 +121,10 @@ function mountIntegratedPageSelectorWorkspace(
     user: computed(() => undefined),
     theme: computed(() => 'system' as const),
     features: computed(() => undefined),
-    navigate: vi.fn(),
-    notify: vi.fn(),
-    sendToPlatform: vi.fn(),
   })
   return mount(PluginWorkspaceView, {
     props: {
-      title: 'Workspace',
-      ...props,
+      spec: { title: 'Workspace' },
     },
     global: globalOptions,
   })
@@ -151,12 +142,12 @@ describe('PluginWorkspaceView', () => {
   it('renders the standard AppLayout, AppTopBar, and AppSidebar plugin shell', () => {
     const wrapper = mount(PluginWorkspaceView, {
       props: {
-        title: 'MS Uploader',
-        subtitle: 'Import and visualize',
-        pillNav,
-        panels,
-        sidebarTitle: 'Tools',
-        sidebarSubtitle: 'Current file',
+        spec: {
+          title: 'MS Uploader',
+          subtitle: 'Import and visualize',
+          topBar: { pills: pillNav },
+          sidebar: { title: 'Tools', subtitle: 'Current file', panels },
+        },
       },
       slots: {
         actions: () => h('button', { 'data-test': 'topbar-action' }, 'Run'),
@@ -174,16 +165,12 @@ describe('PluginWorkspaceView', () => {
     expect(wrapper.findComponent(AppTopBar).props()).toMatchObject({
       title: 'MS Uploader',
       subtitle: 'Import and visualize',
-      pillNav,
-      currentPillId: 'data',
+      spec: { pills: pillNav, themeToggle: true, settings: {}, standaloneLabel: false },
+      pill: 'data',
     })
     expect(wrapper.findComponent(AppSidebar).props()).toMatchObject({
-      panels,
+      spec: { panels, title: 'Tools', subtitle: 'Current file', floating: false },
       activeView: 'data',
-      title: 'Tools',
-      subtitle: 'Current file',
-      floating: false,
-      density: 'compact',
     })
     expect(wrapper.get('[data-test="topbar-action"]').text()).toBe('Run')
     expect(wrapper.get('[data-test="import-action"]').text()).toBe('Upload')
@@ -193,9 +180,7 @@ describe('PluginWorkspaceView', () => {
   it('keeps topbar navigation and sidebar panels synchronized in uncontrolled mode', async () => {
     const wrapper = mount(PluginWorkspaceView, {
       props: {
-        title: 'Analysis',
-        pillNav,
-        panels,
+        spec: { title: 'Analysis', topBar: { pills: pillNav }, sidebar: { panels } },
       },
       slots: {
         default: ({ activeView }: WorkspaceSlotProps) => h('main', { 'data-test': 'content' }, activeView),
@@ -206,72 +191,78 @@ describe('PluginWorkspaceView', () => {
     wrapper.findComponent(AppTopBar).vm.$emit('pill-select', { id: 'results', label: 'Results' })
     await nextTick()
 
-    expect(wrapper.findComponent(AppTopBar).props('currentPillId')).toBe('results')
+    expect(wrapper.findComponent(AppTopBar).props('pill')).toBe('results')
     expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('results')
     expect(wrapper.get('[data-test="content"]').text()).toBe('results')
-    expect(wrapper.emitted('update:activeView')).toEqual([['results']])
+    expect(wrapper.emitted('update:view')).toEqual([['results']])
     expect(wrapper.emitted('pill-select')).toEqual([[{ id: 'results', label: 'Results' }]])
   })
 
-  it('should use platform pages when pageSelector is omitted', () => {
-    const wrapper = mountIntegratedPageSelectorWorkspace()
+  it('emits update:pill when a pill is selected', async () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: { spec: { topBar: { pills: pillNav } } },
+      global: globalOptions,
+    })
 
-    expect(wrapper.find('.mint-page-selector').exists()).toBe(true)
+    wrapper.findComponent(AppTopBar).vm.$emit('pill-select', { id: 'results', label: 'Results' })
+    await nextTick()
+
+    expect(wrapper.emitted('update:pill')).toEqual([['results']])
   })
 
-  it('should suppress platform pages when pageSelector is explicitly empty', () => {
-    const wrapper = mountIntegratedPageSelectorWorkspace({ pageSelector: [] })
+  it('renders no top bar when spec.topBar is false', () => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: { spec: { topBar: false } },
+      global: globalOptions,
+    })
 
-    expect(wrapper.find('.mint-page-selector').exists()).toBe(false)
+    expect(wrapper.findComponent(AppTopBar).exists()).toBe(false)
   })
 
-  it('should hide one explicit page without falling back to platform pages', () => {
-    const wrapper = mountIntegratedPageSelectorWorkspace({
-      pageSelector: [{ id: 'downloads', label: 'Downloads', to: '/' }],
-      currentPageSelectorId: 'downloads',
+  it.each([
+    { toasts: undefined, rendered: true },
+    { toasts: false, rendered: false },
+  ])('renders the toast container: $rendered when spec.toasts is $toasts', ({ toasts, rendered }) => {
+    const wrapper = mount(PluginWorkspaceView, {
+      props: { spec: { toasts } },
+      global: globalOptions,
     })
 
-    expect(wrapper.find('.mint-page-selector').exists()).toBe(false)
+    expect(wrapper.findComponent(AppToastContainer).exists()).toBe(rendered)
   })
 
-  it('should render multiple explicit pages ahead of platform pages', () => {
-    const wrapper = mountIntegratedPageSelectorWorkspace({
-      pageSelector: [
-        { id: 'overview', label: 'Overview', to: '/' },
-        { id: 'reports', label: 'Reports', to: '/reports' },
-      ],
-      currentPageSelectorId: 'overview',
-    })
+  it('should leave the page selector to the platform', () => {
+    const wrapper = mountIntegratedPageSelectorWorkspace()
 
-    expect(wrapper.get('.mint-page-selector__label').text()).toBe('Overview')
+    expect(wrapper.find('.mint-topbar__platform-page-selector').exists()).toBe(true)
   })
 
-  it('passes compact control models to the sidebar for generated forms', () => {
+  it('passes the sidebar control model to the sidebar for generated forms', () => {
+    const model = defineControlModel({
+      controls: {
+        threshold: {
+          label: 'Threshold',
+          default: 0.05,
+          section: 'parameters',
+          sectionLabel: 'Parameters',
+          view: 'analysis',
+        },
+      },
+    })
     const wrapper = mount(PluginWorkspaceView, {
       props: {
-        title: 'Generated Controls',
-        controls: {
-          threshold: {
-            label: 'Threshold',
-            default: 0.05,
-            section: 'parameters',
-            sectionLabel: 'Parameters',
-            view: 'analysis',
-          },
+        spec: {
+          title: 'Generated Controls',
+          sidebar: { controls: model },
         },
-        defaultActiveView: 'analysis',
+        view: 'analysis',
         values: { threshold: 0.2 },
       },
       global: globalOptions,
     })
 
     expect(wrapper.findComponent(AppSidebar).props()).toMatchObject({
-      controls: {
-        threshold: expect.objectContaining({
-          label: 'Threshold',
-          default: 0.05,
-        }),
-      },
+      spec: { controls: model },
       activeView: 'analysis',
       values: { threshold: 0.2 },
     })
@@ -280,38 +271,42 @@ describe('PluginWorkspaceView', () => {
   it('derives topbar navigation and active view from compact control models', async () => {
     const wrapper = mount(PluginWorkspaceView, {
       props: {
-        title: 'Generated Workspace',
-        model: {
-          views: {
-            design: {
-              label: 'Design',
-              sections: {
-                plate: {
-                  label: 'Plate setup',
-                  controls: {
-                    plateFormat: {
-                      label: 'Plate format',
-                      default: 96,
-                      options: [96, 384],
+        spec: {
+          title: 'Generated Workspace',
+          sidebar: {
+            controls: defineControlModel({
+              views: {
+                design: {
+                  label: 'Design',
+                  sections: {
+                    plate: {
+                      label: 'Plate setup',
+                      controls: {
+                        plateFormat: {
+                          label: 'Plate format',
+                          default: 96,
+                          options: [96, 384],
+                        },
+                      },
                     },
                   },
                 },
-              },
-            },
-            run: {
-              label: 'Run',
-              sections: {
-                parameters: {
-                  label: 'Parameters',
-                  controls: {
-                    threshold: {
-                      label: 'Threshold',
-                      default: 0.05,
+                run: {
+                  label: 'Run',
+                  sections: {
+                    parameters: {
+                      label: 'Parameters',
+                      controls: {
+                        threshold: {
+                          label: 'Threshold',
+                          default: 0.05,
+                        },
+                      },
                     },
                   },
                 },
               },
-            },
+            }),
           },
         },
       },
@@ -322,28 +317,27 @@ describe('PluginWorkspaceView', () => {
     })
 
     const topBar = wrapper.findComponent(AppTopBar)
-    expect(topBar.props('pillNav')).toEqual([
+    expect(topBar.props('spec')?.pills).toEqual([
       expect.objectContaining({ id: 'design', label: 'Design' }),
       expect.objectContaining({ id: 'run', label: 'Run' }),
     ])
-    expect(topBar.props('currentPillId')).toBe('design')
+    expect(topBar.props('pill')).toBe('design')
     expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('design')
     expect(wrapper.get('[data-test="content"]').text()).toBe('design')
 
     topBar.vm.$emit('pill-select', { id: 'run', label: 'Run' })
     await nextTick()
 
-    expect(wrapper.findComponent(AppTopBar).props('currentPillId')).toBe('run')
+    expect(wrapper.findComponent(AppTopBar).props('pill')).toBe('run')
     expect(wrapper.findComponent(AppSidebar).props('activeView')).toBe('run')
     expect(wrapper.get('[data-test="content"]').text()).toBe('run')
-    expect(wrapper.emitted('update:activeView')).toEqual([['run']])
+    expect(wrapper.emitted('update:view')).toEqual([['run']])
   })
 
   it('can render without a sidebar when callers only need topbar and content', () => {
     const wrapper = mount(PluginWorkspaceView, {
       props: {
-        title: 'Simple Plugin',
-        showSidebar: false,
+        spec: { title: 'Simple Plugin', sidebar: false },
       },
       slots: {
         default: () => h('main', { 'data-test': 'content' }, 'Ready'),
@@ -359,12 +353,16 @@ describe('PluginWorkspaceView', () => {
   it('supports route-owned sidebar content through an AppSidebar content target', () => {
     const wrapper = mount(PluginWorkspaceView, {
       props: {
-        title: 'Route Tools',
-        sidebarContentId: 'route-sidebar',
-        sidebarCollapsible: false,
-        sidebarCollapsedWidth: '3.5rem',
-        sidebarCollapseButtonLabel: 'Hide route tools',
-        sidebarExpandButtonLabel: 'Show route tools',
+        spec: {
+          title: 'Route Tools',
+          sidebar: {
+            contentId: 'route-sidebar',
+            collapsible: false,
+            collapsedWidth: '3.5rem',
+            collapseButtonLabel: 'Hide route tools',
+            expandButtonLabel: 'Show route tools',
+          },
+        },
       },
       slots: {
         footer: () => h('button', { 'data-test': 'sidebar-footer' }, 'Run'),
@@ -373,9 +371,9 @@ describe('PluginWorkspaceView', () => {
     })
 
     const sidebar = wrapper.findComponent(AppSidebar)
-    expect(sidebar.props()).toMatchObject({
+    expect(sidebar.props('spec')).toMatchObject({
       contentId: 'route-sidebar',
-      showWhenEmpty: true,
+      whenEmpty: true,
       collapsible: false,
       collapsedWidth: '3.5rem',
       collapseButtonLabel: 'Hide route tools',
@@ -386,16 +384,14 @@ describe('PluginWorkspaceView', () => {
   })
 
   it('can provide AppTopBar experiment selection and save wiring from the shared store', async () => {
-    vi.mocked(usePlatformContext).mockReturnValueOnce({
-      isIntegrated: computed(() => true),
-      context: ref({ isIntegrated: true, theme: 'system' }),
+    vi.mocked(usePlatform).mockReturnValueOnce({
+      integrated: computed(() => true),
+      isAdmin: computed(() => true),
+      can: () => true,
       plugin: computed(() => undefined),
       user: computed(() => undefined),
       theme: computed(() => 'system' as const),
       features: computed(() => undefined),
-      navigate: vi.fn(),
-      notify: vi.fn(),
-      sendToPlatform: vi.fn(),
     })
     setActivePinia(workspacePinia)
     const store = useExperimentStore()
@@ -409,12 +405,12 @@ describe('PluginWorkspaceView', () => {
     const experimentSave = vi.fn().mockResolvedValue('Saved shell')
     const wrapper = mount(PluginWorkspaceView, {
       props: {
-        title: 'Experiment Shell',
-        experimentShell: true,
-        experimentSave,
-        experimentSaveDisabled: true,
-        experimentSaveDisabledMessage: 'Upload data first',
-        showSidebar: false,
+        spec: {
+          title: 'Experiment Shell',
+          experiment: true,
+          sidebar: false,
+          save: { handler: experimentSave, disabled: true, reason: 'Upload data first' },
+        },
       },
       global: globalOptions,
     })
@@ -439,7 +435,7 @@ describe('PluginWorkspaceView', () => {
     await nextTick()
 
     expect(wrapper.findComponent(ExperimentSelectorModal).props()).toMatchObject({
-      modelValue: true,
+      open: true,
       currentExperimentId: 12,
     })
 
@@ -471,26 +467,53 @@ describe('PluginWorkspaceView', () => {
     expect(store.currentId).toBeNull()
   })
 
+  it('keeps the save action disabled when spec.save.reason is empty', async () => {
+    vi.mocked(usePlatform).mockReturnValueOnce({
+      integrated: computed(() => true),
+      isAdmin: computed(() => true),
+      can: () => true,
+      plugin: computed(() => undefined),
+      user: computed(() => undefined),
+      theme: computed(() => 'system' as const),
+      features: computed(() => undefined),
+    })
+    setActivePinia(workspacePinia)
+    const store = useExperimentStore()
+    store.clear()
+    store.select(makeExperiment())
+    const blocked = ref(true)
+    const wrapper = mount(PluginWorkspaceView, {
+      props: {
+        spec: {
+          experiment: true,
+          sidebar: false,
+          save: { handler: vi.fn(), disabled: () => blocked.value, reason: '' },
+        },
+      },
+      global: globalOptions,
+    })
+    await flushPromises()
+
+    expect(wrapper.findComponent(ExperimentPopover).props('saveDisabled')).toBe(true)
+    store.clear()
+  })
+
   it('shows the unresolved chip states rather than inventing a name from an id', async () => {
-    vi.mocked(usePlatformContext).mockReturnValueOnce({
-      isIntegrated: computed(() => true),
-      context: ref({ isIntegrated: true, theme: 'system' }),
+    vi.mocked(usePlatform).mockReturnValueOnce({
+      integrated: computed(() => true),
+      isAdmin: computed(() => true),
+      can: () => true,
       plugin: computed(() => undefined),
       user: computed(() => undefined),
       theme: computed(() => 'system' as const),
       features: computed(() => undefined),
-      navigate: vi.fn(),
-      notify: vi.fn(),
-      sendToPlatform: vi.fn(),
     })
     setActivePinia(workspacePinia)
     const store = useExperimentStore()
     store.clear()
     const wrapper = mount(PluginWorkspaceView, {
       props: {
-        title: 'Experiment Shell',
-        experimentShell: true,
-        showSidebar: false,
+        spec: { title: 'Experiment Shell', experiment: true, sidebar: false },
       },
       global: globalOptions,
     })
@@ -532,9 +555,8 @@ describe('PluginWorkspaceView', () => {
     })
     const wrapper = mount(PluginWorkspaceView, {
       props: {
-        title: 'Dose Design',
-        model,
-        modelValue: {
+        spec: { title: 'Dose Design', sidebar: { controls: model } },
+        values: {
           selectedWells: ['C1'],
           plateFormat: 384,
           doseMode: 'dilution',
@@ -566,7 +588,7 @@ describe('PluginWorkspaceView', () => {
       },
       plate: {
         modelValue: ['C1'],
-        format: 384,
+        spec: { format: 384 },
         disabled: true,
       },
       dose: {
@@ -578,7 +600,7 @@ describe('PluginWorkspaceView', () => {
     })
 
     await wrapper.setProps({
-      modelValue: {
+      values: {
         selectedWells: ['D1', 'D2'],
         plateFormat: 96,
         doseMode: 'serial',
@@ -597,7 +619,7 @@ describe('PluginWorkspaceView', () => {
       },
       plate: {
         modelValue: ['D1', 'D2'],
-        format: 96,
+        spec: { format: 96 },
         disabled: false,
       },
       dose: {
@@ -617,8 +639,7 @@ describe('PluginWorkspaceView', () => {
     let latestSlotProps: WorkspaceComponentSlotProps | undefined
     const wrapper = mount(PluginWorkspaceView, {
       props: {
-        title: 'Dose Design',
-        model,
+        spec: { title: 'Dose Design', sidebar: { controls: model } },
       },
       slots: {
         default: (slotProps: WorkspaceComponentSlotProps) => {
@@ -643,7 +664,7 @@ describe('PluginWorkspaceView', () => {
       },
       plate: {
         modelValue: ['A1', 'A2'],
-        format: 96,
+        spec: { format: 96 },
         disabled: false,
       },
     })
@@ -654,7 +675,7 @@ describe('PluginWorkspaceView', () => {
     updateSelectedWells?.(['E1', 'E2'])
     await nextTick()
 
-    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{
+    expect(wrapper.emitted('update:values')?.at(-1)).toEqual([{
       selectedWells: ['E1', 'E2'],
       plateFormat: 96,
       doseMode: 'serial',
@@ -671,14 +692,14 @@ describe('PluginWorkspaceView', () => {
       },
       plate: {
         modelValue: ['E1', 'E2'],
-        format: 96,
+        spec: { format: 96 },
       },
       dose: {
         targetWells: ['E1', 'E2'],
       },
     })
 
-    wrapper.findComponent(AppSidebar).vm.$emit('update:modelValue', {
+    wrapper.findComponent(AppSidebar).vm.$emit('update:values', {
       selectedWells: ['F1'],
       plateFormat: 384,
       doseMode: 'dilution',
@@ -704,7 +725,7 @@ describe('PluginWorkspaceView', () => {
       },
       plate: {
         modelValue: ['F1'],
-        format: 384,
+        spec: { format: 384 },
         disabled: true,
       },
       dose: {

package/src/__tests__/components/PresenceAvatars.test.ts

@@ -0,0 +1,90 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { h } from 'vue'
+import { describe, expect, it } from 'vitest'
+
+import PresenceAvatars from '../../components/PresenceAvatars.vue'
+import { arrangePresence, type PresencePerson } from '../../utils/presenceAvatars'
+
+function person(id: string, activity: PresencePerson['activity'] = 'viewing_design'): PresencePerson {
+  return { id, name: `User ${id}`, activity }
+}
+
+const six = [
+  person('2'),
+  person('3', 'viewing_results'),
+  person('4'),
+  person('5', 'viewing_results'),
+  person('6'),
+  person('1', 'editing'),
+]
+
+describe('arrangePresence', () => {
+  it.each([
+    ['puts an editor first and among the shown when it comes last', six, {}, ['1', '2', '3', '4'], 2, 6],
+    ['leaves out the current user', [person('9'), person('2')], { selfId: '9' }, ['2'], 0, 1],
+    ['counts the people the platform did not list', [person('9'), person('2')], { selfId: '9', count: 25 }, ['2'], 23, 24],
+    ['shows everyone at the cap without an overflow', six.slice(0, 4), {}, ['2', '3', '4', '5'], 0, 4],
+  ])('should %s', (_case, people, options, shownIds, overflow, total) => {
+    const arrangement = arrangePresence(people, options)
+
+    expect(arrangement.shown.map(entry => entry.id)).toEqual(shownIds)
+    expect(arrangement.overflow).toBe(overflow)
+    expect(arrangement.total).toBe(total)
+  })
+})
+
+describe('PresenceAvatars', () => {
+  it('should name each shown person and activity in one button label when others are here', async () => {
+    const wrapper = mount(PresenceAvatars, { props: { people: [...six, person('9')], selfId: '9' }, attachTo: document.body })
+    const trigger = wrapper.get('button')
+
+    expect(trigger.attributes('aria-label')).toBe(
+      '6 other people here: User 1 editing, User 2 viewing design, User 3 viewing results, User 4 viewing design, and 2 more',
+    )
+    expect(wrapper.findAll('.mint-presence__stack .mint-presence__avatar')).toHaveLength(4)
+    expect(wrapper.get('.mint-presence__more').text()).toBe('+2')
+
+    await trigger.trigger('click')
+
+    expect(trigger.attributes('aria-expanded')).toBe('true')
+    expect(wrapper.findAll('.mint-presence__panel li')).toHaveLength(6)
+    wrapper.unmount()
+  })
+
+  it('should come back closed when everyone else left with the list open', async () => {
+    const wrapper = mount(PresenceAvatars, { props: { people: six }, attachTo: document.body })
+    await wrapper.get('button').trigger('click')
+
+    await wrapper.setProps({ people: [] })
+    await wrapper.setProps({ people: six })
+
+    expect(wrapper.get('button').attributes('aria-expanded')).toBe('false')
+    expect(wrapper.find('.mint-presence__panel').exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it.each([
+    ['close the list and keep the focus on the next control', '#edit', 'false', '#edit'],
+    ['close the list and return the focus to the button', '.mint-presence__trigger', 'false', '.mint-presence__trigger'],
+  ])('should %s when Escape is pressed with the list open', async (_case, from, expanded, focused) => {
+    const wrapper = mount({
+      render: () => [h(PresenceAvatars, { people: six }), h('button', { id: 'edit', type: 'button' }, 'Edit')],
+    }, { attachTo: document.body })
+    await wrapper.get('.mint-presence__trigger').trigger('click')
+    const target = wrapper.get(from)
+    ;(target.element as HTMLElement).focus()
+
+    await target.trigger('keydown', { key: 'Escape' })
+    await flushPromises()
+
+    expect(wrapper.get('.mint-presence__trigger').attributes('aria-expanded')).toBe(expanded)
+    expect(document.activeElement).toBe(wrapper.get(focused).element)
+    wrapper.unmount()
+  })
+
+  it('should render nothing when only the current user is here', () => {
+    const wrapper = mount(PresenceAvatars, { props: { people: [person('9')], selfId: '9' } })
+
+    expect(wrapper.find('button').exists()).toBe(false)
+  })
+})