Skip to content

Commit

Permalink
fix: react/redux issue with specParser (#723)
Browse files Browse the repository at this point in the history 
Fixes #720
  • Loading branch information
@nickofthyme
nickofthyme authored Jun 29, 2020
1 parent 29fc4a8 commit f9c29ec
Show file tree
Hide file tree
Showing 13 changed files with 242 additions and 163 deletions.
8 changes: 5 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,12 +180,14 @@
"prettier": "^1.19.1",
"pretty-quick": "^2.0.0",
"puppeteer": "^1.20.0",
"react": "16.10.x",
"react": "^16.13.0",
"react-docgen-typescript-loader": "^3.6.0",
"react-docgen-typescript-webpack-plugin": "^1.1.0",
"react-dom": "^16.12.0",
"react-is": "^16.12.0",
"react-dom": "^16.13.0",
"react-is": "^16.13.0",
"redux-devtools-extension": "^2.13.8",
"redux-immutable-state-invariant": "^2.1.0",
"redux-logger": "^3.0.6",
"sass-graph": "^3.0.4",
"sass-loader": "^7.1.0",
"seedrandom": "^3.0.5",
Expand Down
3 changes: 1 addition & 2 deletions src/chart_types/partition_chart/state/selectors/picked_shapes.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { MockGlobalSpec, MockSeriesSpec } from '../../../../mocks/specs';
import { SettingsSpec, XYChartElementEvent, PartitionElementEvent } from '../../../../specs';
import { updateParentDimensions } from '../../../../state/actions/chart_settings';
import { onMouseDown, onMouseUp, onPointerMove } from '../../../../state/actions/mouse';
import { upsertSpec, specParsed, specParsing } from '../../../../state/actions/specs';
import { upsertSpec, specParsed } from '../../../../state/actions/specs';
import { chartStoreReducer, GlobalChartState } from '../../../../state/chart_state';
import { PartitionSpec } from '../../specs';
import { partitionGeometries } from './geometries';
Expand All @@ -35,7 +35,6 @@ describe('Picked shapes selector', () => {
return createStore(storeReducer);
}
function addSeries(store: Store<GlobalChartState>, spec: PartitionSpec, settings?: Partial<SettingsSpec>) {
store.dispatch(specParsing());
store.dispatch(upsertSpec(MockGlobalSpec.settings(settings)));
store.dispatch(upsertSpec(spec));
store.dispatch(specParsed());
Expand Down
119 changes: 49 additions & 70 deletions src/chart_types/xy_chart/state/chart_state.interactions.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,16 @@
* under the License.
*/

import { createStore, Store } from 'redux';
import { Store } from 'redux';

import { ChartTypes } from '../..';
import { MockStore } from '../../../mocks/store';
import { ScaleType } from '../../../scales/constants';
import { SettingsSpec, XYBrushArea } from '../../../specs';
import { SpecTypes, DEFAULT_SETTINGS_SPEC, TooltipType, BrushAxis } from '../../../specs/constants';
import { updateParentDimensions } from '../../../state/actions/chart_settings';
import { onExternalPointerEvent } from '../../../state/actions/events';
import { onPointerMove, onMouseDown, onMouseUp } from '../../../state/actions/mouse';
import { upsertSpec, specParsed } from '../../../state/actions/specs';
import { chartStoreReducer, GlobalChartState } from '../../../state/chart_state';
import { GlobalChartState } from '../../../state/chart_state';
import { getSettingsSpecSelector } from '../../../state/selectors/get_settings_specs';
import { Position } from '../../../utils/commons';
import { BarSeriesSpec, BasicSeriesSpec, AxisSpec, SeriesTypes } from '../utils/specs';
Expand Down Expand Up @@ -99,14 +98,8 @@ const settingSpec: SettingsSpec = {
};

function initStore(spec: BasicSeriesSpec) {
const storeReducer = chartStoreReducer('chartId');
const store = createStore(storeReducer);

store.dispatch(upsertSpec(settingSpec));
store.dispatch(upsertSpec(spec));
store.dispatch(specParsed());
store.dispatch(updateParentDimensions({ width: 100, height: 100, top: chartTop, left: chartLeft }));

const store = MockStore.default({ width: 100, height: 100, top: chartTop, left: chartLeft }, 'chartId');
MockStore.addSpecs([settingSpec, spec], store);
return store;
}

Expand Down Expand Up @@ -214,8 +207,8 @@ describe('Chart state pointer interactions', () => {
...settingSpec,
onElementOut: onOutListener,
};
store.dispatch(upsertSpec(settingsWithListeners));
store.dispatch(specParsed());

MockStore.addSpecs([ordinalBarSeries, settingsWithListeners], store);
// registering the out/over listener caller
store.subscribe(() => {
onElementOutCaller(store.getState());
Expand All @@ -238,8 +231,7 @@ describe('Chart state pointer interactions', () => {
type: TooltipType.None,
},
};
store.dispatch(upsertSpec(updatedSettings));
store.dispatch(specParsed());
MockStore.addSpecs([ordinalBarSeries, updatedSettings], store);
store.dispatch(onPointerMove({ x: 10, y: 10 + 70 }, 0));
const tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
// no tooltip values exist if we have a TooltipType === None
Expand All @@ -253,8 +245,7 @@ describe('Chart state pointer interactions', () => {
type: TooltipType.Follow,
},
};
store.dispatch(upsertSpec(updatedSettings));
store.dispatch(specParsed());
MockStore.addSpecs([ordinalBarSeries, updatedSettings], store);
store.dispatch(onPointerMove({ x: 10, y: 10 + 70 }, 1));
const { geometriesIndex } = computeSeriesGeometriesSelector(store.getState());
expect(geometriesIndex.size).toBe(2);
Expand Down Expand Up @@ -293,8 +284,7 @@ function mouseOverTestSuite(scaleType: ScaleType) {
onElementOut: onOutListener,
onPointerUpdate: onPointerUpdateListener,
};
store.dispatch(upsertSpec(settingsWithListeners));
store.dispatch(specParsed());
MockStore.addSpecs([spec, settingsWithListeners], store);
const onElementOutCaller = createOnElementOutCaller();
const onElementOverCaller = createOnElementOverCaller();
const onPointerMoveCaller = createOnPointerMoveCaller();
Expand Down Expand Up @@ -737,8 +727,11 @@ function mouseOverTestSuite(scaleType: ScaleType) {
});
});
describe('can format tooltip values on rotated chart', () => {
let leftAxis: AxisSpec;
let bottomAxis: AxisSpec;
let currentSettingSpec: SettingsSpec;
beforeEach(() => {
const leftAxis: AxisSpec = {
leftAxis = {
chartType: ChartTypes.XYAxis,
specType: SpecTypes.Axis,
hide: true,
Expand All @@ -751,7 +744,7 @@ function mouseOverTestSuite(scaleType: ScaleType) {
tickPadding: 0,
tickSize: 0,
};
const bottomAxis: AxisSpec = {
bottomAxis = {
chartType: ChartTypes.XYAxis,
specType: SpecTypes.Axis,
hide: true,
Expand All @@ -764,25 +757,24 @@ function mouseOverTestSuite(scaleType: ScaleType) {
tickPadding: 0,
tickSize: 0,
};
store.dispatch(upsertSpec(leftAxis));
store.dispatch(upsertSpec(bottomAxis));
store.dispatch(specParsed());
currentSettingSpec = getSettingsSpecSelector(store.getState());
});

test('chart 0 rotation', () => {
MockStore.addSpecs([spec, leftAxis, bottomAxis, currentSettingSpec], store);
store.dispatch(onPointerMove({ x: chartLeft + 0, y: chartTop + 89 }, 0));
const tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
expect(tooltipInfo.tooltip.header?.value).toBe('bottom 0');
expect(tooltipInfo.tooltip.values[0].value).toBe('left 10');
});

test('chart 90 deg rotated', () => {
const settings = getSettingsSpecSelector(store.getState());
const updatedSettings: SettingsSpec = {
...settings,
...currentSettingSpec,
rotation: 90,
};
store.dispatch(upsertSpec(updatedSettings));
store.dispatch(specParsed());
MockStore.addSpecs([spec, leftAxis, bottomAxis, updatedSettings], store);

store.dispatch(onPointerMove({ x: chartLeft + 0, y: chartTop + 89 }, 0));
const tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
expect(tooltipInfo.tooltip.header?.value).toBe('left 1');
Expand Down Expand Up @@ -810,19 +802,15 @@ function mouseOverTestSuite(scaleType: ScaleType) {
},
onBrushEnd: brushEndListener,
};
store.dispatch(upsertSpec(updatedSettings));
store.dispatch(
upsertSpec({
...spec,
data: [
[0, 1],
[1, 1],
[2, 2],
[3, 3],
],
} as BarSeriesSpec),
);
store.dispatch(specParsed());
MockStore.addSpecs([{
...spec,
data: [
[0, 1],
[1, 1],
[2, 2],
[3, 3],
],
} as BarSeriesSpec, updatedSettings], store);

const start1 = { x: 0, y: 0 };
const end1 = { x: 75, y: 0 };
Expand Down Expand Up @@ -894,8 +882,7 @@ function mouseOverTestSuite(scaleType: ScaleType) {
},
onBrushEnd: brushEndListener,
};
store.dispatch(upsertSpec(updatedSettings));
store.dispatch(specParsed());
MockStore.addSpecs([spec, updatedSettings], store);

const start1 = { x: 0, y: 25 };
const end1 = { x: 0, y: 75 };
Expand Down Expand Up @@ -967,19 +954,15 @@ function mouseOverTestSuite(scaleType: ScaleType) {
},
onBrushEnd: brushEndListener,
};
store.dispatch(upsertSpec(updatedSettings));
store.dispatch(
upsertSpec({
...spec,
data: [
[0, 1],
[1, 1],
[2, 2],
[3, 3],
],
} as BarSeriesSpec),
);
store.dispatch(specParsed());
MockStore.addSpecs([{
...spec,
data: [
[0, 1],
[1, 1],
[2, 2],
[3, 3],
],
} as BarSeriesSpec, updatedSettings], store);

const start1 = { x: 0, y: 0 };
const end1 = { x: 0, y: 75 };
Expand Down Expand Up @@ -1041,19 +1024,15 @@ function mouseOverTestSuite(scaleType: ScaleType) {
},
onBrushEnd: brushEndListener,
};
store.dispatch(upsertSpec(updatedSettings));
store.dispatch(
upsertSpec({
...spec,
data: [
[0, 1],
[1, 1],
[2, 2],
[3, 3],
],
} as BarSeriesSpec),
);
store.dispatch(specParsed());
MockStore.addSpecs([{
...spec,
data: [
[0, 1],
[1, 1],
[2, 2],
[3, 3],
],
} as BarSeriesSpec, updatedSettings], store);

const start1 = { x: 0, y: 0 };
const end1 = { x: 75, y: 75 };
Expand Down
64 changes: 31 additions & 33 deletions src/chart_types/xy_chart/state/chart_state.specs.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
import { createStore, Store } from 'redux';

import { MockSeriesSpec } from '../../../mocks/specs';
import { upsertSpec, specParsed, specParsing } from '../../../state/actions/specs';
import { MockStore } from '../../../mocks/store';
import { GlobalChartState, chartStoreReducer } from '../../../state/chart_state';
import { getLegendItemsSelector } from '../../../state/selectors/get_legend_items';

Expand All @@ -34,67 +34,65 @@ describe('XYChart - specs ordering', () => {
beforeEach(() => {
const storeReducer = chartStoreReducer('chartId');
store = createStore(storeReducer);
store.dispatch(specParsing());
});

it('the legend respect the insert [A, B, C] order', () => {
store.dispatch(specParsing());
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'A', data })));
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'B', data })));
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'C', data })));
store.dispatch(specParsed());
MockStore.addSpecs([
MockSeriesSpec.bar({ id: 'A', data }),
MockSeriesSpec.bar({ id: 'B', data }),
MockSeriesSpec.bar({ id: 'C', data }),
], store);

