[GitHub] [superset] AAfghahi commented on a change in pull request #13102: refactor: Query search into functional component

[GitBox <gi...@apache.org>]

AAfghahi commented on a change in pull request #13102:
URL: https://github.com/apache/superset/pull/13102#discussion_r584025275



##########
File path: superset-frontend/spec/javascripts/sqllab/QuerySearch_spec.jsx
##########
@@ -17,77 +17,121 @@
  * under the License.
  */
 import React from 'react';
-import Button from 'src/components/Button';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
+import thunk from 'redux-thunk';
+import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
-import Select from 'src/components/Select';
 import QuerySearch from 'src/SqlLab/components/QuerySearch';
+import { Provider } from 'react-redux';
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import { fireEvent, render, screen, act } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+
+const mockStore = configureStore([thunk]);
+const store = mockStore({});
 
 const SEARCH_ENDPOINT = 'glob:*/superset/search_queries?*';
+const USER_ENDPOINT = 'glob:*/api/v1/query/related/user';
+const DATABASE_ENDPOINT = 'glob:*/api/v1/database/?*';
 
 fetchMock.get(SEARCH_ENDPOINT, []);
+fetchMock.get(USER_ENDPOINT, []);
+fetchMock.get(DATABASE_ENDPOINT, []);
 
 describe('QuerySearch', () => {
-  const search = sinon.spy(QuerySearch.prototype, 'refreshQueries');
   const mockedProps = {
     actions: { addDangerToast: jest.fn() },
-    height: 0,
     displayLimit: 50,
   };
+
   it('is valid', () => {
-    expect(React.isValidElement(<QuerySearch {...mockedProps} />)).toBe(true);
+    expect(
+      React.isValidElement(
+        <ThemeProvider theme={supersetTheme}>
+          <Provider store={store}>
+            <QuerySearch {...mockedProps} />
+          </Provider>
+        </ThemeProvider>,
+      ),
+    ).toBe(true);
   });
-  let wrapper;
-  beforeEach(() => {
-    wrapper = shallow(<QuerySearch {...mockedProps} />);
+
+  beforeEach(async () => {
+    // You need this await function in order to change state in the app. In fact you need it everytime you re-render.
+    await act(async () => {
+      render(
+        <ThemeProvider theme={supersetTheme}>
+          <Provider store={store}>
+            <QuerySearch {...mockedProps} />
+          </Provider>
+        </ThemeProvider>,
+      );
+    });
   });
 
-  it('should have three Select', () => {
-    expect(wrapper.findWhere(x => x.type() === Select)).toHaveLength(3);
+  it('should have three Selects', () => {
+    expect(screen.getByText(/28 days ago/i)).toBeInTheDocument();
+    expect(screen.getByText(/now/i)).toBeInTheDocument();
+    expect(screen.getByText(/success/i)).toBeInTheDocument();
   });
 
-  it('updates fromTime on user selects from time', () => {
-    wrapper.find('[name="select-from"]').simulate('change', { value: 0 });
-    expect(wrapper.state().from).toBe(0);
+  it('updates fromTime on user selects from time', async () => {

Review comment:
       you don't need it for the test to pass, but without them the console throws a console warning and tells you to do it. 




----------------------------------------------------------------
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:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org