From 63aadd3fe492c39d8949fe2510bd521669e6869d Mon Sep 17 00:00:00 2001 From: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com> Date: Wed, 22 Sep 2021 13:37:35 -0500 Subject: [PATCH] test: RTL overhaul - hackathon (#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 --- ...hedLabel_spec.jsx => CachedLabel_spec.tsx} | 24 +- ...abel_spec.jsx => ColumnTypeLabel_spec.tsx} | 80 +++--- ...ngChart_spec.jsx => MissingChart_spec.tsx} | 35 ++- .../components/RefreshIntervalModal_spec.jsx | 80 ------ .../components/RefreshIntervalModal_spec.tsx | 237 ++++++++++++++++++ ...{HoverMenu_spec.jsx => HoverMenu_spec.tsx} | 9 +- ...r_spec.jsx => ResizableContainer_spec.tsx} | 42 +++- ...ndle_spec.jsx => ResizableHandle_spec.tsx} | 24 +- ...tion_spec.jsx => AggregateOption_spec.tsx} | 11 +- ...trol_spec.jsx => CheckboxControl_spec.tsx} | 45 ++-- .../components/ColorPickerControl_spec.jsx | 61 ----- .../components/ColorPickerControl_spec.tsx | 72 ++++++ .../src/components/CachedLabel/index.tsx | 4 +- .../src/profile/components/UserInfo.tsx | 4 +- 14 files changed, 475 insertions(+), 253 deletions(-) rename superset-frontend/spec/javascripts/components/{CachedLabel_spec.jsx => CachedLabel_spec.tsx} (71%) rename superset-frontend/spec/javascripts/components/{ColumnTypeLabel_spec.jsx => ColumnTypeLabel_spec.tsx} (50%) rename superset-frontend/spec/javascripts/dashboard/components/{MissingChart_spec.jsx => MissingChart_spec.tsx} (56%) delete mode 100644 superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.jsx create mode 100644 superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.tsx rename superset-frontend/spec/javascripts/dashboard/components/menu/{HoverMenu_spec.jsx => HoverMenu_spec.tsx} (79%) rename superset-frontend/spec/javascripts/dashboard/components/resizable/{ResizableContainer_spec.jsx => ResizableContainer_spec.tsx} (50%) rename superset-frontend/spec/javascripts/dashboard/components/resizable/{ResizableHandle_spec.jsx => ResizableHandle_spec.tsx} (68%) rename superset-frontend/spec/javascripts/explore/components/{AggregateOption_spec.jsx => AggregateOption_spec.tsx} (81%) rename superset-frontend/spec/javascripts/explore/components/{CheckboxControl_spec.jsx => CheckboxControl_spec.tsx} (61%) delete mode 100644 superset-frontend/spec/javascripts/explore/components/ColorPickerControl_spec.jsx create mode 100644 superset-frontend/spec/javascripts/explore/components/ColorPickerControl_spec.tsx diff --git a/superset-frontend/spec/javascripts/components/CachedLabel_spec.jsx b/superset-frontend/spec/javascripts/components/CachedLabel_spec.tsx similarity index 71% rename from superset-frontend/spec/javascripts/components/CachedLabel_spec.jsx rename to superset-frontend/spec/javascripts/components/CachedLabel_spec.tsx index 7e1ecf7738..b13c31b7b1 100644 --- a/superset-frontend/spec/javascripts/components/CachedLabel_spec.jsx +++ b/superset-frontend/spec/javascripts/components/CachedLabel_spec.tsx @@ -17,22 +17,26 @@ * under the License. */ import React from 'react'; -import { shallow } from 'enzyme'; +import { render, screen } from 'spec/helpers/testing-library'; -import Label from 'src/components/Label'; -import CachedLabel from 'src/components/CachedLabel'; +import CachedLabel, { CacheLabelProps } from 'src/components/CachedLabel'; + +const defaultProps = { + onClick: () => {}, + cachedTimestamp: '2017-01-01', +}; + +const setup = (props: CacheLabelProps) => ; describe('CachedLabel', () => { - const defaultProps = { - onClick: () => {}, - cachedTimestamp: '2017-01-01', - }; - it('is valid', () => { expect(React.isValidElement()).toBe(true); }); + it('renders', () => { - const wrapper = shallow(); - expect(wrapper.find(Label)).toExist(); + render(setup(defaultProps)); + + const label = screen.getByText(/cached/i); + expect(label).toBeVisible(); }); }); diff --git a/superset-frontend/spec/javascripts/components/ColumnTypeLabel_spec.jsx b/superset-frontend/spec/javascripts/components/ColumnTypeLabel_spec.tsx similarity index 50% rename from superset-frontend/spec/javascripts/components/ColumnTypeLabel_spec.jsx rename to superset-frontend/spec/javascripts/components/ColumnTypeLabel_spec.tsx index 0bc5a26f90..42aab98090 100644 --- a/superset-frontend/spec/javascripts/components/ColumnTypeLabel_spec.jsx +++ b/superset-frontend/spec/javascripts/components/ColumnTypeLabel_spec.tsx @@ -17,61 +17,71 @@ * under the License. */ import React from 'react'; -import { shallow } from 'enzyme'; +import { render, screen, cleanup } from 'spec/helpers/testing-library'; -import { ColumnTypeLabel } from '@superset-ui/chart-controls'; +import { + ColumnTypeLabel, + ColumnTypeLabelProps, +} from '@superset-ui/chart-controls'; import { GenericDataType } from '@superset-ui/core'; -describe('ColumnOption', () => { - const defaultProps = { - type: GenericDataType.STRING, - }; +const defaultProps = { + type: GenericDataType.STRING, +}; - const props = { ...defaultProps }; - - function getWrapper(overrides) { - const wrapper = shallow(); - return wrapper; - } +const setup = (overrides?: ColumnTypeLabelProps) => ( +
+ +
+); +describe('ColumnOption RTL', () => { + afterEach(cleanup); it('is a valid element', () => { expect(React.isValidElement()).toBe( true, ); }); + it('string type shows ABC icon', () => { - const lbl = getWrapper({}).find('.type-label'); - expect(lbl).toHaveLength(1); - expect(lbl.first().text()).toBe('ABC'); + render(setup(defaultProps)); + + const labelIcon = screen.getByText(/abc/i); + expect(labelIcon.innerHTML).toMatch(/abc/i); }); + it('int type shows # icon', () => { - const lbl = getWrapper({ - type: GenericDataType.NUMERIC, - }).find('.type-label'); - expect(lbl).toHaveLength(1); - expect(lbl.first().text()).toBe('#'); + render(setup({ type: GenericDataType.NUMERIC })); + + const labelIcon = screen.getByText(/#/i); + expect(labelIcon.innerHTML).toMatch(/#/i); }); + it('bool type shows T/F icon', () => { - const lbl = getWrapper({ - type: GenericDataType.BOOLEAN, - }).find('.type-label'); - expect(lbl).toHaveLength(1); - expect(lbl.first().text()).toBe('T/F'); + render(setup({ type: GenericDataType.BOOLEAN })); + + const labelIcon = screen.getByText(/t\/f/i); + expect(labelIcon.innerHTML).toMatch(/t\/f/i); }); + it('expression type shows function icon', () => { - const lbl = getWrapper({ type: 'expression' }).find('.type-label'); - expect(lbl).toHaveLength(1); - expect(lbl.first().text()).toBe('ƒ'); + render(setup({ type: 'expression' })); + + const labelIcon = screen.getByText('ƒ'); + expect(labelIcon.innerHTML).toMatch('ƒ'); }); + it('unknown type shows question mark', () => { - const lbl = getWrapper({ type: 'unknown' }).find('.type-label'); - expect(lbl).toHaveLength(1); - expect(lbl.first().text()).toBe('?'); + render(setup({ type: undefined })); + + const labelIcon = screen.getByText('?'); + expect(labelIcon.innerHTML).toMatch('?'); }); + it('datetime type displays', () => { - const lbl = getWrapper({ - type: GenericDataType.TEMPORAL, - }).find('.fa-clock-o'); - expect(lbl).toHaveLength(1); + const rendered = render(setup({ type: GenericDataType.TEMPORAL })); + + const clockIcon = rendered.container.querySelector('.fa-clock-o'); + expect(clockIcon).toBeVisible(); }); }); diff --git a/superset-frontend/spec/javascripts/dashboard/components/MissingChart_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/MissingChart_spec.tsx similarity index 56% rename from superset-frontend/spec/javascripts/dashboard/components/MissingChart_spec.jsx rename to superset-frontend/spec/javascripts/dashboard/components/MissingChart_spec.tsx index f2505400fa..9c3e78252c 100644 --- a/superset-frontend/spec/javascripts/dashboard/components/MissingChart_spec.jsx +++ b/superset-frontend/spec/javascripts/dashboard/components/MissingChart_spec.tsx @@ -17,23 +17,38 @@ * under the License. */ import React from 'react'; -import { shallow } from 'enzyme'; +import { render } from 'spec/helpers/testing-library'; import MissingChart from 'src/dashboard/components/MissingChart'; -describe('MissingChart', () => { - function setup(overrideProps) { - const wrapper = shallow(); - return wrapper; - } +type MissingChartProps = { + height: number; +}; +const setup = (overrides?: MissingChartProps) => ( + +); + +describe('MissingChart', () => { it('renders a .missing-chart-container', () => { - const wrapper = setup(); - expect(wrapper.find('.missing-chart-container')).toExist(); + const rendered = render(setup()); + + const missingChartContainer = rendered.container.querySelector( + '.missing-chart-container', + ); + expect(missingChartContainer).toBeVisible(); }); it('renders a .missing-chart-body', () => { - const wrapper = setup(); - expect(wrapper.find('.missing-chart-body')).toExist(); + const rendered = render(setup()); + + const missingChartBody = rendered.container.querySelector( + '.missing-chart-body', + ); + const bodyText = + 'There is no chart definition associated with this component, could it have been deleted?

Delete this container and save to remove this message.'; + + expect(missingChartBody).toBeVisible(); + expect(missingChartBody?.innerHTML).toMatch(bodyText); }); }); diff --git a/superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.jsx deleted file mode 100644 index 711dc45f12..0000000000 --- a/superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.jsx +++ /dev/null @@ -1,80 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ -import React from 'react'; -import { mount } from 'enzyme'; - -import ModalTrigger from 'src/components/ModalTrigger'; -import RefreshIntervalModal from 'src/dashboard/components/RefreshIntervalModal'; -import Alert from 'src/components/Alert'; -import { supersetTheme, ThemeProvider } from '@superset-ui/core'; - -const getMountWrapper = props => - mount(, { - wrappingComponent: ThemeProvider, - wrappingComponentProps: { - theme: supersetTheme, - }, - }); - -describe('RefreshIntervalModal', () => { - const mockedProps = { - triggerNode: , - refreshFrequency: 10, - onChange: jest.fn(), - editMode: true, - }; - it('is valid', () => { - expect( - React.isValidElement(), - ).toBe(true); - }); - it('renders the trigger node', () => { - const wrapper = getMountWrapper(mockedProps); - expect(wrapper.find('.fa-edit')).toExist(); - }); - it('should render a interval seconds', () => { - const wrapper = getMountWrapper(mockedProps); - expect(wrapper.prop('refreshFrequency')).toEqual(10); - }); - it('should change refreshFrequency with edit mode', () => { - const wrapper = getMountWrapper(mockedProps); - wrapper.instance().handleFrequencyChange(30); - wrapper.instance().onSave(); - expect(mockedProps.onChange).toHaveBeenCalled(); - expect(mockedProps.onChange).toHaveBeenCalledWith(30, mockedProps.editMode); - }); - it('should show warning message', () => { - const props = { - ...mockedProps, - refreshLimit: 3600, - refreshWarning: 'Show warning', - }; - - const wrapper = getMountWrapper(props); - wrapper.find('span[role="button"]').simulate('click'); - - wrapper.instance().handleFrequencyChange(30); - wrapper.update(); - expect(wrapper.find(ModalTrigger).find(Alert)).toExist(); - - wrapper.instance().handleFrequencyChange(3601); - wrapper.update(); - expect(wrapper.find(ModalTrigger).find(Alert)).not.toExist(); - }); -}); diff --git a/superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.tsx b/superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.tsx new file mode 100644 index 0000000000..cb4d4808e2 --- /dev/null +++ b/superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.tsx @@ -0,0 +1,237 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React from 'react'; +import { mount } from 'enzyme'; +import { render, screen } from 'spec/helpers/testing-library'; +import userEvent from '@testing-library/user-event'; +import fetchMock from 'fetch-mock'; + +import ModalTrigger from 'src/components/ModalTrigger'; +import RefreshIntervalModal from 'src/dashboard/components/RefreshIntervalModal'; +import HeaderActionsDropdown from 'src/dashboard/components/Header/HeaderActionsDropdown'; +import Alert from 'src/components/Alert'; +import { supersetTheme, ThemeProvider } from '@superset-ui/core'; + +describe('RefreshIntervalModal - Enzyme', () => { + const getMountWrapper = (props: any) => + mount(, { + wrappingComponent: ThemeProvider, + wrappingComponentProps: { + theme: supersetTheme, + }, + }); + const mockedProps = { + triggerNode: , + refreshFrequency: 10, + onChange: jest.fn(), + editMode: true, + }; + it('should show warning message', () => { + const props = { + ...mockedProps, + refreshLimit: 3600, + refreshWarning: 'Show warning', + }; + + const wrapper = getMountWrapper(props); + wrapper.find('span[role="button"]').simulate('click'); + + // @ts-ignore (for handleFrequencyChange) + wrapper.instance().handleFrequencyChange(30); + wrapper.update(); + expect(wrapper.find(ModalTrigger).find(Alert)).toExist(); + + // @ts-ignore (for handleFrequencyChange) + wrapper.instance().handleFrequencyChange(3601); + wrapper.update(); + expect(wrapper.find(ModalTrigger).find(Alert)).not.toExist(); + wrapper.unmount(); + }); +}); + +const createProps = () => ({ + addSuccessToast: jest.fn(), + addDangerToast: jest.fn(), + customCss: '#save-dash-split-button{margin-left: 100px;}', + dashboardId: 1, + dashboardInfo: { + id: 1, + dash_edit_perm: true, + dash_save_perm: true, + userId: '1', + metadata: {}, + common: { + conf: {}, + }, + }, + dashboardTitle: 'Title', + editMode: false, + expandedSlices: {}, + forceRefreshAllCharts: jest.fn(), + hasUnsavedChanges: false, + isLoading: false, + layout: {}, + dataMask: {}, + onChange: jest.fn(), + onSave: jest.fn(), + refreshFrequency: 0, + setRefreshFrequency: jest.fn(), + shouldPersistRefreshFrequency: false, + showPropertiesModal: jest.fn(), + startPeriodicRender: jest.fn(), + updateCss: jest.fn(), + userCanEdit: false, + userCanSave: false, + userCanShare: false, + lastModifiedTime: 0, +}); + +const editModeOnProps = { + ...createProps(), + editMode: true, +}; + +const setup = (overrides?: any) => ( +
+ +
+); + +fetchMock.get('glob:*/csstemplateasyncmodelview/api/read', {}); + +const openRefreshIntervalModal = async () => { + const headerActionsButton = screen.getByRole('img', { name: 'more-horiz' }); + userEvent.click(headerActionsButton); + + const autoRefreshOption = screen.getByText('Set auto-refresh interval'); + userEvent.click(autoRefreshOption); +}; + +const displayOptions = async () => { + // Click default refresh interval option to display other options + userEvent.click(screen.getByText(/don't refresh/i)); +}; + +const defaultRefreshIntervalModalProps = { + triggerNode: , + refreshFrequency: 0, + onChange: jest.fn(), + editMode: true, +}; + +describe('RefreshIntervalModal - RTL', () => { + it('is valid', () => { + expect( + React.isValidElement( + , + ), + ).toBe(true); + }); + + it('renders refresh interval modal', async () => { + render(setup(editModeOnProps)); + await openRefreshIntervalModal(); + + // Assert that modal exists by checking for the modal title + expect(screen.getByText('Refresh interval')).toBeVisible(); + }); + + it('renders refresh interval options', async () => { + render(setup(editModeOnProps)); + await openRefreshIntervalModal(); + await displayOptions(); + + // Assert that both "Don't refresh" instances exist + // - There will be two at this point, the default option and the dropdown option + const dontRefreshInstances = screen.getAllByText(/don't refresh/i); + expect(dontRefreshInstances).toHaveLength(2); + dontRefreshInstances.forEach(option => { + expect(option).toBeInTheDocument(); + }); + + // Assert that all the other options exist + const options = [ + screen.getByText(/10 seconds/i), + screen.getByText(/30 seconds/i), + screen.getByText(/1 minute/i), + screen.getByText(/5 minutes/i), + screen.getByText(/30 minutes/i), + screen.getByText(/1 hour/i), + screen.getByText(/6 hours/i), + screen.getByText(/12 hours/i), + screen.getByText(/24 hours/i), + ]; + options.forEach(option => { + expect(option).toBeInTheDocument(); + }); + }); + + it('should change selected value', async () => { + render(setup(editModeOnProps)); + await openRefreshIntervalModal(); + + // Initial selected value should be "Don't refresh" + const selectedValue = screen.getByText(/don't refresh/i); + expect(selectedValue.title).toMatch(/don't refresh/i); + + // Display options and select "10 seconds" + await displayOptions(); + userEvent.click(screen.getByText(/10 seconds/i)); + + // Selected value should now be "10 seconds" + expect(selectedValue.title).toMatch(/10 seconds/i); + expect(selectedValue.title).not.toMatch(/don't refresh/i); + }); + + it('should save a newly-selected value', async () => { + render(setup(editModeOnProps)); + await openRefreshIntervalModal(); + await displayOptions(); + + screen.logTestingPlaygroundURL(); + // Select a new interval and click save + userEvent.click(screen.getByText(/10 seconds/i)); + userEvent.click(screen.getByRole('button', { name: /save/i })); + + expect(editModeOnProps.setRefreshFrequency).toHaveBeenCalled(); + expect(editModeOnProps.setRefreshFrequency).toHaveBeenCalledWith( + 10, + editModeOnProps.editMode, + ); + }); + + it('should show warning message', async () => { + // TODO (lyndsiWilliams): This test is incomplete + const warningProps = { + ...editModeOnProps, + refreshLimit: 3600, + refreshWarning: 'Show warning', + }; + + render(setup(warningProps)); + await openRefreshIntervalModal(); + await displayOptions(); + + userEvent.click(screen.getByText(/30 seconds/i)); + userEvent.click(screen.getByRole('button', { name: /save/i })); + + // screen.debug(screen.getByRole('alert')); + expect.anything(); + }); +}); diff --git a/superset-frontend/spec/javascripts/dashboard/components/menu/HoverMenu_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/menu/HoverMenu_spec.tsx similarity index 79% rename from superset-frontend/spec/javascripts/dashboard/components/menu/HoverMenu_spec.jsx rename to superset-frontend/spec/javascripts/dashboard/components/menu/HoverMenu_spec.tsx index 24106f1641..220952bf8d 100644 --- a/superset-frontend/spec/javascripts/dashboard/components/menu/HoverMenu_spec.jsx +++ b/superset-frontend/spec/javascripts/dashboard/components/menu/HoverMenu_spec.tsx @@ -17,13 +17,14 @@ * under the License. */ import React from 'react'; -import { shallow } from 'enzyme'; +import { render } from 'spec/helpers/testing-library'; import HoverMenu from 'src/dashboard/components/menu/HoverMenu'; describe('HoverMenu', () => { - it('should render a div.hover-menu', () => { - const wrapper = shallow(); - expect(wrapper.find('.hover-menu')).toExist(); + it('should render a hover menu', () => { + const rendered = render(); + const hoverMenu = rendered.container.querySelector('.hover-menu'); + expect(hoverMenu).toBeVisible(); }); }); diff --git a/superset-frontend/spec/javascripts/dashboard/components/resizable/ResizableContainer_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/resizable/ResizableContainer_spec.tsx similarity index 50% rename from superset-frontend/spec/javascripts/dashboard/components/resizable/ResizableContainer_spec.jsx rename to superset-frontend/spec/javascripts/dashboard/components/resizable/ResizableContainer_spec.tsx index 68c873db3d..be3f2320c5 100644 --- a/superset-frontend/spec/javascripts/dashboard/components/resizable/ResizableContainer_spec.jsx +++ b/superset-frontend/spec/javascripts/dashboard/components/resizable/ResizableContainer_spec.tsx @@ -17,20 +17,46 @@ * under the License. */ import React from 'react'; -import { Resizable } from 're-resizable'; -import { shallow } from 'enzyme'; +import { render } from 'spec/helpers/testing-library'; import ResizableContainer from 'src/dashboard/components/resizable/ResizableContainer'; +interface ResizableContainerProps { + id: string; + children?: object; + adjustableWidth?: boolean; + adjustableHeight?: boolean; + gutterWidth?: number; + widthStep?: number; + heightStep?: number; + widthMultiple?: number; + heightMultiple?: number; + minWidthMultiple?: number; + maxWidthMultiple?: number; + minHeightMultiple?: number; + maxHeightMultiple?: number; + staticHeight?: number; + staticHeightMultiple?: number; + staticWidth?: number; + staticWidthMultiple?: number; + onResizeStop?: () => {}; + onResize?: () => {}; + onResizeStart?: () => {}; + editMode: boolean; +} + describe('ResizableContainer', () => { const props = { editMode: false, id: 'id' }; - function setup(propOverrides) { - return shallow(); - } + const setup = (overrides?: ResizableContainerProps) => ( + + ); - it('should render a Resizable', () => { - const wrapper = setup(); - expect(wrapper.find(Resizable)).toExist(); + it('should render a Resizable container', () => { + const rendered = render(setup()); + const resizableContainer = rendered.container.querySelector( + '.resizable-container', + ); + expect(resizableContainer).toBeVisible(); }); }); diff --git a/superset-frontend/spec/javascripts/dashboard/components/resizable/ResizableHandle_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/resizable/ResizableHandle_spec.tsx similarity index 68% rename from superset-frontend/spec/javascripts/dashboard/components/resizable/ResizableHandle_spec.jsx rename to superset-frontend/spec/javascripts/dashboard/components/resizable/ResizableHandle_spec.tsx index bc8059c4a9..60371d41ae 100644 --- a/superset-frontend/spec/javascripts/dashboard/components/resizable/ResizableHandle_spec.jsx +++ b/superset-frontend/spec/javascripts/dashboard/components/resizable/ResizableHandle_spec.tsx @@ -17,29 +17,33 @@ * under the License. */ import React from 'react'; -import { shallow } from 'enzyme'; +import { render } from 'spec/helpers/testing-library'; import ResizableHandle from 'src/dashboard/components/resizable/ResizableHandle'; /* eslint-disable react/jsx-pascal-case */ describe('ResizableHandle', () => { it('should render a right resize handle', () => { - const wrapper = shallow(); - expect(wrapper.find('.resize-handle.resize-handle--right')).toExist(); + const rendered = render(); + expect( + rendered.container.querySelector('.resize-handle.resize-handle--right'), + ).toBeVisible(); }); it('should render a bottom resize handle', () => { - const wrapper = shallow(); - expect(wrapper.find('.resize-handle.resize-handle--bottom')).toHaveLength( - 1, - ); + const rendered = render(); + expect( + rendered.container.querySelector('.resize-handle.resize-handle--bottom'), + ).toBeVisible(); }); it('should render a bottomRight resize handle', () => { - const wrapper = shallow(); + const rendered = render(); expect( - wrapper.find('.resize-handle.resize-handle--bottom-right'), - ).toHaveLength(1); + rendered.container.querySelector( + '.resize-handle.resize-handle--bottom-right', + ), + ).toBeVisible(); }); }); /* eslint-enable react/jsx-pascal-case */ diff --git a/superset-frontend/spec/javascripts/explore/components/AggregateOption_spec.jsx b/superset-frontend/spec/javascripts/explore/components/AggregateOption_spec.tsx similarity index 81% rename from superset-frontend/spec/javascripts/explore/components/AggregateOption_spec.jsx rename to superset-frontend/spec/javascripts/explore/components/AggregateOption_spec.tsx index 504b790afa..9c4364e4e1 100644 --- a/superset-frontend/spec/javascripts/explore/components/AggregateOption_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/AggregateOption_spec.tsx @@ -16,17 +16,16 @@ * specific language governing permissions and limitations * under the License. */ -/* eslint-disable no-unused-expressions */ import React from 'react'; -import { shallow } from 'enzyme'; +import { render, screen } from 'spec/helpers/testing-library'; import AggregateOption from 'src/explore/components/controls/MetricControl/AggregateOption'; describe('AggregateOption', () => { it('renders the aggregate', () => { - const wrapper = shallow( - , - ); - expect(wrapper.text()).toBe('SUM'); + render(); + + const aggregateOption = screen.getByText(/sum/i); + expect(aggregateOption).toBeVisible(); }); }); diff --git a/superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.tsx similarity index 61% rename from superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.jsx rename to superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.tsx index 6eec246029..0a92830c62 100644 --- a/superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.tsx @@ -18,45 +18,40 @@ */ /* eslint-disable no-unused-expressions */ import React from 'react'; -import sinon from 'sinon'; -import { mount } from 'enzyme'; +import { render, screen } from 'spec/helpers/testing-library'; import { ThemeProvider, supersetTheme } from '@superset-ui/core'; import CheckboxControl from 'src/explore/components/controls/CheckboxControl'; -import ControlHeader from 'src/explore/components/ControlHeader'; -import Checkbox from 'src/components/Checkbox'; +import userEvent from '@testing-library/user-event'; const defaultProps = { name: 'show_legend', - onChange: sinon.spy(), + onChange: jest.fn(), value: false, label: 'checkbox label', }; +const setup = (overrides = {}) => ( + + ; + +); + describe('CheckboxControl', () => { - let wrapper; - - beforeEach(() => { - wrapper = mount( - - - , - ); - }); - it('renders a Checkbox', () => { - const controlHeader = wrapper.childAt(0).find(ControlHeader); - expect(controlHeader).toHaveLength(1); - expect(controlHeader.find(Checkbox)).toHaveLength(1); + render(setup()); + + const checkbox = screen.getByRole('checkbox'); + expect(checkbox).toBeVisible(); + expect(checkbox).not.toBeChecked(); }); it('Checks the box when the label is clicked', () => { - const fullComponent = wrapper.childAt(0); - const spy = sinon.spy(fullComponent.instance(), 'onChange'); + render(setup()); + const label = screen.getByRole('button', { + name: /checkbox label/i, + }); - fullComponent.instance().forceUpdate(); - - fullComponent.find('label span').last().simulate('click'); - - expect(spy.calledOnce).toBe(true); + userEvent.click(label); + expect(defaultProps.onChange).toHaveBeenCalled(); }); }); diff --git a/superset-frontend/spec/javascripts/explore/components/ColorPickerControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/ColorPickerControl_spec.jsx deleted file mode 100644 index 9fda1017e1..0000000000 --- a/superset-frontend/spec/javascripts/explore/components/ColorPickerControl_spec.jsx +++ /dev/null @@ -1,61 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ -import React from 'react'; -import { shallow } from 'enzyme'; -import { SketchPicker } from 'react-color'; -import { - CategoricalScheme, - getCategoricalSchemeRegistry, -} from '@superset-ui/core'; -import Popover from 'src/components/Popover'; -import ColorPickerControl from 'src/explore/components/controls/ColorPickerControl'; -import ControlHeader from 'src/explore/components/ControlHeader'; - -const defaultProps = { - value: {}, -}; - -describe('ColorPickerControl', () => { - let wrapper; - let inst; - beforeAll(() => { - getCategoricalSchemeRegistry() - .registerValue( - 'test', - new CategoricalScheme({ - id: 'test', - colors: ['red', 'green', 'blue'], - }), - ) - .setDefaultKey('test'); - wrapper = shallow(); - inst = wrapper.instance(); - }); - - it('renders a OverlayTrigger', () => { - const controlHeader = wrapper.find(ControlHeader); - expect(controlHeader).toHaveLength(1); - expect(wrapper.find(Popover)).toExist(); - }); - - it('renders a Popover with a SketchPicker', () => { - const popOver = shallow(inst.renderPopover()); - expect(popOver.find(SketchPicker)).toHaveLength(1); - }); -}); diff --git a/superset-frontend/spec/javascripts/explore/components/ColorPickerControl_spec.tsx b/superset-frontend/spec/javascripts/explore/components/ColorPickerControl_spec.tsx new file mode 100644 index 0000000000..99de2dcb71 --- /dev/null +++ b/superset-frontend/spec/javascripts/explore/components/ColorPickerControl_spec.tsx @@ -0,0 +1,72 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React from 'react'; +import { render } from 'spec/helpers/testing-library'; +import { + CategoricalScheme, + getCategoricalSchemeRegistry, +} from '@superset-ui/core'; +import ColorPickerControl from 'src/explore/components/controls/ColorPickerControl'; + +const defaultProps = { + value: {}, +}; + +describe('ColorPickerControl', () => { + beforeAll(() => { + getCategoricalSchemeRegistry() + .registerValue( + 'test', + new CategoricalScheme({ + id: 'test', + colors: ['red', 'green', 'blue'], + }), + ) + .setDefaultKey('test'); + render(); + }); + + it('renders an OverlayTrigger', () => { + const rendered = render(); + + // This is the div wrapping the OverlayTrigger and SketchPicker + const controlWrapper = rendered.container.querySelectorAll('div')[1]; + expect(controlWrapper.childElementCount).toBe(2); + + // This is the div containing the OverlayTrigger + const overlayTrigger = rendered.container.querySelectorAll('div')[2]; + expect(overlayTrigger).toHaveStyle( + 'position: absolute; width: 50px; height: 20px; top: 0px; left: 0px; right: 0px; bottom: 0px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) center;', + ); + }); + + it('renders a Popover with a SketchPicker', () => { + const rendered = render(); + + // This is the div wrapping the OverlayTrigger and SketchPicker + const controlWrapper = rendered.container.querySelectorAll('div')[1]; + expect(controlWrapper.childElementCount).toBe(2); + + // This is the div containing the SketchPicker + const sketchPicker = rendered.container.querySelectorAll('div')[3]; + expect(sketchPicker).toHaveStyle( + 'position: absolute; width: 50px; height: 20px; top: 0px; left: 0px; right: 0px; bottom: 0px; border-radius: 2px;', + ); + }); +}); diff --git a/superset-frontend/src/components/CachedLabel/index.tsx b/superset-frontend/src/components/CachedLabel/index.tsx index 5a42949f52..a401ab1e0e 100644 --- a/superset-frontend/src/components/CachedLabel/index.tsx +++ b/superset-frontend/src/components/CachedLabel/index.tsx @@ -22,13 +22,13 @@ import Label from 'src/components/Label'; import { Tooltip } from 'src/components/Tooltip'; import { TooltipContent } from './TooltipContent'; -interface Props { +export interface CacheLabelProps { onClick?: React.MouseEventHandler; cachedTimestamp?: string; className?: string; } -const CacheLabel: React.FC = ({ +const CacheLabel: React.FC = ({ className, onClick, cachedTimestamp, diff --git a/superset-frontend/src/profile/components/UserInfo.tsx b/superset-frontend/src/profile/components/UserInfo.tsx index b6dcac022f..887b4ec50c 100644 --- a/superset-frontend/src/profile/components/UserInfo.tsx +++ b/superset-frontend/src/profile/components/UserInfo.tsx @@ -60,8 +60,8 @@ export default function UserInfo({ user }: UserInfoProps) {

- {t('joined')}{' '} - {moment(user.createdOn, 'YYYYMMDD').fromNow()} + {' '} + {t('joined')} {moment(user.createdOn, 'YYYYMMDD').fromNow()}

{user.email}