const legendItems = getLegendItemsSelector(store.getState());
const names = [...legendItems.values()].map((item) => item.label);
expect(names).toEqual(['A', 'B', 'C']);
});
it('the legend respect the insert order [B, A, C]', () => {
store.dispatch(specParsing());
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'B', data })));
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'A', data })));
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'C', data })));
store.dispatch(specParsed());
MockStore.addSpecs([
MockSeriesSpec.bar({ id: 'B', data }),
MockSeriesSpec.bar({ id: 'A', data }),
MockSeriesSpec.bar({ id: 'C', data }),
], store);
const legendItems = getLegendItemsSelector(store.getState());
const names = [...legendItems.values()].map((item) => item.label);
expect(names).toEqual(['B', 'A', 'C']);
});
it('the legend respect the order when changing properties of existing specs', () => {
store.dispatch(specParsing());
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'A', data })));
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'B', data })));
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'C', data })));
store.dispatch(specParsed());
MockStore.addSpecs([
MockSeriesSpec.bar({ id: 'A', data }),
MockSeriesSpec.bar({ id: 'B', data }),
MockSeriesSpec.bar({ id: 'C', data }),
], store);

let legendItems = getLegendItemsSelector(store.getState());
let names = [...legendItems.values()].map((item) => item.label);
expect(names).toEqual(['A', 'B', 'C']);

