fix: auto-complete of tables and names are not working in SQL lab (#19152)

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

@@ -20,12 +20,13 @@
 import React from 'react';
 import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import { SupersetClient } from '@superset-ui/core';
+import { act } from 'react-dom/test-utils';
 import userEvent from '@testing-library/user-event';
 import TableSelector from '.';
 
 const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
 
-const createProps = () => ({
+const createProps = (props = {}) => ({
   database: {
     id: 1,
     database_name: 'main',
@@ -34,23 +35,33 @@ const createProps = () => ({
   },
   schema: 'test_schema',
   handleError: jest.fn(),
+  ...props,
 });
 
-beforeAll(() => {
-  SupersetClientGet.mockImplementation(
-    async () =>
-      ({
-        json: {
-          options: [
-            { label: 'table_a', value: 'table_a' },
-            { label: 'table_b', value: 'table_b' },
-          ],
-        },
-      } as any),
-  );
+afterEach(() => {
+  jest.clearAllMocks();
 });
 
+const getSchemaMockFunction = async () =>
+  ({
+    json: {
+      result: ['schema_a', 'schema_b'],
+    },
+  } as any);
+
+const getTableMockFunction = async () =>
+  ({
+    json: {
+      options: [
+        { label: 'table_a', value: 'table_a' },
+        { label: 'table_b', value: 'table_b' },
+      ],
+    },
+  } as any);
+
 test('renders with default props', async () => {
+  SupersetClientGet.mockImplementation(getTableMockFunction);
+
   const props = createProps();
   render(<TableSelector {...props} />, { useRedux: true });
   const databaseSelect = screen.getByRole('combobox', {
@@ -70,6 +81,8 @@ test('renders with default props', async () => {
 });
 
 test('renders table options', async () => {
+  SupersetClientGet.mockImplementation(getTableMockFunction);
+
   const props = createProps();
   render(<TableSelector {...props} />, { useRedux: true });
   const tableSelect = screen.getByRole('combobox', {
@@ -85,6 +98,8 @@ test('renders table options', async () => {
 });
 
 test('renders disabled without schema', async () => {
+  SupersetClientGet.mockImplementation(getTableMockFunction);
+
   const props = createProps();
   render(<TableSelector {...props} schema={undefined} />, { useRedux: true });
   const tableSelect = screen.getByRole('combobox', {
@@ -94,3 +109,42 @@ test('renders disabled without schema', async () => {
     expect(tableSelect).toBeDisabled();
   });
 });
+
+test('table options are notified after schema selection', async () => {
+  SupersetClientGet.mockImplementation(getSchemaMockFunction);
+
+  const callback = jest.fn();
+  const props = createProps({
+    onTablesLoad: callback,
+    schema: undefined,
+  });
+  render(<TableSelector {...props} />, { useRedux: true });
+
+  const schemaSelect = screen.getByRole('combobox', {
+    name: 'Select schema or type schema name',
+  });
+  expect(schemaSelect).toBeInTheDocument();
+  expect(callback).not.toHaveBeenCalled();
+
+  userEvent.click(schemaSelect);
+
+  expect(
+    await screen.findByRole('option', { name: 'schema_a' }),
+  ).toBeInTheDocument();
+  expect(
+    await screen.findByRole('option', { name: 'schema_b' }),
+  ).toBeInTheDocument();
+
+  SupersetClientGet.mockImplementation(getTableMockFunction);
+
+  act(() => {
+    userEvent.click(screen.getAllByText('schema_a')[1]);
+  });
+
+  await waitFor(() => {
+    expect(callback).toHaveBeenCalledWith([
+      { label: 'table_a', value: 'table_a' },
+      { label: 'table_b', value: 'table_b' },
+    ]);
+  });
+});