Skip to content

Commit

Permalink
Fix tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Ian Wright committed Dec 19, 2024
1 parent ac9f5e0 commit 9597d48
Show file tree
Hide file tree
Showing 21 changed files with 423 additions and 416 deletions.
14 changes: 8 additions & 6 deletions packages/core/src/store/chart/chartSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,12 +154,14 @@ const chartSlice = createSlice({
* @param action.payload.domain The new domain for the scale
*/
setScaleZoom: (state: IChartState, action: PayloadAction<{ field: string, domain: number[] | Date[] }>) => {
state.scales[action.payload.field] = state.scales[action.payload.field] ?? {
scale: undefined,
domain: undefined,
zoomedDomain: undefined,
range: undefined,
};
if (!state.scales[action.payload.field]) {
state.scales[action.payload.field] = {
scale: undefined,
domain: undefined,
zoomedDomain: undefined,
range: undefined,
};
}

state.scales[action.payload.field].zoomedDomain = action.payload.domain;
},
Expand Down
7 changes: 0 additions & 7 deletions packages/core/src/store/chart/tests/__snapshots__/chartActions.unit.ts.snap
View file

This file was deleted.

26 changes: 5 additions & 21 deletions packages/core/src/store/chart/tests/chartSlice.unit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,17 +72,9 @@ describe("chartSlice.reducer", () => {
range: [0, 100],
});

expect(chartSlice.reducer(previousState, action)).toEqual({
...previousState,
scales: {
...previousState.scales,
a: {
...previousState.scales.a,
brush: {
range: [0, 100],
},
},
},
const state = chartSlice.reducer(previousState, action);
expect(state.scales["a"].brush).toEqual({
range: [0, 100],
});
});

Expand All @@ -92,16 +84,8 @@ describe("chartSlice.reducer", () => {
domain: [3, 7],
});

expect(chartSlice.reducer(previousState, action)).toEqual({
...previousState,
scales: {
...previousState.scales,
a: {
...previousState.scales.a,
zoomedDomain: [3, 7],
},
},
});
const state = chartSlice.reducer(previousState, action);
expect(state.scales["a"].zoomedDomain).toEqual([3, 7]);
});

