Skip to content

Commit 76c05b0

Browse files
kristwkristw
authored
test: extract mock plugins into separate file (apache-superset#172)
* test: extract mock plugins into separate file * fix: use constants * fix: test coverage
1 parent f86872a commit 76c05b0

File tree

2 files changed

+110
-68
lines changed

2 files changed

+110
-68
lines changed

‎packages/superset-ui-chart/test/components/MockChartPlugins.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react';
2+
import { ChartMetadata, ChartPlugin, ChartFormData } from '../../src';
3+
4+
export const TestComponent = ({
5+
message,
6+
width,
7+
height,
8+
}: {
9+
message: string;
10+
width: number;
11+
height: number;
12+
}) => (
13+
<div className="test-component">
14+
<span className="message">{message || 'test-message'}</span>
15+
<span className="dimension">{[width, height].join('x')}</span>
16+
</div>
17+
);
18+
19+
export const ChartKeys = {
20+
DILIGENT: 'diligent-chart',
21+
LAZY: 'lazy-chart',
22+
SLOW: 'slow-chart',
23+
};
24+
25+
export class DiligentChartPlugin extends ChartPlugin<ChartFormData> {
26+
constructor() {
27+
super({
28+
metadata: new ChartMetadata({
29+
name: ChartKeys.DILIGENT,
30+
thumbnail: '',
31+
}),
32+
Chart: TestComponent,
33+
transformProps: x => x,
34+
});
35+
}
36+
}
37+
38+
export class LazyChartPlugin extends ChartPlugin<ChartFormData> {
39+
constructor() {
40+
super({
41+
metadata: new ChartMetadata({
42+
name: ChartKeys.LAZY,
43+
thumbnail: '',
44+
}),
45+
// this mirrors `() => import(module)` syntax
46+
loadChart: () => Promise.resolve({ default: TestComponent }),
47+
// promise without .default
48+
loadTransformProps: () => Promise.resolve((x: any) => x),
49+
});
50+
}
51+
}
52+
53+
export class SlowChartPlugin extends ChartPlugin<ChartFormData> {
54+
constructor() {
55+
super({
56+
metadata: new ChartMetadata({
57+
name: ChartKeys.SLOW,
58+
thumbnail: '',
59+
}),
60+
loadChart: () =>
61+
new Promise(resolve => {
62+
setTimeout(() => {
63+
resolve(TestComponent);
64+
}, 1000);
65+
}),
66+
transformProps: x => x,
67+
});
68+
}
69+
}

‎packages/superset-ui-chart/test/components/SuperChart.test.tsx‎

Lines changed: 41 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,33 @@
11
import React from 'react';
22
import { mount, shallow } from 'enzyme';
3-
import { ChartProps, ChartMetadata, ChartPlugin, ChartFormData, SuperChart } from '../../src';
3+
import { ChartProps } from '../../src';
4+
import {
5+
ChartKeys,
6+
DiligentChartPlugin,
7+
LazyChartPlugin,
8+
SlowChartPlugin,
9+
} from './MockChartPlugins';
10+
import SuperChart from '../../src/components/SuperChart';
411

512
describe('SuperChart', () => {
6-
const TestComponent = (props: any) => (
7-
<div className="test-component">{props.character || 'test-component'}</div>
8-
);
913
const chartProps = new ChartProps();
1014

11-
class MyChartPlugin extends ChartPlugin<ChartFormData> {
12-
constructor() {
13-
super({
14-
metadata: new ChartMetadata({
15-
name: 'my-chart',
16-
thumbnail: '',
17-
}),
18-
Chart: TestComponent,
19-
transformProps: x => x,
20-
});
21-
}
22-
}
23-
24-
class SecondChartPlugin extends ChartPlugin<ChartFormData> {
25-
constructor() {
26-
super({
27-
metadata: new ChartMetadata({
28-
name: 'second-chart',
29-
thumbnail: '',
30-
}),
31-
// this mirrors `() => import(module)` syntax
32-
loadChart: () => Promise.resolve({ default: TestComponent }),
33-
// promise without .default
34-
loadTransformProps: () => Promise.resolve((x: any) => x),
35-
});
36-
}
37-
}
38-
39-
class SlowChartPlugin extends ChartPlugin<ChartFormData> {
40-
constructor() {
41-
super({
42-
metadata: new ChartMetadata({
43-
name: 'slow-chart',
44-
thumbnail: '',
45-
}),
46-
loadChart: () =>
47-
new Promise(resolve => {
48-
setTimeout(() => {
49-
resolve(TestComponent);
50-
}, 1000);
51-
}),
52-
transformProps: x => x,
53-
});
54-
}
55-
}
56-
57-
new MyChartPlugin().configure({ key: 'my-chart' }).register();
58-
new SecondChartPlugin().configure({ key: 'second-chart' }).register();
59-
new SlowChartPlugin().configure({ key: 'slow-chart' }).register();
15+
new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }).register();
16+
new LazyChartPlugin().configure({ key: ChartKeys.LAZY }).register();
17+
new SlowChartPlugin().configure({ key: ChartKeys.SLOW }).register();
6018

6119
describe('registered charts', () => {
6220
it('renders registered chart', done => {
63-
const wrapper = shallow(<SuperChart chartType="my-chart" chartProps={chartProps} />);
21+
const wrapper = shallow(
22+
<SuperChart chartType={ChartKeys.DILIGENT} chartProps={chartProps} />,
23+
);
6424
setTimeout(() => {
6525
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
6626
done();
6727
}, 0);
6828
});
6929
it('renders registered chart with default export', done => {
70-
const wrapper = shallow(<SuperChart chartType="second-chart" />);
30+
const wrapper = shallow(<SuperChart chartType={ChartKeys.LAZY} />);
7131
setTimeout(() => {
7232
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
7333
done();
@@ -82,40 +42,43 @@ describe('SuperChart', () => {
8242
}, 5);
8343
});
8444
it('adds id to container if specified', done => {
85-
const wrapper = shallow(<SuperChart chartType="my-chart" id="the-chart" />);
45+
const wrapper = shallow(<SuperChart chartType={ChartKeys.DILIGENT} id="the-chart" />);
8646
setTimeout(() => {
8747
expect(wrapper.render().attr('id')).toEqual('the-chart');
8848
done();
8949
}, 0);
9050
});
9151
it('adds class to container if specified', done => {
92-
const wrapper = shallow(<SuperChart chartType="my-chart" className="the-chart" />);
52+
const wrapper = shallow(<SuperChart chartType={ChartKeys.DILIGENT} className="the-chart" />);
9353
setTimeout(() => {
9454
expect(wrapper.hasClass('the-chart')).toBeTruthy();
9555
done();
9656
}, 0);
9757
});
9858
it('uses overrideTransformProps when specified', done => {
9959
const wrapper = shallow(
100-
<SuperChart chartType="my-chart" overrideTransformProps={() => ({ character: 'hulk' })} />,
60+
<SuperChart
61+
chartType={ChartKeys.DILIGENT}
62+
overrideTransformProps={() => ({ message: 'hulk' })}
63+
/>,
10164
);
10265
setTimeout(() => {
10366
expect(
10467
wrapper
10568
.render()
106-
.find('div.test-component')
69+
.find('span.message')
10770
.text(),
10871
).toEqual('hulk');
10972
done();
11073
}, 0);
11174
});
11275
it('uses preTransformProps when specified', done => {
11376
const chartPropsWithPayload = new ChartProps({
114-
payload: { character: 'hulk' },
77+
payload: { message: 'hulk' },
11578
});
11679
const wrapper = shallow(
11780
<SuperChart
118-
chartType="my-chart"
81+
chartType={ChartKeys.DILIGENT}
11982
preTransformProps={() => chartPropsWithPayload}
12083
overrideTransformProps={props => props.payload}
12184
/>,
@@ -124,42 +87,52 @@ describe('SuperChart', () => {
12487
expect(
12588
wrapper
12689
.render()
127-
.find('div.test-component')
90+
.find('span.message')
12891
.text(),
12992
).toEqual('hulk');
13093
done();
13194
}, 0);
13295
});
13396
it('uses postTransformProps when specified', done => {
13497
const wrapper = shallow(
135-
<SuperChart chartType="my-chart" postTransformProps={() => ({ character: 'hulk' })} />,
98+
<SuperChart
99+
chartType={ChartKeys.DILIGENT}
100+
postTransformProps={() => ({ message: 'hulk' })}
101+
/>,
136102
);
137103
setTimeout(() => {
138104
expect(
139105
wrapper
140106
.render()
141-
.find('div.test-component')
107+
.find('span.message')
142108
.text(),
143109
).toEqual('hulk');
144110
done();
145111
}, 0);
146112
});
147113
it('renders if chartProps is not specified', done => {
148-
const wrapper = shallow(<SuperChart chartType="my-chart" />);
114+
const wrapper = shallow(<SuperChart chartType={ChartKeys.DILIGENT} />);
149115
setTimeout(() => {
150116
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
151117
done();
152118
}, 0);
153119
});
154120
it('does not render anything while waiting for Chart code to load', done => {
155-
const wrapper = shallow(<SuperChart chartType="slow-chart" />);
121+
const wrapper = shallow(<SuperChart chartType={ChartKeys.SLOW} />);
156122
setTimeout(() => {
157123
expect(wrapper.render().children()).toHaveLength(0);
158124
done();
159125
}, 0);
160126
});
127+
it('eventually renders after Chart is loaded', done => {
128+
const wrapper = shallow(<SuperChart chartType={ChartKeys.SLOW} />);
129+
setTimeout(() => {
130+
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
131+
done();
132+
}, 1500);
133+
});
161134
it('does not render if chartProps is null', done => {
162-
const wrapper = shallow(<SuperChart chartType="my-chart" chartProps={null} />);
135+
const wrapper = shallow(<SuperChart chartType={ChartKeys.DILIGENT} chartProps={null} />);
163136
setTimeout(() => {
164137
expect(wrapper.render().find('div.test-component')).toHaveLength(0);
165138
done();
@@ -180,7 +153,7 @@ describe('SuperChart', () => {
180153
describe('.processChartProps()', () => {
181154
it('use identity functions for unspecified transforms', () => {
182155
const chart = new SuperChart({
183-
chartType: 'my-chart',
156+
chartType: ChartKeys.DILIGENT,
184157
});
185158
const chartProps2 = new ChartProps();
186159
expect(chart.processChartProps({ chartProps: chartProps2 })).toBe(chartProps2);

0 commit comments

Comments
 (0)