waveform-analysis 0.1.63 → 0.1.64

package/src/components/waveformChartCases/trackOrder.test.ts

@@ -1,323 +0,0 @@
-import { flushPromises } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-
-import { flushAnimationFrames } from '../../test/setup'
-import { mountSizedChart } from '../../test/waveformChart'
-
-describe('WaveformChart track order', () => {
-  const points = (offset: number) => ({
-    kind: 'points' as const,
-    points: [
-      { x: 0, y: offset },
-      { x: 1, y: offset + 1 },
-    ],
-  })
-  const orderedSeries = (trackIds: string[]) => ({
-    kind: 'series' as const,
-    series: trackIds.map((trackId, index) => ({
-      id: trackId,
-      trackId,
-      name: trackId,
-      data: points(index + 1),
-    })),
-  })
-  const mergedFourTrackSeries = () => ({
-    kind: 'series' as const,
-    series: [
-      { id: 'frame-1-a', trackId: 'frame-1', name: 'frame-1-a', data: points(1) },
-      { id: 'frame-1-b', trackId: 'frame-1', name: 'frame-1-b', data: points(2) },
-      { id: 'frame-3', trackId: 'frame-3', name: 'frame-3', data: points(3) },
-      { id: 'frame-4', trackId: 'frame-4', name: 'frame-4', data: points(4) },
-    ],
-  })
-
-  it('keeps a merged source slot empty without adding legend or tooltip data', async () => {
-    const wrapper = await mountSizedChart(
-      {
-        kind: 'series',
-        series: [
-          {
-            id: 'frame-1-a',
-            trackId: 'frame-1',
-            name: '合并前通道',
-            data: {
-              kind: 'points',
-              points: [
-                { x: 0, y: 1 },
-                { x: 1, y: 2 },
-              ],
-            },
-          },
-          {
-            id: 'frame-1-b',
-            trackId: 'frame-1',
-            name: '合并后通道',
-            data: {
-              kind: 'points',
-              points: [
-                { x: 0, y: 3 },
-                { x: 1, y: 4 },
-              ],
-            },
-          },
-          {
-            id: 'frame-3',
-            trackId: 'frame-3',
-            name: '后续通道',
-            data: {
-              kind: 'points',
-              points: [
-                { x: 0, y: 5 },
-                { x: 1, y: 6 },
-              ],
-            },
-          },
-        ],
-      },
-      {
-        displayMode: 'separated',
-        grid: { rowCount: 3, trackOrder: ['frame-1', 'frame-2', 'frame-3'] },
-      },
-    )
-    const trackIds = () =>
-      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id'))
-
-    expect(trackIds()).toEqual(['frame-1', 'frame-2', 'frame-3'])
-    expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(1)
-    expect(
-      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
-    ).toEqual(['frame-1-a', 'frame-1-b', 'frame-3'])
-    expect(wrapper.findAll('.waveform-chart__legend')).toHaveLength(1)
-
-    const overlay = wrapper.get('.waveform-chart__overlay--shared')
-    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
-      value: () => ({ left: 0, top: 0, width: 712, height: 290 }),
-    })
-    overlay.element.dispatchEvent(
-      new MouseEvent('pointermove', { clientX: 356, clientY: 150, bubbles: true }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
-
-    expect(wrapper.findAll('.waveform-chart__tooltip-series')).toHaveLength(3)
-    expect(wrapper.get('.waveform-chart__tooltip').text()).not.toContain('frame-2')
-    expect(wrapper.findAll('.waveform-chart__crosshair line')).toHaveLength(2)
-  })
-
-  it('keeps incremental watermarks stable when empty ordered tracks are hidden', async () => {
-    const wrapper = await mountSizedChart(mergedFourTrackSeries(), {
-      frameNumber: 1,
-      grid: {
-        rowCount: 2,
-        columnCount: 1,
-        hideEmptyTracks: true,
-        trackOrder: ['frame-1', 'frame-2', 'frame-3', 'frame-4'],
-      },
-    })
-
-    expect(
-      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id')),
-    ).toEqual(['frame-1', 'frame-3'])
-    expect(
-      wrapper.findAll('.waveform-chart__watermark').map((watermark) => watermark.text()),
-    ).toEqual(['1', '3'])
-
-    await wrapper.get('.ant-pagination-next button').trigger('click')
-
-    expect(
-      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id')),
-    ).toEqual(['frame-4'])
-    expect(
-      wrapper.findAll('.waveform-chart__watermark').map((watermark) => watermark.text()),
-    ).toEqual(['4'])
-  })
-
-  it('uses stable track IDs for explicit frame watermark overrides', async () => {
-    const wrapper = await mountSizedChart(mergedFourTrackSeries(), {
-      frameNumber: 1,
-      frameNumbers: { 'frame-1': 'A', 'frame-3': 'C', 'frame-4': 'D' },
-      grid: {
-        rowCount: 2,
-        columnCount: 1,
-        hideEmptyTracks: true,
-        trackOrder: ['frame-1', 'frame-2', 'frame-3', 'frame-4'],
-      },
-    })
-
-    expect(
-      wrapper.findAll('.waveform-chart__watermark').map((watermark) => watermark.text()),
-    ).toEqual(['A', 'C'])
-
-    await wrapper.get('.ant-pagination-next button').trigger('click')
-
-    expect(
-      wrapper.findAll('.waveform-chart__watermark').map((watermark) => watermark.text()),
-    ).toEqual(['D'])
-  })
-
-  it('keeps the existing incremental watermark fallback when frame mappings are absent', async () => {
-    const wrapper = await mountSizedChart(orderedSeries(['frame-1', 'frame-2']), {
-      frameNumber: 7,
-      grid: { rowCount: 2, columnCount: 1 },
-    })
-
-    expect(
-      wrapper.findAll('.waveform-chart__watermark').map((watermark) => watermark.text()),
-    ).toEqual(['7', '8'])
-  })
-
-  it('appends data tracks absent from trackOrder in input order', async () => {
-    const wrapper = await mountSizedChart(
-      {
-        kind: 'series',
-        series: [
-          {
-            id: 'later-a',
-            trackId: 'later-a',
-            name: 'later-a',
-            data: {
-              kind: 'points',
-              points: [
-                { x: 0, y: 1 },
-                { x: 1, y: 2 },
-              ],
-            },
-          },
-          {
-            id: 'frame-1',
-            trackId: 'frame-1',
-            name: 'frame-1',
-            data: {
-              kind: 'points',
-              points: [
-                { x: 0, y: 3 },
-                { x: 1, y: 4 },
-              ],
-            },
-          },
-          {
-            id: 'later-b',
-            trackId: 'later-b',
-            name: 'later-b',
-            data: {
-              kind: 'points',
-              points: [
-                { x: 0, y: 5 },
-                { x: 1, y: 6 },
-              ],
-            },
-          },
-        ],
-      },
-      { grid: { rowCount: 2, columnCount: 2, trackOrder: ['frame-2', 'frame-1'] } },
-    )
-
-    expect(
-      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id')),
-    ).toEqual(['frame-2', 'frame-1', 'later-a', 'later-b'])
-  })
-
-  it.each(['independent', 'separated', 'compact'] as const)(
-    'reclaims merged empty slots in %s mode when incomplete rows fill',
-    async (displayMode) => {
-      const wrapper = await mountSizedChart(mergedFourTrackSeries(), {
-        displayMode,
-        grid: {
-          rowCount: 4,
-          columnCount: 1,
-          fillIncompleteLastRow: true,
-          trackOrder: ['frame-1', 'frame-2', 'frame-3', 'frame-4'],
-        },
-      })
-      const tracks = wrapper.findAll('.waveform-chart__track')
-      const heights = tracks.map((track) => Number(track.attributes('data-track-height')))
-
-      expect(tracks.map((track) => track.attributes('data-track-id'))).toEqual([
-        'frame-1',
-        'frame-3',
-        'frame-4',
-      ])
-      expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(0)
-      expect(wrapper.findAll('.waveform-chart__line')).toHaveLength(4)
-      expect(heights[0]).toBeCloseTo(heights[1] ?? Number.NaN)
-      expect(heights[1]).toBeCloseTo(heights[2] ?? Number.NaN)
-      expect(wrapper.findAll('.waveform-chart__legend')).toHaveLength(1)
-      expect(wrapper.get('.waveform-chart__legend').text()).not.toContain('frame-2')
-    },
-  )
-
-  it('reclaims only the current page without pulling tracks from the next page', async () => {
-    const wrapper = await mountSizedChart(
-      orderedSeries(['frame-1', 'frame-3', 'frame-4', 'frame-5', 'frame-6', 'frame-7', 'frame-8']),
-      {
-        grid: {
-          rowCount: 4,
-          columnCount: 1,
-          fillIncompleteLastRow: true,
-          trackOrder: [
-            'frame-1',
-            'frame-2',
-            'frame-3',
-            'frame-4',
-            'frame-5',
-            'frame-6',
-            'frame-7',
-            'frame-8',
-          ],
-        },
-      },
-    )
-    const trackIds = () =>
-      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id'))
-
-    expect(trackIds()).toEqual(['frame-1', 'frame-3', 'frame-4'])
-    await wrapper.get('.ant-pagination-next button').trigger('click')
-    expect(trackIds()).toEqual(['frame-5', 'frame-6', 'frame-7', 'frame-8'])
-    expect(wrapper.emitted('page-change')?.at(-1)).toEqual([2, 2])
-  })
-
-  it('retains ordered empty slots when incomplete rows do not fill', async () => {
-    const wrapper = await mountSizedChart(orderedSeries(['frame-1', 'frame-3', 'frame-4']), {
-      grid: {
-        rowCount: 4,
-        columnCount: 1,
-        fillIncompleteLastRow: false,
-        trackOrder: ['frame-1', 'frame-2', 'frame-3', 'frame-4'],
-      },
-    })
-
-    expect(
-      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id')),
-    ).toEqual(['frame-1', 'frame-2', 'frame-3', 'frame-4'])
-    expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(1)
-  })
-
-  it('keeps an entirely empty page addressable when incomplete rows fill', async () => {
-    const wrapper = await mountSizedChart(
-      orderedSeries(['frame-1', 'frame-2', 'frame-3', 'frame-4']),
-      {
-        grid: {
-          rowCount: 4,
-          columnCount: 1,
-          fillIncompleteLastRow: true,
-          trackOrder: [
-            'frame-1',
-            'frame-2',
-            'frame-3',
-            'frame-4',
-            'frame-5',
-            'frame-6',
-            'frame-7',
-            'frame-8',
-          ],
-        },
-      },
-    )
-
-    await wrapper.get('.ant-pagination-next button').trigger('click')
-
-    expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(4)
-    expect(wrapper.emitted('page-change')?.at(-1)).toEqual([2, 2])
-    expect(wrapper.get('.ant-pagination-item-active').text()).toBe('2')
-  })
-})