it("setBrushDimensions()", () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/utils/linkStores.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { logAndThrowError } from "./logger";
* @param stores The set of stores to link
* @param actionFilter A regex to match against redux actions
*/
export function linkStores(stores: Store<any, AnyAction>[] = [], actionFilter = /EVENT\.MOUSE*/) {
export function linkStores(stores: Store<any, AnyAction>[] = [], actionFilter = /event\/mouse*/) {
// Grab the dispatch function for each store
const dispatches = [];

Expand Down
6 changes: 3 additions & 3 deletions packages/core/src/utils/utils.unit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ describe("utils", () => {

linkStores([store1, store2, store3]);

const action = { type: "EVENT.MOUSE_MOVE" };
const action = { type: "event/mouseMove" };
store1.dispatch(action);

expect(dispatch1).toHaveBeenCalledWith(action);
Expand All @@ -130,7 +130,7 @@ describe("utils", () => {

linkStores([store1, store2, store3]);

const action = { type: "EVENT.MOUSE_MOVE" };
const action = { type: "event/mouseMove" };
store2.dispatch(action);

expect(dispatch1).toHaveBeenCalledWith(action);
Expand All @@ -149,7 +149,7 @@ describe("utils", () => {

linkStores([store1, store2, store3], /FOO_EVENTS/);

const action = { type: "EVENT.MOUSE_MOVE" };
const action = { type: "event/mouseMove" };
store1.dispatch(action);

expect(dispatch1).toHaveBeenCalledWith(action);
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/lib/components/EventReceiver/EventReceiver.unit.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { MOUSE_MOVE_THROTTLE } from "@chart-io/core";

import { fireEvent, render } from "@testing-library/react";
import { Provider } from "react-redux";
import React from "react";
import { Provider } from "react-redux";

import { createMockStore, FakeMouseEvent, wait } from "../../testUtils";

Expand Down Expand Up @@ -51,7 +51,7 @@ describe("EventReceiver", () => {
await wait(2 * MOUSE_MOVE_THROTTLE);

const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type);
expect(dispatchCalls).toEqual(["EVENT.MOUSE_ENTER", "EVENT.MOUSE_MOVE", "EVENT.MOUSE_EXIT"]);
expect(dispatchCalls).toEqual(["event/mouseEnter", "event/mouseMove", "event/mouseExit"]);
});

it("should skip if there is no layer avaliable", () => {
Expand Down
62 changes: 35 additions & 27 deletions packages/react/src/lib/components/Plots/Area/Area/Area.unit.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { chartActions, createStore, eventActions } from "@chart-io/core";
import * as d3 from "@chart-io/d3";
import { createStore } from "@chart-io/core";

import { act, render } from "@testing-library/react";
import { Provider } from "react-redux";
import React from "react";
import { toMatchImageSnapshot } from "jest-image-snapshot";
import React from "react";
import { Provider } from "react-redux";

import { VIRTUAL_CANVAS_DEBOUNCE, VirtualCanvas } from "../../../VirtualCanvas";
import { Area } from "./Area";
Expand Down Expand Up @@ -80,10 +80,14 @@ describe("Area", () => {
await wait(10);

act(() => {
store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["x"], scale: scales.x } });
store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["y"], scale: scales.y } });
store.dispatch({ type: "CHART.SET_DATA", payload: data });
store.dispatch({ type: "CHART.SET_DIMENSIONS", payload: { width: 200, height: 200 } });
store.dispatch(chartActions.setScales({ fields: ["x"], scale: scales.x }));
store.dispatch(chartActions.setScales({ fields: ["y"], scale: scales.y }));
store.dispatch(chartActions.setChartData(data));
store.dispatch(chartActions.setDimensions({
width: 200,
height: 200,
margin: { top: 0, left: 0, right: 0, bottom: 0 }
}));
});

// Spy on the store for the updates from the Area chart
Expand All @@ -92,20 +96,20 @@ describe("Area", () => {

// Simulate a mouse move on the background
act(() => {
store.dispatch({ type: "EVENT.MOUSE_ENTER", payload: { offsetX: 25, offsetY: 80 } });
store.dispatch(eventActions.mouseEnter({ offsetX: 25, offsetY: 80 }));
});

await wait(1);

const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type);
actionsIncludes(dispatchCalls, [
"EVENT.MOUSE_ENTER",
"EVENT.ADD_MARKER",
"EVENT.ADD_DROPLINE",
"EVENT.ADD_DROPLINE",
"EVENT.ADD_TOOLTIP_ITEM",
"EVENT.ADD_TOOLTIP_ITEM",
"EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT",
"event/mouseEnter",
"event/addMarker",
"event/addDropline",
"event/addDropline",
"event/addTooltipItem",
"event/addTooltipItem",
"event/setPositionEvent",
]);
});
});
Expand Down Expand Up @@ -155,10 +159,14 @@ describe("Area", () => {
await wait(10);

act(() => {
store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["x"], scale: scales.x } });
store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["y"], scale: scales.y } });
store.dispatch({ type: "CHART.SET_DATA", payload: data });
store.dispatch({ type: "CHART.SET_DIMENSIONS", payload: { width: 200, height: 200 } });
store.dispatch(chartActions.setScales({ fields: ["x"], scale: scales.x }));
store.dispatch(chartActions.setScales({ fields: ["y"], scale: scales.y }));
store.dispatch(chartActions.setChartData(data));
store.dispatch(chartActions.setDimensions({
width: 200,
height: 200,
margin: { top: 0, left: 0, bottom: 0, right: 0 },
}));
});

