refactor: Changes the DatabaseSelector and TableSelector to use the new Select component (#16483)

superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx

@@ -26,11 +26,11 @@ import DatabaseSelector from '.';
 const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
 
 const createProps = () => ({
-  dbId: 1,
+  db: { id: 1, database_name: 'test', backend: 'test-postgresql' },
   formMode: false,
   isDatabaseSelectEnabled: true,
   readOnly: false,
-  schema: 'public',
+  schema: undefined,
   sqlLabMode: true,
   getDbList: jest.fn(),
   getTableList: jest.fn(),
@@ -57,9 +57,9 @@ beforeEach(() => {
       }
       return {
         json: {
-          count: 1,
+          count: 2,
           description_columns: {},
-          ids: [1],
+          ids: [1, 2],
           label_columns: {
             allow_csv_upload: 'Allow Csv Upload',
             allow_ctas: 'Allow Ctas',
@@ -129,12 +129,32 @@ beforeEach(() => {
               changed_on: '2021-03-09T19:02:07.141095',
               changed_on_delta_humanized: 'a day ago',
               created_by: null,
-              database_name: 'examples',
+              database_name: 'test-postgres',
               explore_database_id: 1,
               expose_in_sqllab: true,
               force_ctas_schema: null,
               id: 1,
             },
+            {
+              allow_csv_upload: false,
+              allow_ctas: false,
+              allow_cvas: false,
+              allow_dml: false,
+              allow_multi_schema_metadata_fetch: false,
+              allow_run_async: false,
+              allows_cost_estimate: null,
+              allows_subquery: true,
+              allows_virtual_table_explore: true,
+              backend: 'mysql',
+              changed_on: '2021-03-09T19:02:07.141095',
+              changed_on_delta_humanized: 'a day ago',
+              created_by: null,
+              database_name: 'test-mysql',
+              explore_database_id: 1,
+              expose_in_sqllab: true,
+              force_ctas_schema: null,
+              id: 2,
+            },
           ],
         },
       } as any;
@@ -153,50 +173,95 @@ test('Refresh should work', async () => {
 
   render(<DatabaseSelector {...props} />);
 
+  const select = screen.getByRole('combobox', {
+    name: 'Select schema or type schema name',
+  });
+
+  userEvent.click(select);
+
   await waitFor(() => {
-    expect(SupersetClientGet).toBeCalledTimes(2);
-    expect(props.getDbList).toBeCalledTimes(1);
+    expect(SupersetClientGet).toBeCalledTimes(1);
+    expect(props.getDbList).toBeCalledTimes(0);
     expect(props.getTableList).toBeCalledTimes(0);
     expect(props.handleError).toBeCalledTimes(0);
     expect(props.onDbChange).toBeCalledTimes(0);
     expect(props.onSchemaChange).toBeCalledTimes(0);
-    expect(props.onSchemasLoad).toBeCalledTimes(1);
+    expect(props.onSchemasLoad).toBeCalledTimes(0);
     expect(props.onUpdate).toBeCalledTimes(0);
   });
 
-  userEvent.click(screen.getByRole('button'));
+  userEvent.click(screen.getByRole('button', { name: 'refresh' }));
 
   await waitFor(() => {
-    expect(SupersetClientGet).toBeCalledTimes(3);
-    expect(props.getDbList).toBeCalledTimes(1);
+    expect(SupersetClientGet).toBeCalledTimes(2);
+    expect(props.getDbList).toBeCalledTimes(0);
     expect(props.getTableList).toBeCalledTimes(0);
     expect(props.handleError).toBeCalledTimes(0);
-    expect(props.onDbChange).toBeCalledTimes(1);
-    expect(props.onSchemaChange).toBeCalledTimes(1);
+    expect(props.onDbChange).toBeCalledTimes(0);
+    expect(props.onSchemaChange).toBeCalledTimes(0);
     expect(props.onSchemasLoad).toBeCalledTimes(2);
-    expect(props.onUpdate).toBeCalledTimes(1);
+    expect(props.onUpdate).toBeCalledTimes(0);
   });
 });
 
 test('Should database select display options', async () => {
   const props = createProps();
   render(<DatabaseSelector {...props} />);
-  const selector = await screen.findByText('Database:');
-  expect(selector).toBeInTheDocument();
-  expect(selector.parentElement).toHaveTextContent(
-    'Database:postgresql examples',
-  );
+  const select = screen.getByRole('combobox', {
+    name: 'Select database or type database name',
+  });
+  expect(select).toBeInTheDocument();
+  userEvent.click(select);
+  expect(await screen.findByText('test-mysql')).toBeInTheDocument();
 });
 
 test('Should schema select display options', async () => {
   const props = createProps();
   render(<DatabaseSelector {...props} />);
-
-  const selector = await screen.findByText('Schema:');
-  expect(selector).toBeInTheDocument();
-  expect(selector.parentElement).toHaveTextContent('Schema: public');
-
-  userEvent.click(screen.getByRole('button'));
-
-  expect(await screen.findByText('Select a schema (2)')).toBeInTheDocument();
+  const select = screen.getByRole('combobox', {
+    name: 'Select schema or type schema name',
+  });
+  expect(select).toBeInTheDocument();
+  userEvent.click(select);
+  expect(
+    await screen.findByRole('option', { name: 'public' }),
+  ).toBeInTheDocument();
+  expect(
+    await screen.findByRole('option', { name: 'information_schema' }),
+  ).toBeInTheDocument();
+});
+
+test('Sends the correct db when changing the database', async () => {
+  const props = createProps();
+  render(<DatabaseSelector {...props} />);
+  const select = screen.getByRole('combobox', {
+    name: 'Select database or type database name',
+  });
+  expect(select).toBeInTheDocument();
+  userEvent.click(select);
+  userEvent.click(await screen.findByText('test-mysql'));
+  await waitFor(() =>
+    expect(props.onDbChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: 2,
+        database_name: 'test-mysql',
+        backend: 'mysql',
+      }),
+    ),
+  );
+});
+
+test('Sends the correct schema when changing the schema', async () => {
+  const props = createProps();
+  render(<DatabaseSelector {...props} />);
+  const select = screen.getByRole('combobox', {
+    name: 'Select schema or type schema name',
+  });
+  expect(select).toBeInTheDocument();
+  userEvent.click(select);
+  const schemaOption = await screen.findAllByText('information_schema');
+  userEvent.click(schemaOption[1]);
+  await waitFor(() =>
+    expect(props.onSchemaChange).toHaveBeenCalledWith('information_schema'),
+  );
 });