@morscherlab/mint-sdk 1.2.0-beta.9 → 1.2.0

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

@@ -0,0 +1,487 @@
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import FilePicker from '../../components/FilePicker.vue'
+import FileUploader from '../../components/FileUploader.vue'
+import type { PickerAdapter, PickerNode, PickerSelection } from '../../types/filePicker'
+import { localFilesAdapter } from '../../composables/filePicker/localFiles'
+import { pickerExclusion } from '../../composables/filePicker/validation'
+
+enableAutoUnmount(afterEach)
+afterEach(() => vi.useRealTimers())
+const folder: PickerNode = {
+  kind: 'folder',
+  path: 'opaque:a',
+  name: 'Tissue liver',
+  fileCount: 3,
+  bytes: 60,
+  formats: { raw: 2, txt: 1 },
+}
+const other: PickerNode = { kind: 'folder', path: 'opaque:b', name: 'Tissue kidney' }
+const one: PickerNode = {
+  kind: 'file',
+  path: 'file:one',
+  parentPath: folder.path,
+  name: 'sample-01.raw',
+  bytes: 20,
+  format: 'raw',
+}
+const two: PickerNode = {
+  kind: 'file',
+  path: 'file:two',
+  parentPath: folder.path,
+  name: 'sample-02.raw',
+  bytes: 20,
+  format: 'raw',
+}
+const unsupported: PickerNode = {
+  kind: 'file',
+  path: 'file:notes',
+  parentPath: folder.path,
+  name: 'notes.txt',
+  bytes: 20,
+  format: 'txt',
+}
+function adapter(): PickerAdapter {
+  return {
+    listRoot: vi.fn(async () => [folder, other]),
+    listChildren: vi.fn(async (path) => (path === folder.path ? [one, two, unsupported] : [])),
+    search: vi.fn(async (query) =>
+      [folder, one, two, unsupported].filter((node) =>
+        node.name.toLowerCase().includes(query.toLowerCase()),
+      ),
+    ),
+  }
+}
+async function setup(props: Record<string, unknown> = {}) {
+  const wrapper = mount(FilePicker, {
+    props: {
+      open: true,
+      adapter: adapter(),
+      capabilities: { server: { formats: ['raw'] } },
+      ...props,
+    },
+    global: { stubs: { teleport: true } },
+  })
+  await flushPromises()
+  return wrapper
+}
+function row(wrapper: Awaited<ReturnType<typeof setup>>, path: string) {
+  return wrapper.findAll('[role="treeitem"]').find((item) => item.attributes('data-path') === path)!
+}
+function confirm(wrapper: Awaited<ReturnType<typeof setup>>) {
+  return wrapper.findAll('.mint-picker__actions button').at(-1)!
+}
+async function expand(wrapper: Awaited<ReturnType<typeof setup>>) {
+  await wrapper.get('[aria-label="Expand Tissue liver"]').trigger('click')
+  await flushPromises()
+}
+
+describe('FilePicker', () => {
+  it('selects a folder without navigating, resolves metadata and excludes unsupported files', async () => {
+    const wrapper = await setup()
+    await row(wrapper, folder.path).trigger('click')
+    await flushPromises()
+    expect(row(wrapper, folder.path).attributes('aria-selected')).toBe('true')
+    expect(wrapper.findAll('[role="treeitem"]')).toHaveLength(2)
+    await confirm(wrapper).trigger('click')
+    const result = wrapper.emitted('select')?.[0]?.[0] as Extract<
+      PickerSelection,
+      { source: 'server' }
+    >
+    expect(result.folders).toEqual([folder.path])
+    expect(result.files.map((file) => file.path)).toEqual([one.path, two.path])
+    expect(result.excluded).toEqual([
+      { path: unsupported.path, name: unsupported.name, reason: 'unsupported' },
+    ])
+  })
+
+  it('discloses without selecting and double-clicks to navigate', async () => {
+    const wrapper = await setup()
+    await expand(wrapper)
+    expect(row(wrapper, folder.path).attributes('aria-selected')).toBe('false')
+    expect(wrapper.findAll('[role="treeitem"]')).toHaveLength(5)
+    await row(wrapper, folder.path).trigger('dblclick')
+    await flushPromises()
+    expect(wrapper.findAll('[role="treeitem"]')).toHaveLength(3)
+    expect(wrapper.get('[aria-label="Breadcrumb"]').text()).toContain(folder.name)
+  })
+
+  it('drops an inherited file with Ctrl and restores it with another Ctrl click', async () => {
+    const wrapper = await setup()
+    await row(wrapper, folder.path).trigger('click')
+    await expand(wrapper)
+    await row(wrapper, one.path).trigger('click', { ctrlKey: true })
+    expect(row(wrapper, one.path).attributes('aria-selected')).toBe('false')
+    expect(row(wrapper, folder.path).text()).toContain('1 / 3')
+    await confirm(wrapper).trigger('click')
+    const result = wrapper.emitted('select')?.[0]?.[0] as Extract<
+      PickerSelection,
+      { source: 'server' }
+    >
+    expect(result.excluded).toContainEqual({ path: one.path, name: one.name, reason: 'deselected' })
+    await row(wrapper, one.path).trigger('click', { metaKey: true })
+    expect(row(wrapper, one.path).attributes('aria-selected')).toBe('true')
+  })
+
+  it('keeps unsupported files inert for click, double-click and keyboard', async () => {
+    const wrapper = await setup({ selectionMode: 'single-file' })
+    await expand(wrapper)
+    const unavailable = row(wrapper, unsupported.path)
+    expect(unavailable.attributes('aria-disabled')).toBe('true')
+    expect(unavailable.attributes('title')).toContain('not supported')
+    await unavailable.trigger('click')
+    await unavailable.trigger('dblclick')
+    await unavailable.trigger('keydown', { key: 'Enter' })
+    expect(wrapper.emitted('select')).toBeUndefined()
+    expect(confirm(wrapper).attributes('disabled')).toBeDefined()
+  })
+
+  it('single-file mode replaces selection and folder mode leaves files inert', async () => {
+    const wrapper = await setup({ selectionMode: 'single-file' })
+    await expand(wrapper)
+    await row(wrapper, one.path).trigger('click')
+    await row(wrapper, two.path).trigger('click', { metaKey: true })
+    await flushPromises()
+    await confirm(wrapper).trigger('click')
+    expect(
+      (wrapper.emitted('select')?.[0]?.[0] as { files: PickerNode[] }).files.map(
+        (file) => file.path,
+      ),
+    ).toEqual([two.path])
+    const folders = await setup({ selectionMode: 'folder' })
+    await expand(folders)
+    await row(folders, one.path).trigger('click')
+    expect(row(folders, one.path).attributes('aria-selected')).toBe('false')
+  })
+
+  it('uses Shift to select the file range, excluding unsupported entries', async () => {
+    const wrapper = await setup({ selectionMode: 'multi-file' })
+    await expand(wrapper)
+    await row(wrapper, one.path).trigger('click')
+    await row(wrapper, two.path).trigger('click', { shiftKey: true })
+    await flushPromises()
+    await confirm(wrapper).trigger('click')
+    expect((wrapper.emitted('select')?.[0]?.[0] as { files: PickerNode[] }).files).toHaveLength(2)
+  })
+
+  it('preserves selected paths while searching and passes the recursive scope', async () => {
+    vi.useFakeTimers()
+    const data = adapter()
+    const wrapper = await setup({ adapter: data })
+    await row(wrapper, folder.path).trigger('click')
+    await flushPromises()
+    await wrapper.get('[aria-label="Search folders and files"]').setValue('sample')
+    await wrapper.get('.mint-picker__scope').trigger('click')
+    await vi.advanceTimersByTimeAsync(250)
+    expect(data.search).toHaveBeenCalledWith(
+      'sample',
+      { path: '', recursive: true },
+      expect.anything(),
+    )
+    expect(confirm(wrapper).attributes('disabled')).toBeUndefined()
+    await confirm(wrapper).trigger('click')
+    expect((wrapper.emitted('select')?.[0]?.[0] as { folders: string[] }).folders).toEqual([
+      folder.path,
+    ])
+  })
+
+  it('cancel emits no selection and reopening restores the initial confirmed selection', async () => {
+    const initial: PickerSelection = {
+      source: 'server',
+      folders: [folder.path],
+      files: [],
+      excluded: [],
+    }
+    const wrapper = await setup({ initialSelection: initial })
+    await row(wrapper, other.path).trigger('click')
+    await wrapper.get('[aria-label="Close modal"]').trigger('click')
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+    expect(wrapper.emitted('select')).toBeUndefined()
+    await wrapper.setProps({ open: false })
+    await wrapper.setProps({ open: true })
+    await flushPromises()
+    expect(row(wrapper, folder.path).attributes('aria-selected')).toBe('true')
+    expect(row(wrapper, other.path).attributes('aria-selected')).toBe('false')
+  })
+
+  it('accumulates plain clicks in multi modes and Shift still extends a range', async () => {
+    const wrapper = await setup()
+    await expand(wrapper)
+    await row(wrapper, one.path).trigger('click')
+    await row(wrapper, two.path).trigger('click')
+    expect(row(wrapper, one.path).attributes('aria-selected')).toBe('true')
+    expect(row(wrapper, two.path).attributes('aria-selected')).toBe('true')
+    await row(wrapper, two.path).trigger('click')
+    expect(row(wrapper, two.path).attributes('aria-selected')).toBe('false')
+    await row(wrapper, folder.path).trigger('click', { shiftKey: true })
+    expect(row(wrapper, folder.path).attributes('aria-selected')).toBe('true')
+    expect(row(wrapper, two.path).attributes('aria-selected')).toBe('true')
+  })
+
+  it('toggles a selected folder off with a second plain click', async () => {
+    const wrapper = await setup()
+    await row(wrapper, folder.path).trigger('click')
+    await flushPromises()
+    await row(wrapper, folder.path).trigger('click')
+    await flushPromises()
+    expect(row(wrapper, folder.path).attributes('aria-selected')).toBe('false')
+    expect(confirm(wrapper).attributes('disabled')).toBeDefined()
+  })
+
+  it('toggles inherited files off and on without a modifier or losing the folder', async () => {
+    const wrapper = await setup()
+    await row(wrapper, folder.path).trigger('click')
+    await expand(wrapper)
+    await row(wrapper, one.path).trigger('click')
+    expect(row(wrapper, one.path).attributes('aria-selected')).toBe('false')
+    expect(row(wrapper, folder.path).attributes('aria-selected')).toBe('true')
+    await row(wrapper, one.path).trigger('click')
+    expect(row(wrapper, one.path).attributes('aria-selected')).toBe('true')
+    expect(row(wrapper, folder.path).attributes('aria-selected')).toBe('true')
+  })
+
+  it('toggles a single file off but Enter still confirms a selected file', async () => {
+    const wrapper = await setup({ selectionMode: 'single-file' })
+    await expand(wrapper)
+    await row(wrapper, one.path).trigger('click')
+    await row(wrapper, one.path).trigger('click')
+    await flushPromises()
+    expect(confirm(wrapper).attributes('disabled')).toBeDefined()
+    await row(wrapper, one.path).trigger('click')
+    await row(wrapper, one.path).trigger('keydown', { key: 'Enter' })
+    await flushPromises()
+    expect(wrapper.emitted('select')).toHaveLength(1)
+  })
+
+  it('deselects one explicit file without losing the other selected files', async () => {
+    const wrapper = await setup({ selectionMode: 'multi-file' })
+    await expand(wrapper)
+    await row(wrapper, one.path).trigger('click')
+    await row(wrapper, two.path).trigger('click', { ctrlKey: true })
+    await row(wrapper, one.path).trigger('click')
+    expect(row(wrapper, one.path).attributes('aria-selected')).toBe('false')
+    expect(row(wrapper, two.path).attributes('aria-selected')).toBe('true')
+  })
+
+  it('does not undo the first click of a double-click or toggle on keyboard navigation', async () => {
+    const wrapper = await setup({ selectionMode: 'single-file' })
+    await expand(wrapper)
+    await row(wrapper, one.path).trigger('click', { detail: 1 })
+    await row(wrapper, one.path).trigger('click', { detail: 2 })
+    expect(row(wrapper, one.path).attributes('aria-selected')).toBe('true')
+    await row(wrapper, one.path).trigger('keydown', { key: 'ArrowDown' })
+    await row(wrapper, two.path).trigger('keydown', { key: 'End' })
+    expect(row(wrapper, two.path).attributes('aria-selected')).toBe('true')
+  })
+
+  it('offers only server and local files and has a text-only confirm action', async () => {
+    const wrapper = await setup({ sources: ['server', 'localFile'] })
+    expect(
+      wrapper
+        .findAll('[aria-label="Data source"] button')
+        .map((button) => button.attributes('aria-label')),
+    ).toEqual(['Server', 'Local files'])
+    expect(confirm(wrapper).text()).toBe('Use selection')
+    expect(wrapper.get('.mint-picker__receipt > span').text()).toBe('No selection')
+    await wrapper.get('[aria-label="Local files"]').trigger('click')
+    await flushPromises()
+    expect(wrapper.get('[aria-label="Local files"]').attributes('aria-pressed')).toBe('true')
+    expect(wrapper.find('[aria-label="Absolute path"]').exists()).toBe(false)
+    expect(wrapper.text()).toContain('Drop files or a folder')
+  })
+
+  it.each(['single-file', 'multi-file', 'folder', 'folder+files'] as const)(
+    'uses one upload panel without a lower workspace and preserves %s selection limits',
+    async (selectionMode) => {
+      const wrapper = await setup({ sources: ['localFile'], selectionMode })
+      const uploaders = wrapper.findAllComponents(FileUploader)
+      expect(uploaders.map((uploader) => uploader.props('mode'))).toEqual(
+        selectionMode === 'single-file'
+          ? ['file']
+          : selectionMode === 'folder'
+            ? ['folder']
+            : ['file+folder'],
+      )
+      expect(wrapper.find('.mint-picker__workspace').exists()).toBe(false)
+      expect(wrapper.find('.mint-file-uploader__actions').exists()).toBe(false)
+      expect(wrapper.text()).not.toContain('Files stay in this browser.')
+      expect(wrapper.find('.mint-picker__pathbar').exists()).toBe(false)
+      expect(wrapper.find('[aria-label="Search folders and files"]').exists()).toBe(false)
+      const files = [new File(['a'], 'one.raw'), new File(['b'], 'two.raw')]
+      const input = uploaders[0]!.get('input[type="file"]')
+      if (selectionMode === 'folder') {
+        files.forEach((file) =>
+          Object.defineProperty(file, 'webkitRelativePath', { value: `batch/${file.name}` }),
+        )
+      }
+      Object.defineProperty(input.element, 'files', { value: files })
+      await input.trigger('change')
+      await flushPromises()
+      expect(wrapper.find('.mint-file-uploader__list').exists()).toBe(false)
+      expect(wrapper.find('.mint-file-uploader__folder-summary').exists()).toBe(false)
+      await confirm(wrapper).trigger('click')
+      const result = wrapper.emitted('select')?.[0]?.[0] as Extract<
+        PickerSelection,
+        { source: 'localFile' }
+      >
+      expect(result.files).toEqual(selectionMode === 'single-file' ? [files[0]] : files)
+      expect(result.files[0]).toBe(files[0])
+    },
+  )
+
+  it.each(['folder+files', 'multi-file'] as const)('accepts dropped directories in %s mode and validates without a workspace', async (selectionMode) => {
+    const wrapper = await setup({
+      sources: ['localFile'],
+      selectionMode,
+      capabilities: { localFile: { formats: ['mzML.gz'], maxBytes: 10 } },
+    })
+    const valid = new File(['data'], 'run.mzML.gz')
+    const unsupported = new File(['notes'], 'notes.txt')
+    const oversized = new File(['too much data'], 'large.mzML.gz')
+    const directory = (name: string, entries: unknown[]) => ({
+      name,
+      isDirectory: true,
+      createReader: () => {
+        let pending = entries
+        return {
+          readEntries: (resolve: (entries: unknown[]) => void) => {
+            resolve(pending)
+            pending = []
+          },
+        }
+      },
+    })
+    const nested = directory('batch', [
+      directory('nested', [valid, unsupported, oversized].map((file) => ({
+        name: file.name,
+        isFile: true,
+        file: (resolve: (file: File) => void) => resolve(file),
+      }))),
+    ])
+    const uploader = wrapper.getComponent(FileUploader)
+    await uploader.get('[role="button"]').trigger('drop', {
+      dataTransfer: { items: [{ webkitGetAsEntry: () => nested }] },
+    })
+    await flushPromises()
+    expect(wrapper.get('.mint-picker__receipt').text()).toContain('1 file')
+    if (selectionMode === 'folder+files') expect(wrapper.text()).toContain('2 skipped')
+    expect(wrapper.find('.mint-picker__workspace').exists()).toBe(false)
+    await confirm(wrapper).trigger('click')
+    const result = wrapper.emitted('select')?.[0]?.[0] as Extract<
+      PickerSelection,
+      { source: 'localFile' }
+    >
+    expect(result.files).toEqual([valid])
+    expect(result.files[0]).toBe(valid)
+    await wrapper.setProps({ open: false })
+    await wrapper.setProps({ open: true })
+    await flushPromises()
+    expect(wrapper.get('.mint-picker__receipt').text()).toContain('1 file')
+    expect(confirm(wrapper).attributes('disabled')).toBeUndefined()
+  })
+
+  it.each(['entry', 'file'] as const)(
+    'captures dropped %s handles before the drag data becomes protected',
+    async (secondHandle) => {
+      const wrapper = await setup({ sources: ['localFile'], selectionMode: 'multi-file' })
+      const files = [new File(['a'], 'one.raw'), new File(['b'], 'two.raw')]
+      let protectedMode = false
+      const secondEntry = {
+        isFile: true,
+        file: (resolve: (file: File) => void) => resolve(files[1]!),
+      }
+      await wrapper.getComponent(FileUploader).get('[role="button"]').trigger('drop', {
+        dataTransfer: {
+          items: [
+            { webkitGetAsEntry: () => ({
+              isFile: true,
+              file: (resolve: (file: File) => void) => queueMicrotask(() => {
+                protectedMode = true
+                resolve(files[0]!)
+              }),
+            }) },
+            {
+              webkitGetAsEntry: () =>
+                !protectedMode && secondHandle === 'entry' ? secondEntry : null,
+              getAsFile: () =>
+                !protectedMode && secondHandle === 'file' ? files[1] : null,
+            },
+          ],
+        },
+      })
+      await flushPromises()
+      await confirm(wrapper).trigger('click')
+      const result = wrapper.emitted('select')?.[0]?.[0] as Extract<
+        PickerSelection,
+        { source: 'localFile' }
+      >
+      expect(result.files).toHaveLength(2)
+      expect(result.files[0]).toBe(files[0])
+      expect(result.files[1]).toBe(files[1])
+    },
+  )
+
+  it('shows folder drop errors without a preview panel', async () => {
+    const wrapper = await setup({ sources: ['localFile'] })
+    await wrapper.getComponent(FileUploader).get('[role="button"]').trigger('drop', {
+      dataTransfer: { items: [{ webkitGetAsEntry: () => ({
+        name: 'unreadable', isDirectory: true,
+        createReader: () => ({ readEntries: (_resolve: unknown, reject: (error: Error) => void) => reject(new Error('Folder cannot be read')) }),
+      }) }] },
+    })
+    await flushPromises()
+    expect(wrapper.get('[role="alert"]').text()).toBe('Folder cannot be read')
+    expect(confirm(wrapper).attributes('disabled')).toBeDefined()
+  })
+
+  it('does not render sources the host did not supply', async () => {
+    const wrapper = await setup({ sources: ['server'] })
+    expect(wrapper.find('[aria-label="Local files"]').exists()).toBe(false)
+    expect(wrapper.find('[aria-label="This machine"]').exists()).toBe(false)
+  })
+
+  it('retries a failed expanded level and blocks confirmation when validation fails', async () => {
+    const data = adapter()
+    vi.mocked(data.listChildren).mockRejectedValueOnce(new Error('Share unavailable'))
+    const wrapper = await setup({ adapter: data })
+    await row(wrapper, folder.path).trigger('click')
+    await flushPromises()
+    expect(wrapper.text()).toContain('Share unavailable')
+    expect(confirm(wrapper).attributes('disabled')).toBeDefined()
+    await wrapper.get('.mint-picker__preview-error button').trigger('click')
+    await flushPromises()
+    expect(confirm(wrapper).attributes('disabled')).toBeUndefined()
+  })
+
+  it('keyboard disclosure never selects and Escape cancels', async () => {
+    const wrapper = await setup()
+    await row(wrapper, folder.path).trigger('keydown', { key: 'ArrowRight' })
+    await flushPromises()
+    expect(row(wrapper, folder.path).attributes('aria-expanded')).toBe('true')
+    expect(row(wrapper, folder.path).attributes('aria-selected')).toBe('false')
+    await row(wrapper, folder.path).trigger('keydown', { key: 'Escape' })
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+  })
+})
+
+describe('local metadata and capability validation', () => {
+  it('keeps the original File objects without reading bytes', async () => {
+    const file = new File(['data'], 'run.mzML.gz')
+    const read = vi.spyOn(file, 'arrayBuffer')
+    const data = localFilesAdapter([file])
+    const nodes = await data.listRoot()
+    expect(nodes[0]).toMatchObject({ kind: 'file', format: 'mzML.gz', file })
+    expect(read).not.toHaveBeenCalled()
+    expect(pickerExclusion(nodes[0]!, { formats: ['.MZML.GZ'] })).toBeNull()
+    expect(pickerExclusion(nodes[0]!, { formats: ['raw'] })?.reason).toBe('unsupported')
+    expect(pickerExclusion(nodes[0]!, { formats: ['mzML.gz'], maxBytes: 1 })?.reason).toBe(
+      'tooLarge',
+    )
+  })
+  it('preserves duplicate plain file names as distinct browser selections', async () => {
+    const files = [new File(['a'], 'run.raw'), new File(['b'], 'run.raw')]
+    const nodes = await localFilesAdapter(files).listRoot()
+    expect(new Set(nodes.map((node) => node.path)).size).toBe(2)
+    expect(nodes.map((node) => node.kind === 'file' && node.file)).toEqual(files)
+  })
+})

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

