st-comp 0.0.276 → 0.0.278

package/tests/components/KlineConfig.spec.ts

@@ -0,0 +1,278 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { nextTick } from 'vue'
+import { mountWithPlugins } from '@test/helpers/mountWithPlugins.ts'
+import KlineConfig from '@package/KlineConfig/index.vue'
+import { getDefaultUserKlineConfig } from '@package/KlineConfig/config.js'
+
+const makeRequest = () => ({
+  get: vi.fn(() => Promise.resolve({})),
+  // 按 URL 分流: getDict 返回周期字典, 其余默认 { body: null }
+  post: vi.fn((url: string) => {
+    if (url === '/common/qt/getDict') {
+      return Promise.resolve({
+        body: { 1002: [{ dictName: '日K', dictCode: 'day' }] },
+      })
+    }
+    return Promise.resolve({ body: null })
+  }),
+})
+
+const mountComponent = (props: any = {}, request = makeRequest()) => {
+  const wrapper = mountWithPlugins(KlineConfig, {
+    props: {
+      indicatorStore: { mainIndicatorList: [{ label: 'MA', value: 'MA' }] },
+      ...props,
+    },
+    global: {
+      provide: { stConfig: { env: {}, request } },
+    },
+  })
+  const state = wrapper.vm.$.setupState as any
+  state.__vm = wrapper.vm
+  return { wrapper, state, request }
+}
+
+describe('KlineConfig', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('挂载成功，渲染根节点与抽屉', () => {
+    const { wrapper } = mountComponent()
+    expect(wrapper.find('.kline-config').exists()).toBe(true)
+    expect(wrapper.findComponent({ name: 'ElDrawer' }).exists()).toBe(true)
+  })
+
+  it('onMounted 从 indicatorStore.mainIndicatorList 填充主图指标选项', async () => {
+    const { state } = mountComponent()
+    await nextTick()
+    expect(state.mainIndicatorOptions).toEqual([{ label: 'MA', value: 'MA' }])
+  })
+
+  it('watch: indicatorStore.mainIndicatorList 变化时同步选项', async () => {
+    const { wrapper, state } = mountComponent()
+    await nextTick()
+    await wrapper.setProps({
+      indicatorStore: { mainIndicatorList: [{ label: 'BOLL', value: 'BOLL' }] },
+    })
+    await nextTick()
+    expect(state.mainIndicatorOptions).toEqual([{ label: 'BOLL', value: 'BOLL' }])
+  })
+
+  it('open(): server 模式请求 getUserConfig 并合并配置、打开抽屉', async () => {
+    const request = makeRequest()
+    // 首个 post 是 onMounted 的 getDict, 第二个才是 getUserConfig
+    request.post
+      .mockResolvedValueOnce({ body: { 1002: [] } })
+      .mockResolvedValueOnce({ body: JSON.stringify({ sellBuy: 1 }) })
+    const { state } = mountComponent({ origin: 'server' }, request)
+    request.post.mockClear()
+
+    await (wrapper_open(state))
+    expect(request.post).toHaveBeenCalledWith('/common/qt/getUserConfig', { appId: 1 })
+    expect(state.visible).toBe(true)
+    expect(state.form.sellBuy).toBe(1)
+    // 默认配置字段也合并进来
+    const defaults = getDefaultUserKlineConfig()
+    expect(state.form.multiCycleNum).toBe(defaults.multiCycleNum)
+  })
+
+  it('open(): local 模式从 localStorage 读取配置', async () => {
+    localStorage.setItem('userKlineConfig', JSON.stringify({ sellBuy: 0, pageType: 2 }))
+    const { state } = mountComponent({ origin: 'local', cycleOptions: [{ label: '日K', value: 'day' }] })
+    await wrapper_open(state)
+    expect(state.visible).toBe(true)
+    expect(state.form.pageType).toBe(2)
+    // local 模式周期选项直接取 props
+    expect(state.cycleOptions).toEqual([{ label: '日K', value: 'day' }])
+  })
+
+  it('handleSubmit(): server 模式提交 updateUserConfig 并 emit callBack', async () => {
+    const request = makeRequest()
+    const { wrapper, state } = mountComponent({ origin: 'server' }, request)
+    await wrapper_open(state)
+    state.form.sellBuy = 1
+    await state.handleSubmit()
+    const json = JSON.stringify(state.form)
+    expect(request.post).toHaveBeenCalledWith('/common/qt/updateUserConfig', { appId: 1, json })
+    expect(wrapper.emitted('callBack')).toEqual([[json]])
+    expect(state.visible).toBe(false)
+  })
+
+  it('handleSubmit(): local 模式写 localStorage 并 emit callBack', async () => {
+    const { wrapper, state } = mountComponent({ origin: 'local' })
+    await wrapper_open(state)
+    state.form.pageType = 2
+    await state.handleSubmit()
+    const json = JSON.stringify(state.form)
+    expect(localStorage.getItem('userKlineConfig')).toBe(json)
+    expect(wrapper.emitted('callBack')).toEqual([[json]])
+    expect(state.visible).toBe(false)
+  })
+
+  it('handleReset(): 恢复默认配置', async () => {
+    const { state } = mountComponent({ origin: 'local' })
+    await wrapper_open(state)
+    state.form.pageType = 2
+    state.form.sellBuy = 9
+    state.handleReset()
+    const defaults = getDefaultUserKlineConfig()
+    expect(state.form.pageType).toBe(defaults.pageType)
+    expect(state.form.sellBuy).toBe(defaults.sellBuy)
+    expect(state.form.multiCycleList).toEqual(defaults.multiCycleList)
+  })
+  it('open(): server 模式 getUserConfig 返回空 body 时走默认配置分支', async () => {
+    const request = makeRequest()
+    request.post
+      .mockResolvedValueOnce({ body: { 1002: [] } })
+      .mockResolvedValueOnce({ body: null })
+    const { state } = mountComponent({ origin: 'server' }, request)
+    await wrapper_open(state)
+    expect(state.visible).toBe(true)
+    const defaults = getDefaultUserKlineConfig()
+    expect(state.form.sellBuy).toBe(defaults.sellBuy)
+    expect(state.form.multiCycleList).toEqual(defaults.multiCycleList)
+  })
+
+  it('打开抽屉后渲染偏好设置: v-for 选项、格式化标签、多周期宫格', async () => {
+    document.body.innerHTML = ''
+    const { wrapper, state } = mountComponent(
+      { origin: 'local', cycleOptions: [{ label: '1分', value: '1' }] },
+      makeRequest(),
+    )
+    await wrapper_open(state)
+    await nextTick()
+    const html = wrapper.html()
+    // 偏好设置/功能配置/组件开关 三个分区都渲染
+    expect(html).toContain('偏好设置')
+    expect(html).toContain('功能配置')
+    expect(html).toContain('组件开关')
+    // formatLabel: multiCycleList 的 1 号位命中 cycleOptions 中的 label
+    expect(wrapper.find('.cycleName span').text()).toBe('1分')
+    // 默认 multiCycleNum=6 → grid-6 布局
+    expect(wrapper.find('.setting-multi-box').classes()).toContain('grid-6')
+    // 表单控件 v-model 绑定都渲染出来
+    expect(wrapper.findAllComponents({ name: 'ElSwitch' }).length).toBe(6)
+    expect(wrapper.findAllComponents({ name: 'ElSegmented' }).length).toBe(2)
+  })
+
+  it('多周期: 切 multiCycleNum=2 后只渲染 2 个宫格且 grid-2 生效', async () => {
+    document.body.innerHTML = ''
+    const { wrapper, state } = mountComponent(
+      { origin: 'local', cycleOptions: [{ label: '1分', value: '1' }] },
+      makeRequest(),
+    )
+    await wrapper_open(state)
+    await nextTick()
+    state.form.multiCycleNum = 2
+    await nextTick()
+    expect(wrapper.findAll('.setting-multi-box .mode').length).toBe(2)
+    expect(wrapper.find('.setting-multi-box').classes()).toContain('grid-2')
+  })
+
+  it('el-select 交互: 主图指标选择触发 update:modelValue 写回 form', async () => {
+    document.body.innerHTML = ''
+    const { wrapper, state } = mountComponent()
+    await wrapper_open(state)
+    await nextTick()
+    const select = wrapper
+      .findAllComponents({ name: 'ElSelect' })
+      .find((s) => s.props('modelValue') === state.form.mainIndicator)
+    expect(select).toBeTruthy()
+    select!.vm.$emit('update:modelValue', 'BOLL')
+    await nextTick()
+    expect(state.form.mainIndicator).toBe('BOLL')
+  })
+
+  it('点击保存配置按钮触发 handleSubmit 提交', async () => {
+    document.body.innerHTML = ''
+    const request = makeRequest()
+    const { wrapper, state } = mountComponent({ origin: 'server' }, request)
+    await wrapper_open(state)
+    await nextTick()
+    request.post.mockClear()
+    const submitBtn = wrapper
+      .findAllComponents({ name: 'ElButton' })
+      .find((b) => b.text().includes('保存配置'))
+    expect(submitBtn).toBeTruthy()
+    await submitBtn!.trigger('click')
+    await nextTick()
+    expect(request.post).toHaveBeenCalledWith(
+      '/common/qt/updateUserConfig',
+      expect.objectContaining({ appId: 1 }),
+    )
+    expect(state.visible).toBe(false)
+  })
+
+  it('点击恢复默认按钮触发 handleReset', async () => {
+    document.body.innerHTML = ''
+    const { wrapper, state } = mountComponent({ origin: 'local' })
+    await wrapper_open(state)
+    await nextTick()
+    state.form.sellBuy = 9
+    const resetBtn = wrapper
+      .findAllComponents({ name: 'ElButton' })
+      .find((b) => b.text().includes('恢复默认'))
+    expect(resetBtn).toBeTruthy()
+    await resetBtn!.trigger('click')
+    expect(state.form.sellBuy).toBe(getDefaultUserKlineConfig().sellBuy)
+  })
+
+  it('defineExpose: getDefaultUserKlineConfig 可直接调用', () => {
+    const { state } = mountComponent()
+    const vm = state.__vm
+    const defaults = vm.getDefaultUserKlineConfig()
+    expect(defaults.pageType).toBe(1)
+    expect(defaults.multiCycleList).toHaveLength(6)
+  })
+  it('表单交互: 各控件 v-model 更新写回 form（覆盖全部 onUpdate handler）', async () => {
+    document.body.innerHTML = ''
+    const { wrapper, state } = mountComponent(
+      { origin: 'local', cycleOptions: [{ label: '1分', value: '1' }] },
+      makeRequest(),
+    )
+    await wrapper_open(state)
+    await nextTick()
+    const defaults = getDefaultUserKlineConfig()
+
+    // el-select: mainIndicator / sellBuy / singelCycle + 多周期每项
+    const selects = wrapper.findAllComponents({ name: 'ElSelect' })
+    expect(selects.length).toBe(3 + defaults.multiCycleNum)
+    selects[0].vm.$emit('update:modelValue', 'BOLL')
+    selects[1].vm.$emit('update:modelValue', 0)
+    selects[2].vm.$emit('update:modelValue', '1')
+    for (let i = 3; i < selects.length; i++) {
+      selects[i].vm.$emit('update:modelValue', '1')
+    }
+    // el-checkbox: sellBuyByPrice
+    wrapper.findComponent({ name: 'ElCheckbox' }).vm.$emit('update:modelValue', 0)
+    // el-segmented: multiCycleNum / pageType（改 multiCycleNum 会重渲宫格）
+    const segmenteds = wrapper.findAllComponents({ name: 'ElSegmented' })
+    segmenteds[0].vm.$emit('update:modelValue', 2)
+    segmenteds[1].vm.$emit('update:modelValue', 2)
+    await nextTick()
+    // el-switch: 6 个开关
+    for (const sw of wrapper.findAllComponents({ name: 'ElSwitch' })) {
+      sw.vm.$emit('update:modelValue', false)
+    }
+    await nextTick()
+
+    expect(state.form.mainIndicator).toBe('BOLL')
+    expect(state.form.sellBuy).toBe(0)
+    expect(state.form.singelCycle).toBe('1')
+    expect(state.form.sellBuyByPrice).toBe(0)
+    expect(state.form.multiCycleNum).toBe(2)
+    expect(state.form.pageType).toBe(2)
+    expect(state.form.multiCycleList.slice(0, 6)).toEqual(['1', '1', '1', '1', '1', '1'])
+    expect(state.form.enable_tradeLogBrush).toBe(false)
+    expect(state.form.enable_subChart).toBe(false)
+    expect(state.form.enable_sliderChart).toBe(false)
+  })
+})
+
+// defineExpose 的 open 挂在 wrapper.vm 上（script setup 代理）
+async function wrapper_open(state: any) {
+  const vm = state.__vm
+  if (vm && typeof vm.open === 'function') return vm.open()
+  throw new Error('open not exposed')
+}

