eschutho commented on a change in pull request #13877:
URL: https://github.com/apache/superset/pull/13877#discussion_r605185200
##########
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
Review comment:
Are the comments still aligned with the code? This says unchecked, while
the assertion below is checked.
--
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]
