111 lines
2.6 KiB
TypeScript
111 lines
2.6 KiB
TypeScript
|
import { render, screen } from "@testing-library/react"
|
||
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
|
||
|
|
|
||
|
|
import type { SelectionChart as SelectionChartData } from "../api/selection.types"
|
||
|
|
|
||
|
|
const chartMocks = vi.hoisted(() => ({
|
||
|
|
disconnect: vi.fn(),
|
||
|
|
dispose: vi.fn(),
|
||
|
|
init: vi.fn(),
|
||
|
|
observe: vi.fn(),
|
||
|
|
resize: vi.fn(),
|
||
|
|
setOption: vi.fn(),
|
||
|
|
use: vi.fn(),
|
||
|
|
}))
|
||
|
|
|
||
|
|
vi.mock("echarts/charts", () => ({
|
||
|
|
BarChart: {},
|
||
|
|
CandlestickChart: {},
|
||
|
|
LineChart: {},
|
||
|
|
}))
|
||
|
|
vi.mock("echarts/components", () => ({
|
||
|
|
AxisPointerComponent: {},
|
||
|
|
DataZoomComponent: {},
|
||
|
|
GridComponent: {},
|
||
|
|
LegendComponent: {},
|
||
|
|
TitleComponent: {},
|
||
|
|
TooltipComponent: {},
|
||
|
|
}))
|
||
|
|
vi.mock("echarts/core", () => ({
|
||
|
|
init: chartMocks.init,
|
||
|
|
use: chartMocks.use,
|
||
|
|
}))
|
||
|
|
vi.mock("echarts/renderers", () => ({ CanvasRenderer: {} }))
|
||
|
|
|
||
|
|
import { SelectionChart } from "./selection-chart"
|
||
|
|
|
||
|
|
const chart: SelectionChartData = {
|
||
|
|
name: "药明康德",
|
||
|
|
points: [
|
||
|
|
{
|
||
|
|
close: 10.5,
|
||
|
|
d: 48,
|
||
|
|
high: 11,
|
||
|
|
j: 60,
|
||
|
|
k: 52,
|
||
|
|
low: 9,
|
||
|
|
open: 10,
|
||
|
|
trade_date: "2026-08-08",
|
||
|
|
volume: 1000,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
source_adj: "qfq",
|
||
|
|
target_trade_date: "2026-08-08",
|
||
|
|
ts_code: "603259.SH",
|
||
|
|
}
|
||
|
|
|
||
|
|
describe("SelectionChart", () => {
|
||
|
|
beforeEach(() => {
|
||
|
|
chartMocks.init.mockReturnValue({
|
||
|
|
dispose: chartMocks.dispose,
|
||
|
|
resize: chartMocks.resize,
|
||
|
|
setOption: chartMocks.setOption,
|
||
|
|
})
|
||
|
|
vi.stubGlobal(
|
||
|
|
"ResizeObserver",
|
||
|
|
class {
|
||
|
|
constructor(private readonly callback: ResizeObserverCallback) {}
|
||
|
|
|
||
|
|
disconnect() {
|
||
|
|
chartMocks.disconnect()
|
||
|
|
}
|
||
|
|
|
||
|
|
observe() {
|
||
|
|
chartMocks.observe()
|
||
|
|
this.callback([], this as unknown as ResizeObserver)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
)
|
||
|
|
})
|
||
|
|
|
||
|
|
afterEach(() => {
|
||
|
|
vi.unstubAllGlobals()
|
||
|
|
vi.clearAllMocks()
|
||
|
|
})
|
||
|
|
|
||
|
|
it("initializes, resizes, updates and disposes one chart instance", () => {
|
||
|
|
const view = render(<SelectionChart chart={chart} />)
|
||
|
|
|
||
|
|
expect(
|
||
|
|
screen.getByRole("img", {
|
||
|
|
name: "药明康德 日线、成交量和 KDJ 图表",
|
||
|
|
}),
|
||
|
|
).toBeInTheDocument()
|
||
|
|
expect(chartMocks.init).toHaveBeenCalledTimes(1)
|
||
|
|
expect(chartMocks.observe).toHaveBeenCalledTimes(1)
|
||
|
|
expect(chartMocks.resize).toHaveBeenCalledTimes(1)
|
||
|
|
expect(chartMocks.setOption).toHaveBeenCalledTimes(1)
|
||
|
|
|
||
|
|
view.rerender(
|
||
|
|
<SelectionChart
|
||
|
|
chart={{ ...chart, points: [...chart.points, chart.points[0]] }}
|
||
|
|
/>,
|
||
|
|
)
|
||
|
|
expect(chartMocks.setOption).toHaveBeenCalledTimes(2)
|
||
|
|
|
||
|
|
view.unmount()
|
||
|
|
expect(chartMocks.disconnect).toHaveBeenCalledTimes(1)
|
||
|
|
expect(chartMocks.dispose).toHaveBeenCalledTimes(1)
|
||
|
|
})
|
||
|
|
})
|