package/tests/components/KlineNew.spec.ts

@@ -0,0 +1,278 @@
+import { vi } from 'vitest'
+
+vi.mock('echarts', () => import('@test/mocks/echarts.kline.mock.ts'))
+vi.mock('st-func', () => import('@test/mocks/st-func.mock.ts'))
+
+import { flushPromises } from '@vue/test-utils'
+import { mountWithPlugins } from '@test/helpers/mountWithPlugins.ts'
+import * as echarts from 'echarts'
+import KlineTips from '@package/KlineNew/components/KlineTips/index.vue'
+import Tips from '@package/KlineNew/components/Tips/index.vue'
+import KlineSub from '@package/KlineNew/components/KlineSub/index.vue'
+import KlineSlide from '@package/KlineNew/components/KlineSlide/index.vue'
+
+const getInstance = () => (echarts.init as any).mock.results.at(-1)?.value
+
+// [开, 收, 低, 高, 昨收, 交易总额]
+const originData = [
+  [100, 103, 99, 105, 100, 5000],
+  [103, 101, 100, 106, 103, 6000],
+]
+
+const mountSub = (props: any = {}) =>
+  mountWithPlugins(KlineSub, {
+    props: {
+      drawData: {
+        originData,
+        candlestickData: originData,
+        xAxisData: ['2024-01-02', '2024-01-03'],
+        subIndicatorData: [],
+      },
+      activeIndex: 0,
+      modelValue: 'VOL',
+      subIndicatorList: [
+        {
+          label: 'VOL',
+          value: 'VOL',
+          series: 'bar',
+          source: 'origin',
+          dataIndex: 5,
+          color: 'kline',
+          config: [{ key: 'VOL', source: 'origin', dataIndex: 5, color: 'kline' }],
+        },
+      ],
+      config: { gridLeft: 80, gridRight: 80 },
+      ...props,
+    },
+  })
+
+describe('KlineNew / Tips', () => {
+  it('按 data 渲染 label + value，color 透传为行内样式', () => {
+    const wrapper = mountWithPlugins(Tips, {
+      props: {
+        data: [
+          { label: '开', value: 100 },
+          { label: '涨跌', value: '3%', color: 'red' },
+        ],
+      },
+    })
+    const items = wrapper.findAll('.kline-tips-item')
+    expect(items.length).toBe(2)
+    expect(items[0].text()).toBe('开 100')
+    expect(items[1].text()).toBe('涨跌 3%')
+    expect(items[1].attributes('style')).toContain('color: red')
+  })
+})
+
+describe('KlineNew / KlineTips', () => {
+  it('新版 candlestickData 传入时按 [开,收,低,高,额,涨跌值,涨跌%] 渲染主提示', async () => {
+    const wrapper = mountWithPlugins(KlineTips, {
+      props: {
+        drawData: {},
+        activeIndex: 1,
+        candlestickData: [
+          [100, 103, 99, 105, 5000, 3, 3.0],
+          [103, 101, 100, 106, 6000, -2, -1.94],
+        ],
+        mainIndicatorData: [{ key: 'MA5', data: [100, 101], color: '#fff' }],
+      },
+    })
+    await flushPromises()
+    const items = wrapper.findAll('.kline-tips-item')
+    const text = items.map((i) => i.text()).join('|')
+    expect(text).toContain('开 103')
+    expect(text).toContain('高 106')
+    expect(text).toContain('低 100')
+    expect(text).toContain('收 101')
+    expect(text).toContain('额 6000')
+    expect(text).toContain('涨跌 -1.94%')
+  })
+
+  it('drawData.mainIndicatorData 渲染主图指标提示（round 处理 + 颜色透传）', async () => {
+    const wrapper = mountWithPlugins(KlineTips, {
+      props: {
+        drawData: { mainIndicatorData: [{ key: 'MA5', data: [100, 101], color: '#fff' }] },
+        activeIndex: 1,
+      },
+    })
+    await flushPromises()
+    const items = wrapper.findAll('.kline-tips-item')
+    expect(items.length).toBe(1)
+    expect(items[0].text()).toBe('MA5 101')
+    expect(items[0].attributes('style')).toContain('color: rgb(255, 255, 255)')
+  })
+
+  it('无 candlestickData 时退化到 drawData.candlestickData [开,收,低,高,昨收,额]，涨跌幅=(收-昨收)/|昨收|', async () => {
+    const wrapper = mountWithPlugins(KlineTips, {
+      props: {
+        drawData: { candlestickData: [[100, 105, 99, 106, 100, 8000]] },
+        activeIndex: 0,
+      },
+    })
+    await flushPromises()
+    const items = wrapper.findAll('.kline-tips-item')
+    const text = items.map((i) => i.text()).join('|')
+    expect(text).toContain('开 100')
+    expect(text).toContain('收 105')
+    expect(text).toContain('额 8000')
+    expect(text).toContain('涨跌 5%')
+  })
+
+  it('无任何数据时渲染空提示列表', async () => {
+    const wrapper = mountWithPlugins(KlineTips, {
+      props: { drawData: {}, activeIndex: 0 },
+    })
+    await flushPromises()
+    expect(wrapper.findAll('.kline-tips-item').length).toBe(0)
+  })
+})
+
+describe('KlineNew / KlineSub', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('挂载后 echarts.init 初始化副图，卸载时 dispose', async () => {
+    const wrapper = mountSub()
+    await flushPromises()
+    expect(echarts.init).toHaveBeenCalledTimes(1)
+    const instance = getInstance()
+    wrapper.unmount()
+    expect(instance.dispose).toHaveBeenCalledTimes(1)
+  })
+
+  it('subIndicatorTips 从 originData[activeIndex][dataIndex] 取值并经 round 处理', async () => {
+    const wrapper = mountSub({ activeIndex: 1 })
+    await flushPromises()
+    const tips = wrapper.findAll('.kline-tips-item')
+    expect(tips.length).toBe(1)
+    expect(tips[0].text()).toContain('VOL 6000')
+  })
+
+  it('el-select 切换副图指标时 emit update:modelValue', async () => {
+    const wrapper = mountSub()
+    await flushPromises()
+    const select = wrapper.findComponent({ name: 'ElSelect' })
+    select.vm.$emit('update:modelValue', 'MACD')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['MACD'])
+  })
+
+  it('expose.connect 调用 echarts.connect 联动主图', async () => {
+    const wrapper = mountSub()
+    await flushPromises()
+    const fakeMainChart = { id: 'main' }
+    ;(wrapper.vm as any).connect(fakeMainChart)
+    expect(echarts.connect).toHaveBeenCalledWith([fakeMainChart, getInstance()])
+  })
+
+  it('expose.draw 构建 bar series（kline 配色）并 setOption，xAxis.data 来自 drawData.xAxisData', async () => {
+    const wrapper = mountSub()
+    await flushPromises()
+    ;(wrapper.vm as any).draw({ startValue: 0, endValue: 1, maxValueSpan: 100 })
+    await flushPromises()
+    await new Promise((r) => setTimeout(r, 0))
+    await flushPromises()
+    const instance = getInstance()
+    expect(instance.setOption).toHaveBeenCalled()
+    const option = instance.setOption.mock.calls.at(-1)![0]
+    expect(option.xAxis.data).toEqual(['2024-01-02', '2024-01-03'])
+    const bar = option.series.find((s: any) => s.name === 'subMain')
+    expect(bar).toBeTruthy()
+    expect(bar.type).toBe('bar')
+    // origin 取 dataIndex=5（额），两条数据
+    expect(bar.data.length).toBe(2)
+    expect(bar.data[0].value).toBe(5000)
+    // 收>开 → 阳线红边透明填充
+    expect(bar.data[0].itemStyle).toEqual({ color: 'transparent', borderColor: '#FF0000' })
+    // 收<开 → 阴线青色
+    expect(bar.data[1].itemStyle).toEqual({ color: '#00FFFF' })
+  })
+})
+
+describe('KlineNew / KlineSlide', () => {
+  const slideData = [
+    ['2024-01-02 00:00:00', 100],
+    ['2024-01-03 00:00:00', 101],
+    ['2024-01-04 00:00:00', 102],
+  ]
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const mountSlide = (props: any = {}) =>
+    mountWithPlugins(KlineSlide, {
+      props: { data: slideData, ...props },
+    })
+
+  it('挂载后 echarts.init + setOption 绘制缩略折线，xAxis 取日期部分', async () => {
+    mountSlide()
+    await flushPromises()
+    const option = getInstance().setOption.mock.calls[0][0]
+    expect(option.xAxis.data).toEqual(['2024-01-02', '2024-01-03', '2024-01-04'])
+    expect(option.series[0].type).toBe('line')
+    expect(option.series[0].data).toEqual([100, 101, 102])
+  })
+
+  it('data 为空时不调用 setOption', async () => {
+    mountSlide({ data: [] })
+    await flushPromises()
+    expect(echarts.init).toHaveBeenCalledTimes(1)
+    expect(getInstance().setOption).not.toHaveBeenCalled()
+  })
+
+  it('datazoom 事件触发 change emit（debounce 100ms），输出起止日 00:00:00/24:00:00', async () => {
+    vi.useFakeTimers()
+    try {
+      const wrapper = mountSlide()
+      await flushPromises()
+      const onCall = getInstance().on.mock.calls.find((c: any[]) => c[0] === 'datazoom')
+      expect(onCall).toBeTruthy()
+      // start=0%, end≈66.7% → endIndex=floor(0.667*3)=2
+      onCall[1]({ dataZoomId: 'dz1', start: 0, end: 66.7 })
+      vi.advanceTimersByTime(150)
+      const emitted = wrapper.emitted('change')
+      expect(emitted).toBeTruthy()
+      expect(emitted![0][0]).toEqual({
+        startTime: '2024-01-02 00:00:00',
+        endTime: '2024-01-04 24:00:00',
+      })
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('datazoom 事件无 dataZoomId 时不触发 change', async () => {
+    vi.useFakeTimers()
+    try {
+      const wrapper = mountSlide()
+      await flushPromises()
+      const onCall = getInstance().on.mock.calls.find((c: any[]) => c[0] === 'datazoom')
+      onCall[1]({ start: 0, end: 50 })
+      vi.advanceTimersByTime(200)
+      expect(wrapper.emitted('change')).toBeUndefined()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('expose.resetSlide 按时间定位 dataZoom（找不到结束时间则拉到最后）', async () => {
+    const wrapper = mountSlide()
+    await flushPromises()
+    ;(wrapper.vm as any).resetSlide('2024-01-03 00:00:00', '2024-12-31 00:00:00', 500)
+    const option = getInstance().getOption()
+    expect(option.dataZoom[0].startValue).toBe(1)
+    expect(option.dataZoom[0].endValue).toBe(2)
+    expect(option.dataZoom[0].maxValueSpan).toBe(500)
+    expect(option.dataZoom[1].type).toBe('inside')
+  })
+
+  it('卸载时 off + dispose', async () => {
+    const wrapper = mountSlide()
+    await flushPromises()
+    const instance = getInstance()
+    wrapper.unmount()
+    expect(instance.off).toHaveBeenCalledWith('datazoom')
+    expect(instance.dispose).toHaveBeenCalledTimes(1)
+  })
+})