st-comp 0.0.276 → 0.0.278

package/.argus/backups/tests/components/20260727_141349.322_KlineBasic.spec.ts

@@ -0,0 +1,437 @@
+import { vi } from 'vitest'
+
+// 模块级 post/get：KlineBasic/api.js 在 initRequestByEnv 里通过 initRequest 拿到请求函数
+const { postFn, getFn } = vi.hoisted(() => ({
+  postFn: vi.fn(),
+  getFn: vi.fn(),
+}))
+
+vi.mock('echarts', () => import('@test/mocks/echarts.kline.mock.ts'))
+// 组件里 ElMessage 由 unplugin-auto-import 以全局标识符注入，测试环境没有该插件，
+// 直接挂 globalThis 兜底。
+;(globalThis as any).ElMessage = Object.assign(vi.fn(), { success: vi.fn(), warning: vi.fn(), error: vi.fn(), info: vi.fn() })
+vi.mock('element-plus', async () => {
+  const actual: any = await vi.importActual('element-plus')
+  return {
+    ...actual,
+    ElMessage: Object.assign(vi.fn(), { success: vi.fn(), warning: vi.fn(), error: vi.fn(), info: vi.fn() }),
+  }
+})
+vi.mock('st-func', async () => {
+  const mock: any = await import('@test/mocks/st-func.mock.ts')
+  return {
+    ...mock,
+    initRequest: vi.fn(() => ({ get: getFn, post: postFn })),
+  }
+})
+
+
+import { flushPromises } from '@vue/test-utils'
+import { mountWithPlugins } from '@test/helpers/mountWithPlugins.ts'
+import * as echarts from 'echarts'
+import { initRequest, addResizeListener } from 'st-func'
+import KlineBasic from '@package/KlineBasic/index.vue'
+const ElMessage = (globalThis as any).ElMessage
+import { nextTick } from 'vue'
+
+// KlineSub（副图）先挂载先 init，KlineBasic 主图是最后 init 的实例
+const getInstance = () => (echarts.init as any).mock.results.at(-1)?.value
+
+// rAF 链渲染（主图→副图→预警线 共 3 帧 + setOption 内再 1 帧），用宏任务等待
+const flushFrames = async (n = 6) => {
+  for (let i = 0; i < n; i++) await new Promise((r) => setTimeout(r, 20))
+}
+
+const klineBody = {
+  body: {
+    kline: {
+      time: ['2024-01-02 09:00:00', '2024-01-02 09:01:00', '2024-01-02 09:02:00'],
+      data: [
+        [100, 105, 99, 106, 1000],
+        [105, 103, 101, 107, 2000],
+        [103, 108, 102, 109, 3000],
+      ],
+      mainIndicator: [{ key: 'MA5', color: '#fff', data: [1, 2, 3] }],
+      subIndicator: [{ key: 'VOL', color: '#fff', data: [10, 20, 30] }],
+    },
+    warningLine: [],
+    factor: { total: 2 },
+  },
+}
+
+const indicatorStore = {
+  getIndicatorParams: vi.fn(() => []),
+  subIndicatorList: [{ label: 'VOL', value: 'VOL' }],
+}
+
+const mountComponent = (props: any = {}) =>
+  mountWithPlugins(KlineBasic, {
+    props: { variety: 'rb2405', cycle: '6', indicatorStore, ...props },
+  })
+
+describe('KlineBasic', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // tests/setup.ts 的 vi.restoreAllMocks() 会清掉 mock 工厂实现，这里恢复
+    vi.mocked(addResizeListener).mockReturnValue({ listen: vi.fn(), dispose: vi.fn() } as any)
+    postFn.mockResolvedValue(klineBody)
+  })
+
+  it('挂载后 initRequestByEnv + 请求 getKlineBasic（默认带 endTime/limit）', async () => {
+    mountComponent({ env: { baseURL: 'http://x' } })
+    await flushPromises()
+    expect(initRequest).toHaveBeenCalledWith({ baseURL: 'http://x' }, expect.any(Object))
+    expect(postFn).toHaveBeenCalledTimes(1)
+    const [url, params] = postFn.mock.calls[0]
+    expect(url).toBe('/middleLayer/kline/getKlineBasic')
+    expect(params).toMatchObject({ variety: 'rb2405', cycle: '6', subIndicator: 'VOL', limit: 2000 })
+    expect(params.endTime).toMatch(/^\d{4}-\d{2}-\d{2} /)
+  })
+
+  it('startTime+endTime 传入时请求参数不带 limit', async () => {
+    mountComponent({ startTime: '2024-01-01 00:00:00', endTime: '2024-01-03 00:00:00' })
+    await flushPromises()
+    const params = postFn.mock.calls[0][1]
+    expect(params.startTime).toBe('2024-01-01 00:00:00')
+    expect(params.endTime).toBe('2024-01-03 00:00:00')
+    expect(params.limit).toBeUndefined()
+  })
+
+  it('有数据: echarts.init + setOption 渲染主图, dataZoom 定位到最后一根', async () => {
+    mountComponent()
+    await flushPromises()
+    await flushFrames()
+    expect(echarts.init).toHaveBeenCalled()
+    const options = getInstance().setOption.mock.calls.map((c: any[]) => c[0])
+    const option = options.find((o: any) => o?.xAxis && o?.series) ?? options.find(Boolean)
+    expect(option.xAxis.data).toEqual(klineBody.body.kline.time)
+    expect(option.dataZoom[0].endValue).toBe(klineBody.body.kline.time.length - 1)
+    // candlestick 数据进入 series
+    expect(option.series[0].type).toBe('candlestick')
+    expect(option.series[0].data).toEqual(klineBody.body.kline.data)
+  })
+
+  it('emit getFactorData 带出 factor；有数据时渲染 Tips 不渲染 empty', async () => {
+    const wrapper = mountComponent()
+    await flushPromises()
+    await flushFrames()
+    expect(wrapper.emitted('getFactorData')).toBeTruthy()
+    expect(wrapper.emitted('getFactorData')![0]).toEqual([{ total: 2 }])
+    expect(wrapper.find('.klineBasic-tips').exists()).toBe(true)
+    expect(wrapper.find('.klineBasic-empty').exists()).toBe(false)
+  })
+
+  it('空数据: 显示 el-empty，不触发 getFactorData', async () => {
+    postFn.mockResolvedValue({ body: { kline: { time: [] } } })
+    const wrapper = mountComponent()
+    await flushPromises()
+    await flushFrames()
+    expect(wrapper.find('.klineBasic-empty').exists()).toBe(true)
+    expect(wrapper.text()).toContain('暂无数据')
+    expect(wrapper.emitted('getFactorData')).toBeFalsy()
+  })
+
+  it('config.showSubChart=false: 不渲染副图, 主图高度 100%', async () => {
+    const wrapper = mountComponent({ config: { showSubChart: false } })
+    await flushPromises()
+    expect(wrapper.find('.klineBasic-sub').exists()).toBe(false)
+    expect(wrapper.find('.klineBasic-main').attributes('style')).toContain('height: 100%')
+  })
+
+  it('variety/cycle 变化触发重新请求', async () => {
+    const wrapper = mountComponent()
+    await flushPromises()
+    expect(postFn).toHaveBeenCalledTimes(1)
+    await wrapper.setProps({ variety: 'rb2410' })
+    await flushPromises()
+    expect(postFn).toHaveBeenCalledTimes(2)
+    await wrapper.setProps({ cycle: '7' })
+    await flushPromises()
+    expect(postFn).toHaveBeenCalledTimes(3)
+  })
+
+  it('边界: variety 为空不发请求', async () => {
+    mountComponent({ variety: null })
+    await flushPromises()
+    expect(postFn).not.toHaveBeenCalled()
+  })
+
+
+  it('startTime 单独传入: 请求带 startTime+limit，不带 endTime', async () => {
+    mountComponent({ startTime: '2024-01-01 00:00:00' })
+    await flushPromises()
+    const params = postFn.mock.calls[0][1]
+    expect(params.startTime).toBe('2024-01-01 00:00:00')
+    expect(params.endTime).toBeUndefined()
+    expect(params.limit).toBe(2000)
+  })
+
+  it('endTime 单独传入: 请求带 endTime+limit', async () => {
+    mountComponent({ endTime: '2024-01-03 00:00:00' })
+    await flushPromises()
+    const params = postFn.mock.calls[0][1]
+    expect(params.endTime).toBe('2024-01-03 00:00:00')
+    expect(params.startTime).toBeUndefined()
+    expect(params.limit).toBe(2000)
+  })
+
+  it('接口异常: isError 展示错误区，点击刷新按钮重新请求', async () => {
+    // 组件 catch 里 rethrow（packages/KlineBasic/index.vue:395），而 onMounted 调用未接 .catch，
+    // 会产生一个预期的 unhandled rejection。此处挂载期间临时吞掉，避免污染 vitest 的 unhandled 计数。
+    const swallow = (e: Event) => e.preventDefault()
+    window.addEventListener('unhandledrejection', swallow)
+    try {
+      postFn.mockRejectedValue(new Error('net'))
+      const wrapper = mountComponent()
+      await flushPromises()
+      await flushFrames()
+      expect(wrapper.find('.klineBasic-error').exists()).toBe(true)
+      expect(wrapper.text()).toContain('加载失败，请刷新重试')
+      // 点击刷新按钮重新拉取
+      postFn.mockClear()
+      postFn.mockResolvedValue(klineBody)
+      await wrapper.find('.klineBasic-error button').trigger('click')
+      await flushPromises()
+      expect(postFn).toHaveBeenCalledTimes(1)
+    } finally {
+      window.removeEventListener('unhandledrejection', swallow)
+    }
+  })
+
+  it('datazoom 回调: startValue 低于阈值时加载历史并合并数据', async () => {
+    const wrapper = mountComponent()
+    await flushPromises()
+    await flushFrames()
+    const ins = getInstance()
+    // 模拟已有 option 里 dataZoom 拉到最左（startValue=0 < loadCheckCounts）
+    const baseOption = ins.getOption()
+    ins.getOption.mockReturnValue({
+      ...baseOption,
+      dataZoom: [{ startValue: 0, endValue: 10 }],
+    })
+    // 历史数据返回早于当前的数据
+    postFn.mockClear()
+    postFn.mockResolvedValue({
+      body: {
+        time: ['2024-01-01 09:00:00'],
+        data: [[90, 95, 89, 96, 500]],
+        mainIndicator: [{ key: 'MA5', color: '#fff', data: [0.5] }],
+        subIndicator: [{ key: 'VOL', color: '#fff', data: [5] }],
+      },
+    })
+    const datazoomCb = ins.on.mock.calls.find((c) => c[0] === 'datazoom')?.[1]
+    expect(datazoomCb).toBeTypeOf('function')
+    await datazoomCb()
+    await flushPromises()
+    await flushFrames()
+    // 请求 getKline 历史接口
+    const histCall = postFn.mock.calls.find((c) => c[0] === '/middleLayer/kline/getKline')
+    expect(histCall).toBeTruthy()
+    expect(histCall[1]).toMatchObject({ variety: 'rb2405', cycle: '6', limit: 2000, endTime: klineBody.body.kline.time[0] })
+    // 历史数据已合并进 chartData（time 最前是历史时间）
+    expect((wrapper.vm.$.setupState as any).chartData.time[0]).toBe('2024-01-01 09:00:00')
+  })
+
+  it('datazoom 回调: getOption 无 dataZoom 时跳过加载历史', async () => {
+    mountComponent()
+    await flushPromises()
+    await flushFrames()
+    const ins = getInstance()
+    ins.getOption.mockReturnValue({})
+    postFn.mockClear()
+    const datazoomCb = ins.on.mock.calls.find((c) => c[0] === 'datazoom')?.[1]
+    await datazoomCb()
+    await flushPromises()
+    expect(postFn).not.toHaveBeenCalled()
+  })
+
+  it('highlight / globalout 回调更新 activeIndex', async () => {
+    const wrapper = mountComponent()
+    await flushPromises()
+    await flushFrames()
+    const ins = getInstance()
+    const state = wrapper.vm.$.setupState
+    const highlightCb = ins.on.mock.calls.find((c) => c[0] === 'highlight')?.[1]
+    highlightCb({ dataIndex: 1 })
+    expect(state.activeIndex).toBe(1)
+    // batch 形式
+    highlightCb({ batch: [{ dataIndex: 2 }] })
+    expect(state.activeIndex).toBe(2)
+    // globalout: 回退到 dataZoom.endValue
+    ins.getOption.mockReturnValue({ dataZoom: [{ startValue: 0, endValue: 0 }] })
+    const globaloutCb = ins.on.mock.calls.find((c) => c[0] === 'globalout')?.[1]
+    globaloutCb()
+    expect(state.activeIndex).toBe(0)
+  })
+
+  it('键盘事件: hover 状态下方向键派发 dataZoom/highlight 动作', async () => {
+    const wrapper = mountComponent()
+    await flushPromises()
+    await flushFrames()
+    const ins = getInstance()
+    ins.getOption.mockReturnValue({
+      xAxis: [{ data: klineBody.body.kline.time }],
+      dataZoom: [{ startValue: 0, endValue: 2 }],
+    })
+    // hover 开
+    await wrapper.find('.klineBasic').trigger('mousemove')
+    ins.dispatchAction.mockClear()
+    window.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowLeft' }))
+    await flushFrames(2)
+    const types = ins.dispatchAction.mock.calls.map((c) => c[0].type)
+    expect(types).toContain('dataZoom')
+    expect(types).toContain('updateAxisPointer')
+    expect(types).toContain('highlight')
+    // 未 hover 且无 ctrl 时不响应
+    await wrapper.find('.klineBasic').trigger('mouseout')
+    ins.dispatchAction.mockClear()
+    window.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowRight' }))
+    await flushFrames(2)
+    expect(ins.dispatchAction).not.toHaveBeenCalled()
+  })
+
+  it('键盘事件: ArrowUp 缩小范围、ArrowDown 放大范围；无数据时直接返回', async () => {
+    const wrapper = mountComponent()
+    await flushPromises()
+    await flushFrames()
+    const ins = getInstance()
+    ins.getOption.mockReturnValue({
+      xAxis: [{ data: klineBody.body.kline.time }],
+      dataZoom: [{ startValue: 0, endValue: 2 }],
+    })
+    await wrapper.find('.klineBasic').trigger('mousemove')
+    ins.dispatchAction.mockClear()
+    window.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowUp' }))
+    await flushFrames(2)
+    window.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowDown' }))
+    await flushFrames(2)
+    expect(ins.dispatchAction).toHaveBeenCalled()
+    // 无 xAxis 数据时直接 return
+    ins.getOption.mockReturnValue({ xAxis: [{ data: [] }], dataZoom: [{}] })
+    ins.dispatchAction.mockClear()
+    window.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowLeft' }))
+    await flushFrames(2)
+    expect(ins.dispatchAction).not.toHaveBeenCalled()
+  })
+
+  it('contextmenu 回调: graphic 组件右键切换菜单为删除/修改画线', async () => {
+    const wrapper = mountComponent()
+    await flushPromises()
+    await flushFrames()
+    const ins = getInstance()
+    const state = wrapper.vm.$.setupState
+    const ctxCb = ins.on.mock.calls.find((c) => c[0] === 'contextmenu')?.[1]
+    expect(ctxCb).toBeTypeOf('function')
+    ctxCb({ componentType: 'graphic', info: { id: 7, warnPrice: 100 } })
+    expect(state.menuData.map((m) => m.key)).toEqual(['deleteWarningLine', 'changeWarningLine'])
+    expect(state.warningItem).toEqual({ id: 7, warnPrice: 100 })
+  })
+
+  it('menuClick: deleteWarningLine 调删除接口并提示、刷新画线', async () => {
+    const wrapper = mountComponent({ featureId: 88 })
+    await flushPromises()
+    await flushFrames()
+    const ins = getInstance()
+    const state = wrapper.vm.$.setupState
+    ins.on.mock.calls.find((c) => c[0] === 'contextmenu')?.[1]({
+      componentType: 'graphic',
+      info: { id: 7, warnPrice: 100 },
+    })
+    postFn.mockClear()
+    postFn.mockResolvedValue({ body: [] })
+    await state.menuClick({ key: 'deleteWarningLine' })
+    await flushPromises()
+    expect(postFn).toHaveBeenCalledWith('/alarm/deliversign/deleteAlarmPrice', { id: 7 })
+    expect(ElMessage.success).toHaveBeenCalledWith('画线预警删除成功')
+    // 刷新画线列表并 emit change
+    expect(postFn).toHaveBeenCalledWith('/alarm/deliversign/findAlarmPriceByUserId', expect.objectContaining({ featureId: 88 }))
+    expect(wrapper.emitted('change')).toBeTruthy()
+    // closeContextMenuCallBack 重置菜单
+    state.closeContextMenuCallBack()
+    expect(state.menuData.map((m) => m.key)).toEqual(['drawWarningLine'])
+  })
+
+  it('menuClick: changeWarningLine 打开修改弹窗，changeWarningLine 提交更新', async () => {
+    const wrapper = mountComponent({ featureId: 88 })
+    await flushPromises()
+    await flushFrames()
+    const ins = getInstance()
+    const state = wrapper.vm.$.setupState
+    ins.on.mock.calls.find((c) => c[0] === 'contextmenu')?.[1]({
+      componentType: 'graphic',
+      info: { id: 9, warnPrice: 123 },
+    })
+    state.menuClick({ key: 'changeWarningLine' })
+    await nextTick()
+    expect(state.warningLineChangeVisible).toBe(true)
+    expect(state.warningLineChangeValue).toBe(123)
+    postFn.mockClear()
+    postFn.mockResolvedValue({ body: [] })
+    state.warningLineChangeValue = 456
+    await state.changeWarningLine()
+    await flushPromises()
+    expect(postFn).toHaveBeenCalledWith(
+      '/alarm/deliversign/updateAlarmPrice',
+      expect.objectContaining({ id: 9, warnPrice: 456 }),
+    )
+    expect(ElMessage.success).toHaveBeenCalledWith('画线预警修改成功')
+  })
+
+  it('menuClick: drawWarningLine 进入画线模式，zr mousedown 后提交新增', async () => {
+    const wrapper = mountComponent({ featureId: 88, varietyName: '螺纹' })
+    await flushPromises()
+    await flushFrames()
+    const ins = getInstance()
+    ins.getOption.mockReturnValue({ tooltip: [{ axisPointer: { label: {} } }] })
+    const zrOn = vi.fn()
+    const zrOff = vi.fn()
+    ins.getZr.mockReturnValue({ on: zrOn, off: zrOff })
+    ins.convertFromPixel.mockReturnValue(100.123456)
+    postFn.mockClear()
+    postFn.mockResolvedValue({ body: [] })
+    const state = wrapper.vm.$.setupState
+    state.menuClick({ key: 'drawWarningLine' })
+    await flushPromises()
+    // 进入画线模式: 注册 mousedown
+    expect(zrOn).toHaveBeenCalledWith('mousedown', expect.any(Function))
+    const handleClick = zrOn.mock.calls[0][1]
+    await handleClick({ offsetY: 50 })
+    await flushPromises()
+    expect(zrOff).toHaveBeenCalledWith('mousedown', handleClick)
+    expect(postFn).toHaveBeenCalledWith(
+      '/alarm/deliversign/addAlarmPrice',
+      expect.objectContaining({ featureCode: 'rb2405', featureName: '螺纹', featureId: 88, warnPrice: 100.123 }),
+    )
+    expect(ElMessage.success).toHaveBeenCalledWith('画线预警成功!')
+  })
+
+  it('defineExpose draw(warningLine): 更新画线数据并重绘', async () => {
+    const wrapper = mountComponent()
+    await flushPromises()
+    await flushFrames()
+    const vm = wrapper.vm
+    expect(() => vm.draw('warningLine', [{ id: 1 }])).not.toThrow()
+    await flushFrames(2)
+  })
+
+  it('brushRange: 有框选范围时 dispatchAction 画 brush 区域', async () => {
+    mountComponent({ brushRange: ['2024-01-02', '2024-01-02'], cycle: '6' })
+    await flushPromises()
+    await flushFrames(8)
+    const ins = getInstance()
+    const brushCalls = ins.dispatchAction.mock.calls.filter((c) => c[0].type === 'brush')
+    expect(brushCalls.length).toBeGreaterThan(0)
+    expect(brushCalls[0][0].areas[0].coordRange).toEqual(['2024-01-02 09:00:00', '2024-01-02 09:00:00'])
+  })
+
+  it('卸载: dispose 图表并解绑事件', async () => {
+    const wrapper = mountComponent()
+    await flushPromises()
+    await flushFrames()
+    const ins = getInstance()
+    wrapper.unmount()
+    expect(ins.dispose).toHaveBeenCalled()
+    expect(ins.off).toHaveBeenCalledWith('datazoom')
+  })
+
+})