// Spy on the store for the updates from the Area chart
Expand All @@ -167,20 +175,20 @@ describe("Area", () => {

// Simulate a mouse move on the background
act(() => {
store.dispatch({ type: "EVENT.MOUSE_ENTER", payload: { offsetX: 25, offsetY: 80 } });
store.dispatch(eventActions.mouseEnter({ offsetX: 25, offsetY: 80 }));
});

await wait(1);

const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type);
actionsIncludes(dispatchCalls, [
"EVENT.MOUSE_ENTER",
"EVENT.ADD_MARKER",
"EVENT.ADD_DROPLINE",
"EVENT.ADD_DROPLINE",
"EVENT.ADD_TOOLTIP_ITEM",
"EVENT.ADD_TOOLTIP_ITEM",
"EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT",
"event/mouseEnter",
"event/addMarker",
"event/addDropline",
"event/addDropline",
"event/addTooltipItem",
"event/addTooltipItem",
"event/setPositionEvent",
]);
});
});
Expand Down
8 changes: 5 additions & 3 deletions packages/react/src/lib/components/Plots/Area/Area/AreaBase.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import * as d3 from "@chart-io/d3";
import { area, chartSelectors, IState } from "@chart-io/core";

import * as d3 from "@chart-io/d3";
import type { IPlotProps } from "@chart-io/types";

import { useMemo } from "react";
import { useSelector } from "react-redux";

import { useLegendItem, useRender } from "../../../../hooks";
Expand Down Expand Up @@ -40,7 +41,8 @@ export function AreaBase({
const width = useSelector((s: IState) => chartSelectors.dimensions.width(s));
const height = useSelector((s: IState) => chartSelectors.dimensions.height(s));
const animationDuration = useSelector((s: IState) => chartSelectors.animationDuration(s));
const sortedData = data.sort((a, b) => d3.ascending(a[x], b[x]));

const sortedData = useMemo(() => data.toSorted((a, b) => d3.ascending(a[x], b[x])), [data, x]);

const fillColor = d3.color(`${color ?? theme.series.colors[0]}`);
fillColor.opacity = theme.series.opacity;
Expand Down
78 changes: 43 additions & 35 deletions packages/react/src/lib/components/Plots/Area/StackedArea/StackedArea.unit.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { chartActions, createStore, eventActions } from "@chart-io/core";
import * as d3 from "@chart-io/d3";
import { createStore } from "@chart-io/core";

import { act, render } from "@testing-library/react";
import { Provider } from "react-redux";
import React from "react";
import { toMatchImageSnapshot } from "jest-image-snapshot";
import React from "react";
import { Provider } from "react-redux";

import { actionsIncludes, getBuffer, renderChart, wait } from "../../../../testUtils";
import { VIRTUAL_CANVAS_DEBOUNCE, VirtualCanvas } from "../../../VirtualCanvas";
Expand Down Expand Up @@ -75,10 +75,14 @@ describe("StackedArea", () => {
await wait(1);

act(() => {
store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["x"], scale: scales.x } });
store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["y", "y2"], scale: scales.y } });
store.dispatch({ type: "CHART.SET_DATA", payload: data });
store.dispatch({ type: "CHART.SET_DIMENSIONS", payload: { width: 200, height: 200 } });
store.dispatch(chartActions.setScales({ fields: ["x"], scale: scales.x }));
store.dispatch(chartActions.setScales({ fields: ["y", "y2"], scale: scales.y }));
store.dispatch(chartActions.setChartData(data));
store.dispatch(chartActions.setDimensions({
width: 200,
height: 200,
margin: { top: 0, left: 0, bottom: 0, right: 0 },
}));
});

