summaryrefslogtreecommitdiff
path: root/frontend/src/lib/sparkline.test.ts
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/lib/sparkline.test.ts')
-rw-r--r--frontend/src/lib/sparkline.test.ts66
1 files changed, 66 insertions, 0 deletions
diff --git a/frontend/src/lib/sparkline.test.ts b/frontend/src/lib/sparkline.test.ts
new file mode 100644
index 0000000..aecf20d
--- /dev/null
+++ b/frontend/src/lib/sparkline.test.ts
@@ -0,0 +1,66 @@
+// @ts-nocheck
+import { describe, expect, it, vi } from 'vitest';
+import { mount, unmount } from 'svelte';
+import Sparkline from '../components/Sparkline.svelte';
+
+// Leader round2: 项目列表每行内嵌迷你权益缩略图——
+// 用最近一个回测 equity 的首尾点画 sparkline SVG;
+// 无数据就整个组件留空(不渲染 svg)。
+
+describe('Sparkline (real render)', () => {
+ it('renders an svg with a first→last polyline when handed endpoints', async () => {
+ const host = document.createElement('div');
+ const inst = mount(Sparkline, {
+ target: host,
+ props: { first: 100, last: 90, up: false, ariaLabel: '最近回测权益缩略' }
+ });
+ await new Promise((r) => setTimeout(r, 50));
+ const svg = host.querySelector('svg');
+ expect(svg, 'sparkline must be a real svg element').toBeTruthy();
+ const path = svg.querySelector('path, polyline');
+ expect(path).toBeTruthy();
+ const d = (path.getAttribute('d') || path.getAttribute('points')) ?? '';
+ // polyline from left edge to right edge: both endpoints present in geometry
+ expect(d).toContain('0'); // first x
+ const coordsCount = d.trim().split(/[\s,L,M]+/).filter(Boolean).length;
+ expect(coordsCount).toBeGreaterThanOrEqual(4); // 2 points × (x,y)
+ unmount(inst);
+ host.remove();
+ });
+
+ it('renders NOTHING (no svg) for missing data — 留空不渲染', async () => {
+ const host = document.createElement('div');
+ const inst = mount(Sparkline, { target: host, props: { first: null, last: null, ariaLabel: 'x' } });
+ await new Promise((r) => setTimeout(r, 50));
+ expect(host.querySelector('svg')).toBeNull();
+ expect(host.textContent.trim()).toBe('');
+ unmount(inst);
+ host.remove();
+ });
+
+ it('方向语义:down 变红(危险色),up 变绿(成功色)', async () => {
+ const down = document.createElement('div');
+ const inst1 = mount(Sparkline, {
+ target: down,
+ props: { first: 100, last: 90, up: false, ariaLabel: 'x' }
+ });
+ await new Promise((r) => setTimeout(r, 30));
+ const downColor = down.querySelector('path, polyline')?.getAttribute('stroke') ?? '';
+ unmount(inst1);
+ down.remove();
+
+ const up = document.createElement('div');
+ const inst2 = mount(Sparkline, {
+ target: up,
+ props: { first: 100, last: 130, up: true, ariaLabel: 'x' }
+ });
+ await new Promise((r) => setTimeout(r, 30));
+ const upColor = up.querySelector('path, polyline')?.getAttribute('stroke') ?? '';
+ unmount(inst2);
+ up.remove();
+
+ expect(downColor).not.toBe('');
+ expect(upColor).not.toBe('');
+ expect(downColor).not.toBe(upColor);
+ });
+});