From 83d990db4f799d4ebf11f23f4d9239945cc552f4 Mon Sep 17 00:00:00 2001
From: Corbin Robb <31329271+corbinrobb@users.noreply.github.com>
Date: Thu, 17 Nov 2022 11:10:13 -0700
Subject: [PATCH] test(sqllab): Convert tests to RTL for SqlEditor (#22093)

---
 .../components/SqlEditor/SqlEditor.test.jsx   | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
index c632624838..2534a2759e 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx
@@ -33,13 +33,11 @@ import AceEditorWrapper from 'src/SqlLab/components/AceEditorWrapper';
 import ConnectedSouthPane from 'src/SqlLab/components/SouthPane/state';
 import SqlEditor from 'src/SqlLab/components/SqlEditor';
 import QueryProvider from 'src/views/QueryProvider';
-import { AntdDropdown } from 'src/components';
 import {
   queryEditorSetFunctionNames,
   queryEditorSetSelectedText,
   queryEditorSetSchemaOptions,
 } from 'src/SqlLab/actions/sqlLab';
-import { EmptyStateBig } from 'src/components/EmptyState';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import {
   initialState,
@@ -130,11 +128,12 @@ describe('SqlEditor', () => {
       },
     );
 
-  it('does not render SqlEditor if no db selected', () => {
+  it('does not render SqlEditor if no db selected', async () => {
     const queryEditor = initialState.sqlLab.queryEditors[1];
-    const updatedProps = { ...mockedProps, queryEditor };
-    const wrapper = buildWrapper(updatedProps);
-    expect(wrapper.find(EmptyStateBig)).toExist();
+    const { findByText } = setup({ ...mockedProps, queryEditor }, store);
+    expect(
+      await findByText('Select a database to write a query'),
+    ).toBeInTheDocument();
   });
 
   it('render a SqlEditorLeftBar', async () => {
@@ -145,14 +144,13 @@ describe('SqlEditor', () => {
   });
 
   it('render an AceEditorWrapper', async () => {
-    const wrapper = buildWrapper();
-    await waitForComponentToPaint(wrapper);
-    expect(wrapper.find(AceEditorWrapper)).toExist();
+    const { findByTestId } = setup(mockedProps, store);
+    expect(await findByTestId('react-ace')).toBeInTheDocument();
   });
 
-  it('renders sql from unsaved change', () => {
+  it('renders sql from unsaved change', async () => {
     const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE';
-    const { getByTestId } = setup(
+    const { findByTestId } = setup(
       mockedProps,
       mockStore({
         ...initialState,
@@ -181,15 +179,16 @@ describe('SqlEditor', () => {
       }),
     );
 
-    expect(getByTestId('react-ace')).toHaveTextContent(
+    expect(await findByTestId('react-ace')).toHaveTextContent(
       JSON.stringify({ value: expectedSql }).slice(1, -1),
     );
   });
 
   it('render a SouthPane', async () => {
-    const wrapper = buildWrapper();
-    await waitForComponentToPaint(wrapper);
-    expect(wrapper.find(ConnectedSouthPane)).toExist();
+    const { findByText } = setup(mockedProps, store);
+    expect(
+      await findByText(/run a query to display results/i),
+    ).toBeInTheDocument();
   });
 
   it('runs query action with ctas false', async () => {
@@ -263,8 +262,8 @@ describe('SqlEditor', () => {
   it('render a Limit Dropdown', async () => {
     const defaultQueryLimit = 101;
     const updatedProps = { ...mockedProps, defaultQueryLimit };
-    const wrapper = buildWrapper(updatedProps);
-    await waitForComponentToPaint(wrapper);
-    expect(wrapper.find(AntdDropdown)).toExist();
+    const { findByText } = setup(updatedProps, store);
+    fireEvent.click(await findByText('LIMIT:'));
+    expect(await findByText('10 000')).toBeInTheDocument();
   });
 });