eschutho commented on a change in pull request #13877:
URL: https://github.com/apache/superset/pull/13877#discussion_r605186188
##########
File path:
superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx
##########
@@ -19,71 +19,243 @@
import React from 'react';
import thunk from 'redux-thunk';
import configureStore from 'redux-mock-store';
+import * as redux from 'react-redux';
import { styledMount as mount } from 'spec/helpers/theming';
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import { Provider } from 'react-redux';
import DatabaseModal from 'src/views/CRUD/data/database/DatabaseModal';
import Modal from 'src/common/components/Modal';
import Tabs from 'src/common/components/Tabs';
import fetchMock from 'fetch-mock';
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
+import { initialState } from 'spec/javascripts/sqllab/fixtures';
// store needed for withToasts(DatabaseModal)
const mockStore = configureStore([thunk]);
const store = mockStore({});
-
const mockedProps = {
show: true,
};
-
const dbProps = {
show: true,
database: {
id: 10,
database_name: 'test',
sqlalchemy_uri: 'sqllite:///user:pw/test',
+ expose_in_sqllab: true,
},
};
-jest.mock('react-redux', () => ({
- ...jest.requireActual('react-redux'),
- useSelector: jest.fn(),
-}));
-
const DATABASE_ENDPOINT = 'glob:*/api/v1/database/*';
-
fetchMock.get(DATABASE_ENDPOINT, {});
describe('DatabaseModal', () => {
- const wrapper = mount(<DatabaseModal store={store} {...mockedProps} />);
-
- it('renders', () => {
- expect(wrapper.find(DatabaseModal)).toExist();
+ describe('enzyme', () => {
+ let wrapper;
+ let spyOnUseSelector;
+ beforeAll(() => {
+ spyOnUseSelector = jest.spyOn(redux, 'useSelector');
+ spyOnUseSelector.mockReturnValue(initialState.common.conf);
+ });
+ beforeEach(() => {
+ wrapper = mount(
+ <Provider store={store}>
+ <DatabaseModal store={store} {...mockedProps} />
+ </Provider>,
+ );
+ });
+ afterEach(() => {
+ wrapper.unmount();
+ });
+ it('renders', () => {
+ expect(wrapper.find(DatabaseModal)).toExist();
+ });
+ it('renders a Modal', () => {
+ expect(wrapper.find(Modal)).toExist();
+ });
+ it('renders "Add database" header when no database is included', () => {
+ expect(wrapper.find('h4').text()).toEqual('Add database');
+ });
+ it('renders "Edit database" header when database prop is included', () => {
+ const editWrapper = mount(<DatabaseModal store={store} {...dbProps} />);
+ waitForComponentToPaint(editWrapper);
+ expect(editWrapper.find('h4').text()).toEqual('Edit database');
+ editWrapper.unmount();
+ });
+ it('renders a Tabs menu', () => {
+ expect(wrapper.find(Tabs)).toExist();
+ });
+ it('renders five TabPanes', () => {
+ expect(wrapper.find(Tabs.TabPane)).toExist();
+ expect(wrapper.find(Tabs.TabPane)).toHaveLength(5);
+ });
+ it('renders input elements for Connection section', () => {
+ expect(wrapper.find('input[name="database_name"]')).toExist();
+ expect(wrapper.find('input[name="sqlalchemy_uri"]')).toExist();
+ });
});
- it('renders a Modal', () => {
- expect(wrapper.find(Modal)).toExist();
- });
+ describe('RTL', () => {
+ describe('initial load', () => {
+ it('hides the forms from the db when not selected', () => {
+ render(
+ <ThemeProvider theme={supersetTheme}>
+ <Provider store={store}>
+ <DatabaseModal
+ show
+ database={{
+ expose_in_sqllab: false,
+ allow_ctas: false,
+ allow_cvas: false,
+ }}
+ />
+ </Provider>
+ </ThemeProvider>,
+ );
+ // Select SQL Lab settings tab
+ const sqlLabSettingsTab = screen.getByRole('tab', {
+ name: /sql lab settings/i,
+ });
+ userEvent.click(sqlLabSettingsTab);
- it('renders "Add database" header when no database is included', () => {
- expect(wrapper.find('h4').text()).toEqual('Add database');
- });
+ const exposeInSqlLab = screen.getByText('Expose in SQL Lab');
+ const exposeChoicesForm = exposeInSqlLab.parentElement.nextSibling;
+ const schemaField = screen.getByText('CTAS & CVAS SCHEMA')
+ .parentElement;
+ expect(exposeChoicesForm).not.toHaveClass('open');
+ expect(schemaField).not.toHaveClass('open');
+ });
+ });
+ it('renders all settings when "Expose in SQL Lab" is checked', () => {
+ render(
+ <ThemeProvider theme={supersetTheme}>
+ <Provider store={store}>
+ <DatabaseModal {...dbProps} />
+ </Provider>
+ </ThemeProvider>,
+ );
- it('renders "Edit database" header when database prop is included', () => {
- const editWrapper = mount(<DatabaseModal store={store} {...dbProps} />);
- waitForComponentToPaint(editWrapper);
- expect(editWrapper.find('h4').text()).toEqual('Edit database');
- });
+ // Select SQL Lab settings tab
+ const sqlLabSettingsTab = screen.getByRole('tab', {
+ name: /sql lab settings/i,
+ });
- it('renders a Tabs menu', () => {
- expect(wrapper.find(Tabs)).toExist();
- });
+ userEvent.click(sqlLabSettingsTab);
+ // Grab all SQL Lab Settings by their labels
+ // const exposeInSqlLab = screen.getByText('Expose in SQL Lab');
+ const exposeInSqlLab = screen.getByRole('checkbox', {
+ name: /expose in sql lab/i,
+ });
- it('renders five TabPanes', () => {
- expect(wrapper.find(Tabs.TabPane)).toExist();
- expect(wrapper.find(Tabs.TabPane)).toHaveLength(5);
- });
+ // While 'Expose in SQL Lab' is checked, all settings should display
+ expect(exposeInSqlLab).not.toBeChecked();
+
+ // When clicked, "Expose in SQL Lab" becomes unchecked
+ userEvent.click(exposeInSqlLab);
+
+ // While unchecked, only "Expose in SQL Lab" should display
+ expect(exposeInSqlLab).toBeChecked();
+ const checkboxes = screen
+ .getAllByRole('checkbox')
+ .filter(checkbox => !checkbox.checked);
+
+ // While checked make sure all checkboxes are showing
+ expect(checkboxes.length).toEqual(4);
+ });
+
+ it('renders the schema field when allowCTAS is checked', () => {
+ render(
+ <ThemeProvider theme={supersetTheme}>
+ <Provider store={store}>
+ <DatabaseModal {...dbProps} />
+ </Provider>
+ </ThemeProvider>,
+ );
+
+ // Select SQL Lab settings tab
+ const sqlLabSettingsTab = screen.getByRole('tab', {
+ name: /sql lab settings/i,
+ });
+ userEvent.click(sqlLabSettingsTab);
+ // Grab CTAS & schema field by their labels
+ const allowCTAS = screen.getByLabelText('Allow CREATE TABLE AS');
+ const schemaField = screen.getByText('CTAS & CVAS SCHEMA').parentElement;
+
+ // While CTAS & CVAS are unchecked, schema field is not visible
+ expect(schemaField).not.toHaveClass('open');
+
+ // Check "Allow CTAS" to reveal schema field
+ userEvent.click(allowCTAS);
+ expect(schemaField).toHaveClass('open');
+
+ // Uncheck "Allow CTAS" to hide schema field again
+ userEvent.click(allowCTAS);
+ expect(schemaField).not.toHaveClass('open');
+ });
+
+ it('renders the schema field when allowCVAS is checked', () => {
+ render(
+ <ThemeProvider theme={supersetTheme}>
+ <Provider store={store}>
+ <DatabaseModal {...dbProps} />
+ </Provider>
+ </ThemeProvider>,
+ );
+
+ // Select SQL Lab settings tab
+ const sqlLabSettingsTab = screen.getByRole('tab', {
+ name: /sql lab settings/i,
+ });
+ userEvent.click(sqlLabSettingsTab);
+ // Grab CVAS by it's label & schema field
+ const allowCVAS = screen.getByText('Allow CREATE VIEW AS');
+ const schemaField = screen.getByText('CTAS & CVAS SCHEMA').parentElement;
+
+ // While CTAS & CVAS are unchecked, schema field is not visible
+ expect(schemaField).not.toHaveClass('open');
+
+ // Check "Allow CVAS" to reveal schema field
+ userEvent.click(allowCVAS);
+ expect(schemaField).toHaveClass('open');
+
+ // Uncheck "Allow CVAS" to hide schema field again
+ userEvent.click(allowCVAS);
+ expect(schemaField).not.toHaveClass('open');
+ });
+
+ it('renders the schema field when both allowCTAS and allowCVAS are
checked', () => {
+ render(
+ <ThemeProvider theme={supersetTheme}>
+ <Provider store={store}>
+ <DatabaseModal {...dbProps} />
+ </Provider>
+ </ThemeProvider>,
+ );
+
+ // Select SQL Lab settings tab
+ const sqlLabSettingsTab = screen.getByRole('tab', {
+ name: /sql lab settings/i,
+ });
+ userEvent.click(sqlLabSettingsTab);
+ // Grab CTAS and CVAS by their labels, & schema field
+ const allowCTAS = screen.getByText('Allow CREATE TABLE AS');
+ const allowCVAS = screen.getByText('Allow CREATE VIEW AS');
+ const schemaField = screen.getByText('CTAS & CVAS SCHEMA').parentElement;
+
+ // While CTAS & CVAS are unchecked, schema field is not visible
+ expect(schemaField).not.toHaveClass('open');
- it('renders input elements for Connection section', () => {
- expect(wrapper.find('input[name="database_name"]')).toExist();
- expect(wrapper.find('input[name="sqlalchemy_uri"]')).toExist();
+ // Check both "Allow CTAS" and "Allow CVAS" to reveal schema field
+ userEvent.click(allowCTAS);
+ userEvent.click(allowCVAS);
+ expect(schemaField).toHaveClass('open');
+ // Uncheck both "Allow CTAS" and "Allow CVAS" to hide schema field again
+ userEvent.click(allowCTAS);
+ // Both checkboxes go unchecked, so the field should no longer render
+ userEvent.click(allowCVAS);
Review comment:
nit, but I would move this up a line with the other click to be more in
line with the comments.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
