Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: react/redux issue with specParser #723

Merged
merged 5 commits into from
Jun 29, 2020
Merged

fix: react/redux issue with specParser #723

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
89453a7
fix: react/redux issue with specParser
nickofthyme Jun 26, 2020
49c3dfe
fix: error with react and redux
nickofthyme Jun 26, 2020
3606512
fix: type errors
nickofthyme Jun 26, 2020
f8e0144
refactor: improve the handling of spec parsing sm
markov00 Jun 26, 2020
4b5fd7d
Merge branch 'master' into fix-redux-error
nickofthyme Jun 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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