@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.20

package/src/__tests__/composables/useJobCenter.test.ts

@@ -1,13 +1,13 @@
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { defineComponent, nextTick, shallowRef } from 'vue'
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
   combinePluginJobSources,
   useJobCenter,
   type UseJobCenterOptions,
 } from '../../composables/useJobCenter'
-import type { JobStateInput, JobStatus } from '../../types/jobs'
+import type { JobStateInput, JobStatus, TopBarJob } from '../../types/jobs'
 
 function job(status: JobStatus, id: string = status): JobStateInput {
   return {
@@ -281,3 +281,262 @@ describe('useJobCenter', () => {
     expect(tray.deletableJobs.value).toEqual([])
   })
 })
+
+describe('useJobCenter top-bar chip', () => {
+  const platformWindow = window as unknown as { __MINT_PLATFORM__?: unknown }
+  function integrateAs(userId: number, pluginId = 'peak-qc') {
+    platformWindow.__MINT_PLATFORM__ = { user: { id: userId }, plugin: { id: pluginId } }
+  }
+  const owned = (status: JobStatus, id: string, owner: string | null, user = owner): JobStateInput => ({
+    ...job(status, id), owner_user_id: owner, user_id: user,
+  })
+
+  beforeEach(() => localStorage.clear())
+  afterEach(() => {
+    delete platformWindow.__MINT_PLATFORM__
+    vi.useRealTimers()
+  })
+
+  it.each<[string, JobStateInput[], TopBarJob | null]>([
+    ['an awaiting-input job first', [job('running', 'r'), job('awaiting_input', 'a')],
+      { status: 'awaiting_input', label: 'a waiting for input', percent: null }],
+    ['the first active job', [job('queued', 'q'), job('running', 'r')],
+      { status: 'queued', label: 'q queued', percent: null }],
+    ['the progress message and percent of a running job',
+      [{ ...job('running', 'r'), progress: { ...job('running', 'r').progress, message: 'Integrating' } }],
+      { status: 'running', label: 'Integrating', percent: 42 }],
+    ['nothing without active, held or failed jobs', [job('completed', 'c'), job('cancelled', 'x')], null],
+  ])('should show %s when the viewer runs jobs', (_case, jobs, expected) => {
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+    expect(tray.topBarJob.value).toEqual(expected)
+  })
+
+  it('should show only the viewer own jobs when the page is integrated', () => {
+    integrateAs(1)
+    const { tray } = mountComposable({
+      source: { jobs: [owned('running', 'theirs', '2'), owned('queued', 'mine', null, '1')] },
+      loadOnMount: false,
+    })
+    expect(tray.topBarJob.value).toMatchObject({ status: 'queued', label: 'mine queued' })
+  })
+
+  it.each([
+    ['auth is off', false, 'running'],
+    ['auth is required', true, undefined],
+  ])('should treat jobs of an integrated page without a signed-in user as own only when %s', (_case, authRequired, status) => {
+    platformWindow.__MINT_PLATFORM__ = { user: null, plugin: { id: 'peak-qc' }, authRequired }
+    const { tray } = mountComposable({ source: { jobs: [owned('running', 'theirs', '2')] }, loadOnMount: false })
+    expect(tray.topBarJob.value?.status).toBe(status)
+  })
+
+  it('should hold a completed job when several jobs leave the active list in one update', async () => {
+    const jobs = shallowRef([job('running', 'a'), job('running', 'b')])
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+
+    jobs.value = [job('failed', 'a'), job('completed', 'b')]
+    await nextTick()
+
+    expect(tray.topBarJob.value).toEqual({ status: 'completed', label: 'b completed' })
+  })
+
+  it('should close the open tray instead of selecting the held job when the chip is clicked', async () => {
+    const jobs = shallowRef([job('running', 'r')])
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+    const onSelect = vi.fn()
+    jobs.value = [job('completed', 'r')]
+    await nextTick()
+    tray.open()
+
+    tray.handleTopBarClick(onSelect)
+
+    expect([tray.isOpen.value, onSelect.mock.calls.length]).toEqual([false, 0])
+  })
+
+  it('should drop the held job when it leaves the job list', async () => {
+    const jobs = shallowRef([job('running', 'r')])
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+    const onSelect = vi.fn()
+    jobs.value = [job('completed', 'r')]
+    await nextTick()
+    jobs.value = []
+    await nextTick()
+
+    tray.handleTopBarClick(onSelect)
+
+    expect([tray.topBarJob.value, onSelect.mock.calls.length, tray.isOpen.value]).toEqual([null, 0, true])
+  })
+
+  it('should mark a failure seen when the job fails while the tray is open', async () => {
+    localStorage.setItem('mint.jobs.standalone.seen-failed', '[]')
+    const jobs = shallowRef([job('running', 'r')])
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+    tray.open()
+    await nextTick()
+
+    jobs.value = [job('failed', 'r')]
+    await nextTick()
+    tray.close()
+    await nextTick()
+
+    expect(tray.topBarJob.value).toBeNull()
+  })
+
+  it.each([
+    ['an empty list', [] as JobStateInput[], { status: 'failed', label: '1 failed' }],
+    ['an old failure', [job('failed', 'old')], { status: 'failed', label: '1 failed' }],
+  ])('should take the baseline when the initial load returns %s', async (_case, loaded, later) => {
+    const jobs = shallowRef<JobStateInput[]>([])
+    const { tray } = mountComposable({ source: { jobs, refresh: async () => { jobs.value = loaded } } })
+    await flushPromises()
+    const baseline = tray.topBarJob.value
+
+    jobs.value = [...loaded, job('failed', 'new')]
+    await nextTick()
+
+    expect([baseline, tray.topBarJob.value]).toEqual([null, later])
+  })
+
+  it('should not hold a job when the source is replaced by one where it already completed', async () => {
+    const source = shallowRef({ jobs: [job('running', 'x')] })
+    const { tray } = mountComposable({ source, loadOnMount: false })
+
+    source.value = { jobs: [job('completed', 'x')] }
+    await nextTick()
+
+    expect(tray.topBarJob.value).toBeNull()
+  })
+
+  it('should alert only failures after the first job list when nothing was stored', async () => {
+    const jobs = shallowRef<JobStateInput[]>([])
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+
+    jobs.value = [job('failed', 'old')]
+    await nextTick()
+    const baseline = tray.topBarJob.value
+    jobs.value = [job('failed', 'old'), job('failed', 'new')]
+    await nextTick()
+
+    expect({
+      baseline,
+      later: tray.topBarJob.value,
+      stored: JSON.parse(localStorage.getItem('mint.jobs.standalone.seen-failed') ?? 'null'),
+    }).toEqual({ baseline: null, later: { status: 'failed', label: '1 failed' }, stored: ['old'] })
+  })
+
+  it.each<[string, TopBarJob | null, TopBarJob]>([
+    ['use the override', { status: 'completed', label: 'Saved to the experiment' },
+      { status: 'completed', label: 'Saved to the experiment' }],
+    ['keep the default', null, { status: 'completed', label: 'r completed' }],
+  ])('should %s for the held job when the topBarJob option returns that value', async (_case, override, expected) => {
+    const jobs = shallowRef([job('running', 'r')])
+    const topBarJob = vi.fn((shown: { status: JobStatus }) => (shown.status === 'completed' ? override : null))
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false, topBarJob })
+
+    jobs.value = [job('completed', 'r')]
+    await nextTick()
+
+    expect(tray.topBarJob.value).toEqual(expected)
+  })
+
+  it('should hold a just-completed job for 6 s and select it on click when nothing else runs', async () => {
+    vi.useFakeTimers()
+    const jobs = shallowRef([job('running', 'r')])
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+    const onSelect = vi.fn()
+
+    jobs.value = [{ ...job('completed', 'r') }]
+    await nextTick()
+    const held = tray.topBarJob.value
+    tray.handleTopBarClick(onSelect)
+    vi.advanceTimersByTime(5999)
+    const stillHeld = tray.topBarJob.value
+    vi.advanceTimersByTime(1)
+    tray.handleTopBarClick(onSelect)
+
+    expect({
+      held,
+      stillHeld: stillHeld?.status,
+      after: tray.topBarJob.value,
+      selected: onSelect.mock.calls.map(([selected]) => selected.job_id),
+      open: tray.isOpen.value,
+    }).toEqual({
+      held: { status: 'completed', label: 'r completed' },
+      stillHeld: 'completed',
+      after: null,
+      selected: ['r'],
+      open: true,
+    })
+  })
+
+  it.each([
+    ['standalone', () => undefined, 'mint.jobs.standalone.seen-failed'],
+    ['integrated', () => integrateAs(1), 'mint.jobs.peak-qc.seen-failed'],
+  ])('should count unseen failures until the tray opens when %s', async (_mode, setup, key) => {
+    setup()
+    localStorage.setItem(key, '[]')
+    const jobs = [owned('failed', 'f1', '1'), owned('failed', 'f2', '1'), owned('failed', 'other', '2')]
+    const { tray } = mountComposable({ source: { jobs }, loadOnMount: false })
+    const before = tray.topBarJob.value
+
+    tray.open()
+    await nextTick()
+    const reopened = mountComposable({ source: { jobs }, loadOnMount: false }).tray
+
+    expect({
+      before,
+      after: tray.topBarJob.value,
+      reopened: reopened.topBarJob.value,
+      stored: JSON.parse(localStorage.getItem(key) ?? 'null'),
+    }).toEqual({
+      before: { status: 'failed', label: _mode === 'standalone' ? '3 failed' : '2 failed' },
+      after: null,
+      reopened: null,
+      stored: _mode === 'standalone' ? ['f1', 'f2', 'other'] : ['f1', 'f2'],
+    })
+  })
+
+  it.each<[string, TopBarJob | null, TopBarJob]>([
+    ['replace the default mapping', { status: 'running', label: 'Decoding in the browser', percent: 10 },
+      { status: 'running', label: 'Decoding in the browser', percent: 10 }],
+    ['keep the default mapping', null, { status: 'awaiting_input', label: 'a waiting for input', percent: null }],
+  ])('should %s when the topBarJob option returns that value', (_case, override, expected) => {
+    const { tray } = mountComposable({
+      source: { jobs: [job('awaiting_input', 'a')] },
+      loadOnMount: false,
+      topBarJob: () => override,
+    })
+    expect(tray.topBarJob.value).toEqual(expected)
+  })
+
+  it('should count only completed jobs when the list holds finished and active jobs', () => {
+    const { tray } = mountComposable({
+      source: { jobs: [job('completed', 'c1'), job('completed', 'c2'), job('failed', 'f'), job('running', 'r')] },
+      loadOnMount: false,
+    })
+    expect(tray.completedCount.value).toBe(2)
+  })
+})
+
+describe('useJobCenter row view', () => {
+  const awaiting = job('awaiting_input', 'a')
+  const running = job('running', 'r')
+
+  it.each<[string, JobStateInput, UseJobCenterOptions['rowJob'], ReturnType<ReturnType<typeof useJobCenter>['rowView']>]>([
+    ['absent', running, undefined, { status: 'running', percent: 42, message: 'running' }],
+    ['null', awaiting, () => null,
+      { status: 'awaiting_input', percent: null, message: 'Waiting for external input' }],
+    ['a status and percent', awaiting, () => ({ status: 'running', percent: 40 }),
+      { status: 'running', percent: 40, message: 'Waiting for external input' }],
+    ['a message only', running, () => ({ message: 'Decoding 3/8' }),
+      { status: 'running', percent: 42, message: 'Decoding 3/8' }],
+    ['undefined and null fields', running, () => ({ status: null, percent: undefined, message: null }),
+      { status: 'running', percent: 42, message: 'running' }],
+    ['a status only', running, () => ({ status: 'awaiting_input' }),
+      { status: 'awaiting_input', percent: 42, message: 'running' }],
+    ['a null percent', running, () => ({ percent: null }),
+      { status: 'running', percent: null, message: 'running' }],
+  ])('should resolve the row view from the job when the row override is %s', (_case, input, rowJob, expected) => {
+    const { tray } = mountComposable({ source: { jobs: [input] }, loadOnMount: false, rowJob })
+    expect(tray.rowView(tray.jobs.value[0]!)).toEqual(expected)
+  })
+})