// Spy on the store for the updates from the Area chart
Expand All @@ -87,24 +91,24 @@ describe("StackedArea", () => {

// Simulate a mouse move on the background
act(() => {
store.dispatch({ type: "EVENT.MOUSE_ENTER", payload: { offsetX: 25, offsetY: 80 } });
store.dispatch(eventActions.mouseEnter({ offsetX: 25, offsetY: 80 }));
});

await wait(1);

const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type);
actionsIncludes(dispatchCalls, [
"EVENT.MOUSE_ENTER",
"EVENT.ADD_MARKER",
"EVENT.ADD_MARKER",
"EVENT.ADD_DROPLINE",
"EVENT.ADD_DROPLINE",
"EVENT.ADD_DROPLINE",
"EVENT.ADD_DROPLINE",
"EVENT.ADD_TOOLTIP_ITEM",
"EVENT.ADD_TOOLTIP_ITEM",
"EVENT.ADD_TOOLTIP_ITEM",
"EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT",
"event/mouseEnter",
"event/addMarker",
"event/addMarker",
"event/addDropline",
"event/addDropline",
"event/addDropline",
"event/addDropline",
"event/addTooltipItem",
"event/addTooltipItem",
"event/addTooltipItem",
"event/setPositionEvent",
]);
});
});
Expand Down Expand Up @@ -145,10 +149,14 @@ describe("StackedArea", () => {
await wait(1);

act(() => {
store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["x"], scale: scales.x } });
store.dispatch({ type: "CHART.SET_SCALES", payload: { fields: ["y", "y2"], scale: scales.y } });
store.dispatch({ type: "CHART.SET_DATA", payload: data });
store.dispatch({ type: "CHART.SET_DIMENSIONS", payload: { width: 200, height: 200 } });
store.dispatch(chartActions.setScales({ fields: ["x"], scale: scales.x }));
store.dispatch(chartActions.setScales({ fields: ["y", "y2"], scale: scales.y }));
store.dispatch(chartActions.setChartData(data));
store.dispatch(chartActions.setDimensions({
width: 200,
height: 200,
margin: { top: 0, left: 0, bottom: 0, right: 0 },
}));
});

// Spy on the store for the updates from the Area chart
Expand All @@ -157,24 +165,24 @@ describe("StackedArea", () => {

// Simulate a mouse move on the background
act(() => {
store.dispatch({ type: "EVENT.MOUSE_ENTER", payload: { offsetX: 25, offsetY: 80 } });
store.dispatch(eventActions.mouseEnter({ offsetX: 25, offsetY: 80 }));
});

await wait(1);

const dispatchCalls = (store.dispatch as jest.Mock).mock.calls.map((c) => c[0].type);
actionsIncludes(dispatchCalls, [
"EVENT.MOUSE_ENTER",
"EVENT.ADD_MARKER",
"EVENT.ADD_MARKER",
"EVENT.ADD_DROPLINE",
"EVENT.ADD_DROPLINE",
"EVENT.ADD_DROPLINE",
"EVENT.ADD_DROPLINE",
"EVENT.ADD_TOOLTIP_ITEM",
"EVENT.ADD_TOOLTIP_ITEM",
"EVENT.ADD_TOOLTIP_ITEM",
"EVENT.SET_POSITION_TOOLTIP_ITEM_EVENT",
"event/mouseEnter",
"event/addMarker",
"event/addMarker",
"event/addDropline",
"event/addDropline",
"event/addDropline",
"event/addDropline",
"event/addTooltipItem",
"event/addTooltipItem",
"event/addTooltipItem",
"event/setPositionEvent",
]);
});
});
Expand Down
5 changes: 3 additions & 2 deletions packages/react/src/lib/components/Plots/Area/StackedArea/StackedAreaBase.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import * as d3 from "@chart-io/d3";
import { area, chartSelectors, IState } from "@chart-io/core";
import * as d3 from "@chart-io/d3";
import type { IColor, IEventPlotProps } from "@chart-io/types";

import { useMemo } from "react";
import { useSelector } from "react-redux";

import { useLegendItems, useRender } from "../../../../hooks";
Expand Down Expand Up @@ -45,7 +46,7 @@ export function StackedAreaBase({
const theme = useSelector((s: IState) => chartSelectors.theme(s));
const animationDuration = useSelector((s: IState) => chartSelectors.animationDuration(s));

const sortedData = data.sort((a, b) => d3.ascending(a[x], b[x]));
const sortedData = useMemo(() => data.toSorted((a, b) => d3.ascending(a[x], b[x])), [data, x]);

// Used to create our initial path
useMultiPathCreator(layer, x, ys, xScale, yScale, canvas);
Expand Down
Loading

0 comments on commit 9597d48

Please sign in to comment.