Skip to content

Commit 3f52a20

Browse files
gkagka
committed
chore: add test for axisX and axisY
1 parent 34b5277 commit 3f52a20

File tree

6 files changed

+253
-2
lines changed

6 files changed

+253
-2
lines changed

‎.vscode/settings.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"editor.formatOnSave": true,
33
"editor.defaultFormatter": "esbenp.prettier-vscode",
44
"editor.codeActionsOnSave": {
5-
"source.fixAll.eslint": true
5+
"source.fixAll.eslint": "explicit"
66
},
77
"[javascript]": {
88
"editor.defaultFormatter": "esbenp.prettier-vscode"

‎src/lib/marks/AxisY.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@
6666
title,
6767
anchor = DEFAULTS.axisYAnchor as 'left' | 'right',
6868
facetAnchor = 'auto',
69+
interval,
6970
lineAnchor = 'center',
7071
tickSize = DEFAULTS.tickSize,
7172
tickFontSize = DEFAULTS.tickFontSize,
@@ -96,7 +97,7 @@
9697
autoTicks(
9798
plot.scales.y.type,
9899
plot.options.y.ticks,
99-
plot.options.y.interval,
100+
interval || plot.options.y.interval,
100101
plot.scales.y.domain,
101102
plot.scales.y.fn,
102103
autoTickCount

‎src/tests/axisX.test.svelte

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script lang="ts">
2+
import { AxisX, Plot } from 'svelteplot';
3+
import type { ComponentProps } from 'svelte';
4+
5+
let {
6+
plotArgs = {},
7+
axisArgs = {}
8+
}: { plotArgs?: ComponentProps<typeof Plot>; axisArgs?: ComponentProps<typeof AxisX> } =
9+
$props();
10+
</script>
11+
12+
<Plot {...plotArgs}>
13+
<AxisX {...axisArgs} />
14+
</Plot>

‎src/tests/axisX.test.ts

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { describe, it, expect } from 'vitest';
2+
import { render } from '@testing-library/svelte';
3+
import AxisXTest from './axisX.test.svelte';
4+
5+
describe('AxisX mark', () => {
6+
it('default axis', () => {
7+
const { container } = render(AxisXTest, {
8+
props: {
9+
plotArgs: { width: 400, x: { domain: [0, 100] } }
10+
}
11+
});
12+
13+
const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf<SVGGElement>;
14+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
15+
expect(ticks.length).toBeGreaterThan(2);
16+
expect(tickValues).toStrictEqual(['0', '20', '40', '60', '80', '100']);
17+
});
18+
19+
it('custom tick values via axis.data', () => {
20+
const { container } = render(AxisXTest, {
21+
props: {
22+
plotArgs: { width: 400, x: { domain: [0, 100] } },
23+
axisArgs: { data: [0, 20, 80] }
24+
}
25+
});
26+
27+
const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf<SVGGElement>;
28+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
29+
expect(ticks.length).toBe(3);
30+
expect(tickValues).toStrictEqual(['0', '20', '80']);
31+
});
32+
33+
it('custom tick values via x scale ticks options', () => {
34+
const { container } = render(AxisXTest, {
35+
props: {
36+
plotArgs: { width: 400, x: { domain: [0, 100], ticks: [0, 20, 80] } }
37+
}
38+
});
39+
40+
const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf<SVGGElement>;
41+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
42+
expect(ticks.length).toBe(3);
43+
expect(tickValues).toStrictEqual(['0', '20', '80']);
44+
});
45+
46+
it('tickCount', () => {
47+
const { container } = render(AxisXTest, {
48+
props: {
49+
plotArgs: { width: 400, x: { domain: [0, 100] } },
50+
axisArgs: { tickCount: 3 }
51+
}
52+
});
53+
54+
const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf<SVGGElement>;
55+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
56+
expect(ticks.length).toBe(3);
57+
expect(tickValues).toStrictEqual(['0', '50', '100']);
58+
});
59+
60+
it('tick spacing via axis options', () => {
61+
const { container } = render(AxisXTest, {
62+
props: {
63+
plotArgs: { width: 400, x: { domain: [0, 100] } },
64+
axisArgs: { tickSpacing: 200 }
65+
}
66+
});
67+
68+
const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf<SVGGElement>;
69+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
70+
expect(ticks.length).toBe(3);
71+
expect(tickValues).toStrictEqual(['0', '50', '100']);
72+
});
73+
74+
it('tick spacing via scale options', () => {
75+
const { container } = render(AxisXTest, {
76+
props: {
77+
plotArgs: { width: 400, x: { domain: [0, 100], tickSpacing: 200 } }
78+
}
79+
});
80+
81+
const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf<SVGGElement>;
82+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
83+
expect(ticks.length).toBe(3);
84+
expect(tickValues).toStrictEqual(['0', '50', '100']);
85+
});
86+
87+
it('tick interval via scale options', () => {
88+
const { container } = render(AxisXTest, {
89+
props: {
90+
plotArgs: { width: 400, x: { domain: [0, 100], interval: 30 } }
91+
}
92+
});
93+
94+
const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf<SVGGElement>;
95+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
96+
expect(tickValues).toStrictEqual(['0', '30', '60', '90', '120']);
97+
});
98+
99+
it('tick interval via axis options', () => {
100+
const { container } = render(AxisXTest, {
101+
props: {
102+
plotArgs: { width: 400, x: { domain: [0, 100] } },
103+
axisArgs: { interval: 30 }
104+
}
105+
});
106+
107+
const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf<SVGGElement>;
108+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
109+
expect(tickValues).toStrictEqual(['0', '30', '60', '90', '120']);
110+
});
111+
});

‎src/tests/axisY.test.svelte

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script lang="ts">
2+
import { AxisY, Plot } from 'svelteplot';
3+
import type { ComponentProps } from 'svelte';
4+
5+
let {
6+
plotArgs = {},
7+
axisArgs = {}
8+
}: { plotArgs?: ComponentProps<typeof Plot>; axisArgs?: ComponentProps<typeof AxisY> } =
9+
$props();
10+
</script>
11+
12+
<Plot {...plotArgs}>
13+
<AxisY {...axisArgs} />
14+
</Plot>

‎src/tests/axisY.test.ts

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { describe, it, expect } from 'vitest';
2+
import { render } from '@testing-library/svelte';
3+
import AxisYTest from './axisY.test.svelte';
4+
5+
describe('AxisY mark', () => {
6+
it('default axis', () => {
7+
const { container } = render(AxisYTest, {
8+
props: {
9+
plotArgs: { height: 300, y: { domain: [0, 100] } }
10+
}
11+
});
12+
13+
const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf<SVGGElement>;
14+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
15+
expect(ticks.length).toBeGreaterThan(2);
16+
expect(tickValues).toStrictEqual(['0', '20', '40', '60', '80', '100']);
17+
});
18+
19+
it('custom tick values via axis.data', () => {
20+
const { container } = render(AxisYTest, {
21+
props: {
22+
plotArgs: { height: 300, y: { domain: [0, 100] } },
23+
axisArgs: { data: [0, 20, 80] }
24+
}
25+
});
26+
27+
const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf<SVGGElement>;
28+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
29+
expect(ticks.length).toBe(3);
30+
expect(tickValues).toStrictEqual(['0', '20', '80']);
31+
});
32+
33+
it('custom tick values via x scale ticks options', () => {
34+
const { container } = render(AxisYTest, {
35+
props: {
36+
plotArgs: { height: 300, y: { domain: [0, 100], ticks: [0, 20, 80] } }
37+
}
38+
});
39+
40+
const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf<SVGGElement>;
41+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
42+
expect(ticks.length).toBe(3);
43+
expect(tickValues).toStrictEqual(['0', '20', '80']);
44+
});
45+
46+
it('tickCount', () => {
47+
const { container } = render(AxisYTest, {
48+
props: {
49+
plotArgs: { height: 300, y: { domain: [0, 100] } },
50+
axisArgs: { tickCount: 3 }
51+
}
52+
});
53+
54+
const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf<SVGGElement>;
55+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
56+
expect(ticks.length).toBe(3);
57+
expect(tickValues).toStrictEqual(['0', '50', '100']);
58+
});
59+
60+
it('tickSpacing', () => {
61+
const { container } = render(AxisYTest, {
62+
props: {
63+
plotArgs: { height: 300, y: { domain: [0, 100] } },
64+
axisArgs: { tickSpacing: 200 }
65+
}
66+
});
67+
68+
const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf<SVGGElement>;
69+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
70+
expect(ticks.length).toBe(3);
71+
expect(tickValues).toStrictEqual(['0', '50', '100']);
72+
});
73+
74+
it('tickSpacing', () => {
75+
const { container } = render(AxisYTest, {
76+
props: {
77+
plotArgs: { height: 300, y: { domain: [0, 100], tickSpacing: 200 } }
78+
}
79+
});
80+
81+
const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf<SVGGElement>;
82+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
83+
expect(ticks.length).toBe(3);
84+
expect(tickValues).toStrictEqual(['0', '50', '100']);
85+
});
86+
87+
it('tick interval via scale options', () => {
88+
const { container } = render(AxisYTest, {
89+
props: {
90+
plotArgs: { height: 300, y: { domain: [0, 100], interval: 30 } }
91+
}
92+
});
93+
94+
const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf<SVGGElement>;
95+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
96+
expect(tickValues).toStrictEqual(['0', '30', '60', '90', '120']);
97+
});
98+
99+
it('tick interval via axis options', () => {
100+
const { container } = render(AxisYTest, {
101+
props: {
102+
plotArgs: { height: 300, y: { domain: [0, 100] } },
103+
axisArgs: { interval: 30 }
104+
}
105+
});
106+
107+
const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf<SVGGElement>;
108+
const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
109+
expect(tickValues).toStrictEqual(['0', '30', '60', '90', '120']);
110+
});
111+
});

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy