mirror of
https://github.com/apache/superset.git
synced 2024-09-19 12:09:42 -04:00
test: extract mock plugins into separate file (#172)
* test: extract mock plugins into separate file * fix: use constants * fix: test coverage
This commit is contained in:
Krist Wongsuphasawat
Yongjie Zhao
parent
bbf13fd0d0
commit
4f23311813
@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import { ChartMetadata, ChartPlugin, ChartFormData } from '../../src';
|
||||
|
||||
export const TestComponent = ({
|
||||
message,
|
||||
width,
|
||||
height,
|
||||
}: {
|
||||
message: string;
|
||||
width: number;
|
||||
height: number;
|
||||
}) => (
|
||||
<div className="test-component">
|
||||
<span className="message">{message || 'test-message'}</span>
|
||||
<span className="dimension">{[width, height].join('x')}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const ChartKeys = {
|
||||
DILIGENT: 'diligent-chart',
|
||||
LAZY: 'lazy-chart',
|
||||
SLOW: 'slow-chart',
|
||||
};
|
||||
|
||||
export class DiligentChartPlugin extends ChartPlugin<ChartFormData> {
|
||||
constructor() {
|
||||
super({
|
||||
metadata: new ChartMetadata({
|
||||
name: ChartKeys.DILIGENT,
|
||||
thumbnail: '',
|
||||
}),
|
||||
Chart: TestComponent,
|
||||
transformProps: x => x,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class LazyChartPlugin extends ChartPlugin<ChartFormData> {
|
||||
constructor() {
|
||||
super({
|
||||
metadata: new ChartMetadata({
|
||||
name: ChartKeys.LAZY,
|
||||
thumbnail: '',
|
||||
}),
|
||||
// this mirrors `() => import(module)` syntax
|
||||
loadChart: () => Promise.resolve({ default: TestComponent }),
|
||||
// promise without .default
|
||||
loadTransformProps: () => Promise.resolve((x: any) => x),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class SlowChartPlugin extends ChartPlugin<ChartFormData> {
|
||||
constructor() {
|
||||
super({
|
||||
metadata: new ChartMetadata({
|
||||
name: ChartKeys.SLOW,
|
||||
thumbnail: '',
|
||||
}),
|
||||
loadChart: () =>
|
||||
new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve(TestComponent);
|
||||
}, 1000);
|
||||
}),
|
||||
transformProps: x => x,
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,73 +1,33 @@
|
||||
import React from 'react';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import { ChartProps, ChartMetadata, ChartPlugin, ChartFormData, SuperChart } from '../../src';
|
||||
import { ChartProps } from '../../src';
|
||||
import {
|
||||
ChartKeys,
|
||||
DiligentChartPlugin,
|
||||
LazyChartPlugin,
|
||||
SlowChartPlugin,
|
||||
} from './MockChartPlugins';
|
||||
import SuperChart from '../../src/components/SuperChart';
|
||||
|
||||
describe('SuperChart', () => {
|
||||
const TestComponent = (props: any) => (
|
||||
<div className="test-component">{props.character || 'test-component'}</div>
|
||||
);
|
||||
const chartProps = new ChartProps();
|
||||
|
||||
class MyChartPlugin extends ChartPlugin<ChartFormData> {
|
||||
constructor() {
|
||||
super({
|
||||
metadata: new ChartMetadata({
|
||||
name: 'my-chart',
|
||||
thumbnail: '',
|
||||
}),
|
||||
Chart: TestComponent,
|
||||
transformProps: x => x,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class SecondChartPlugin extends ChartPlugin<ChartFormData> {
|
||||
constructor() {
|
||||
super({
|
||||
metadata: new ChartMetadata({
|
||||
name: 'second-chart',
|
||||
thumbnail: '',
|
||||
}),
|
||||
// this mirrors `() => import(module)` syntax
|
||||
loadChart: () => Promise.resolve({ default: TestComponent }),
|
||||
// promise without .default
|
||||
loadTransformProps: () => Promise.resolve((x: any) => x),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class SlowChartPlugin extends ChartPlugin<ChartFormData> {
|
||||
constructor() {
|
||||
super({
|
||||
metadata: new ChartMetadata({
|
||||
name: 'slow-chart',
|
||||
thumbnail: '',
|
||||
}),
|
||||
loadChart: () =>
|
||||
new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve(TestComponent);
|
||||
}, 1000);
|
||||
}),
|
||||
transformProps: x => x,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
new MyChartPlugin().configure({ key: 'my-chart' }).register();
|
||||
new SecondChartPlugin().configure({ key: 'second-chart' }).register();
|
||||
new SlowChartPlugin().configure({ key: 'slow-chart' }).register();
|
||||
new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }).register();
|
||||
new LazyChartPlugin().configure({ key: ChartKeys.LAZY }).register();
|
||||
new SlowChartPlugin().configure({ key: ChartKeys.SLOW }).register();
|
||||
|
||||
describe('registered charts', () => {
|
||||
it('renders registered chart', done => {
|
||||
const wrapper = shallow(<SuperChart chartType="my-chart" chartProps={chartProps} />);
|
||||
const wrapper = shallow(
|
||||
<SuperChart chartType={ChartKeys.DILIGENT} chartProps={chartProps} />,
|
||||
);
|
||||
setTimeout(() => {
|
||||
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
it('renders registered chart with default export', done => {
|
||||
const wrapper = shallow(<SuperChart chartType="second-chart" />);
|
||||
const wrapper = shallow(<SuperChart chartType={ChartKeys.LAZY} />);
|
||||
setTimeout(() => {
|
||||
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
|
||||
done();
|
||||
@ -82,14 +42,14 @@ describe('SuperChart', () => {
|
||||
}, 5);
|
||||
});
|
||||
it('adds id to container if specified', done => {
|
||||
const wrapper = shallow(<SuperChart chartType="my-chart" id="the-chart" />);
|
||||
const wrapper = shallow(<SuperChart chartType={ChartKeys.DILIGENT} id="the-chart" />);
|
||||
setTimeout(() => {
|
||||
expect(wrapper.render().attr('id')).toEqual('the-chart');
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
it('adds class to container if specified', done => {
|
||||
const wrapper = shallow(<SuperChart chartType="my-chart" className="the-chart" />);
|
||||
const wrapper = shallow(<SuperChart chartType={ChartKeys.DILIGENT} className="the-chart" />);
|
||||
setTimeout(() => {
|
||||
expect(wrapper.hasClass('the-chart')).toBeTruthy();
|
||||
done();
|
||||
@ -97,13 +57,16 @@ describe('SuperChart', () => {
|
||||
});
|
||||
it('uses overrideTransformProps when specified', done => {
|
||||
const wrapper = shallow(
|
||||
<SuperChart chartType="my-chart" overrideTransformProps={() => ({ character: 'hulk' })} />,
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
overrideTransformProps={() => ({ message: 'hulk' })}
|
||||
/>,
|
||||
);
|
||||
setTimeout(() => {
|
||||
expect(
|
||||
wrapper
|
||||
.render()
|
||||
.find('div.test-component')
|
||||
.find('span.message')
|
||||
.text(),
|
||||
).toEqual('hulk');
|
||||
done();
|
||||
@ -111,11 +74,11 @@ describe('SuperChart', () => {
|
||||
});
|
||||
it('uses preTransformProps when specified', done => {
|
||||
const chartPropsWithPayload = new ChartProps({
|
||||
payload: { character: 'hulk' },
|
||||
payload: { message: 'hulk' },
|
||||
});
|
||||
const wrapper = shallow(
|
||||
<SuperChart
|
||||
chartType="my-chart"
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
preTransformProps={() => chartPropsWithPayload}
|
||||
overrideTransformProps={props => props.payload}
|
||||
/>,
|
||||
@ -124,7 +87,7 @@ describe('SuperChart', () => {
|
||||
expect(
|
||||
wrapper
|
||||
.render()
|
||||
.find('div.test-component')
|
||||
.find('span.message')
|
||||
.text(),
|
||||
).toEqual('hulk');
|
||||
done();
|
||||
@ -132,34 +95,44 @@ describe('SuperChart', () => {
|
||||
});
|
||||
it('uses postTransformProps when specified', done => {
|
||||
const wrapper = shallow(
|
||||
<SuperChart chartType="my-chart" postTransformProps={() => ({ character: 'hulk' })} />,
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
postTransformProps={() => ({ message: 'hulk' })}
|
||||
/>,
|
||||
);
|
||||
setTimeout(() => {
|
||||
expect(
|
||||
wrapper
|
||||
.render()
|
||||
.find('div.test-component')
|
||||
.find('span.message')
|
||||
.text(),
|
||||
).toEqual('hulk');
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
it('renders if chartProps is not specified', done => {
|
||||
const wrapper = shallow(<SuperChart chartType="my-chart" />);
|
||||
const wrapper = shallow(<SuperChart chartType={ChartKeys.DILIGENT} />);
|
||||
setTimeout(() => {
|
||||
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
it('does not render anything while waiting for Chart code to load', done => {
|
||||
const wrapper = shallow(<SuperChart chartType="slow-chart" />);
|
||||
const wrapper = shallow(<SuperChart chartType={ChartKeys.SLOW} />);
|
||||
setTimeout(() => {
|
||||
expect(wrapper.render().children()).toHaveLength(0);
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
it('eventually renders after Chart is loaded', done => {
|
||||
const wrapper = shallow(<SuperChart chartType={ChartKeys.SLOW} />);
|
||||
setTimeout(() => {
|
||||
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
|
||||
done();
|
||||
}, 1500);
|
||||
});
|
||||
it('does not render if chartProps is null', done => {
|
||||
const wrapper = shallow(<SuperChart chartType="my-chart" chartProps={null} />);
|
||||
const wrapper = shallow(<SuperChart chartType={ChartKeys.DILIGENT} chartProps={null} />);
|
||||
setTimeout(() => {
|
||||
expect(wrapper.render().find('div.test-component')).toHaveLength(0);
|
||||
done();
|
||||
@ -180,7 +153,7 @@ describe('SuperChart', () => {
|
||||
describe('.processChartProps()', () => {
|
||||
it('use identity functions for unspecified transforms', () => {
|
||||
const chart = new SuperChart({
|
||||
chartType: 'my-chart',
|
||||
chartType: ChartKeys.DILIGENT,
|
||||
});
|
||||
const chartProps2 = new ChartProps();
|
||||
expect(chart.processChartProps({ chartProps: chartProps2 })).toBe(chartProps2);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user