waveform-analysis 0.1.63 → 0.1.65

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

@@ -1,389 +0,0 @@
-import { flushPromises } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-
-import { flushAnimationFrames } from '../../test/setup'
-import type { WaveformXAxisLabelFormatter } from '../../types'
-import { type WaveformData } from '../waveform'
-
-import { gridSeries, mountSizedChart } from '../../test/waveformChart'
-
-describe('WaveformChart', () => {
-  it('renders reference grid styling and an optional frame watermark', async () => {
-    const wrapper = await mountSizedChart(
-      {
-        kind: 'points',
-        points: [
-          { x: 0, y: 0 },
-          { x: 1, y: 1 },
-        ],
-      },
-      { frameNumber: 12 },
-    )
-
-    expect(wrapper.findAll('.waveform-chart__grid--major line').length).toBeGreaterThan(0)
-    expect(wrapper.findAll('.waveform-chart__grid--minor line').length).toBeGreaterThan(0)
-    expect(
-      wrapper.findAll('.waveform-chart__grid--major [data-grid-direction="horizontal"]'),
-    ).toHaveLength(5)
-    expect(
-      wrapper.findAll('.waveform-chart__grid--minor [data-grid-direction="horizontal"]'),
-    ).toHaveLength(4)
-    expect(
-      wrapper.findAll('.waveform-chart__grid--minor [data-grid-direction="vertical"]'),
-    ).not.toHaveLength(0)
-    expect(getComputedStyle(wrapper.element).borderTopWidth).toBe('1.2px')
-    expect(wrapper.find('.waveform-chart__plot-frame').exists()).toBe(true)
-    expect(wrapper.get('.waveform-chart__plot-frame').attributes()).toMatchObject({
-      fill: 'none',
-      stroke: '#1f2937',
-      'stroke-width': '1',
-    })
-    expect(
-      wrapper.get('.waveform-chart__plot-frame').attributes('stroke-dasharray'),
-    ).toBeUndefined()
-    expect(wrapper.get('.waveform-chart__plot-background').attributes('fill')).toBe('transparent')
-    expect(wrapper.get('.waveform-chart__watermark').text()).toBe('12')
-    expect(getComputedStyle(wrapper.get('.waveform-chart__watermark').element).userSelect).toBe(
-      'none',
-    )
-    expect(wrapper.get('.waveform-chart__line').attributes('stroke')).toBe('#0960bd')
-  })
-
-  it('controls horizontal and vertical grid lines independently by track ID', async () => {
-    const data = gridSeries(2)
-    if (data.kind === 'series') {
-      data.series[0].trackId = 'frame-a'
-      data.series[1].trackId = 'frame-b'
-    }
-    const wrapper = await mountSizedChart(data, {
-      grid: {
-        rowCount: 1,
-        columnCount: 2,
-        trackLines: {
-          'frame-a': { horizontal: false },
-          'frame-b': { vertical: false },
-        },
-      },
-    })
-
-    const tracks = wrapper.findAll('.waveform-chart__track')
-    expect(tracks).toHaveLength(2)
-    expect(tracks[0].findAll('[data-grid-direction="horizontal"]')).toHaveLength(0)
-    expect(tracks[0].findAll('[data-grid-direction="vertical"]').length).not.toBe(0)
-    expect(tracks[1].findAll('[data-grid-direction="vertical"]')).toHaveLength(0)
-    expect(tracks[1].findAll('[data-grid-direction="horizontal"]').length).not.toBe(0)
-  })
-
-  it('keeps per-track grid line visibility attached across pagination', async () => {
-    const wrapper = await mountSizedChart(gridSeries(3), {
-      grid: {
-        rowCount: 1,
-        columnCount: 1,
-        trackLines: {
-          'channel-1': { horizontal: false, vertical: false },
-        },
-      },
-    })
-
-    expect(wrapper.findAll('[data-grid-direction]')).not.toHaveLength(0)
-    await wrapper.get('.ant-pagination-next button').trigger('click')
-    expect(wrapper.findAll('[data-grid-direction]')).toHaveLength(0)
-    await wrapper.get('.ant-pagination-next button').trigger('click')
-    expect(wrapper.findAll('[data-grid-direction]')).not.toHaveLength(0)
-  })
-
-  it('applies one custom frame style to every non-empty track', async () => {
-    const wrapper = await mountSizedChart(gridSeries(2), {
-      grid: { rowCount: 2, columnCount: 1 },
-      frameStyle: {
-        borderColor: 'rgba(255, 0, 0, 0.7)',
-        borderWidth: 2.5,
-        borderStyle: 'dashed',
-        backgroundColor: 'rgba(16, 185, 129, 0.2)',
-      },
-    })
-
-    const tracks = wrapper.findAll('.waveform-chart__track')
-    const frames = wrapper.findAll('.waveform-chart__plot-frame')
-    const backgrounds = wrapper.findAll('.waveform-chart__plot-background')
-
-    expect(frames).toHaveLength(2)
-    expect(backgrounds).toHaveLength(2)
-    frames.forEach((frame) => {
-      expect(frame.attributes()).toMatchObject({
-        stroke: 'rgba(255, 0, 0, 0.7)',
-        'stroke-width': '2.5',
-        'stroke-dasharray': '6 4',
-      })
-    })
-    backgrounds.forEach((background) => {
-      expect(background.attributes('fill')).toBe('rgba(16, 185, 129, 0.2)')
-    })
-
-    tracks.forEach((track) => {
-      const renderingLayers = track.findAll(
-        '.waveform-chart__plot-background, .waveform-chart__grid',
-      )
-      expect(renderingLayers[0].classes()).toContain('waveform-chart__plot-background')
-    })
-  })
-
-  it('falls back to the default width for invalid frame widths', async () => {
-    const wrapper = await mountSizedChart(gridSeries(1), {
-      frameStyle: { borderWidth: -1 },
-    })
-
-    expect(wrapper.get('.waveform-chart__plot-frame').attributes('stroke-width')).toBe('1')
-
-    await wrapper.setProps({ frameStyle: { borderWidth: Number.NaN } })
-    expect(wrapper.get('.waveform-chart__plot-frame').attributes('stroke-width')).toBe('1')
-  })
-
-  it('renders a dotted frame with rounded dots', async () => {
-    const wrapper = await mountSizedChart(gridSeries(1), {
-      frameStyle: { borderStyle: 'dotted' },
-    })
-
-    expect(wrapper.get('.waveform-chart__plot-frame').attributes()).toMatchObject({
-      'stroke-dasharray': '1 3',
-      'stroke-linecap': 'round',
-    })
-  })
-
-  it('continues minor x-grid lines beyond the final major tick to the exact endpoint', async () => {
-    const wrapper = await mountSizedChart({
-      kind: 'points',
-      points: [
-        { x: -8, y: 0 },
-        { x: 4.9903, y: 1 },
-      ],
-    })
-    const majorGridPositions = wrapper
-      .findAll('.waveform-chart__grid--major line')
-      .map((line) => Number(line.attributes('x1')))
-      .filter(Number.isFinite)
-    const minorGridPositions = wrapper
-      .findAll('.waveform-chart__grid--minor line')
-      .map((line) => Number(line.attributes('x1')))
-      .filter(Number.isFinite)
-    const trackWidth = Number(wrapper.get('.waveform-chart__track').attributes('data-track-width'))
-
-    expect(Math.max(...minorGridPositions)).toBeGreaterThan(Math.max(...majorGridPositions))
-    expect(Math.max(...minorGridPositions)).toBeLessThan(trackWidth)
-    expect(wrapper.get('.waveform-chart__axis-endpoint--end').attributes('x')).toBe(
-      String(trackWidth),
-    )
-    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('4990.3')
-    expect(wrapper.find('.waveform-chart__axis-exponent--x').exists()).toBe(false)
-  })
-
-  it('uses one shared scientific exponent only for large and tiny Y-axis domains', async () => {
-    const cases = [
-      { values: [0, 50], yDomain: [0, 50] as [number, number], exponent: null },
-      { values: [1000, 3000], yDomain: [1000, 3000] as [number, number], exponent: 'E+03' },
-      {
-        values: [0.0001, 0.0003],
-        yDomain: [0.0001, 0.0003] as [number, number],
-        exponent: 'E-04',
-      },
-    ]
-
-    for (const { values, yDomain, exponent } of cases) {
-      const data = {
-        kind: 'points' as const,
-        points: values.map((y, x) => ({ x, y })),
-      }
-      const originalValues = data.points.map((point) => point.y)
-      const wrapper = await mountSizedChart(data, { yDomain })
-      const labels = wrapper
-        .get('.waveform-chart__axis--y')
-        .findAll('.tick text')
-        .map((tick) => tick.text())
-      const exponentLabels = labels.filter((label) => label.startsWith('E'))
-
-      if (exponent === null) {
-        expect(exponentLabels).toHaveLength(0)
-      } else {
-        expect(exponentLabels).toHaveLength(1)
-        expect(exponentLabels[0]).toMatch(new RegExp(`^${exponent.replace('+', '\\+')} `))
-      }
-      expect(wrapper.find('.waveform-chart__axis-exponent--y').exists()).toBe(false)
-      expect(data.points.map((point) => point.y)).toEqual(originalValues)
-
-      wrapper.unmount()
-    }
-  })
-
-  it('uses milliseconds by default and supports seconds with a custom label', async () => {
-    const data: WaveformData = {
-      kind: 'points',
-      points: [
-        { x: 0, y: 0 },
-        { x: 1, y: 1 },
-      ],
-    }
-    const millisecondsChart = await mountSizedChart(data)
-    const millisecondTicks = millisecondsChart
-      .get('.waveform-chart__axis--x')
-      .findAll('.tick text')
-      .map((tick) => tick.text())
-
-    expect(millisecondsChart.text()).toContain('时间（ms）')
-    expect(millisecondTicks.length).toBeGreaterThan(0)
-    expect(millisecondsChart.get('.waveform-chart__axis-endpoint--end').text()).toBe('1000')
-    expect(millisecondsChart.find('.waveform-chart__axis-exponent--x').exists()).toBe(false)
-    expect(millisecondsChart.find('.waveform-chart__watermark').exists()).toBe(false)
-
-    const secondsChart = await mountSizedChart(data, { timeUnit: 's', xLabel: 'Elapsed time' })
-    expect(secondsChart.text()).toContain('Elapsed time')
-    expect(secondsChart.get('.waveform-chart__axis-endpoint--end').text()).toBe('1')
-    expect(secondsChart.find('.waveform-chart__axis-exponent--x').exists()).toBe(false)
-  })
-
-  it('pins the exact visible range values to both x-axis endpoints', async () => {
-    const wrapper = await mountSizedChart({
-      kind: 'samples',
-      values: Array.from({ length: 2000 }, (_, index) => Math.sin(index / 10)),
-      sampleRate: 1000,
-    })
-    const start = wrapper.get('.waveform-chart__axis-endpoint--start')
-    const end = wrapper.get('.waveform-chart__axis-endpoint--end')
-    const middleTickLabels = wrapper
-      .get('.waveform-chart__axis--x')
-      .findAll('.tick text')
-      .map((tick) => tick.text())
-
-    expect(start.attributes('x')).toBe('0')
-    expect(start.attributes('text-anchor')).toBe('start')
-    expect(start.text()).toBe('0')
-    expect(end.attributes('x')).toBe(
-      wrapper.get('.waveform-chart__track').attributes('data-track-width'),
-    )
-    expect(end.attributes('text-anchor')).toBe('end')
-    expect(end.text()).toBe('1999')
-    expect(middleTickLabels.length).toBeGreaterThan(0)
-    expect(middleTickLabels).not.toContain('0')
-    expect(wrapper.find('.waveform-chart__axis-exponent--x').exists()).toBe(false)
-    expect(wrapper.findAll('.waveform-chart__grid--major line').length).toBeGreaterThan(
-      middleTickLabels.length,
-    )
-    const middleTick = wrapper.get('.waveform-chart__axis--x .tick text')
-    const endpointGroup = wrapper.get('.waveform-chart__axis-endpoints')
-    const xAxis = wrapper.get('.waveform-chart__axis--x')
-    expect(start.attributes('y')).toBe(middleTick.attributes('y'))
-    expect(start.attributes('dy')).toBe(middleTick.attributes('dy'))
-    expect(end.attributes('y')).toBe(middleTick.attributes('y'))
-    expect(end.attributes('dy')).toBe(middleTick.attributes('dy'))
-    expect(endpointGroup.attributes('font-family')).toBe(xAxis.attributes('font-family'))
-    expect(endpointGroup.attributes('font-size')).toBe(xAxis.attributes('font-size'))
-  })
-
-  it('formats X-axis ticks and endpoints with display-unit values and source context', async () => {
-    const data: WaveformData = {
-      kind: 'points',
-      points: [
-        { x: 0.125, y: 0 },
-        { x: 1.875, y: 1 },
-      ],
-    }
-    const originalPoints = data.points.map((point) => ({ ...point }))
-    const labelFormatter: WaveformXAxisLabelFormatter = (value, context) =>
-      `${context.kind}:${value / 10}`
-    const formatter = vi.fn(labelFormatter)
-    const wrapper = await mountSizedChart(data, {
-      timeUnit: 'ms',
-      axes: { x: { labelFormatter: formatter } },
-    })
-
-    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('start:12.5')
-    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('end:187.5')
-    expect(
-      wrapper
-        .get('.waveform-chart__axis--x')
-        .findAll('.tick text')
-        .every((tick) => tick.text().startsWith('tick:')),
-    ).toBe(true)
-
-    const startCall = formatter.mock.calls.find(([, context]) => context.kind === 'start')
-    const tickCall = formatter.mock.calls.find(([, context]) => context.kind === 'tick')
-    const endCall = formatter.mock.calls.find(([, context]) => context.kind === 'end')
-    expect(startCall).toEqual([
-      125,
-      {
-        kind: 'start',
-        rawValue: 0.125,
-        timeUnit: 'ms',
-        domain: [0.125, 1.875],
-        displayDomain: [125, 1875],
-      },
-    ])
-    expect(tickCall?.[0]).toBeTypeOf('number')
-    expect(tickCall?.[1]).toMatchObject({
-      kind: 'tick',
-      timeUnit: 'ms',
-      domain: [0.125, 1.875],
-      displayDomain: [125, 1875],
-    })
-    expect(endCall?.[1]).toMatchObject({ kind: 'end', rawValue: 1.875 })
-    expect(data.points).toEqual(originalPoints)
-
-    await wrapper.setProps({
-      axes: { x: { labelFormatter: (value: number) => `updated:${value}` } },
-    })
-    await flushPromises()
-    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('updated:125')
-    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('updated:1875')
-    expect(
-      wrapper
-        .get('.waveform-chart__axis--x')
-        .findAll('.tick text')
-        .every((tick) => tick.text().startsWith('updated:')),
-    ).toBe(true)
-    expect(data.points).toEqual(originalPoints)
-  })
-
-  it('keeps zoom-change domains in source seconds', async () => {
-    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 }),
-    })
-
-    const initialStart = wrapper.get('.waveform-chart__axis-endpoint--start').text()
-    const initialEnd = wrapper.get('.waveform-chart__axis-endpoint--end').text()
-
-    overlay.element.dispatchEvent(
-      new WheelEvent('wheel', {
-        deltaY: -4000,
-        clientX: overlayWidth / 2,
-        clientY: 145,
-        bubbles: true,
-        cancelable: true,
-      }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
-
-    const emittedDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as
-      [number, number] | undefined
-    expect(emittedDomain).toBeDefined()
-    expect(emittedDomain?.[0]).toBeGreaterThanOrEqual(0)
-    expect(emittedDomain?.[1]).toBeLessThanOrEqual(2)
-    expect(wrapper.get('.waveform-chart__axis-endpoint--start').attributes('x')).toBe('0')
-    expect(wrapper.get('.waveform-chart__axis-endpoint--end').attributes('x')).toBe(
-      String(overlayWidth),
-    )
-    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).not.toBe(initialStart)
-    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).not.toBe(initialEnd)
-    expect(
-      Number.isFinite(Number(wrapper.get('.waveform-chart__axis-endpoint--start').text())),
-    ).toBe(true)
-  })
-})

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

