feat: SIP-34 table list view for databases (#10705)

superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseList_spec.jsx

@@ -19,19 +19,57 @@
 import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
+import fetchMock from 'fetch-mock';
 import { styledMount as mount } from 'spec/helpers/theming';
 
 import DatabaseList from 'src/views/CRUD/data/database/DatabaseList';
 import DatabaseModal from 'src/views/CRUD/data/database/DatabaseModal';
 import SubMenu from 'src/components/Menu/SubMenu';
+import ListView from 'src/components/ListView';
+import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
+import { act } from 'react-dom/test-utils';
 
 // store needed for withToasts(DatabaseList)
 const mockStore = configureStore([thunk]);
 const store = mockStore({});
 
+const databasesInfoEndpoint = 'glob:*/api/v1/database/_info*';
+const databasesEndpoint = 'glob:*/api/v1/database/?*';
+const databaseEndpoint = 'glob:*/api/v1/database/*';
+
+const mockdatabases = [...new Array(3)].map((_, i) => ({
+  changed_by: {
+    first_name: `user`,
+    last_name: `${i}`,
+  },
+  database_name: `db ${i}`,
+  backend: 'postgresql',
+  allow_run_async: true,
+  allow_dml: false,
+  allow_csv_upload: true,
+  expose_in_sqllab: false,
+  changed_on_delta_humanized: `${i} day(s) ago`,
+  changed_on: new Date().toISOString,
+  id: i,
+}));
+
+fetchMock.get(databasesInfoEndpoint, {
+  permissions: ['can_delete'],
+});
+fetchMock.get(databasesEndpoint, {
+  result: mockdatabases,
+  database_count: 3,
+});
+
+fetchMock.delete(databaseEndpoint, {});
+
 describe('DatabaseList', () => {
   const wrapper = mount(<DatabaseList />, { context: { store } });
 
+  beforeAll(async () => {
+    await waitForComponentToPaint(wrapper);
+  });
+
   it('renders', () => {
     expect(wrapper.find(DatabaseList)).toExist();
   });
@@ -43,4 +81,39 @@ describe('DatabaseList', () => {
   it('renders a DatabaseModal', () => {
     expect(wrapper.find(DatabaseModal)).toExist();
   });
+
+  it('renders a ListView', () => {
+    expect(wrapper.find(ListView)).toExist();
+  });
+
+  it('fetches Databases', () => {
+    const callsD = fetchMock.calls(/database\/\?q/);
+    expect(callsD).toHaveLength(1);
+    expect(callsD[0][0]).toMatchInlineSnapshot(
+      `"http://localhost/api/v1/database/?q=(order_column:changed_on_delta_humanized,order_direction:desc,page:0,page_size:25)"`,
+    );
+  });
+
+  it('deletes', async () => {
+    act(() => {
+      wrapper.find('[data-test="database-delete"]').first().props().onClick();
+    });
+    await waitForComponentToPaint(wrapper);
+
+    act(() => {
+      wrapper
+        .find('#delete')
+        .first()
+        .props()
+        .onChange({ target: { value: 'DELETE' } });
+    });
+    await waitForComponentToPaint(wrapper);
+    act(() => {
+      wrapper.find('button').last().props().onClick();
+    });
+
+    await waitForComponentToPaint(wrapper);
+
+    expect(fetchMock.calls(/database\/0/, 'DELETE')).toHaveLength(1);
+  });
 });