Skip to content

Commit 63aadd3

Browse files
lyndsiWilliamslyndsiWilliams
authored
test: RTL overhaul - hackathon (apache#16626)
* CachedLabel_spec fully converted to RTL * ColumnTypeLabel_spec fully converted to RTL * MissingChart_spec fully converted to RTL * RefreshIntervalModal_spec mostly converted to RTL * HoverMenu_spec mostly converted to RTL * ResizableContainer_spec fully converted to RTL * ResizableHandle_spec fully converted to RTL * AggregateOption_spec fully converted to RTL * CheckboxControl_spec fully converted to RTL * ColorPickerControl_spec to RTL * Finished converting ColorPickerControl_spec to RTL/TS, also converted RefreshIntervalModal_spec to TS * Added unknown type to ColumnTypeLabelProps * Fixed ColumnTypeLabel_spec
1 parent 4af5ae0 commit 63aadd3

File tree

14 files changed

+475
-253
lines changed

14 files changed

+475
-253
lines changed

‎superset-frontend/spec/javascripts/components/CachedLabel_spec.jsx renamed to ‎superset-frontend/spec/javascripts/components/CachedLabel_spec.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,26 @@
1717
* under the License.
1818
*/
1919
import React from 'react';
20-
import { shallow } from 'enzyme';
20+
import { render, screen } from 'spec/helpers/testing-library';
2121

22-
import Label from 'src/components/Label';
23-
import CachedLabel from 'src/components/CachedLabel';
22+
import CachedLabel, { CacheLabelProps } from 'src/components/CachedLabel';
2423

25-
describe('CachedLabel', () => {
26-
const defaultProps = {
27-
onClick: () => {},
28-
cachedTimestamp: '2017-01-01',
29-
};
24+
const defaultProps = {
25+
onClick: () => {},
26+
cachedTimestamp: '2017-01-01',
27+
};
28+
29+
const setup = (props: CacheLabelProps) => <CachedLabel {...props} />;
3030

31+
describe('CachedLabel', () => {
3132
it('is valid', () => {
3233
expect(React.isValidElement(<CachedLabel {...defaultProps} />)).toBe(true);
3334
});
35+
3436
it('renders', () => {
35-
const wrapper = shallow(<CachedLabel {...defaultProps} />);
36-
expect(wrapper.find(Label)).toExist();
37+
render(setup(defaultProps));
38+
39+
const label = screen.getByText(/cached/i);
40+
expect(label).toBeVisible();
3741
});
3842
});

‎superset-frontend/spec/javascripts/components/ColumnTypeLabel_spec.jsx renamed to ‎superset-frontend/spec/javascripts/components/ColumnTypeLabel_spec.tsx

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -17,61 +17,71 @@
1717
* under the License.
1818
*/
1919
import React from 'react';
20-
import { shallow } from 'enzyme';
20+
import { render, screen, cleanup } from 'spec/helpers/testing-library';
2121

22-
import { ColumnTypeLabel } from '@superset-ui/chart-controls';
22+
import {
23+
ColumnTypeLabel,
24+
ColumnTypeLabelProps,
25+
} from '@superset-ui/chart-controls';
2326
import { GenericDataType } from '@superset-ui/core';
2427

25-
describe('ColumnOption', () => {
26-
const defaultProps = {
27-
type: GenericDataType.STRING,
28-
};
28+
const defaultProps = {
29+
type: GenericDataType.STRING,
30+
};
2931

30-
const props = { ...defaultProps };
31-
32-
function getWrapper(overrides) {
33-
const wrapper = shallow(<ColumnTypeLabel {...props} {...overrides} />);
34-
return wrapper;
35-
}
32+
const setup = (overrides?: ColumnTypeLabelProps) => (
33+
<div className="type-label">
34+
<ColumnTypeLabel {...defaultProps} {...overrides} />
35+
</div>
36+
);
3637

38+
describe('ColumnOption RTL', () => {
39+
afterEach(cleanup);
3740
it('is a valid element', () => {
3841
expect(React.isValidElement(<ColumnTypeLabel {...defaultProps} />)).toBe(
3942
true,
4043
);
4144
});
45+
4246
it('string type shows ABC icon', () => {
43-
const lbl = getWrapper({}).find('.type-label');
44-
expect(lbl).toHaveLength(1);
45-
expect(lbl.first().text()).toBe('ABC');
47+
render(setup(defaultProps));
48+
49+
const labelIcon = screen.getByText(/abc/i);
50+
expect(labelIcon.innerHTML).toMatch(/abc/i);
4651
});
52+
4753
it('int type shows # icon', () => {
48-
const lbl = getWrapper({
49-
type: GenericDataType.NUMERIC,
50-
}).find('.type-label');
51-
expect(lbl).toHaveLength(1);
52-
expect(lbl.first().text()).toBe('#');
54+
render(setup({ type: GenericDataType.NUMERIC }));
55+
56+
const labelIcon = screen.getByText(/#/i);
57+
expect(labelIcon.innerHTML).toMatch(/#/i);
5358
});
59+
5460
it('bool type shows T/F icon', () => {
55-
const lbl = getWrapper({
56-
type: GenericDataType.BOOLEAN,
57-
}).find('.type-label');
58-
expect(lbl).toHaveLength(1);
59-
expect(lbl.first().text()).toBe('T/F');
61+
render(setup({ type: GenericDataType.BOOLEAN }));
62+
63+
const labelIcon = screen.getByText(/t\/f/i);
64+
expect(labelIcon.innerHTML).toMatch(/t\/f/i);
6065
});
66+
6167
it('expression type shows function icon', () => {
62-
const lbl = getWrapper({ type: 'expression' }).find('.type-label');
63-
expect(lbl).toHaveLength(1);
64-
expect(lbl.first().text()).toBe('ƒ');
68+
render(setup({ type: 'expression' }));
69+
70+
const labelIcon = screen.getByText('ƒ');
71+
expect(labelIcon.innerHTML).toMatch('ƒ');
6572
});
73+
6674
it('unknown type shows question mark', () => {
67-
const lbl = getWrapper({ type: 'unknown' }).find('.type-label');
68-
expect(lbl).toHaveLength(1);
69-
expect(lbl.first().text()).toBe('?');
75+
render(setup({ type: undefined }));
76+
77+
const labelIcon = screen.getByText('?');
78+
expect(labelIcon.innerHTML).toMatch('?');
7079
});
80+
7181
it('datetime type displays', () => {
72-
const lbl = getWrapper({
73-
type: GenericDataType.TEMPORAL,
74-
}).find('.fa-clock-o');
75-
expect(lbl).toHaveLength(1);
82+
const rendered = render(setup({ type: GenericDataType.TEMPORAL }));
83+
84+
const clockIcon = rendered.container.querySelector('.fa-clock-o');
85+
expect(clockIcon).toBeVisible();
7686
});
7787
});

‎superset-frontend/spec/javascripts/dashboard/components/MissingChart_spec.jsx renamed to ‎superset-frontend/spec/javascripts/dashboard/components/MissingChart_spec.tsx

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,38 @@
1717
* under the License.
1818
*/
1919
import React from 'react';
20-
import { shallow } from 'enzyme';
20+
import { render } from 'spec/helpers/testing-library';
2121

2222
import MissingChart from 'src/dashboard/components/MissingChart';
2323

24-
describe('MissingChart', () => {
25-
function setup(overrideProps) {
26-
const wrapper = shallow(<MissingChart height={100} {...overrideProps} />);
27-
return wrapper;
28-
}
24+
type MissingChartProps = {
25+
height: number;
26+
};
27+
28+
const setup = (overrides?: MissingChartProps) => (
29+
<MissingChart height={100} {...overrides} />
30+
);
2931

32+
describe('MissingChart', () => {
3033
it('renders a .missing-chart-container', () => {
31-
const wrapper = setup();
32-
expect(wrapper.find('.missing-chart-container')).toExist();
34+
const rendered = render(setup());
35+
36+
const missingChartContainer = rendered.container.querySelector(
37+
'.missing-chart-container',
38+
);
39+
expect(missingChartContainer).toBeVisible();
3340
});
3441

3542
it('renders a .missing-chart-body', () => {
36-
const wrapper = setup();
37-
expect(wrapper.find('.missing-chart-body')).toExist();
43+
const rendered = render(setup());
44+
45+
const missingChartBody = rendered.container.querySelector(
46+
'.missing-chart-body',
47+
);
48+
const bodyText =
49+
'There is no chart definition associated with this component, could it have been deleted?<br><br>Delete this container and save to remove this message.';
50+
51+
expect(missingChartBody).toBeVisible();
52+
expect(missingChartBody?.innerHTML).toMatch(bodyText);
3853
});
3954
});

‎superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.jsx

Lines changed: 0 additions & 80 deletions
This file was deleted.

0 commit comments

Comments
 (0)