From 901d6f20f5135433ed2d96e26e95cb8e12bed8e7 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Mon, 11 Oct 2021 21:22:41 -0700 Subject: [PATCH 1/9] remove supersettheme --- .../src/datasource/DatasourceEditor.jsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx index e502a3e2b22a4..175880d37f12a 100644 --- a/superset-frontend/src/datasource/DatasourceEditor.jsx +++ b/superset-frontend/src/datasource/DatasourceEditor.jsx @@ -25,7 +25,7 @@ import Card from 'src/components/Card'; import Alert from 'src/components/Alert'; import Badge from 'src/components/Badge'; import shortid from 'shortid'; -import { styled, SupersetClient, t, supersetTheme } from '@superset-ui/core'; +import { styled, SupersetClient, t, withTheme } from '@superset-ui/core'; import Button from 'src/components/Button'; import Tabs from 'src/components/Tabs'; import CertifiedIcon from 'src/components/CertifiedIcon'; @@ -97,7 +97,7 @@ const StyledBadge = styled(Badge)` `; const EditLockContainer = styled.div` - font-size: ${supersetTheme.typography.sizes.s}px; + font-size: ${({ theme }) => theme.typography.sizes.s}px; display: flex; align-items: center; a { @@ -808,7 +808,7 @@ class DatasourceEditor extends React.PureComponent { ); } - renderSourceFieldset() { + renderSourceFieldset(theme) { const { datasource } = this.state; return (
@@ -970,11 +970,11 @@ class DatasourceEditor extends React.PureComponent { {this.state.isEditMode ? ( ) : ( )} @@ -1146,6 +1146,8 @@ class DatasourceEditor extends React.PureComponent { const { datasource, activeTabKey } = this.state; const { metrics } = datasource; const sortedMetrics = metrics?.length ? this.sortMetrics(metrics) : []; + const { theme } = this.props; + return ( {this.renderErrors()} @@ -1170,7 +1172,7 @@ class DatasourceEditor extends React.PureComponent { defaultActiveKey={activeTabKey} > - {this.renderSourceFieldset()} + {this.renderSourceFieldset(theme)} Date: Wed, 20 Oct 2021 20:42:08 -0700 Subject: [PATCH 2/9] migrate Datasourceeditor to rtl --- .../src/datasource/DatasourceEditor.test.jsx | 224 +++++++++--------- 1 file changed, 106 insertions(+), 118 deletions(-) diff --git a/superset-frontend/src/datasource/DatasourceEditor.test.jsx b/superset-frontend/src/datasource/DatasourceEditor.test.jsx index 247d04a706ffe..2083e6a073d14 100644 --- a/superset-frontend/src/datasource/DatasourceEditor.test.jsx +++ b/superset-frontend/src/datasource/DatasourceEditor.test.jsx @@ -17,12 +17,14 @@ * under the License. */ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow, mount } from 'enzyme'; import configureStore from 'redux-mock-store'; import fetchMock from 'fetch-mock'; import thunk from 'redux-thunk'; +import { Provider } from 'react-redux'; import userEvent from '@testing-library/user-event'; -import { render, screen } from 'spec/helpers/testing-library'; +import { render, screen, waitFor } from 'spec/helpers/testing-library'; +import { supersetTheme, ThemeProvider } from '@superset-ui/core'; import { Radio } from 'src/components/Radio'; @@ -53,13 +55,14 @@ describe('DatasourceEditor', () => { let isFeatureEnabledMock; beforeEach(() => { - el = ; - wrapper = shallow(el).dive(); - inst = wrapper.instance(); - }); - - afterEach(() => { - wrapper.unmount(); + el = ( + + + ; + + + ); + render(el) }); it('is valid', () => { @@ -67,15 +70,18 @@ describe('DatasourceEditor', () => { }); it('renders Tabs', () => { - expect(wrapper.find('#table-tabs')).toExist(); + expect(screen.getByTestId('edit-dataset-tabs')).toBeInTheDocument(); }); it('makes an async request', () => new Promise(done => { - wrapper.setState({ activeTabKey: 2 }); - const syncButton = wrapper.find('.sync-from-source'); - expect(syncButton).toHaveLength(1); - syncButton.simulate('click'); + const columnsTab = screen.getByTestId('collection-tab-Columns'); + + userEvent.click(columnsTab) + const syncButton = screen.getByText(/sync columns from source/i) + expect(syncButton).toBeInTheDocument(); + + userEvent.click(syncButton); setTimeout(() => { expect(fetchMock.calls(DATASOURCE_ENDPOINT)).toHaveLength(1); @@ -85,75 +91,60 @@ describe('DatasourceEditor', () => { })); it('to add, remove and modify columns accordingly', () => { - const columns = [ - { - name: 'ds', - type: 'DATETIME', - nullable: true, - default: '', - primary_key: false, - is_dttm: true, - }, - { - name: 'gender', - type: 'VARCHAR(32)', - nullable: true, - default: '', - primary_key: false, - is_dttm: false, - }, - { - name: 'new_column', - type: 'VARCHAR(10)', - nullable: true, - default: '', - primary_key: false, - is_dttm: false, - }, - ]; - - const numCols = props.datasource.columns.length; - expect(inst.state.databaseColumns).toHaveLength(numCols); - inst.updateColumns(columns); - expect(inst.state.databaseColumns).toEqual( - expect.arrayContaining([ - { - type: 'DATETIME', - description: null, - filterable: false, - verbose_name: null, - is_dttm: true, - expression: '', - groupby: false, - column_name: 'ds', - }, - { - type: 'VARCHAR(32)', - description: null, - filterable: true, - verbose_name: null, - is_dttm: false, - expression: '', - groupby: true, - column_name: 'gender', - }, - expect.objectContaining({ - column_name: 'new_column', - type: 'VARCHAR(10)', - }), - ]), - ); - expect(inst.state.databaseColumns).not.toEqual( - expect.arrayContaining([expect.objectContaining({ name: 'name' })]), - ); + + const columnsTab = screen.getByTestId('collection-tab-Columns'); + userEvent.click(columnsTab) + + const getToggles = screen.getAllByRole('button', { name: /toggle expand/i }); + userEvent.click(getToggles[0]); + // should render text fields + const getTextboxes = screen.getAllByRole('textbox'); + expect(getTextboxes.length).toEqual(5) + + const inputLabel = screen.getByPlaceholderText('Label') + const inputDescription = screen.getByPlaceholderText('Description'); + const inputDtmFormat = screen.getByPlaceholderText('%Y/%m/%d'); + const inputCertifedBy = screen.getAllByPlaceholderText('Certified by') + const inputerCertDetails = screen.getByPlaceholderText('Certification details'); + + waitFor(()=> { + userEvent.type(inputLabel, 'test_lable') + userEvent.type(inputDescription, 'test') + userEvent.type(inputDtmFormat, 'test') + userEvent.type(inputCertifedBy, 'test') + userEvent.type(inputerCertDetails, 'test') + }) + + // test deleting columns + const deleteButtons = screen.getAllByRole('button',{ name: /delete item/i }); + expect(deleteButtons.length).toEqual(7); + userEvent.click(deleteButtons[0]); + const countRows = screen.getAllByRole('button',{ name: /delete item/i }); + expect(countRows.length).toEqual(6); + + // test adding columns + const calcColsTab = screen.getByTestId('collection-tab-Calculated columns') + userEvent.click(calcColsTab) + const addBtn = screen.getByRole('button', { + name: /add item/i + }) + expect(addBtn).toBeInTheDocument(); + userEvent.click(addBtn) + const newColumn = screen.getByRole('button', { + name: //i + }); + expect(newColumn).toBeInTheDocument(); }); it('renders isSqla fields', () => { - wrapper.setState({ activeTabKey: 4 }); - expect(wrapper.state('isSqla')).toBe(true); - expect( - wrapper.find(Field).find({ fieldKey: 'fetch_values_predicate' }).exists(), - ).toBe(true); + const columnsTab = screen.getByRole('tab', { + name: /settings/i + }); + userEvent.click(columnsTab) + const extraField = screen.getAllByText(/extra/i); + expect(extraField.length).toEqual(2); + expect(screen.getByText(/autocomplete query predicate/i)).toBeInTheDocument(); + expect(screen.getByText(/template parameters/i)).toBeInTheDocument(); }); describe('enable edit Source tab', () => { @@ -161,7 +152,6 @@ describe('DatasourceEditor', () => { isFeatureEnabledMock = jest .spyOn(featureFlags, 'isFeatureEnabled') .mockImplementation(() => false); - wrapper = shallow(el, { context: { store } }).dive(); }); afterAll(() => { @@ -169,50 +159,48 @@ describe('DatasourceEditor', () => { }); it('Source Tab: edit mode', () => { - wrapper.setState({ activeTabKey: 0, isEditMode: true }); - const sourceTab = wrapper.find(Tabs.TabPane).first(); - expect(sourceTab.find(Radio).first().prop('disabled')).toBe(false); - - const icon = wrapper.find(Icons.LockUnlocked); - expect(icon).toExist(); - - const tableSelector = sourceTab.find(Field).shallow().find(TableSelector); - expect(tableSelector.length).toBe(1); - expect(tableSelector.prop('readOnly')).toBe(false); + const getLockBtn = screen.getByRole('img', { name: /lock\-locked/i }) + userEvent.click(getLockBtn); + const physicalRadioBtn = screen.getByRole('radio', { + name: /physical \(table or view\)/i + }) + const vituralRadioBtn = screen.getByRole('radio', { + name: /virtual \(sql\)/i + }); + expect(physicalRadioBtn).toBeEnabled(); + expect(vituralRadioBtn).toBeEnabled(); }); it('Source Tab: readOnly mode', () => { - const sourceTab = wrapper.find(Tabs.TabPane).first(); - expect(sourceTab.find(Radio).length).toBe(2); - expect(sourceTab.find(Radio).first().prop('disabled')).toBe(true); - - const icon = wrapper.find(Icons.LockLocked); - expect(icon).toExist(); - icon.parent().simulate('click'); - expect(wrapper.state('isEditMode')).toBe(true); - - const tableSelector = sourceTab.find(Field).shallow().find(TableSelector); - expect(tableSelector.length).toBe(1); - expect(tableSelector.prop('readOnly')).toBe(true); + const getLockBtn = screen.getByRole('img', { name: /lock\-locked/i }) + expect(getLockBtn).toBeInTheDocument(); + const physicalRadioBtn = screen.getByRole('radio', { + name: /physical \(table or view\)/i + }) + const vituralRadioBtn = screen.getByRole('radio', { + name: /virtual \(sql\)/i + }); + expect(physicalRadioBtn).toBeDisabled(); + expect(vituralRadioBtn).toBeDisabled(); }); }); - it('disable edit Source tab', () => { - // when edit is disabled, show readOnly controls and no padlock - isFeatureEnabledMock = jest - .spyOn(featureFlags, 'isFeatureEnabled') - .mockImplementation(() => true); - wrapper = shallow(el, { context: { store } }).dive(); - wrapper.setState({ activeTabKey: 0 }); - - const sourceTab = wrapper.find(Tabs.TabPane).first(); - expect(sourceTab.find(Radio).length).toBe(2); - expect(sourceTab.find(Radio).first().prop('disabled')).toBe(true); + describe('render editor with feature flag false', () => { + beforeAll(() => { + isFeatureEnabledMock = jest + .spyOn(featureFlags, 'isFeatureEnabled') + .mockImplementation(() => true); + }); - const icon = sourceTab.find(Icons.LockLocked); - expect(icon).toHaveLength(0); + beforeEach(() => { + render(el); + }); - isFeatureEnabledMock.mockRestore(); + it('disable edit Source tab', () => { + screen.logTestingPlaygroundURL(); + expect(screen.queryByRole('img', { name: /lock\-locked/i })).not.toBeInTheDocument(); + isFeatureEnabledMock.mockRestore(); + }); }); }); @@ -229,7 +217,7 @@ describe('DatasourceEditor RTL', () => { expect(certificationDetails.value).toEqual('foo'); const warningMarkdown = await await screen.findByPlaceholderText( /certified by/i, - ); + ); expect(warningMarkdown.value).toEqual('someone'); }); it('properly updates the metric information', async () => { From f896888da54a4b80a4100241fc051b12d90f263c Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Wed, 20 Oct 2021 21:33:41 -0700 Subject: [PATCH 3/9] lint fix --- .../src/datasource/DatasourceEditor.test.jsx | 96 +++++++++---------- 1 file changed, 47 insertions(+), 49 deletions(-) diff --git a/superset-frontend/src/datasource/DatasourceEditor.test.jsx b/superset-frontend/src/datasource/DatasourceEditor.test.jsx index 2083e6a073d14..fdbe5e2192858 100644 --- a/superset-frontend/src/datasource/DatasourceEditor.test.jsx +++ b/superset-frontend/src/datasource/DatasourceEditor.test.jsx @@ -17,7 +17,6 @@ * under the License. */ import React from 'react'; -import { shallow, mount } from 'enzyme'; import configureStore from 'redux-mock-store'; import fetchMock from 'fetch-mock'; import thunk from 'redux-thunk'; @@ -25,16 +24,9 @@ import { Provider } from 'react-redux'; import userEvent from '@testing-library/user-event'; import { render, screen, waitFor } from 'spec/helpers/testing-library'; import { supersetTheme, ThemeProvider } from '@superset-ui/core'; - -import { Radio } from 'src/components/Radio'; - -import Icons from 'src/components/Icons'; -import Tabs from 'src/components/Tabs'; import DatasourceEditor from 'src/datasource/DatasourceEditor'; -import Field from 'src/CRUD/Field'; import mockDatasource from 'spec/fixtures/mockDatasource'; import * as featureFlags from 'src/featureFlags'; -import TableSelector from 'src/components/TableSelector'; const props = { datasource: mockDatasource['7__table'], @@ -49,9 +41,7 @@ describe('DatasourceEditor', () => { const store = mockStore({}); fetchMock.get(DATASOURCE_ENDPOINT, []); - let wrapper; let el; - let inst; let isFeatureEnabledMock; beforeEach(() => { @@ -62,7 +52,7 @@ describe('DatasourceEditor', () => { ); - render(el) + render(el); }); it('is valid', () => { @@ -77,8 +67,8 @@ describe('DatasourceEditor', () => { new Promise(done => { const columnsTab = screen.getByTestId('collection-tab-Columns'); - userEvent.click(columnsTab) - const syncButton = screen.getByText(/sync columns from source/i) + userEvent.click(columnsTab); + const syncButton = screen.getByText(/sync columns from source/i); expect(syncButton).toBeInTheDocument(); userEvent.click(syncButton); @@ -91,59 +81,66 @@ describe('DatasourceEditor', () => { })); it('to add, remove and modify columns accordingly', () => { - const columnsTab = screen.getByTestId('collection-tab-Columns'); - userEvent.click(columnsTab) + userEvent.click(columnsTab); - const getToggles = screen.getAllByRole('button', { name: /toggle expand/i }); + const getToggles = screen.getAllByRole('button', { + name: /toggle expand/i, + }); userEvent.click(getToggles[0]); // should render text fields const getTextboxes = screen.getAllByRole('textbox'); - expect(getTextboxes.length).toEqual(5) + expect(getTextboxes.length).toEqual(5); - const inputLabel = screen.getByPlaceholderText('Label') + const inputLabel = screen.getByPlaceholderText('Label'); const inputDescription = screen.getByPlaceholderText('Description'); const inputDtmFormat = screen.getByPlaceholderText('%Y/%m/%d'); - const inputCertifedBy = screen.getAllByPlaceholderText('Certified by') - const inputerCertDetails = screen.getByPlaceholderText('Certification details'); + const inputCertifedBy = screen.getAllByPlaceholderText('Certified by'); + const inputerCertDetails = screen.getByPlaceholderText( + 'Certification details', + ); - waitFor(()=> { - userEvent.type(inputLabel, 'test_lable') - userEvent.type(inputDescription, 'test') - userEvent.type(inputDtmFormat, 'test') - userEvent.type(inputCertifedBy, 'test') - userEvent.type(inputerCertDetails, 'test') - }) + waitFor(() => { + userEvent.type(inputLabel, 'test_lable'); + userEvent.type(inputDescription, 'test'); + userEvent.type(inputDtmFormat, 'test'); + userEvent.type(inputCertifedBy, 'test'); + userEvent.type(inputerCertDetails, 'test'); + }); // test deleting columns - const deleteButtons = screen.getAllByRole('button',{ name: /delete item/i }); + const deleteButtons = screen.getAllByRole('button', { + name: /delete item/i, + }); expect(deleteButtons.length).toEqual(7); userEvent.click(deleteButtons[0]); - const countRows = screen.getAllByRole('button',{ name: /delete item/i }); + const countRows = screen.getAllByRole('button', { name: /delete item/i }); expect(countRows.length).toEqual(6); // test adding columns - const calcColsTab = screen.getByTestId('collection-tab-Calculated columns') - userEvent.click(calcColsTab) + const calcColsTab = screen.getByTestId('collection-tab-Calculated columns'); + userEvent.click(calcColsTab); const addBtn = screen.getByRole('button', { - name: /add item/i - }) + name: /add item/i, + }); expect(addBtn).toBeInTheDocument(); - userEvent.click(addBtn) + userEvent.click(addBtn); const newColumn = screen.getByRole('button', { - name: //i + name: //i, }); expect(newColumn).toBeInTheDocument(); }); it('renders isSqla fields', () => { const columnsTab = screen.getByRole('tab', { - name: /settings/i + name: /settings/i, }); - userEvent.click(columnsTab) + userEvent.click(columnsTab); const extraField = screen.getAllByText(/extra/i); expect(extraField.length).toEqual(2); - expect(screen.getByText(/autocomplete query predicate/i)).toBeInTheDocument(); + expect( + screen.getByText(/autocomplete query predicate/i), + ).toBeInTheDocument(); expect(screen.getByText(/template parameters/i)).toBeInTheDocument(); }); @@ -159,26 +156,26 @@ describe('DatasourceEditor', () => { }); it('Source Tab: edit mode', () => { - const getLockBtn = screen.getByRole('img', { name: /lock\-locked/i }) + const getLockBtn = screen.getByRole('img', { name: /lock-locked/i }); userEvent.click(getLockBtn); const physicalRadioBtn = screen.getByRole('radio', { - name: /physical \(table or view\)/i - }) + name: /physical \(table or view\)/i, + }); const vituralRadioBtn = screen.getByRole('radio', { - name: /virtual \(sql\)/i + name: /virtual \(sql\)/i, }); expect(physicalRadioBtn).toBeEnabled(); expect(vituralRadioBtn).toBeEnabled(); }); it('Source Tab: readOnly mode', () => { - const getLockBtn = screen.getByRole('img', { name: /lock\-locked/i }) + const getLockBtn = screen.getByRole('img', { name: /lock-locked/i }); expect(getLockBtn).toBeInTheDocument(); const physicalRadioBtn = screen.getByRole('radio', { - name: /physical \(table or view\)/i - }) + name: /physical \(table or view\)/i, + }); const vituralRadioBtn = screen.getByRole('radio', { - name: /virtual \(sql\)/i + name: /virtual \(sql\)/i, }); expect(physicalRadioBtn).toBeDisabled(); expect(vituralRadioBtn).toBeDisabled(); @@ -197,8 +194,9 @@ describe('DatasourceEditor', () => { }); it('disable edit Source tab', () => { - screen.logTestingPlaygroundURL(); - expect(screen.queryByRole('img', { name: /lock\-locked/i })).not.toBeInTheDocument(); + expect( + screen.queryByRole('img', { name: /lock-locked/i }), + ).not.toBeInTheDocument(); isFeatureEnabledMock.mockRestore(); }); }); @@ -217,7 +215,7 @@ describe('DatasourceEditor RTL', () => { expect(certificationDetails.value).toEqual('foo'); const warningMarkdown = await await screen.findByPlaceholderText( /certified by/i, - ); + ); expect(warningMarkdown.value).toEqual('someone'); }); it('properly updates the metric information', async () => { From a99f899128bdb74bad871e67c479fe03b3614cd6 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Wed, 20 Oct 2021 22:08:43 -0700 Subject: [PATCH 4/9] remove file --- superset-frontend/src/graphqUtils.ts | 50 ---------------------------- 1 file changed, 50 deletions(-) delete mode 100644 superset-frontend/src/graphqUtils.ts diff --git a/superset-frontend/src/graphqUtils.ts b/superset-frontend/src/graphqUtils.ts deleted file mode 100644 index 82a3df5cb7cb3..0000000000000 --- a/superset-frontend/src/graphqUtils.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { useEffect, useState } from 'react'; - -export const useGraphQlEndpoint = ( - method /* resource, method, data, query */, -) => { - const [state, setState] = useState({}); - - /* function updateState(update) { - setSTATE - } */ - const getResource = async () => { - let res; - try { - // eventually replace with resource - const response = await fetch('/graphql', { - method, - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - query: ` - query { - database(databaseId: 1){ - database{ - name - backend - configuration_method - } - } - } - `, - }), - }); - console.log('response', response); - res = await response.json(); - setState({ res }); - console.log('res', res); - // return response; - } catch (error) { - console.log('error', error); - } - }; - useEffect(() => { - getResource(); - }, []); - - return { - response: state.res, - }; -}; From 04216ee15397e53ec6bfc6134a9c7e53c0e9258d Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Wed, 20 Oct 2021 22:30:27 -0700 Subject: [PATCH 5/9] fix import --- .../src/components/Datasource/DatasourceEditor.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx index fdbe5e2192858..ea10e4d25c266 100644 --- a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx +++ b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx @@ -24,7 +24,7 @@ import { Provider } from 'react-redux'; import userEvent from '@testing-library/user-event'; import { render, screen, waitFor } from 'spec/helpers/testing-library'; import { supersetTheme, ThemeProvider } from '@superset-ui/core'; -import DatasourceEditor from 'src/datasource/DatasourceEditor'; +import DatasourceEditor from 'src/components/Datasource/DatasourceEditor'; import mockDatasource from 'spec/fixtures/mockDatasource'; import * as featureFlags from 'src/featureFlags'; From d98e74572a64e1e8fc4e0312eae9bf4734834958 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Thu, 21 Oct 2021 08:41:59 -0700 Subject: [PATCH 6/9] fix test --- .../Datasource/DatasourceEditor.test.jsx | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx index ea10e4d25c266..6036351fac89d 100644 --- a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx +++ b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx @@ -80,7 +80,7 @@ describe('DatasourceEditor', () => { }, 0); })); - it('to add, remove and modify columns accordingly', () => { + it('to add, remove and modify columns accordingly', async () => { const columnsTab = screen.getByTestId('collection-tab-Columns'); userEvent.click(columnsTab); @@ -95,18 +95,16 @@ describe('DatasourceEditor', () => { const inputLabel = screen.getByPlaceholderText('Label'); const inputDescription = screen.getByPlaceholderText('Description'); const inputDtmFormat = screen.getByPlaceholderText('%Y/%m/%d'); - const inputCertifedBy = screen.getAllByPlaceholderText('Certified by'); - const inputerCertDetails = screen.getByPlaceholderText( + const inputCertifiedBy = screen.getByPlaceholderText('Certified by'); + const inputCertDetails = screen.getByPlaceholderText( 'Certification details', ); - waitFor(() => { - userEvent.type(inputLabel, 'test_lable'); - userEvent.type(inputDescription, 'test'); - userEvent.type(inputDtmFormat, 'test'); - userEvent.type(inputCertifedBy, 'test'); - userEvent.type(inputerCertDetails, 'test'); - }); + userEvent.type(await inputLabel, 'test_lable'); + userEvent.type(await inputDescription, 'test'); + userEvent.type(await inputDtmFormat, 'test'); + userEvent.type(await inputCertifiedBy, 'test'); + userEvent.type(await inputCertDetails, 'test'); // test deleting columns const deleteButtons = screen.getAllByRole('button', { @@ -213,9 +211,7 @@ describe('DatasourceEditor RTL', () => { /certification details/i, ); expect(certificationDetails.value).toEqual('foo'); - const warningMarkdown = await await screen.findByPlaceholderText( - /certified by/i, - ); + const warningMarkdown = await screen.findByPlaceholderText(/certified by/i); expect(warningMarkdown.value).toEqual('someone'); }); it('properly updates the metric information', async () => { From 346accee32c6b4faa3f0f1560038ed02a1d091e8 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Thu, 21 Oct 2021 09:13:32 -0700 Subject: [PATCH 7/9] fix lint --- .../src/components/Datasource/DatasourceEditor.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx index 6036351fac89d..e7d808d17a91d 100644 --- a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx +++ b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx @@ -22,7 +22,7 @@ import fetchMock from 'fetch-mock'; import thunk from 'redux-thunk'; import { Provider } from 'react-redux'; import userEvent from '@testing-library/user-event'; -import { render, screen, waitFor } from 'spec/helpers/testing-library'; +import { render, screen } from 'spec/helpers/testing-library'; import { supersetTheme, ThemeProvider } from '@superset-ui/core'; import DatasourceEditor from 'src/components/Datasource/DatasourceEditor'; import mockDatasource from 'spec/fixtures/mockDatasource'; From 1ff2cd7e5092c9ebc192542c1614578889a3e8b9 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Mon, 25 Oct 2021 18:07:57 -0700 Subject: [PATCH 8/9] spread tests and remove unused code --- .../Datasource/DatasourceEditor.test.jsx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx index e7d808d17a91d..3d9e9d44c47d5 100644 --- a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx +++ b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx @@ -19,11 +19,8 @@ import React from 'react'; import configureStore from 'redux-mock-store'; import fetchMock from 'fetch-mock'; -import thunk from 'redux-thunk'; -import { Provider } from 'react-redux'; import userEvent from '@testing-library/user-event'; import { render, screen } from 'spec/helpers/testing-library'; -import { supersetTheme, ThemeProvider } from '@superset-ui/core'; import DatasourceEditor from 'src/components/Datasource/DatasourceEditor'; import mockDatasource from 'spec/fixtures/mockDatasource'; import * as featureFlags from 'src/featureFlags'; @@ -37,22 +34,14 @@ const props = { const DATASOURCE_ENDPOINT = 'glob:*/datasource/external_metadata_by_name/*'; describe('DatasourceEditor', () => { - const mockStore = configureStore([thunk]); - const store = mockStore({}); fetchMock.get(DATASOURCE_ENDPOINT, []); let el; let isFeatureEnabledMock; beforeEach(() => { - el = ( - - - ; - - - ); - render(el); + el = ; + render(el, { useRedux: true }); }); it('is valid', () => { @@ -80,7 +69,8 @@ describe('DatasourceEditor', () => { }, 0); })); - it('to add, remove and modify columns accordingly', async () => { + // to add, remove and modify columns accordingly + it('can modify columns', async () => { const columnsTab = screen.getByTestId('collection-tab-Columns'); userEvent.click(columnsTab); @@ -88,7 +78,6 @@ describe('DatasourceEditor', () => { name: /toggle expand/i, }); userEvent.click(getToggles[0]); - // should render text fields const getTextboxes = screen.getAllByRole('textbox'); expect(getTextboxes.length).toEqual(5); @@ -105,8 +94,18 @@ describe('DatasourceEditor', () => { userEvent.type(await inputDtmFormat, 'test'); userEvent.type(await inputCertifiedBy, 'test'); userEvent.type(await inputCertDetails, 'test'); + }); + + it('can delete columns', async () => { + const columnsTab = screen.getByTestId('collection-tab-Columns'); + userEvent.click(columnsTab); - // test deleting columns + const getToggles = screen.getAllByRole('button', { + name: /toggle expand/i, + }); + + userEvent.click(getToggles[0]); + screen.logTestingPlaygroundURL(); const deleteButtons = screen.getAllByRole('button', { name: /delete item/i, }); @@ -114,8 +113,9 @@ describe('DatasourceEditor', () => { userEvent.click(deleteButtons[0]); const countRows = screen.getAllByRole('button', { name: /delete item/i }); expect(countRows.length).toEqual(6); + }); - // test adding columns + it('can delete columns', async () => { const calcColsTab = screen.getByTestId('collection-tab-Calculated columns'); userEvent.click(calcColsTab); const addBtn = screen.getByRole('button', { @@ -188,7 +188,7 @@ describe('DatasourceEditor', () => { }); beforeEach(() => { - render(el); + render(el, { useRedux: true }); }); it('disable edit Source tab', () => { From 23c5ed3794fea43c36dfc5d233922adc57186bf8 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Mon, 25 Oct 2021 18:14:32 -0700 Subject: [PATCH 9/9] fix lint --- .../src/components/Datasource/DatasourceEditor.test.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx index 3d9e9d44c47d5..a0d46a6f1ac0b 100644 --- a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx +++ b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx @@ -17,7 +17,6 @@ * under the License. */ import React from 'react'; -import configureStore from 'redux-mock-store'; import fetchMock from 'fetch-mock'; import userEvent from '@testing-library/user-event'; import { render, screen } from 'spec/helpers/testing-library'; @@ -115,7 +114,7 @@ describe('DatasourceEditor', () => { expect(countRows.length).toEqual(6); }); - it('can delete columns', async () => { + it('can add new columns', async () => { const calcColsTab = screen.getByTestId('collection-tab-Calculated columns'); userEvent.click(calcColsTab); const addBtn = screen.getByRole('button', {