@@ -1,95 +0,0 @@
-import { flushPromises } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-
-import { gridSeries, mountSizedChart } from '../../test/waveformChart'
-
-function geometry(track: { attributes: (name: string) => string | undefined }) {
-  return {
-    left: Number(track.attributes('data-track-left')),
-    top: Number(track.attributes('data-track-top')),
-    width: Number(track.attributes('data-track-width')),
-    height: Number(track.attributes('data-track-height')),
-  }
-}
-
-describe('WaveformChart incomplete grid rows', () => {
-  it.each(['independent', 'separated', 'compact'] as const)(
-    'fills an incomplete two by two row in %s mode',
-    async (displayMode) => {
-      const wrapper = await mountSizedChart(gridSeries(3), {
-        displayMode,
-        grid: { rowCount: 2, columnCount: 2, fillIncompleteLastRow: true },
-      })
-      const tracks = wrapper.findAll('.waveform-chart__track')
-      const first = geometry(tracks[0]!)
-      const last = geometry(tracks[2]!)
-
-      expect(tracks).toHaveLength(3)
-      expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(0)
-      expect(wrapper.findAll('.waveform-chart__grid-slot-placeholder')).toHaveLength(0)
-      expect(last.left).toBe(0)
-      expect(last.width).toBeGreaterThan(first.width * 1.8)
-      expect(last.top).toBeGreaterThan(first.top)
-      if (displayMode === 'independent') {
-        const overlays = wrapper.findAll('.waveform-chart__overlay--independent')
-        expect(overlays).toHaveLength(3)
-        expect(Number(overlays[2]?.attributes('width'))).toBe(last.width)
-      } else {
-        expect(wrapper.findAll('.waveform-chart__overlay--shared')).toHaveLength(1)
-      }
-    },
-  )
-
-  it('removes unused one-column rows and redistributes chart height', async () => {
-    const base = await mountSizedChart(gridSeries(3), {
-      displayMode: 'independent',
-      grid: { rowCount: 4, columnCount: 1 },
-    })
-    const filled = await mountSizedChart(gridSeries(3), {
-      displayMode: 'independent',
-      grid: { rowCount: 4, columnCount: 1, fillIncompleteLastRow: true },
-    })
-    const baseFirst = geometry(base.findAll('.waveform-chart__track')[0]!)
-    const filledTracks = filled.findAll('.waveform-chart__track')
-    const filledFirst = geometry(filledTracks[0]!)
-    const filledLast = geometry(filledTracks[2]!)
-
-    expect(filledTracks).toHaveLength(3)
-    expect(filledFirst.height).toBeGreaterThan(baseFirst.height)
-    expect(filledLast.top + filledLast.height).toBeGreaterThan(baseFirst.height * 3)
-  })
-
-  it('keeps the final two tracks evenly distributed in a two by three grid', async () => {
-    const wrapper = await mountSizedChart(gridSeries(5), {
-      displayMode: 'separated',
-      grid: { rowCount: 2, columnCount: 3, fillIncompleteLastRow: true },
-    })
-    const tracks = wrapper.findAll('.waveform-chart__track').map(geometry)
-
-    expect(tracks).toHaveLength(5)
-    expect(tracks[3]?.left).toBe(0)
-    expect(tracks[3]?.width).toBeCloseTo(tracks[4]?.width ?? 0)
-    expect(tracks[4]?.left).toBeGreaterThan((tracks[3]?.width ?? 0) + 1)
-  })
-
-  it('keeps full pages unchanged and fills a partial second page', async () => {
-    const data = gridSeries(5)
-    const standard = await mountSizedChart(data, {
-      displayMode: 'separated',
-      grid: { rowCount: 2, columnCount: 2 },
-    })
-    const filled = await mountSizedChart(data, {
-      displayMode: 'separated',
-      grid: { rowCount: 2, columnCount: 2, fillIncompleteLastRow: true },
-    })
-    const standardFirstPage = standard.findAll('.waveform-chart__track').map(geometry)
-    expect(filled.findAll('.waveform-chart__track').map(geometry)).toEqual(standardFirstPage)
-
-    await filled.get('.ant-pagination-next button').trigger('click')
-    await flushPromises()
-    const secondPage = filled.findAll('.waveform-chart__track').map(geometry)
-    expect(secondPage).toHaveLength(1)
-    expect(secondPage[0]?.left).toBe(0)
-    expect(secondPage[0]?.width).toBeGreaterThan(standardFirstPage[0]?.width ?? 0)
-  })
-})

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