@@ -1,15 +1,17 @@
-import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
-import { nextTick } from 'vue'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { enableAutoUnmount, flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import { nextTick, reactive } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import GeneratedPlotlyResult from '../../components/GeneratedPlotlyResult.vue'
 
 const plotly = vi.hoisted(() => ({
+  Plots: { resize: vi.fn() },
   purge: vi.fn(),
   react: vi.fn(),
 }))
 
 vi.mock('plotly.js-dist-min', () => ({ default: plotly }))
+enableAutoUnmount(afterEach)
 
 async function mountAndRecover(
   fallback?: { media_type: string; data: string },
@@ -58,6 +60,18 @@ describe('GeneratedPlotlyResult', () => {
     expect(wrapper.get('img').attributes('src')).toBe('data:image/png;base64,cG5n')
   })
 
+  it('should render a static fallback without the error presentation', async () => {
+    const wrapper = mount(GeneratedPlotlyResult, {
+      props: {
+        spec: { data: [] },
+        fallback: { media_type: 'image/png', data: 'cG5n' },
+      },
+    })
+    await flushPromises()
+
+    expect(wrapper.find('.mint-plotly-chart__error').exists()).toBe(false)
+  })
+
   it('should not redraw an immutable result for nested spec mutations', async () => {
     plotly.react.mockResolvedValue(undefined)
     const wrapper = mount(GeneratedPlotlyResult, {
@@ -73,6 +87,21 @@ describe('GeneratedPlotlyResult', () => {
     expect(plotly.react).toHaveBeenCalledTimes(1)
   })
 
+  it('should redraw a replaced spec even when its native arrays are reused', async () => {
+    plotly.react.mockResolvedValue(undefined)
+    const spec = reactive({ data: [{ x: [1], y: [2] }], layout: {}, config: { displayModeBar: true } })
+    const wrapper = mount(GeneratedPlotlyResult, { props: { spec } })
+    await flushPromises()
+
+    spec.data[0]!.x.push(3)
+    spec.data[0]!.y.push(4)
+    await wrapper.setProps({ spec: { ...spec } })
+    await flushPromises()
+
+    expect(plotly.react).toHaveBeenCalledTimes(2)
+    expect(plotly.react.mock.lastCall?.[1]).toEqual([{ x: [1, 3], y: [2, 4] }])
+  })
+
   it.each([
     ['Heatmap', { type: 'heatmap', z: [[1, 2], [3, 4]] }],
     ['Scatter3d', { type: 'scatter3d', x: [1], y: [2], z: [3] }],
@@ -86,7 +115,7 @@ describe('GeneratedPlotlyResult', () => {
     expect(plotly.react).toHaveBeenCalledWith(
       expect.any(HTMLElement),
       [trace],
-      {},
+      expect.objectContaining({ autosize: true }),
       { responsive: true, displaylogo: false },
     )
   })
@@ -112,6 +141,24 @@ describe('GeneratedPlotlyResult', () => {
   it('should restore the interactive chart after a new immutable spec renders successfully', async () => {
     const wrapper = await mountAndRecover()
 
-    expect(wrapper.get('.mint-generated-result__plotly').isVisible()).toBe(true)
+    expect(wrapper.get('.mint-plotly-chart__plot').isVisible()).toBe(true)
+  })
+
+  it('should reveal the interactive canvas before retrying Plotly', async () => {
+    const wrapper = mount(GeneratedPlotlyResult, {
+      props: { spec: { data: [] } },
+    })
+    await flushPromises()
+
+    let displayDuringRetry: string | undefined
+    plotly.react.mockImplementation(async (element: HTMLElement) => {
+      displayDuringRetry = element.style.display
+    })
+    await wrapper.setProps({
+      spec: { data: [{ type: 'scatter', x: [1], y: [2] }] },
+    })
+    await flushPromises()
+
+    expect(displayDuringRetry).not.toBe('none')
   })
 })