waveform-analysis 0.1.63 → 0.1.65

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

@@ -1,350 +0,0 @@
-import { flushPromises } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-
-import { flushAnimationFrames } from '../../test/setup'
-import { type WaveformData } from '../waveform'
-import WaveformChartView from '../WaveformChartView.vue'
-
-import { gridSeries, mountSizedChart, visibilitySeries } from '../../test/waveformChart'
-
-function annotationEditorExists() {
-  return Boolean(
-    Array.from(document.body.querySelectorAll<HTMLElement>('[role="dialog"]'))
-      .filter((element) => element.closest('.waveform-annotation-editor'))
-      .at(-1),
-  )
-}
-
-describe('WaveformChart', () => {
-  it('shows legends when a track contains at least two series', async () => {
-    const oneSeries = visibilitySeries()
-    if (oneSeries.kind === 'series') oneSeries.series = oneSeries.series.slice(0, 1)
-    const withoutLegend = await mountSizedChart(oneSeries, {
-      grid: { rowCount: 1, columnCount: 1 },
-    })
-    expect(withoutLegend.findAll('.waveform-chart__legend')).toHaveLength(0)
-
-    const twoSeries = visibilitySeries()
-    if (twoSeries.kind === 'series') twoSeries.series = twoSeries.series.slice(0, 2)
-    const withLegend = await mountSizedChart(twoSeries, {
-      grid: { rowCount: 1, columnCount: 1 },
-    })
-    expect(withLegend.findAll('.waveform-chart__legend')).toHaveLength(1)
-    expect(withLegend.find('.waveform-chart__legend').attributes('data-position')).toBe('top-right')
-  })
-
-  it('resolves legend positions by stable track id across pages', async () => {
-    const wrapper = await mountSizedChart(
-      {
-        kind: 'series',
-        series: Array.from({ length: 12 }, (_, index) => ({
-          id: `series-${index}`,
-          trackId: `frame-${Math.floor(index / 3)}`,
-          name: `series ${index}`,
-          data: {
-            kind: 'points' as const,
-            points: [
-              { x: 0, y: index },
-              { x: 1, y: index + 1 },
-            ],
-          },
-        })),
-      },
-      {
-        grid: { rowCount: 2, columnCount: 1, showPagination: true },
-        legend: {
-          position: 'left',
-          orientation: 'auto',
-          trackPositions: {
-            'frame-0': 'top',
-            'frame-1': 'bottom-right',
-            'frame-2': 'bottom',
-          },
-        },
-      },
-    )
-
-    const legendForTrack = (trackId: string) =>
-      wrapper.get(`[data-legend-track-id="${trackId}"] .waveform-chart__legend`)
-
-    expect(legendForTrack('frame-0').attributes('data-position')).toBe('top')
-    expect(legendForTrack('frame-0').attributes('data-orientation')).toBe('horizontal')
-    expect(legendForTrack('frame-1').attributes('data-position')).toBe('bottom-right')
-    expect(legendForTrack('frame-1').attributes('data-orientation')).toBe('vertical')
-
-    await wrapper.setProps({
-      legend: {
-        position: 'left',
-        orientation: 'vertical',
-        trackPositions: { 'frame-0': 'top', 'frame-1': 'bottom-right', 'frame-2': 'bottom' },
-      },
-    })
-    expect(legendForTrack('frame-0').attributes('data-orientation')).toBe('vertical')
-
-    await wrapper.get('.ant-pagination-next button').trigger('click')
-    expect(legendForTrack('frame-2').attributes('data-position')).toBe('bottom')
-    expect(legendForTrack('frame-2').attributes('data-orientation')).toBe('vertical')
-    expect(legendForTrack('frame-3').attributes('data-position')).toBe('left')
-    expect(legendForTrack('frame-3').attributes('data-orientation')).toBe('vertical')
-  })
-
-  it('applies a configurable alpha background to every visible legend', async () => {
-    const wrapper = await mountSizedChart(
-      {
-        kind: 'series',
-        series: Array.from({ length: 6 }, (_, index) => ({
-          id: `series-${index}`,
-          trackId: `frame-${Math.floor(index / 3)}`,
-          name: `series ${index}`,
-          data: {
-            kind: 'points',
-            points: [
-              { x: 0, y: index },
-              { x: 1, y: index + 1 },
-            ],
-          },
-        })),
-      },
-      {
-        grid: { rowCount: 2, columnCount: 1 },
-        legend: { backgroundColor: 'rgba(14, 165, 233, 0.25)' },
-      },
-    )
-
-    const legendPanels = wrapper.findAll('.waveform-legend__panel')
-    expect(legendPanels).toHaveLength(2)
-    legendPanels.forEach((panel) => {
-      expect(panel.attributes('style')).toContain('background-color: rgba(14, 165, 233, 0.25)')
-    })
-
-    await wrapper.setProps({ legend: { backgroundColor: '' } })
-    wrapper.findAll('.waveform-legend__panel').forEach((panel) => {
-      expect(panel.attributes('style')).toContain('background-color: rgba(255, 255, 255, 0.7)')
-    })
-  })
-
-  it('keeps legends display-only unless interaction is explicitly enabled', async () => {
-    const wrapper = await mountSizedChart(visibilitySeries(), {
-      grid: { rowCount: 1, columnCount: 1 },
-    })
-
-    const items = wrapper.findAll('.waveform-chart__legend-item')
-    expect(items).toHaveLength(3)
-    expect(items.every((item) => item.attributes('disabled') !== undefined)).toBe(true)
-    expect(wrapper.get('.waveform-legend__panel').classes()).not.toContain(
-      'waveform-legend__panel--interactive',
-    )
-    expect(wrapper.emitted('update:hidden-series-ids')).toBeUndefined()
-  })
-
-  it('toggles series, axes, tooltips, and annotations from an interactive legend', async () => {
-    const wrapper = await mountSizedChart(visibilitySeries(), {
-      annotations: [{ id: 'high-note', seriesId: 'high', x: 15, y: 1500, text: '高值' }],
-      grid: { rowCount: 1, columnCount: 1 },
-      legend: { interactive: true },
-      overlayMode: 'multi-axis',
-    })
-
-    expect(wrapper.findAll('.waveform-chart__axis--y')).toHaveLength(3)
-    expect(wrapper.find('[data-annotation-id="high-note"]').exists()).toBe(true)
-    const annotationLayer = wrapper.get('.waveform-annotation-layer').element
-    const legendLayer = wrapper.get('.waveform-chart__legend-layer').element
-    expect(
-      annotationLayer.compareDocumentPosition(legendLayer) & Node.DOCUMENT_POSITION_FOLLOWING,
-    ).toBeTruthy()
-    const highLegendItem = wrapper.findAll('.waveform-chart__legend-item')[1]
-    expect(highLegendItem.attributes('aria-pressed')).toBe('true')
-
-    await highLegendItem.trigger('click')
-    await flushPromises()
-
-    expect(
-      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
-    ).toEqual(['low', 'mid'])
-    expect(wrapper.findAll('.waveform-chart__axis--y')).toHaveLength(2)
-    expect(wrapper.find('[data-annotation-id="high-note"]').exists()).toBe(false)
-    expect(wrapper.findAll('.waveform-chart__legend-item')[1].classes()).toContain('is-hidden')
-    expect(wrapper.findAll('.waveform-chart__legend-item')[1].attributes('aria-pressed')).toBe(
-      'false',
-    )
-    expect(wrapper.emitted('update:hidden-series-ids')?.at(-1)).toEqual([['high']])
-    expect(wrapper.emitted('series-visibility-change')?.at(-1)).toEqual([
-      { seriesId: 'high', visible: false, hiddenSeriesIds: ['high'] },
-    ])
-
-    const overlay = wrapper.get('.waveform-chart__overlay--independent')
-    const overlayWidth = Number(overlay.attributes('width'))
-    const overlayHeight = Number(overlay.attributes('height'))
-    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
-      value: () => ({ left: 0, top: 0, width: overlayWidth, height: overlayHeight }),
-    })
-    overlay.element.dispatchEvent(
-      new MouseEvent('pointermove', {
-        clientX: overlayWidth / 2,
-        clientY: overlayHeight / 2,
-        bubbles: true,
-      }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
-    expect(wrapper.findAll('.waveform-chart__tooltip-series')).toHaveLength(2)
-    expect(wrapper.get('.waveform-chart__tooltip-series').text()).toContain('低量程')
-
-    await wrapper.findAll('.waveform-chart__legend-item')[1].trigger('click')
-    await flushPromises()
-    expect(wrapper.findAll('.waveform-chart__line')).toHaveLength(3)
-    expect(wrapper.find('[data-annotation-id="high-note"]').exists()).toBe(true)
-    expect(wrapper.emitted('series-visibility-change')?.at(-1)).toEqual([
-      { seriesId: 'high', visible: true, hiddenSeriesIds: [] },
-    ])
-  })
-
-  it('waits for controlled visibility updates and preserves unknown controlled IDs', async () => {
-    const wrapper = await mountSizedChart(visibilitySeries(), {
-      grid: { rowCount: 1, columnCount: 1 },
-      hiddenSeriesIds: ['high', 'temporarily-absent'],
-      legend: { interactive: true },
-    })
-
-    expect(
-      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
-    ).toEqual(['low', 'mid'])
-    await wrapper.findAll('.waveform-chart__legend-item')[0].trigger('click')
-    expect(wrapper.emitted('update:hidden-series-ids')?.at(-1)).toEqual([
-      ['high', 'temporarily-absent', 'low'],
-    ])
-    expect(
-      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
-    ).toEqual(['low', 'mid'])
-
-    await wrapper.setProps({ hiddenSeriesIds: ['low'] })
-    await flushPromises()
-    expect(
-      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
-    ).toEqual(['high', 'mid'])
-  })
-
-  it('retains uncontrolled visibility by stable ID and clears removed IDs', async () => {
-    const original = visibilitySeries()
-    const wrapper = await mountSizedChart(original, {
-      grid: { rowCount: 1, columnCount: 1 },
-      legend: { interactive: true },
-    })
-    await wrapper.findAll('.waveform-chart__legend-item')[1].trigger('click')
-
-    const reversed: WaveformData = {
-      kind: 'series',
-      series: [...(original.kind === 'series' ? original.series : [])].reverse(),
-    }
-    await wrapper.setProps({ data: reversed })
-    await flushPromises()
-    expect(
-      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
-    ).toEqual(['mid', 'low'])
-
-    await wrapper.setProps({
-      data: {
-        kind: 'series',
-        series: original.kind === 'series' ? [original.series[0]!] : [],
-      },
-    })
-    await flushPromises()
-    await wrapper.setProps({ data: original })
-    await flushPromises()
-    expect(wrapper.findAll('.waveform-chart__line')).toHaveLength(3)
-  })
-
-  it('keeps a recoverable legend and stops chart interaction when every series is hidden', async () => {
-    const wrapper = await mountSizedChart(visibilitySeries(), {
-      defaultHiddenSeriesIds: ['low', 'high', 'mid'],
-      grid: { rowCount: 1, columnCount: 1 },
-      legend: { interactive: true },
-      overlayMode: 'multi-axis',
-    })
-
-    expect(wrapper.findAll('.waveform-chart__line')).toHaveLength(0)
-    expect(wrapper.findAll('.waveform-chart__axis')).toHaveLength(0)
-    expect(wrapper.findAll('.waveform-chart__overlay')).toHaveLength(0)
-    expect(wrapper.findAll('.waveform-chart__legend-item')).toHaveLength(3)
-    expect(wrapper.get('.waveform-track__no-visible-series').text()).toBe('暂无可见曲线')
-
-    await wrapper.findAll('.waveform-chart__legend-item')[0].trigger('click')
-    await flushPromises()
-    expect(
-      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
-    ).toEqual(['low'])
-    expect(wrapper.findAll('.waveform-chart__axis--x')).toHaveLength(1)
-    expect(wrapper.findAll('.waveform-chart__axis--y')).toHaveLength(1)
-    expect(wrapper.findAll('.waveform-chart__overlay--independent')).toHaveLength(1)
-  })
-
-  it('closes an annotation editor when its series is hidden from the legend', async () => {
-    const wrapper = await mountSizedChart(visibilitySeries(), {
-      grid: { rowCount: 1, columnCount: 1 },
-      legend: { interactive: true },
-    })
-    const overlay = wrapper.get('.waveform-chart__overlay--independent')
-    const overlayWidth = Number(overlay.attributes('width'))
-    const overlayHeight = Number(overlay.attributes('height'))
-    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
-      value: () => ({ left: 0, top: 0, width: overlayWidth, height: overlayHeight }),
-    })
-    overlay.element.dispatchEvent(
-      new MouseEvent('contextmenu', {
-        clientX: overlayWidth * 0.75,
-        clientY: overlayHeight / 2,
-        bubbles: true,
-      }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
-    expect(annotationEditorExists()).toBe(true)
-
-    const controller = wrapper.getComponent(WaveformChartView).props('controller') as unknown as {
-      annotationInteraction: { editorDraft: { value: { annotation: { seriesId: string } } | null } }
-    }
-    const draftSeriesId = controller.annotationInteraction.editorDraft.value?.annotation.seriesId
-    const item = wrapper
-      .findAll('.waveform-chart__legend-item')
-      .find((legendItem) =>
-        legendItem.text().includes(draftSeriesId === 'high' ? '高量程' : '低量程'),
-      )
-    expect(item).toBeDefined()
-    await item!.trigger('click')
-    await flushPromises()
-    expect(annotationEditorExists()).toBe(false)
-  })
-
-  it('renders independent cells with separate x axes and overlays', async () => {
-    const wrapper = await mountSizedChart(gridSeries(4), {
-      displayMode: 'independent',
-      grid: { rowCount: 2, columnCount: 2 },
-    })
-
-    expect(wrapper.findAll('.waveform-chart__track')).toHaveLength(4)
-    expect(wrapper.findAll('.waveform-chart__axis--x')).toHaveLength(4)
-    expect(wrapper.findAll('.waveform-chart__overlay--independent')).toHaveLength(4)
-    const tracks = wrapper.findAll('.waveform-chart__track')
-    const firstTop = Number(tracks[0].attributes('data-track-top'))
-    const secondRowTop = Number(tracks[2].attributes('data-track-top'))
-    const firstHeight = Number(tracks[0].attributes('data-track-height'))
-    expect(secondRowTop).toBeGreaterThan(firstTop + firstHeight + 20)
-  })
-
-  it('reserves horizontal clearance for Y-axis labels in multi-column grids', async () => {
-    for (const displayMode of ['independent', 'separated', 'compact'] as const) {
-      const wrapper = await mountSizedChart(gridSeries(4), {
-        displayMode,
-        grid: { rowCount: 2, columnCount: 2 },
-      })
-      const tracks = wrapper.findAll('.waveform-chart__track')
-      const firstLeft = Number(tracks[0].attributes('data-track-left') ?? 0)
-      const firstWidth = Number(tracks[0].attributes('data-track-width'))
-      const secondLeft = Number(tracks[1].attributes('data-track-left'))
-      const labelX = Number(tracks[1].attributes('data-y-axis-label-x'))
-
-      expect(secondLeft - (firstLeft + firstWidth)).toBeGreaterThanOrEqual(Math.abs(labelX) + 6)
-      expect(tracks[1].find('.waveform-chart__y-axis-label-bg').exists()).toBe(true)
-    }
-  })
-})