@@ -1,155 +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 incomplete data hover', () => {
-  it.each(['separated', 'compact'] as const)(
-    'clamps each track crosshair and tooltip values to data endpoints in %s mode',
-    async (displayMode) => {
-      const wrapper = await mountSizedChart(
-        {
-          kind: 'series',
-          series: [
-            {
-              name: '完整数据',
-              data: {
-                kind: 'points',
-                points: [
-                  { x: -1, y: 1 },
-                  { x: -0.5, y: 2 },
-                  { x: 1, y: 3 },
-                ],
-              },
-            },
-            {
-              name: '从零开始',
-              data: {
-                kind: 'points',
-                points: [
-                  { x: 0, y: 10 },
-                  { x: 1, y: 20 },
-                ],
-              },
-            },
-          ],
-        },
-        { displayMode },
-      )
-      const overlay = wrapper.get('.waveform-chart__overlay--shared')
-      const overlayWidth = Number(overlay.attributes('width'))
-      Object.defineProperty(overlay.element, 'getBoundingClientRect', {
-        value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
-      })
-
-      overlay.element.dispatchEvent(
-        new MouseEvent('pointermove', {
-          clientX: overlayWidth / 4,
-          clientY: 120,
-          bubbles: true,
-        }),
-      )
-      flushAnimationFrames()
-      await flushPromises()
-
-      const crosshairPositions = wrapper
-        .findAll('.waveform-chart__crosshair line')
-        .map((line) => Number(line.attributes('x1')))
-      expect(crosshairPositions).toHaveLength(2)
-      expect(crosshairPositions[0]).toBeCloseTo(overlayWidth / 4)
-      expect(crosshairPositions[1]).toBeCloseTo(overlayWidth / 2)
-      const tooltipRows = wrapper.findAll('.waveform-chart__tooltip-series')
-      expect(tooltipRows).toHaveLength(2)
-      expect(tooltipRows[0].text()).toContain('(x:-500 y:2)')
-      expect(tooltipRows[1].text()).toContain('(x:0 y:10)')
-      expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([{ x: -0.5, y: 2 }])
-    },
-  )
-
-  it.each(['separated', 'compact'] as const)(
-    'uses the longest series for a shared track crosshair while clamping each tooltip row in %s mode',
-    async (displayMode) => {
-      const wrapper = await mountSizedChart(
-        {
-          kind: 'series',
-          series: [
-            {
-              name: '范围参考',
-              data: {
-                kind: 'points',
-                points: [
-                  { x: -2, y: 1 },
-                  { x: 2, y: 2 },
-                ],
-              },
-            },
-            {
-              name: '最长曲线',
-              trackId: 'same-track',
-              data: {
-                kind: 'points',
-                points: [
-                  { x: 0, y: 10 },
-                  { x: 1, y: 20 },
-                ],
-              },
-            },
-            {
-              name: '较短曲线',
-              trackId: 'same-track',
-              data: {
-                kind: 'points',
-                points: [
-                  { x: 0.25, y: 30 },
-                  { x: 0.5, y: 40 },
-                ],
-              },
-            },
-          ],
-        },
-        { displayMode },
-      )
-      const overlay = wrapper.get('.waveform-chart__overlay--shared')
-      const overlayWidth = Number(overlay.attributes('width'))
-      Object.defineProperty(overlay.element, 'getBoundingClientRect', {
-        value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
-      })
-
-      overlay.element.dispatchEvent(
-        new MouseEvent('pointermove', {
-          clientX: overlayWidth / 8,
-          clientY: 120,
-          bubbles: true,
-        }),
-      )
-      flushAnimationFrames()
-      await flushPromises()
-
-      let crosshairPositions = wrapper
-        .findAll('.waveform-chart__crosshair line')
-        .map((line) => Number(line.attributes('x1')))
-      expect(crosshairPositions).toHaveLength(2)
-      expect(crosshairPositions[1]).toBeCloseTo(overlayWidth / 2)
-      expect(wrapper.text()).toContain('最长曲线(x:0 y:10)')
-      expect(wrapper.text()).toContain('较短曲线(x:250 y:30)')
-
-      overlay.element.dispatchEvent(
-        new MouseEvent('pointermove', {
-          clientX: (overlayWidth * 7) / 8,
-          clientY: 120,
-          bubbles: true,
-        }),
-      )
-      flushAnimationFrames()
-      await flushPromises()
-
-      crosshairPositions = wrapper
-        .findAll('.waveform-chart__crosshair line')
-        .map((line) => Number(line.attributes('x1')))
-      expect(crosshairPositions[1]).toBeCloseTo((overlayWidth * 3) / 4)
-      expect(wrapper.text()).toContain('最长曲线(x:1,000 y:20)')
-      expect(wrapper.text()).toContain('较短曲线(x:500 y:40)')
-    },
-  )
-})