package/src/__tests__/composables/useOnboarding.test.ts

@@ -0,0 +1,317 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import {
+  ANCHOR_WAIT_MS,
+  provideOnboarding,
+  type OnboardingDefinition,
+  type OnboardingState,
+  type ProvideOnboardingOptions,
+} from '../../composables/useOnboarding'
+
+const KEY = 'mint.onboarding.app.7'
+
+const definition: OnboardingDefinition = {
+  tours: [
+    {
+      id: 'intro',
+      title: 'Intro',
+      steps: [
+        { id: 'a', anchor: 'a', title: 'A', body: '' },
+        { id: 'b', anchor: 'b', title: 'B', body: '' },
+      ],
+    },
+    { id: 'list', title: 'List', route: 'experiments', steps: [{ id: 'new', anchor: 'new', title: 'New', body: '' }] },
+  ],
+  checklist: [{ id: 'create', title: 'Create' }],
+  whatsNew: [{ id: 'jobs', anchor: 'a', title: 'Jobs', body: '' }],
+}
+
+let wrapper: VueWrapper | undefined
+
+function addAnchor(id: string) {
+  const element = document.createElement('button')
+  element.dataset.onboarding = id
+  document.body.append(element)
+  return element
+}
+
+function setup(options: Partial<ProvideOnboardingOptions> = {}, def = definition): OnboardingState {
+  let state!: OnboardingState
+  wrapper = mount(defineComponent({
+    setup() {
+      state = provideOnboarding(def, { appId: 'app', userId: 7, ...options })
+      return () => h('div')
+    },
+  }))
+  return state
+}
+
+async function flush() {
+  await vi.advanceTimersByTimeAsync(0)
+  await nextTick()
+}
+
+const stored = () => JSON.parse(localStorage.getItem(KEY) ?? 'null') as string[] | null
+
+describe('provideOnboarding', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    localStorage.clear()
+    addAnchor('a')
+    addAnchor('b')
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+    document.body.innerHTML = ''
+    vi.useRealTimers()
+  })
+
+  it('should start the first tour of the route and mark each shown step as seen', async () => {
+    const state = setup()
+    await flush()
+
+    expect(state.active.value?.step.id).toBe('a')
+    state.next()
+    await flush()
+
+    expect(state.active.value?.step.id).toBe('b')
+    expect(stored()).toEqual(expect.arrayContaining(['step:intro/a', 'step:intro/b']))
+  })
+
+  it('should mark the existing news as seen on the first run only', async () => {
+    const first = setup({ autoStart: false })
+    expect(first.unseenNews.value).toBe(0)
+    wrapper?.unmount()
+
+    const later = setup({ autoStart: false }, { ...definition, whatsNew: [...definition.whatsNew!, { id: 'pins', anchor: 'b', title: 'Pins', body: '' }] })
+
+    expect(later.news.value.map((item) => item.unseen)).toEqual([false, true])
+  })
+
+  it('should show a returning user only the steps with new ids', async () => {
+    localStorage.setItem(KEY, JSON.stringify(['step:intro/a']))
+    const state = setup()
+    await flush()
+
+    expect(state.active.value).toMatchObject({ step: { id: 'b' }, index: 0, count: 1 })
+  })
+
+  it('should mark every step seen on dismiss and not start the tour again', async () => {
+    const state = setup()
+    await flush()
+    state.dismiss()
+    wrapper?.unmount()
+
+    const again = setup()
+    await flush()
+
+    expect(stored()).toEqual(expect.arrayContaining(['step:intro/a', 'step:intro/b']))
+    expect(again.active.value).toBeNull()
+  })
+
+  it('should skip a step whose anchor does not appear in time and keep it unseen', async () => {
+    document.querySelector('[data-onboarding="a"]')!.remove()
+    const state = setup()
+    await flush()
+    expect(state.active.value).toBeNull()
+
+    await vi.advanceTimersByTimeAsync(ANCHOR_WAIT_MS)
+    await nextTick()
+
+    expect(state.active.value?.step.id).toBe('b')
+    expect(stored()).not.toContain('step:intro/a')
+  })
+
+  it('should leave a missing anchor out of the count and skip it at once after Next', async () => {
+    const state = setup({}, { tours: [{ id: 't', title: 'T', steps: [
+      { id: 'a', anchor: 'a', title: 'A', body: '' },
+      { id: 'gone', anchor: 'gone', title: 'Gone', body: '' },
+      { id: 'b', anchor: 'b', title: 'B', body: '' },
+    ] }] })
+    await flush()
+    expect(state.active.value).toMatchObject({ step: { id: 'a' }, index: 0, count: 2 })
+
+    state.next()
+    await flush()
+
+    expect(state.active.value).toMatchObject({ step: { id: 'b' }, index: 1, count: 2 })
+  })
+
+  it('should still show a later step whose anchor renders after the tour started', async () => {
+    const state = setup({}, { tours: [{ id: 't', title: 'T', steps: [
+      { id: 'a', anchor: 'a', title: 'A', body: '' },
+      { id: 'late', anchor: 'late', title: 'Late', body: '' },
+      { id: 'b', anchor: 'b', title: 'B', body: '' },
+    ] }] })
+    await flush()
+    expect(state.active.value).toMatchObject({ step: { id: 'a' }, count: 2 })
+
+    addAnchor('late')
+    state.next()
+    await flush()
+
+    expect(state.active.value).toMatchObject({ step: { id: 'late' }, index: 1, count: 3 })
+  })
+
+  it('should keep the position and count in step after Back when a shown anchor went away', async () => {
+    addAnchor('c')
+    const state = setup({}, { tours: [{ id: 't', title: 'T', steps: [
+      { id: 'a', anchor: 'a', title: 'A', body: '' },
+      { id: 'b', anchor: 'b', title: 'B', body: '' },
+      { id: 'c', anchor: 'c', title: 'C', body: '' },
+    ] }] })
+    await flush()
+    state.next()
+    await flush()
+    state.next()
+    await flush()
+    document.querySelector('[data-onboarding="b"]')!.remove()
+
+    state.back()
+    await flush()
+    expect(state.active.value).toMatchObject({ step: { id: 'a' }, index: 0, count: 2 })
+    state.next()
+    await flush()
+
+    expect(state.active.value).toMatchObject({ step: { id: 'c' }, index: 1, count: 2 })
+  })
+
+  it('should show a step whose anchor appears while it waits', async () => {
+    document.querySelector('[data-onboarding="a"]')!.remove()
+    const state = setup()
+    await flush()
+
+    addAnchor('a')
+    await flush()
+
+    expect(state.active.value?.step.id).toBe('a')
+  })
+
+  it('should wait for an open modal to close before it starts a tour', async () => {
+    const modal = document.createElement('div')
+    modal.setAttribute('aria-modal', 'true')
+    document.body.append(modal)
+    const state = setup()
+    await flush()
+    expect(state.active.value).toBeNull()
+
+    modal.remove()
+    await flush()
+
+    expect(state.active.value?.step.id).toBe('a')
+  })
+
+  it('should drop a pending auto-start when the user ends a tour picked by hand', async () => {
+    const modal = document.createElement('div')
+    modal.setAttribute('aria-modal', 'true')
+    document.body.append(modal)
+    const state = setup({}, { tours: [
+      definition.tours![0],
+      { id: 'more', title: 'More', steps: [{ id: 'b', anchor: 'b', title: 'B', body: '' }] },
+    ] })
+    await flush()
+    state.startTour('intro')
+    await flush()
+    state.dismiss()
+
+    modal.remove()
+    await flush()
+
+    expect(state.active.value).toBeNull()
+  })
+
+  it('should start the tour of a route when the app reaches that route', async () => {
+    localStorage.setItem(KEY, JSON.stringify(['step:intro/a', 'step:intro/b']))
+    addAnchor('new')
+    const route = ref('home')
+    const state = setup({ route })
+    await flush()
+    expect(state.tours.value.map((tour) => tour.id)).toEqual(['intro'])
+    expect(state.active.value).toBeNull()
+
+    route.value = 'experiments'
+    await flush()
+
+    expect(state.active.value?.step.id).toBe('new')
+  })
+
+  it.each([
+    ['finishes', (state: OnboardingState) => { state.next(); return flush().then(() => state.next()) }, 'new'],
+    ['is dismissed', (state: OnboardingState) => state.dismiss(), undefined],
+  ])('should start the next tour of the page only when the first %s', async (_, end, next) => {
+    addAnchor('new')
+    const state = setup({ route: 'experiments' })
+    await flush()
+    expect(state.active.value?.step.id).toBe('a')
+
+    await end(state)
+    await flush()
+
+    expect(state.active.value?.step.id).toBe(next)
+  })
+
+  it('should leave out a step that is not available', async () => {
+    const state = setup({}, { tours: [{ id: 't', title: 'T', steps: [
+      { id: 'a', anchor: 'a', title: 'A', body: '', available: () => false },
+      { id: 'b', anchor: 'b', title: 'B', body: '' },
+    ] }] })
+    await flush()
+
+    expect(state.active.value).toMatchObject({ step: { id: 'b' }, count: 1 })
+  })
+
+  it('should keep the keys another tab stored when it writes', () => {
+    const state = setup({ autoStart: false })
+    localStorage.setItem(KEY, JSON.stringify([...stored()!, 'task:create']))
+
+    state.setChecklistHidden(true)
+
+    expect(stored()).toEqual(expect.arrayContaining(['task:create', 'hide:checklist']))
+  })
+
+  it('should move on when the anchor of an advanceOn click step is clicked', async () => {
+    const state = setup({}, { tours: [{ id: 't', title: 'T', steps: [
+      { id: 'a', anchor: 'a', title: 'A', body: '', advanceOn: 'click' },
+      { id: 'b', anchor: 'b', title: 'B', body: '' },
+    ] }] })
+    await flush()
+
+    document.querySelector<HTMLElement>('[data-onboarding="a"]')!.click()
+    await flush()
+
+    expect(state.active.value?.step.id).toBe('b')
+  })
+
+  it('should keep a task done after its predicate turns false', async () => {
+    const created = ref(true)
+    const state = setup({ autoStart: false }, { checklist: [{ id: 'create', title: 'Create', done: () => created.value }] })
+    created.value = false
+    state.refresh()
+    await nextTick()
+
+    expect(state.tasks.value[0].done).toBe(true)
+    expect(state.checklistVisible.value).toBe(false)
+  })
+
+  it.each([
+    ['complete', (state: OnboardingState) => state.complete('create'), false],
+    ['hide', (state: OnboardingState) => state.setChecklistHidden(true), false],
+    ['nothing', () => {}, true],
+  ])('should show the checklist chip after %s: %s', (_, act, visible) => {
+    const state = setup({ autoStart: false })
+    act(state)
+
+    expect(state.checklistVisible.value).toBe(visible)
+  })
+
+  it('should stay off without a user', async () => {
+    const state = setup({ userId: null })
+    await flush()
+
+    expect(state.enabled.value).toBe(false)
+    expect(state.active.value).toBeNull()
+    expect(localStorage.length).toBe(0)
+  })
+})

package/src/__tests__/docs/frontendDocsCatalog.test.ts

@@ -266,13 +266,13 @@ describe('frontend docs catalog coverage', () => {
     })
   })
 
-  it('documents only the source-driven JobsStatusTray props', () => {
+  it('documents only the center-driven JobsStatusTray props', () => {
     const manifest = extractFrontendManifest()
     const jobsStatusTray = manifest.categories.components.find(item => item.name === 'JobsStatusTray')
 
     expect(jobsStatusTray?.props?.map(prop => prop.name).sort()).toEqual([
-      'loadOnMount',
-      'source',
+      'center',
+      'confirm',
       'teleportTo',
       'title',
     ])
@@ -375,6 +375,7 @@ describe('frontend docs catalog coverage', () => {
       'usePluginJobs',
       'useGeneratedAnalysis',
       'usePluginJobCenter',
+      'JobsStatusTrayTab',
       'useRequestSyncState',
       'useAnalysisArtifacts',
       'useTimeUtils',