store.dispatch(specParsing());
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'A', data })));
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'B', name: 'B updated', data })));
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'C', data })));
store.dispatch(specParsed());
MockStore.addSpecs([
MockSeriesSpec.bar({ id: 'A', data }),
MockSeriesSpec.bar({ id: 'B', name: 'B updated', data }),
MockSeriesSpec.bar({ id: 'C', data }),
], store);

legendItems = getLegendItemsSelector(store.getState());
names = [...legendItems.values()].map((item) => item.label);
expect(names).toEqual(['A', 'B updated', 'C']);
});
it('the legend respect the order when changing the order of the specs', () => {
store.dispatch(specParsing());
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'A', data })));
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'B', data })));
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'C', data })));
store.dispatch(specParsed());

MockStore.addSpecs([
MockSeriesSpec.bar({ id: 'A', data }),
MockSeriesSpec.bar({ id: 'B', data }),
MockSeriesSpec.bar({ id: 'C', data }),
], store);
let legendItems = getLegendItemsSelector(store.getState());
let names = [...legendItems.values()].map((item) => item.label);
expect(names).toEqual(['A', 'B', 'C']);

store.dispatch(specParsing());
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'B', data })));
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'A', data })));
store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'C', data })));
store.dispatch(specParsed());
MockStore.addSpecs([
MockSeriesSpec.bar({ id: 'B', data }),
MockSeriesSpec.bar({ id: 'A', data }),
MockSeriesSpec.bar({ id: 'C', data }),
], store);

legendItems = getLegendItemsSelector(store.getState());
names = [...legendItems.values()].map((item) => item.label);
Expand Down
10 changes: 10 additions & 0 deletions src/chart_types/xy_chart/state/chart_state.tooltip.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,16 @@ describe('XYChart - State tooltips', () => {
}),
),
);
store.dispatch(
upsertSpec(
MockSeriesSpec.bar({
data: [
{ x: 1, y: 10 },
{ x: 2, y: 5 },
],
}),
),
);
store.dispatch(specParsed());
const state = store.getState();
const tooltipValues = getTooltipInfoAndGeometriesSelector(state);
Expand Down
Loading

0 comments on commit f9c29ec

Please sign in to comment.