package/src/components/waveformChartCases/viewportBoxAndPan.test.ts

@@ -1,365 +0,0 @@
-import { flushPromises } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-
-import { flushAnimationFrames } from '../../test/setup'
-import { type WaveformData } from '../waveform'
-
-import { gridSeries, mountSizedChart } from '../../test/waveformChart'
-
-describe('WaveformChart', () => {
-  it('keeps independent multi-column zoom inside the active track domain', async () => {
-    const wrapper = await mountSizedChart(gridSeries(2), {
-      displayMode: 'independent',
-      grid: { rowCount: 1, columnCount: 2 },
-    })
-    const overlays = wrapper.findAll('.waveform-chart__overlay--independent')
-    const endpoints = () =>
-      wrapper.findAll('.waveform-chart__axis-endpoint--end').map((item) => item.text())
-    const initialEndpoints = endpoints()
-    const firstWidth = Number(overlays[0].attributes('width'))
-    Object.defineProperty(overlays[0].element, 'getBoundingClientRect', {
-      value: () => ({ left: 0, top: 0, width: firstWidth, height: 260 }),
-    })
-
-    overlays[0].element.dispatchEvent(
-      new WheelEvent('wheel', {
-        deltaY: -4_000,
-        clientX: firstWidth - 1,
-        clientY: 130,
-        bubbles: true,
-        cancelable: true,
-      }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
-
-    const domain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
-    expect(domain[0]).toBeGreaterThanOrEqual(0)
-    expect(domain[1]).toBeLessThanOrEqual(1)
-    expect(endpoints()[0]).not.toBe(initialEndpoints[0])
-    expect(endpoints()[1]).toBe(initialEndpoints[1])
-
-    overlays[0].element.dispatchEvent(
-      new WheelEvent('wheel', {
-        deltaY: 4_000,
-        clientX: firstWidth - 1,
-        clientY: 130,
-        bubbles: true,
-        cancelable: true,
-      }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
-
-    expect(endpoints()[0]).toBe(initialEndpoints[0])
-    expect(endpoints()[1]).toBe(initialEndpoints[1])
-  })
-
-  it('emits one zoom-end payload after a shared zoom gesture completes', async () => {
-    vi.useFakeTimers()
-    try {
-      const wrapper = await mountSizedChart({
-        kind: 'points',
-        points: [
-          { x: 0, y: 0 },
-          { x: 2, y: 1 },
-        ],
-      })
-      const overlay = wrapper.get('.waveform-chart__overlay')
-      const overlayWidth = Number(overlay.attributes('width'))
-      Object.defineProperty(overlay.element, 'getBoundingClientRect', {
-        value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
-      })
-
-      overlay.element.dispatchEvent(
-        new WheelEvent('wheel', {
-          deltaY: -4000,
-          clientX: overlayWidth / 2,
-          clientY: 145,
-          bubbles: true,
-          cancelable: true,
-        }),
-      )
-      expect(wrapper.emitted('zoom-end')).toBeUndefined()
-      flushAnimationFrames()
-      // The wheel debounce is 200ms: it must not end early, then ends at the boundary.
-      await vi.advanceTimersByTimeAsync(199)
-      await flushPromises()
-      expect(wrapper.emitted('zoom-end')).toBeUndefined()
-
-      await vi.advanceTimersByTimeAsync(1)
-      await flushPromises()
-
-      const endEvents = wrapper.emitted('zoom-end') ?? []
-      expect(endEvents).toHaveLength(1)
-      const payload = endEvents[0]?.[0] as { start: number; end: number }
-      expect(payload.start).toBeGreaterThanOrEqual(0)
-      expect(payload.end).toBeLessThanOrEqual(2)
-      expect(payload.start).toBeLessThan(payload.end)
-      expect(payload.end - payload.start).toBeCloseTo(2 / 40)
-    } finally {
-      vi.useRealTimers()
-    }
-  })
-
-  it('zooms only the x axis and identifies the box gesture', async () => {
-    const wrapper = await mountSizedChart({
-      kind: 'points',
-      points: [
-        { x: 0, y: 0 },
-        { x: 1, y: 10 },
-        { x: 2, y: 20 },
-      ],
-    })
-    const overlay = wrapper.get('.waveform-chart__overlay--independent')
-    const width = Number(overlay.attributes('width'))
-    const height = Number(overlay.attributes('height'))
-    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
-      value: () => ({ left: 0, top: 0, width, height }),
-    })
-
-    const dispatchPointer = (type: string, clientX: number, clientY: number) => {
-      const event = new MouseEvent(type, { button: 0, clientX, clientY, bubbles: true })
-      Object.defineProperty(event, 'pointerId', { value: 7 })
-      overlay.element.dispatchEvent(event)
-    }
-    dispatchPointer('pointerdown', width * 0.25, height / 2)
-    dispatchPointer('pointermove', width * 0.75, height / 2 + 2)
-    await flushPromises()
-    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(true)
-    dispatchPointer('pointerup', width * 0.75, height * 0.75)
-    await flushPromises()
-
-    const payload = wrapper.emitted('zoom-end')?.at(-1)?.[0] as
-      | {
-          start: number
-          end: number
-          yStart?: number
-          yEnd?: number
-          trackIndex: number
-          seriesIds: string[]
-          gesture: string
-        }
-      | undefined
-    expect(payload).toMatchObject({ trackIndex: 0, seriesIds: ['series-0'], gesture: 'box' })
-    expect(payload?.end).toBeGreaterThan(payload?.start ?? Number.POSITIVE_INFINITY)
-    expect(payload?.yStart).toBeDefined()
-    expect(payload?.yEnd).toBeDefined()
-    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(false)
-  })
-
-  it('enables space-drag panning only when pannable is true and the pointer is inside', async () => {
-    const data: WaveformData = {
-      kind: 'points',
-      points: Array.from({ length: 5 }, (_, index) => ({ x: index, y: index })),
-    }
-    const disabled = await mountSizedChart(data)
-    const disabledOverlay = disabled.get('.waveform-chart__overlay--independent')
-    const disabledWidth = Number(disabledOverlay.attributes('width'))
-    const disabledHeight = Number(disabledOverlay.attributes('height'))
-    Object.defineProperty(disabledOverlay.element, 'getBoundingClientRect', {
-      value: () => ({ left: 0, top: 0, width: disabledWidth, height: disabledHeight }),
-    })
-    await disabled.trigger('pointerenter')
-    window.dispatchEvent(new KeyboardEvent('keydown', { code: 'Space', cancelable: true }))
-    const disabledDown = new MouseEvent('pointerdown', {
-      button: 0,
-      clientX: disabledWidth * 0.25,
-      clientY: disabledHeight / 2,
-      bubbles: true,
-    })
-    Object.defineProperty(disabledDown, 'pointerId', { value: 31 })
-    disabledOverlay.element.dispatchEvent(disabledDown)
-    const disabledMove = new MouseEvent('pointermove', {
-      clientX: disabledWidth * 0.75,
-      clientY: disabledHeight / 2,
-      bubbles: true,
-    })
-    Object.defineProperty(disabledMove, 'pointerId', { value: 31 })
-    disabledOverlay.element.dispatchEvent(disabledMove)
-    await flushPromises()
-    expect(disabled.find('.waveform-chart__zoom-selection').exists()).toBe(true)
-
-    const enabled = await mountSizedChart(data, { pannable: true })
-    const enabledOverlay = enabled.get('.waveform-chart__overlay--independent')
-    const enabledWidth = Number(enabledOverlay.attributes('width'))
-    const enabledHeight = Number(enabledOverlay.attributes('height'))
-    Object.defineProperty(enabledOverlay.element, 'getBoundingClientRect', {
-      value: () => ({ left: 0, top: 0, width: enabledWidth, height: enabledHeight }),
-    })
-    const boxDown = new MouseEvent('pointerdown', {
-      button: 0,
-      clientX: enabledWidth * 0.25,
-      clientY: enabledHeight / 2,
-      bubbles: true,
-    })
-    Object.defineProperty(boxDown, 'pointerId', { value: 30 })
-    enabledOverlay.element.dispatchEvent(boxDown)
-    const boxMove = new MouseEvent('pointermove', {
-      clientX: enabledWidth * 0.75,
-      clientY: enabledHeight / 2,
-      bubbles: true,
-    })
-    Object.defineProperty(boxMove, 'pointerId', { value: 30 })
-    enabledOverlay.element.dispatchEvent(boxMove)
-    const boxUp = new MouseEvent('pointerup', {
-      clientX: enabledWidth * 0.75,
-      clientY: enabledHeight / 2,
-      bubbles: true,
-    })
-    Object.defineProperty(boxUp, 'pointerId', { value: 30 })
-    enabledOverlay.element.dispatchEvent(boxUp)
-    await flushPromises()
-    const startBeforePan = enabled.get('.waveform-chart__axis-endpoint--start').text()
-
-    await enabled.trigger('pointerenter')
-    const spaceDown = new KeyboardEvent('keydown', { code: 'Space', cancelable: true })
-    window.dispatchEvent(spaceDown)
-    const enabledDown = new MouseEvent('pointerdown', {
-      button: 0,
-      clientX: enabledWidth / 2,
-      clientY: enabledHeight / 2,
-      bubbles: true,
-    })
-    Object.defineProperty(enabledDown, 'pointerId', { value: 32 })
-    enabledOverlay.element.dispatchEvent(enabledDown)
-    const enabledMove = new MouseEvent('pointermove', {
-      clientX: enabledWidth / 2 + 20,
-      clientY: enabledHeight / 2,
-      bubbles: true,
-    })
-    Object.defineProperty(enabledMove, 'pointerId', { value: 32 })
-    enabledOverlay.element.dispatchEvent(enabledMove)
-    await flushPromises()
-
-    expect(spaceDown.defaultPrevented).toBe(true)
-    expect(enabled.classes()).toContain('waveform-chart--panning')
-    expect(enabled.find('.waveform-chart__zoom-selection').exists()).toBe(false)
-    expect(enabled.get('.waveform-chart__axis-endpoint--start').text()).not.toBe(startBeforePan)
-    window.dispatchEvent(new KeyboardEvent('keyup', { code: 'Space' }))
-  })
-
-  it('keeps a fixed Y domain through panning and viewport reset', async () => {
-    const wrapper = await mountSizedChart(
-      {
-        kind: 'points',
-        points: [
-          { x: 0, y: 0 },
-          { x: 1, y: 100 },
-        ],
-      },
-      { pannable: true, yDomain: [3, 97] },
-    )
-    const overlay = wrapper.get('.waveform-chart__overlay--independent')
-    const width = Number(overlay.attributes('width'))
-    const height = Number(overlay.attributes('height'))
-    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
-      value: () => ({ left: 0, top: 0, width, height }),
-    })
-    const yTickLabels = () =>
-      wrapper
-        .get('.waveform-chart__axis--y')
-        .findAll('.tick text')
-        .map((tick) => tick.text())
-    const initialLabels = yTickLabels()
-
-    await wrapper.trigger('pointerenter')
-    window.dispatchEvent(new KeyboardEvent('keydown', { code: 'Space', cancelable: true }))
-    const down = new MouseEvent('pointerdown', {
-      button: 0,
-      clientX: width / 2,
-      clientY: height / 2,
-      bubbles: true,
-    })
-    Object.defineProperty(down, 'pointerId', { value: 34 })
-    overlay.element.dispatchEvent(down)
-    const move = new MouseEvent('pointermove', {
-      clientX: width / 2 + 20,
-      clientY: height / 2 + 40,
-      bubbles: true,
-    })
-    Object.defineProperty(move, 'pointerId', { value: 34 })
-    overlay.element.dispatchEvent(move)
-    await flushPromises()
-
-    expect(yTickLabels()).toEqual(initialLabels)
-    ;(wrapper.vm as unknown as { resetViewport: () => void }).resetViewport()
-    await flushPromises()
-    expect(yTickLabels()).toEqual(initialLabels)
-    window.dispatchEvent(new KeyboardEvent('keyup', { code: 'Space' }))
-  })
-
-  it('does not activate pannable on a chart that the pointer is outside', async () => {
-    const data: WaveformData = {
-      kind: 'points',
-      points: [
-        { x: 0, y: 0 },
-        { x: 1, y: 1 },
-      ],
-    }
-    const active = await mountSizedChart(data, { pannable: true })
-    const inactive = await mountSizedChart(data, { pannable: true })
-    await active.trigger('pointerenter')
-
-    window.dispatchEvent(new KeyboardEvent('keydown', { code: 'Space', cancelable: true }))
-
-    const inactiveOverlay = inactive.get('.waveform-chart__overlay--independent')
-    const width = Number(inactiveOverlay.attributes('width'))
-    const height = Number(inactiveOverlay.attributes('height'))
-    Object.defineProperty(inactiveOverlay.element, 'getBoundingClientRect', {
-      value: () => ({ left: 0, top: 0, width, height }),
-    })
-    const down = new MouseEvent('pointerdown', {
-      button: 0,
-      clientX: width * 0.25,
-      clientY: height / 2,
-      bubbles: true,
-    })
-    Object.defineProperty(down, 'pointerId', { value: 33 })
-    inactiveOverlay.element.dispatchEvent(down)
-    const move = new MouseEvent('pointermove', {
-      clientX: width * 0.75,
-      clientY: height / 2,
-      bubbles: true,
-    })
-    Object.defineProperty(move, 'pointerId', { value: 33 })
-    inactiveOverlay.element.dispatchEvent(move)
-    await flushPromises()
-
-    expect(inactive.find('.waveform-chart__zoom-selection').exists()).toBe(true)
-    expect(inactive.classes()).not.toContain('waveform-chart--panning')
-    window.dispatchEvent(new KeyboardEvent('keyup', { code: 'Space' }))
-  })
-
-  it('limits box zoom to the configured minimum x span', async () => {
-    const wrapper = await mountSizedChart(
-      {
-        kind: 'points',
-        points: [
-          { x: 0, y: 0 },
-          { x: 1, y: 10 },
-          { x: 2, y: 20 },
-        ],
-      },
-      { minZoomSpan: 0.25 },
-    )
-    const overlay = wrapper.get('.waveform-chart__overlay--independent')
-    const width = Number(overlay.attributes('width'))
-    const height = Number(overlay.attributes('height'))
-    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
-      value: () => ({ left: 0, top: 0, width, height }),
-    })
-    const dispatchPointer = (type: string, clientX: number, clientY: number) => {
-      const event = new MouseEvent(type, { button: 0, clientX, clientY, bubbles: true })
-      Object.defineProperty(event, 'pointerId', { value: 8 })
-      overlay.element.dispatchEvent(event)
-    }
-    dispatchPointer('pointerdown', width / 2, height / 2)
-    dispatchPointer('pointermove', width / 2 + 8, height / 2 + 8)
-    dispatchPointer('pointerup', width / 2 + 8, height / 2 + 8)
-    await flushPromises()
-
-    const payload = wrapper.emitted('zoom-end')?.at(-1)?.[0] as { start: number; end: number }
-    expect(payload.end - payload.start).toBeGreaterThanOrEqual(0.25 - 1e-8)
-  })
-})