Skip to content

Commit 95bbe5c

Browse files
ploucplouc
committedAug 28, 2021
feat(scatterplot): add tests for date based data
·
v0.88.0v0.74.0
1 parent a0d3b86 commit 95bbe5c

File tree

3 files changed

+200
-4
lines changed

3 files changed

+200
-4
lines changed
 

‎packages/scatterplot/src/ScatterPlot.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@ const InnerScatterPlot = <RawDatum extends ScatterPlotDatum>({
7474

7575
const customLayerProps = useMemo(
7676
() => ({
77-
// ...props,
7877
xScale,
7978
yScale,
8079
nodes,

‎packages/scatterplot/src/ScatterPlotCanvas.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@ const InnerScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>({
8181

8282
const customLayerProps = useMemo(
8383
() => ({
84-
//...props,
8584
xScale,
8685
yScale,
8786
nodes,

‎packages/scatterplot/tests/ScatterPlot.test.tsx

+200-2
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,106 @@ describe('data', () => {
123123
expect(nodeC.formattedX).toBe('value: C')
124124
})
125125

126-
it('should support date values for x', () => {})
126+
it('should support string date values for x', () => {
127+
const wrapper = mount(
128+
<ScatterPlot<{ x: string; y: number }>
129+
{...baseProps}
130+
data={[
131+
{
132+
id: baseProps.data[0].id,
133+
data: [
134+
{ x: '2020-10-1', y: 10 },
135+
{ x: '2020-10-2', y: 20 },
136+
{ x: '2020-10-3', y: 30 },
137+
],
138+
},
139+
]}
140+
xScale={{
141+
type: 'time',
142+
format: '%Y-%m-%d',
143+
}}
144+
xFormat={'time:%Y-%m-%d'}
145+
axisLeft={null}
146+
axisBottom={{
147+
tickValues: 'every 1 day',
148+
format: '%Y-%m-%d',
149+
}}
150+
/>
151+
)
152+
153+
const nodes = wrapper.find('Node')
154+
expect(nodes).toHaveLength(3)
155+
156+
const nodeA = nodes.at(0).prop<ScatterPlotNodeData<{ x: string; y: number }>>('node')
157+
expect(nodeA.x).toBe(0)
158+
expect(nodeA.xValue).toStrictEqual(new Date('2020-10-01T00:00:00.000Z'))
159+
expect(nodeA.formattedX).toBe('2020-10-01')
160+
161+
const nodeB = nodes.at(1).prop<ScatterPlotNodeData<{ x: string; y: number }>>('node')
162+
expect(nodeB.x).toBe(250)
163+
expect(nodeB.xValue).toStrictEqual(new Date('2020-10-02T00:00:00.000Z'))
164+
expect(nodeB.formattedX).toBe('2020-10-02')
165+
166+
const nodeC = nodes.at(2).prop<ScatterPlotNodeData<{ x: string; y: number }>>('node')
167+
expect(nodeC.x).toBe(500)
168+
expect(nodeC.xValue).toStrictEqual(new Date('2020-10-03T00:00:00.000Z'))
169+
expect(nodeC.formattedX).toBe('2020-10-03')
170+
171+
const ticks = wrapper.find('Memo(Axis)').find('Memo(AxisTick)')
172+
expect(ticks).toHaveLength(3)
173+
expect(ticks.at(0).text()).toBe('2020-10-01')
174+
expect(ticks.at(1).text()).toBe('2020-10-02')
175+
expect(ticks.at(2).text()).toBe('2020-10-03')
176+
})
177+
178+
it('should support date values for x', () => {
179+
const wrapper = mount(
180+
<ScatterPlot<{ x: Date; y: number }>
181+
{...baseProps}
182+
data={[
183+
{
184+
id: baseProps.data[0].id,
185+
data: [
186+
{ x: new Date('2020-10-01T00:00:00.000Z'), y: 10 },
187+
{ x: new Date('2020-10-02T00:00:00.000Z'), y: 20 },
188+
{ x: new Date('2020-10-03T00:00:00.000Z'), y: 30 },
189+
],
190+
},
191+
]}
192+
xScale={{ type: 'time' }}
193+
xFormat={'time:%Y-%m-%d'}
194+
axisLeft={null}
195+
axisBottom={{
196+
tickValues: 'every 1 day',
197+
format: '%Y-%m-%d',
198+
}}
199+
/>
200+
)
201+
202+
const nodes = wrapper.find('Node')
203+
expect(nodes).toHaveLength(3)
204+
205+
const nodeA = nodes.at(0).prop<ScatterPlotNodeData<{ x: Date; y: number }>>('node')
206+
expect(nodeA.x).toBe(0)
207+
expect(nodeA.xValue).toStrictEqual(new Date('2020-10-01T00:00:00.000Z'))
208+
expect(nodeA.formattedX).toBe('2020-10-01')
209+
210+
const nodeB = nodes.at(1).prop<ScatterPlotNodeData<{ x: Date; y: number }>>('node')
211+
expect(nodeB.x).toBe(250)
212+
expect(nodeB.xValue).toStrictEqual(new Date('2020-10-02T00:00:00.000Z'))
213+
expect(nodeB.formattedX).toBe('2020-10-02')
214+
215+
const nodeC = nodes.at(2).prop<ScatterPlotNodeData<{ x: Date; y: number }>>('node')
216+
expect(nodeC.x).toBe(500)
217+
expect(nodeC.xValue).toStrictEqual(new Date('2020-10-03T00:00:00.000Z'))
218+
expect(nodeC.formattedX).toBe('2020-10-03')
219+
220+
const ticks = wrapper.find('Memo(Axis)').find('Memo(AxisTick)')
221+
expect(ticks).toHaveLength(3)
222+
expect(ticks.at(0).text()).toBe('2020-10-01')
223+
expect(ticks.at(1).text()).toBe('2020-10-02')
224+
expect(ticks.at(2).text()).toBe('2020-10-03')
225+
})
127226

128227
it('should support numeric values for y', () => {
129228
const wrapper = mount(
@@ -202,7 +301,106 @@ describe('data', () => {
202301
expect(nodeC.formattedY).toBe('value: C')
203302
})
204303

205-
it('should support date values for y', () => {})
304+
it('should support string date values for y', () => {
305+
const wrapper = mount(
306+
<ScatterPlot<{ x: number; y: string }>
307+
{...baseProps}
308+
data={[
309+
{
310+
id: baseProps.data[0].id,
311+
data: [
312+
{ x: 10, y: '2020-10-1' },
313+
{ x: 20, y: '2020-10-2' },
314+
{ x: 30, y: '2020-10-3' },
315+
],
316+
},
317+
]}
318+
yScale={{
319+
type: 'time',
320+
format: '%Y-%m-%d',
321+
}}
322+
yFormat={'time:%Y-%m-%d'}
323+
axisBottom={null}
324+
axisLeft={{
325+
tickValues: 'every 1 day',
326+
format: '%Y-%m-%d',
327+
}}
328+
/>
329+
)
330+
331+
const nodes = wrapper.find('Node')
332+
expect(nodes).toHaveLength(3)
333+
334+
const nodeA = nodes.at(0).prop<ScatterPlotNodeData<{ x: number; y: string }>>('node')
335+
expect(nodeA.y).toBe(0)
336+
expect(nodeA.yValue).toStrictEqual(new Date('2020-10-01T00:00:00.000Z'))
337+
expect(nodeA.formattedY).toBe('2020-10-01')
338+
339+
const nodeB = nodes.at(1).prop<ScatterPlotNodeData<{ x: number; y: string }>>('node')
340+
expect(nodeB.y).toBe(150)
341+
expect(nodeB.yValue).toStrictEqual(new Date('2020-10-02T00:00:00.000Z'))
342+
expect(nodeB.formattedY).toBe('2020-10-02')
343+
344+
const nodeC = nodes.at(2).prop<ScatterPlotNodeData<{ x: number; y: string }>>('node')
345+
expect(nodeC.y).toBe(300)
346+
expect(nodeC.yValue).toStrictEqual(new Date('2020-10-03T00:00:00.000Z'))
347+
expect(nodeC.formattedY).toBe('2020-10-03')
348+
349+
const ticks = wrapper.find('Memo(Axis)').find('Memo(AxisTick)')
350+
expect(ticks).toHaveLength(3)
351+
expect(ticks.at(0).text()).toBe('2020-10-01')
352+
expect(ticks.at(1).text()).toBe('2020-10-02')
353+
expect(ticks.at(2).text()).toBe('2020-10-03')
354+
})
355+
356+
it('should support date values for y', () => {
357+
const wrapper = mount(
358+
<ScatterPlot<{ x: number; y: Date }>
359+
{...baseProps}
360+
data={[
361+
{
362+
id: baseProps.data[0].id,
363+
data: [
364+
{ x: 10, y: new Date('2020-10-01T00:00:00.000Z') },
365+
{ x: 20, y: new Date('2020-10-02T00:00:00.000Z') },
366+
{ x: 30, y: new Date('2020-10-03T00:00:00.000Z') },
367+
],
368+
},
369+
]}
370+
yScale={{ type: 'time' }}
371+
yFormat={'time:%Y-%m-%d'}
372+
axisBottom={null}
373+
axisLeft={{
374+
tickValues: 'every 1 day',
375+
format: '%Y-%m-%d',
376+
}}
377+
/>
378+
)
379+
380+
const nodes = wrapper.find('Node')
381+
expect(nodes).toHaveLength(3)
382+
383+
const nodeA = nodes.at(0).prop<ScatterPlotNodeData<{ x: number; y: Date }>>('node')
384+
expect(nodeA.y).toBe(0)
385+
expect(nodeA.yValue).toStrictEqual(new Date('2020-10-01T00:00:00.000Z'))
386+
expect(nodeA.formattedY).toBe('2020-10-01')
387+
388+
const nodeB = nodes.at(1).prop<ScatterPlotNodeData<{ x: number; y: Date }>>('node')
389+
expect(nodeB.y).toBe(150)
390+
expect(nodeB.yValue).toStrictEqual(new Date('2020-10-02T00:00:00.000Z'))
391+
expect(nodeB.formattedY).toBe('2020-10-02')
392+
393+
const nodeC = nodes.at(2).prop<ScatterPlotNodeData<{ x: number; y: Date }>>('node')
394+
expect(nodeC.y).toBe(300)
395+
expect(nodeC.yValue).toStrictEqual(new Date('2020-10-03T00:00:00.000Z'))
396+
expect(nodeC.formattedY).toBe('2020-10-03')
397+
398+
const ticks = wrapper.find('Memo(Axis)').find('Memo(AxisTick)')
399+
expect(ticks).toHaveLength(3)
400+
expect(ticks.at(0).text()).toBe('2020-10-01')
401+
expect(ticks.at(1).text()).toBe('2020-10-02')
402+
expect(ticks.at(2).text()).toBe('2020-10-03')
403+
})
206404
})
207405

208406
describe('nodes', () => {

0 commit comments

Comments
 (0)
Please sign in to comment.