QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-19 08:04:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Convert TableElement.jsx component from class to functional with hooks (#14830)

Browse Source 
* Change TableElement from a class component to a functional component

* Replace class state checks in TableElement_spec.jsx with checks testing elements they change

* Refactor small bit of logic to use optional chaining

* Add optional chaining to some logic

* Fix IconTooltip and add IconTooltip to the collapse button

* Fix custom icon using IconToolTip so it better matches the original

* Update collapse/expand icon to use Icons component instead of importing from antdesign directly

* Fix eslint errors

* Clean up some code for readability

Co-authored-by: Corbin Robb <corbin@Corbins-MacBook-Pro.local>
This commit is contained in:
Corbin Robb
2021-06-03 17:04:56 -06:00
committed by GitHub
parent f652908a70
commit 004a6d9e54
2 changed files with 118 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx
View File

@@ -43,7 +43,7 @@ describe('TableElement', () => {
it('renders with props', () => {
expect(React.isValidElement(<TableElement {...mockedProps} />)).toBe(true);
});
it('has 4 IconTooltip elements', () => {
it('has 5 IconTooltip elements', () => {
const wrapper = mount(
<Provider store={store}>
<TableElement {...mockedProps} />
@@ -55,14 +55,14 @@ describe('TableElement', () => {
},
},
);
expect(wrapper.find(IconTooltip)).toHaveLength(4);
expect(wrapper.find(IconTooltip)).toHaveLength(5);
});
it('has 14 columns', () => {
const wrapper = shallow(<TableElement {...mockedProps} />);
expect(wrapper.find(ColumnElement)).toHaveLength(14);
});
it('mounts', () => {
mount(
const wrapper = mount(
<Provider store={store}>
<TableElement {...mockedProps} />
</Provider>,
@@ -73,6 +73,8 @@ describe('TableElement', () => {
},
},
);
expect(wrapper.find(TableElement)).toHaveLength(1);
});
it('fades table', async () => {
const wrapper = mount(
@@ -86,13 +88,11 @@ describe('TableElement', () => {
},
},
);
expect(wrapper.find(TableElement).state().hovered).toBe(false);
expect(wrapper.find('[data-test="fade"]').first().props().hovered).toBe(
false,
);
wrapper.find('.header-container').hostNodes().simulate('mouseEnter');
await waitForComponentToPaint(wrapper, 300);
expect(wrapper.find(TableElement).state().hovered).toBe(true);
expect(wrapper.find('[data-test="fade"]').first().props().hovered).toBe(
true,
);
@@ -111,12 +111,22 @@ describe('TableElement', () => {
},
},
);
expect(wrapper.find(TableElement).state().sortColumns).toBe(false);
expect(
wrapper.find(IconTooltip).at(2).hasClass('fa-sort-alpha-asc'),
).toEqual(true);
expect(
wrapper.find(IconTooltip).at(2).hasClass('fa-sort-numeric-asc'),
).toEqual(false);
wrapper.find('.header-container').hostNodes().simulate('click');
expect(wrapper.find(ColumnElement).first().props().column.name).toBe('id');
wrapper.find('.header-container').simulate('mouseEnter');
wrapper.find('.sort-cols').hostNodes().simulate('click');
expect(wrapper.find(TableElement).state().sortColumns).toBe(true);
expect(
wrapper.find(IconTooltip).at(2).hasClass('fa-sort-numeric-asc'),
).toEqual(true);
expect(
wrapper.find(IconTooltip).at(2).hasClass('fa-sort-alpha-asc'),
).toEqual(false);
expect(wrapper.find(ColumnElement).first().props().column.name).toBe(
'active',
);