diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.jsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.jsx
index eec45618e7150..7b8d822cbcae5 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.jsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.jsx
@@ -18,13 +18,23 @@
  */
 import React from 'react';
 import fetchMock from 'fetch-mock';
-// import userEvent from '@testing-library/user-event';
-import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import {
+  render,
+  screen,
+  within,
+  cleanup,
+  act,
+} from 'spec/helpers/testing-library';
+/* -- These imports are used for the mock functions that currently don't work
+import {
+  testDatabaseConnection,
+  useSingleViewResource,
+} from 'src/views/CRUD/hooks'; */
 import DatabaseModal from './index';
 
 const dbProps = {
   show: true,
-  databaseId: 10,
   database_name: 'my database',
   sqlalchemy_uri: 'postgres://superset:superset@something:1234/superset',
 };
@@ -46,276 +56,959 @@ fetchMock.get(DATABASE_FETCH_ENDPOINT, {
 fetchMock.mock(AVAILABLE_DB_ENDPOINT, {
   databases: [
     {
+      available_drivers: ['psycopg2'],
+      default_driver: 'psycopg2',
+      engine: 'postgresql',
+      name: 'PostgreSQL',
+      parameters: {
+        properties: {
+          database: {
+            description: 'Database name',
+            type: 'string',
+          },
+          encryption: {
+            description: 'Use an encrypted connection to the database',
+            type: 'boolean',
+          },
+          host: {
+            description: 'Hostname or IP address',
+            type: 'string',
+          },
+          password: {
+            description: 'Password',
+            nullable: true,
+            type: 'string',
+          },
+          port: {
+            description: 'Database port',
+            format: 'int32',
+            maximum: 65536,
+            minimum: 0,
+            type: 'integer',
+          },
+          query: {
+            additionalProperties: {},
+            description: 'Additional parameters',
+            type: 'object',
+          },
+          username: {
+            description: 'Username',
+            nullable: true,
+            type: 'string',
+          },
+        },
+        required: ['database', 'host', 'port', 'username'],
+        type: 'object',
+      },
+      preferred: true,
+      sqlalchemy_uri_placeholder:
+        'postgresql://user:password@host:port/dbname[?key=value&key=value...]',
+    },
+    {
+      available_drivers: ['rest'],
+      engine: 'presto',
+      name: 'Presto',
+      preferred: true,
+    },
+    {
+      available_drivers: ['mysqldb'],
+      default_driver: 'mysqldb',
       engine: 'mysql',
       name: 'MySQL',
+      parameters: {
+        properties: {
+          database: {
+            description: 'Database name',
+            type: 'string',
+          },
+          encryption: {
+            description: 'Use an encrypted connection to the database',
+            type: 'boolean',
+          },
+          host: {
+            description: 'Hostname or IP address',
+            type: 'string',
+          },
+          password: {
+            description: 'Password',
+            nullable: true,
+            type: 'string',
+          },
+          port: {
+            description: 'Database port',
+            format: 'int32',
+            maximum: 65536,
+            minimum: 0,
+            type: 'integer',
+          },
+          query: {
+            additionalProperties: {},
+            description: 'Additional parameters',
+            type: 'object',
+          },
+          username: {
+            description: 'Username',
+            nullable: true,
+            type: 'string',
+          },
+        },
+        required: ['database', 'host', 'port', 'username'],
+        type: 'object',
+      },
+      preferred: true,
+      sqlalchemy_uri_placeholder:
+        'mysql://user:password@host:port/dbname[?key=value&key=value...]',
+    },
+    {
+      available_drivers: ['pysqlite'],
+      engine: 'sqlite',
+      name: 'SQLite',
+      preferred: true,
+    },
+    {
+      available_drivers: ['rest'],
+      engine: 'druid',
+      name: 'Apache Druid',
+      preferred: false,
+    },
+    {
+      available_drivers: ['bigquery'],
+      default_driver: 'bigquery',
+      engine: 'bigquery',
+      name: 'Google BigQuery',
+      parameters: {
+        properties: {
+          credentials_info: {
+            description: 'Contents of BigQuery JSON credentials.',
+            type: 'string',
+            'x-encrypted-extra': true,
+          },
+          query: {
+            type: 'object',
+          },
+        },
+        type: 'object',
+      },
       preferred: false,
+      sqlalchemy_uri_placeholder: 'bigquery://{project_id}',
     },
   ],
 });
 
 describe('DatabaseModal', () => {
-  afterEach(fetchMock.restore);
-  // describe('initial load', () => {
-  //   it('hides the forms from the db when not selected', () => {
-  //     render(<DatabaseModal show databaseId={1} />, { useRedux: true });
-  //     // Select Advanced tab
-  //     const advancedTab = screen.getByRole('tab', {
-  //       name: /advanced/i,
-  //     });
-  //     userEvent.click(advancedTab);
-  //     // Select SQL Lab tab
-  //     const sqlLabSettingsTab = screen.getByRole('tab', {
-  //       name: /sql lab/i,
-  //     });
-  //     userEvent.click(sqlLabSettingsTab);
-
-  //     const exposeInSqlLab = screen.getByText('Expose in SQL Lab');
-  //     const exposeChoicesForm = exposeInSqlLab.parentElement.nextSibling;
-  //     const schemaField = screen.getByText('CTAS & CVAS SCHEMA').parentElement;
-  //     expect(exposeChoicesForm).not.toHaveClass('open');
-  //     expect(schemaField).not.toHaveClass('open');
-  //   });
-  // });
-  // it('renders all settings when "Expose in SQL Lab" is checked', () => {
-  //   render(<DatabaseModal {...dbProps} />, { useRedux: true });
-
-  //   // Select Advanced tab
-  //   const advancedTab = screen.getByRole('tab', {
-  //     name: /advanced/i,
-  //   });
-  //   userEvent.click(advancedTab);
-
-  //   // Select SQL Lab tab
-  //   const sqlLabSettingsTab = screen.getByRole('tab', {
-  //     name: /sql lab/i,
-  //   });
-
-  //   userEvent.click(sqlLabSettingsTab);
-
-  //   // Grab all SQL Lab settings by their labels
-  //   // const exposeInSqlLab = screen.getByText('Expose in SQL Lab');
-  //   const exposeInSqlLab = screen.getByRole('checkbox', {
-  //     name: /expose in sql lab/i,
-  //   });
-
-  //   expect(exposeInSqlLab).not.toBeChecked();
-  //   userEvent.click(exposeInSqlLab);
-
-  //   // While checked make sure all checkboxes are showing
-  //   expect(exposeInSqlLab).toBeChecked();
-  //   const checkboxes = screen
-  //     .getAllByRole('checkbox')
-  //     .filter(checkbox => !checkbox.checked);
-
-  //   expect(checkboxes.length).toEqual(4);
-  // });
-
-  // it('renders the schema field when allowCTAS is checked', () => {
-  //   render(<DatabaseModal {...dbProps} />, { useRedux: true });
-
-  //   // Select Advanced tab
-  //   const advancedTab = screen.getByRole('tab', {
-  //     name: /advanced/i,
-  //   });
-  //   userEvent.click(advancedTab);
-
-  //   // Select SQL Lab tab
-  //   const sqlLabSettingsTab = screen.getByRole('tab', {
-  //     name: /sql lab/i,
-  //   });
-  //   userEvent.click(sqlLabSettingsTab);
-  //   // Grab CTAS & schema field by their labels
-  //   const allowCTAS = screen.getByLabelText('Allow CREATE TABLE AS');
-  //   const schemaField = screen.getByText('CTAS & CVAS SCHEMA').parentElement;
-
-  //   // While CTAS & CVAS are unchecked, schema field is not visible
-  //   expect(schemaField).not.toHaveClass('open');
-
-  //   // Check "Allow CTAS" to reveal schema field
-  //   userEvent.click(allowCTAS);
-  //   expect(schemaField).toHaveClass('open');
-
-  //   // Uncheck "Allow CTAS" to hide schema field again
-  //   userEvent.click(allowCTAS);
-  //   expect(schemaField).not.toHaveClass('open');
-  // });
-
-  // it('renders the schema field when allowCVAS is checked', () => {
-  //   render(<DatabaseModal {...dbProps} />, { useRedux: true });
-
-  //   // Select Advanced tab
-  //   const advancedTab = screen.getByRole('tab', {
-  //     name: /advanced/i,
-  //   });
-  //   userEvent.click(advancedTab);
-
-  //   // Select SQL Lab tab
-  //   const sqlLabSettingsTab = screen.getByRole('tab', {
-  //     name: /sql lab/i,
-  //   });
-  //   userEvent.click(sqlLabSettingsTab);
-  //   // Grab CVAS by it's label & schema field
-  //   const allowCVAS = screen.getByText('Allow CREATE VIEW AS');
-  //   const schemaField = screen.getByText('CTAS & CVAS SCHEMA').parentElement;
-
-  //   // While CTAS & CVAS are unchecked, schema field is not visible
-  //   expect(schemaField).not.toHaveClass('open');
-
-  //   // Check "Allow CVAS" to reveal schema field
-  //   userEvent.click(allowCVAS);
-  //   expect(schemaField).toHaveClass('open');
-
-  //   // Uncheck "Allow CVAS" to hide schema field again
-  //   userEvent.click(allowCVAS);
-  //   expect(schemaField).not.toHaveClass('open');
-  // });
-
-  // it('renders the schema field when both allowCTAS and allowCVAS are checked', () => {
-  //   render(<DatabaseModal {...dbProps} />, { useRedux: true });
-
-  //   // Select Advanced tab
-  //   const advancedTab = screen.getByRole('tab', {
-  //     name: /advanced/i,
-  //   });
-  //   userEvent.click(advancedTab);
-
-  //   // Select SQL Lab tab
-  //   const sqlLabSettingsTab = screen.getByRole('tab', {
-  //     name: /sql lab/i,
-  //   });
-  //   userEvent.click(sqlLabSettingsTab);
-  //   // Grab CTAS and CVAS by their labels, & schema field
-  //   const allowCTAS = screen.getByText('Allow CREATE TABLE AS');
-  //   const allowCVAS = screen.getByText('Allow CREATE VIEW AS');
-  //   const schemaField = screen.getByText('CTAS & CVAS SCHEMA').parentElement;
-
-  //   // While CTAS & CVAS are unchecked, schema field is not visible
-  //   expect(schemaField).not.toHaveClass('open');
-
-  //   // Check both "Allow CTAS" and "Allow CVAS" to reveal schema field
-  //   userEvent.click(allowCTAS);
-  //   userEvent.click(allowCVAS);
-  //   expect(schemaField).toHaveClass('open');
-  //   // Uncheck both "Allow CTAS" and "Allow CVAS" to hide schema field again
-  //   userEvent.click(allowCTAS);
-  //   userEvent.click(allowCVAS);
-
-  //   // Both checkboxes go unchecked, so the field should no longer render
-  //   expect(schemaField).not.toHaveClass('open');
-  // });
-  // TODO: rewrite when Modal is complete
-  // describe('create database', () => {
-  //   beforeEach(() => {
-  //     fetchMock.post(DATABASE_POST_ENDPOINT, {
-  //       id: 10,
-  //     });
-  //     fetchMock.mock(AVAILABLE_DB_ENDPOINT, {
-  //       databases: [
-  //         {
-  //           engine: 'mysql',
-  //           name: 'MySQL',
-  //           preferred: false,
-  //         },
-  //       ],
-  //     });
-  //   });
-  //   const props = {
-  //     ...dbProps,
-  //     databaseId: null,
-  //     database_name: null,
-  //     sqlalchemy_uri: null,
-  //   };
-  //   it('should show a form when dynamic_form is selected', async () => {
-  //     render(<DatabaseModal {...props} />, { useRedux: true });
-  //     // it should have the correct header text
-  //     const headerText = screen.getByText(/connect a database/i);
-  //     expect(headerText).toBeVisible();
-
-  //     await screen.findByText(/display name/i);
-
-  //     // it does not fetch any databases if no id is passed in
-  //     expect(fetchMock.calls(DATABASE_FETCH_ENDPOINT).length).toEqual(0);
-
-  //     // todo we haven't hooked this up to load dynamically yet so
-  //     // we can't currently test it
-  //   });
-  //   it('should close the modal on save if using the sqlalchemy form', async () => {
-  //     const onHideMock = jest.fn();
-  //     render(<DatabaseModal {...props} onHide={onHideMock} />, {
-  //       useRedux: true,
-  //     });
-  //     // button should be disabled by default
-  //     const submitButton = screen.getByTestId('modal-confirm-button');
-  //     expect(submitButton).toBeDisabled();
-
-  //     const displayName = screen.getByTestId('database-name-input');
-  //     userEvent.type(displayName, 'MyTestDB');
-  //     expect(displayName.value).toBe('MyTestDB');
-  //     const sqlalchemyInput = screen.getByTestId('sqlalchemy-uri-input');
-  //     userEvent.type(sqlalchemyInput, 'some_url');
-  //     expect(sqlalchemyInput.value).toBe('some_url');
-
-  //     // button should not be disabled now
-  //     expect(submitButton).toBeEnabled();
-
-  //     await waitFor(() => {
-  //       userEvent.click(submitButton);
-  //     });
-  //     expect(fetchMock.calls(DATABASE_POST_ENDPOINT)).toHaveLength(1);
-  //     expect(onHideMock).toHaveBeenCalled();
-  //   });
-  // });
-
-  describe('edit database', () => {
-    beforeEach(() => {
-      fetchMock.mock(AVAILABLE_DB_ENDPOINT, {
-        databases: [
-          {
-            engine: 'mysql',
-            name: 'MySQL',
-            preferred: false,
-          },
-        ],
+  const renderAndWait = async () => {
+    const mounted = act(async () => {
+      render(<DatabaseModal {...dbProps} />, {
+        useRedux: true,
+      });
+    });
+
+    return mounted;
+  };
+
+  beforeEach(async () => {
+    await renderAndWait();
+  });
+
+  afterEach(cleanup);
+
+  describe('Visual: New database connection', () => {
+    it('renders the initial load of Step 1 correctly', async () => {
+      // ---------- Components ----------
+      // <TabHeader> - AntD header
+      const closeButton = screen.getByRole('button', { name: /close/i });
+      const step1Header = screen.getByRole('heading', {
+        name: /connect a database/i,
+      });
+      // <ModalHeader> - Connection header
+      const step1Helper = screen.getByText(/step 1 of 3/i);
+      const selectDbHeader = screen.getByRole('heading', {
+        name: /select a database to connect/i,
+      });
+      // <IconButton> - Preferred database buttons
+      const preferredDbButtonPostgreSQL = screen.getByRole('button', {
+        name: /default-database postgresql/i,
+      });
+      const preferredDbTextPostgreSQL = within(
+        preferredDbButtonPostgreSQL,
+      ).getByText(/postgresql/i);
+      const preferredDbButtonPresto = screen.getByRole('button', {
+        name: /default-database presto/i,
+      });
+      const preferredDbTextPresto = within(preferredDbButtonPresto).getByText(
+        /presto/i,
+      );
+      const preferredDbButtonMySQL = screen.getByRole('button', {
+        name: /default-database mysql/i,
+      });
+      const preferredDbTextMySQL = within(preferredDbButtonMySQL).getByText(
+        /mysql/i,
+      );
+      const preferredDbButtonSQLite = screen.getByRole('button', {
+        name: /default-database sqlite/i,
+      });
+      const preferredDbTextSQLite = within(preferredDbButtonSQLite).getByText(
+        /sqlite/i,
+      );
+      // All dbs render with this icon in this testing environment,
+      // The Icon count should equal the count of databases rendered
+      const preferredDbIcon = screen.getAllByRole('img', {
+        name: /default-database/i,
+      });
+      // renderAvailableSelector() => <Select> - Supported databases selector
+      const supportedDbsHeader = screen.getByRole('heading', {
+        name: /or choose from a list of other databases we support:/i,
+      });
+      const selectorLabel = screen.getByText(/supported databases/i);
+      const selectorPlaceholder = screen.getByText(/choose a database\.\.\./i);
+      const selectorArrow = screen.getByRole('img', {
+        name: /down/i,
+        hidden: true,
+      });
+
+      // ---------- TODO: Selector options, can't seem to get these to render properly.
+
+      // renderAvailableSelector() => <Alert> - Supported databases alert
+      const alertIcon = screen.getByRole('img', { name: /info icon/i });
+      const alertMessage = screen.getByText(/want to add a new database\?/i);
+      const alertDescription = screen.getByText(
+        /any databases that allow connetions via sql alchemy uris can be added\. learn about how to connect a database driver \./i,
+      );
+      const alertLink = screen.getByRole('link', { name: /here/i });
+
+      // ---------- Assertions ----------
+      const visibleComponents = [
+        closeButton,
+        step1Header,
+        step1Helper,
+        selectDbHeader,
+        supportedDbsHeader,
+        selectorLabel,
+        selectorPlaceholder,
+        selectorArrow,
+        alertIcon,
+        alertMessage,
+        alertDescription,
+        alertLink,
+        preferredDbButtonPostgreSQL,
+        preferredDbButtonPresto,
+        preferredDbButtonMySQL,
+        preferredDbButtonSQLite,
+        preferredDbIcon[0],
+        preferredDbIcon[1],
+        preferredDbIcon[2],
+        preferredDbIcon[3],
+        preferredDbTextPostgreSQL,
+        preferredDbTextPresto,
+        preferredDbTextMySQL,
+        preferredDbTextSQLite,
+      ];
+
+      visibleComponents.forEach(component => {
+        expect(component).toBeVisible();
+      });
+      // This is how many preferred databases are rendered
+      expect(preferredDbIcon).toHaveLength(4);
+    });
+
+    it('renders the "Basic" tab of SQL Alchemy form (step 2 of 2) correctly', async () => {
+      // On step 1, click dbButton to access SQL Alchemy form
+      userEvent.click(
+        screen.getByRole('button', {
+          name: /default-database sqlite/i,
+        }),
+      );
+
+      // ---------- Components ----------
+      // <TabHeader> - AntD header
+      const closeButton = screen.getByRole('button', { name: /close/i });
+      const basicHeader = screen.getByRole('heading', {
+        name: /connect a database/i,
+      });
+      // <ModalHeader> - Connection header
+      const basicHelper = screen.getByText(/step 2 of 2/i);
+      const basicHeaderTitle = screen.getByText(/enter primary credentials/i);
+      const basicHeaderSubtitle = screen.getByText(
+        /need help\? learn how to connect your database \./i,
+      );
+      const basicHeaderLink = within(basicHeaderSubtitle).getByRole('link', {
+        name: /here/i,
+      });
+      // <Tabs> - Basic/Advanced tabs
+      const basicTab = screen.getByRole('tab', { name: /basic/i });
+      const advancedTab = screen.getByRole('tab', { name: /advanced/i });
+      // <StyledBasicTab> - Basic tab's content
+      const displayNameLabel = screen.getByText(/display name*/i);
+      const displayNameInput = screen.getByTestId('database-name-input');
+      const displayNameHelper = screen.getByText(
+        /pick a name to help you identify this database\./i,
+      );
+      const SQLURILabel = screen.getByText(/sqlalchemy uri*/i);
+      const SQLURIInput = screen.getByTestId('sqlalchemy-uri-input');
+      const SQLURIHelper = screen.getByText(
+        /refer to the for more information on how to structure your uri\./i,
+      );
+      const testConnectionButton = screen.getByRole('button', {
+        name: /test connection/i,
+      });
+      // <Alert> - Basic tab's alert
+      const alertIcon = screen.getByRole('img', { name: /info icon/i });
+      const alertMessage = screen.getByText(
+        /additional fields may be required/i,
+      );
+      const alertDescription = screen.getByText(
+        /select databases require additional fields to be completed in the advanced tab to successfully connect the database\. learn what requirements your databases has \./i,
+      );
+      const alertLink = within(alertDescription).getByRole('link', {
+        name: /here/i,
+      });
+      // renderModalFooter() - Basic tab's footer
+      const backButton = screen.getByRole('button', { name: /back/i });
+      const connectButton = screen.getByRole('button', { name: 'Connect' });
+
+      // ---------- Assertions ----------
+      const visibleComponents = [
+        closeButton,
+        basicHeader,
+        basicHelper,
+        basicHeaderTitle,
+        basicHeaderSubtitle,
+        basicHeaderLink,
+        basicTab,
+        advancedTab,
+        displayNameLabel,
+        displayNameInput,
+        displayNameHelper,
+        SQLURILabel,
+        SQLURIInput,
+        SQLURIHelper,
+        testConnectionButton,
+        alertIcon,
+        alertMessage,
+        alertDescription,
+        alertLink,
+        backButton,
+        connectButton,
+      ];
+
+      visibleComponents.forEach(component => {
+        expect(component).toBeVisible();
+      });
+    });
+
+    it('renders the unexpanded "Advanced" tab correctly', async () => {
+      // On step 1, click dbButton to access step 2
+      userEvent.click(
+        screen.getByRole('button', {
+          name: /default-database sqlite/i,
+        }),
+      );
+      // Click the "Advanced" tab
+      userEvent.click(screen.getByRole('tab', { name: /advanced/i }));
+
+      // ---------- Components ----------
+      // <TabHeader> - AntD header
+      const closeButton = screen.getByRole('button', { name: /close/i });
+      const advancedHeader = screen.getByRole('heading', {
+        name: /connect a database/i,
+      });
+      // <ModalHeader> - Connection header
+      const basicHelper = screen.getByText(/step 2 of 2/i);
+      const basicHeaderTitle = screen.getByText(/enter primary credentials/i);
+      const basicHeaderSubtitle = screen.getByText(
+        /need help\? learn how to connect your database \./i,
+      );
+      const basicHeaderLink = within(basicHeaderSubtitle).getByRole('link', {
+        name: /here/i,
+      });
+      // <Tabs> - Basic/Advanced tabs
+      const basicTab = screen.getByRole('tab', { name: /basic/i });
+      const advancedTab = screen.getByRole('tab', { name: /advanced/i });
+      // <ExtraOptions> - Advanced tabs
+      const sqlLabTab = screen.getByRole('tab', {
+        name: /right sql lab adjust how this database will interact with sql lab\./i,
+      });
+      const sqlLabTabArrow = within(sqlLabTab).getByRole('img', {
+        name: /right/i,
+      });
+      const sqlLabTabHeading = screen.getByRole('heading', {
+        name: /sql lab/i,
+      });
+      const performanceTab = screen.getByRole('tab', {
+        name: /right performance adjust performance settings of this database\./i,
+      });
+      const performanceTabArrow = within(performanceTab).getByRole('img', {
+        name: /right/i,
+      });
+      const performanceTabHeading = screen.getByRole('heading', {
+        name: /performance/i,
+      });
+      const securityTab = screen.getByRole('tab', {
+        name: /right security add extra connection information\./i,
+      });
+      const securityTabArrow = within(securityTab).getByRole('img', {
+        name: /right/i,
+      });
+      const securityTabHeading = screen.getByRole('heading', {
+        name: /security/i,
+      });
+      const otherTab = screen.getByRole('tab', {
+        name: /right other additional settings\./i,
+      });
+      const otherTabArrow = within(otherTab).getByRole('img', {
+        name: /right/i,
+      });
+      const otherTabHeading = screen.getByRole('heading', { name: /other/i });
+      // renderModalFooter() - Advanced tab's footer
+      const backButton = screen.getByRole('button', { name: /back/i });
+      const connectButton = screen.getByRole('button', { name: 'Connect' });
+
+      // ---------- Assertions ----------
+      const visibleComponents = [
+        closeButton,
+        advancedHeader,
+        basicHelper,
+        basicHeaderTitle,
+        basicHeaderSubtitle,
+        basicHeaderLink,
+        basicTab,
+        advancedTab,
+        sqlLabTab,
+        sqlLabTabArrow,
+        sqlLabTabHeading,
+        performanceTab,
+        performanceTabArrow,
+        performanceTabHeading,
+        securityTab,
+        securityTabArrow,
+        securityTabHeading,
+        otherTab,
+        otherTabArrow,
+        otherTabHeading,
+        backButton,
+        connectButton,
+      ];
+
+      visibleComponents.forEach(component => {
+        expect(component).toBeVisible();
+      });
+    });
+
+    it('renders the "Advanced" - SQL LAB tab correctly (unexpanded)', async () => {
+      // ---------- Components ----------
+      // On step 1, click dbButton to access step 2
+      userEvent.click(
+        screen.getByRole('button', {
+          name: /default-database sqlite/i,
+        }),
+      );
+      // Click the "Advanced" tab
+      userEvent.click(screen.getByRole('tab', { name: /advanced/i }));
+      // Click the "SQL Lab" tab
+      userEvent.click(
+        screen.getByRole('tab', {
+          name: /right sql lab adjust how this database will interact with sql lab\./i,
+        }),
+      );
+
+      // ----- BEGIN STEP 2 (ADVANCED - SQL LAB)
+      // <TabHeader> - AntD header
+      const closeButton = screen.getByRole('button', { name: /close/i });
+      const advancedHeader = screen.getByRole('heading', {
+        name: /connect a database/i,
+      });
+      // <ModalHeader> - Connection header
+      const basicHelper = screen.getByText(/step 2 of 2/i);
+      const basicHeaderTitle = screen.getByText(/enter primary credentials/i);
+      const basicHeaderSubtitle = screen.getByText(
+        /need help\? learn how to connect your database \./i,
+      );
+      const basicHeaderLink = within(basicHeaderSubtitle).getByRole('link', {
+        name: /here/i,
+      });
+      // <Tabs> - Basic/Advanced tabs
+      const basicTab = screen.getByRole('tab', { name: /basic/i });
+      const advancedTab = screen.getByRole('tab', { name: /advanced/i });
+      // <ExtraOptions> - Advanced tabs
+      const sqlLabTab = screen.getByRole('tab', {
+        name: /right sql lab adjust how this database will interact with sql lab\./i,
+      });
+      // These are the checkbox SVGs that cover the actual checkboxes
+      const checkboxOffSVGs = screen.getAllByRole('img', {
+        name: /checkbox-off/i,
+      });
+      const tooltipIcons = screen.getAllByRole('img', {
+        name: /info-solid-small/i,
+      });
+      const exposeInSQLLabCheckbox = screen.getByRole('checkbox', {
+        name: /expose database in sql lab/i,
       });
+      // This is both the checkbox and it's respective SVG
+      // const exposeInSQLLabCheckboxSVG = checkboxOffSVGs[0].parentElement;
+      const exposeInSQLLabText = screen.getByText(
+        /expose database in sql lab/i,
+      );
+      const allowCTASCheckbox = screen.getByRole('checkbox', {
+        name: /allow create table as/i,
+      });
+      const allowCTASText = screen.getByText(/allow create table as/i);
+      const allowCVASCheckbox = screen.getByRole('checkbox', {
+        name: /allow create table as/i,
+      });
+      const allowCVASText = screen.getByText(/allow create table as/i);
+      const CTASCVASLabelText = screen.getByText(/ctas & cvas schema/i);
+      // This grabs the whole input by placeholder text
+      const CTASCVASInput = screen.getByPlaceholderText(
+        /create or select schema\.\.\./i,
+      );
+      const CTASCVASHelperText = screen.getByText(
+        /force all tables and views to be created in this schema when clicking ctas or cvas in sql lab\./i,
+      );
+      const allowDMLCheckbox = screen.getByRole('checkbox', {
+        name: /allow dml/i,
+      });
+      const allowDMLText = screen.getByText(/allow dml/i);
+      const allowMultiSchemaMDFetchCheckbox = screen.getByRole('checkbox', {
+        name: /allow multi schema metadata fetch/i,
+      });
+      const allowMultiSchemaMDFetchText = screen.getByText(
+        /allow multi schema metadata fetch/i,
+      );
+      const enableQueryCostEstimationCheckbox = screen.getByRole('checkbox', {
+        name: /enable query cost estimation/i,
+      });
+      const enableQueryCostEstimationText = screen.getByText(
+        /enable query cost estimation/i,
+      );
+      const allowDbExplorationCheckbox = screen.getByRole('checkbox', {
+        name: /allow this database to be explored/i,
+      });
+      const allowDbExplorationText = screen.getByText(
+        /allow this database to be explored/i,
+      );
+
+      // ---------- Assertions ----------
+      const visibleComponents = [
+        closeButton,
+        advancedHeader,
+        basicHelper,
+        basicHeaderTitle,
+        basicHeaderSubtitle,
+        basicHeaderLink,
+        basicTab,
+        advancedTab,
+        sqlLabTab,
+        checkboxOffSVGs[0],
+        checkboxOffSVGs[1],
+        checkboxOffSVGs[2],
+        checkboxOffSVGs[3],
+        checkboxOffSVGs[4],
+        checkboxOffSVGs[5],
+        checkboxOffSVGs[6],
+        tooltipIcons[0],
+        tooltipIcons[1],
+        tooltipIcons[2],
+        tooltipIcons[3],
+        tooltipIcons[4],
+        tooltipIcons[5],
+        tooltipIcons[6],
+        exposeInSQLLabText,
+        allowCTASText,
+        allowCVASText,
+        CTASCVASLabelText,
+        CTASCVASInput,
+        CTASCVASHelperText,
+        allowDMLText,
+        allowMultiSchemaMDFetchText,
+        enableQueryCostEstimationText,
+        allowDbExplorationText,
+      ];
+      // These components exist in the DOM but are not visible
+      const invisibleComponents = [
+        exposeInSQLLabCheckbox,
+        allowCTASCheckbox,
+        allowCVASCheckbox,
+        allowDMLCheckbox,
+        allowMultiSchemaMDFetchCheckbox,
+        enableQueryCostEstimationCheckbox,
+        allowDbExplorationCheckbox,
+      ];
+
+      visibleComponents.forEach(component => {
+        expect(component).toBeVisible();
+      });
+      invisibleComponents.forEach(component => {
+        expect(component).not.toBeVisible();
+      });
+      expect(checkboxOffSVGs).toHaveLength(7);
+      expect(tooltipIcons).toHaveLength(7);
+    });
+
+    it('renders the "Advanced" - PERFORMANCE tab correctly', async () => {
+      // ---------- Components ----------
+      // On step 1, click dbButton to access step 2
+      userEvent.click(
+        screen.getByRole('button', {
+          name: /default-database sqlite/i,
+        }),
+      );
+      // Click the "Advanced" tab
+      userEvent.click(screen.getByRole('tab', { name: /advanced/i }));
+      // Click the "Performance" tab
+      userEvent.click(
+        screen.getByRole('tab', {
+          name: /right performance adjust performance settings of this database\./i,
+        }),
+      );
+
+      // ----- BEGIN STEP 2 (ADVANCED - PERFORMANCE)
+      // <TabHeader> - AntD header
+      const closeButton = screen.getByRole('button', { name: /close/i });
+      const advancedHeader = screen.getByRole('heading', {
+        name: /connect a database/i,
+      });
+      // <ModalHeader> - Connection header
+      const basicHelper = screen.getByText(/step 2 of 2/i);
+      const basicHeaderTitle = screen.getByText(/enter primary credentials/i);
+      const basicHeaderSubtitle = screen.getByText(
+        /need help\? learn how to connect your database \./i,
+      );
+      const basicHeaderLink = within(basicHeaderSubtitle).getByRole('link', {
+        name: /here/i,
+      });
+      // <Tabs> - Basic/Advanced tabs
+      const basicTab = screen.getByRole('tab', { name: /basic/i });
+      const advancedTab = screen.getByRole('tab', { name: /advanced/i });
+      // <ExtraOptions> - Advanced tabs
+      const sqlLabTab = screen.getByRole('tab', {
+        name: /right sql lab adjust how this database will interact with sql lab\./i,
+      });
+      const performanceTab = screen.getByRole('tab', {
+        name: /right performance adjust performance settings of this database\./i,
+      });
+
+      // ---------- Assertions ----------
+      const visibleComponents = [
+        closeButton,
+        advancedHeader,
+        basicHelper,
+        basicHeaderTitle,
+        basicHeaderSubtitle,
+        basicHeaderLink,
+        basicTab,
+        advancedTab,
+        sqlLabTab,
+        performanceTab,
+      ];
+
+      visibleComponents.forEach(component => {
+        expect(component).toBeVisible();
+      });
+    });
+
+    it('renders the "Advanced" - SECURITY tab correctly', async () => {
+      // ---------- Components ----------
+      // On step 1, click dbButton to access step 2
+      userEvent.click(
+        screen.getByRole('button', {
+          name: /default-database sqlite/i,
+        }),
+      );
+      // Click the "Advanced" tab
+      userEvent.click(screen.getByRole('tab', { name: /advanced/i }));
+      // Click the "Security" tab
+      userEvent.click(
+        screen.getByRole('tab', {
+          name: /right security add extra connection information\./i,
+        }),
+      );
+
+      // ----- BEGIN STEP 2 (ADVANCED - SECURITY)
+      // <TabHeader> - AntD header
+      const closeButton = screen.getByRole('button', { name: /close/i });
+      const advancedHeader = screen.getByRole('heading', {
+        name: /connect a database/i,
+      });
+      // <ModalHeader> - Connection header
+      const basicHelper = screen.getByText(/step 2 of 2/i);
+      const basicHeaderTitle = screen.getByText(/enter primary credentials/i);
+      const basicHeaderSubtitle = screen.getByText(
+        /need help\? learn how to connect your database \./i,
+      );
+      const basicHeaderLink = within(basicHeaderSubtitle).getByRole('link', {
+        name: /here/i,
+      });
+      // <Tabs> - Basic/Advanced tabs
+      const basicTab = screen.getByRole('tab', { name: /basic/i });
+      const advancedTab = screen.getByRole('tab', { name: /advanced/i });
+      // <ExtraOptions> - Advanced tabs
+      const sqlLabTab = screen.getByRole('tab', {
+        name: /right sql lab adjust how this database will interact with sql lab\./i,
+      });
+      const performanceTab = screen.getByRole('tab', {
+        name: /right performance adjust performance settings of this database\./i,
+      });
+      const securityTab = screen.getByRole('tab', {
+        name: /right security add extra connection information\./i,
+      });
+
+      // ---------- Assertions ----------
+      const visibleComponents = [
+        closeButton,
+        advancedHeader,
+        basicHelper,
+        basicHeaderTitle,
+        basicHeaderSubtitle,
+        basicHeaderLink,
+        basicTab,
+        advancedTab,
+        sqlLabTab,
+        performanceTab,
+        securityTab,
+      ];
+
+      visibleComponents.forEach(component => {
+        expect(component).toBeVisible();
+      });
+    });
+
+    it('renders the "Advanced" - OTHER tab correctly', async () => {
+      // ---------- Components ----------
+      // On step 1, click dbButton to access step 2
+      userEvent.click(
+        screen.getByRole('button', {
+          name: /default-database sqlite/i,
+        }),
+      );
+      // Click the "Advanced" tab
+      userEvent.click(screen.getByRole('tab', { name: /advanced/i }));
+      // Click the "Other" tab
+      userEvent.click(
+        screen.getByRole('tab', {
+          name: /right other additional settings\./i,
+        }),
+      );
+
+      // ----- BEGIN STEP 2 (ADVANCED - OTHER)
+      // <TabHeader> - AntD header
+      const closeButton = screen.getByRole('button', { name: /close/i });
+      const advancedHeader = screen.getByRole('heading', {
+        name: /connect a database/i,
+      });
+      // <ModalHeader> - Connection header
+      const basicHelper = screen.getByText(/step 2 of 2/i);
+      const basicHeaderTitle = screen.getByText(/enter primary credentials/i);
+      const basicHeaderSubtitle = screen.getByText(
+        /need help\? learn how to connect your database \./i,
+      );
+      const basicHeaderLink = within(basicHeaderSubtitle).getByRole('link', {
+        name: /here/i,
+      });
+      // <Tabs> - Basic/Advanced tabs
+      const basicTab = screen.getByRole('tab', { name: /basic/i });
+      const advancedTab = screen.getByRole('tab', { name: /advanced/i });
+      // <ExtraOptions> - Advanced tabs
+      const sqlLabTab = screen.getByRole('tab', {
+        name: /right sql lab adjust how this database will interact with sql lab\./i,
+      });
+      const performanceTab = screen.getByRole('tab', {
+        name: /right performance adjust performance settings of this database\./i,
+      });
+      const securityTab = screen.getByRole('tab', {
+        name: /right security add extra connection information\./i,
+      });
+      const otherTab = screen.getByRole('tab', {
+        name: /right other additional settings\./i,
+      });
+
+      // ---------- Assertions ----------
+      const visibleComponents = [
+        closeButton,
+        advancedHeader,
+        basicHelper,
+        basicHeaderTitle,
+        basicHeaderSubtitle,
+        basicHeaderLink,
+        basicTab,
+        advancedTab,
+        sqlLabTab,
+        performanceTab,
+        securityTab,
+        otherTab,
+      ];
+
+      visibleComponents.forEach(component => {
+        expect(component).toBeVisible();
+      });
+    });
+
+    it('Dynamic form', async () => {
+      // ---------- Components ----------
+      // On step 1, click dbButton to access step 2
+      userEvent.click(
+        screen.getByRole('button', {
+          name: /default-database postgresql/i,
+        }),
+      );
+
+      expect.anything();
     });
-    it('renders the sqlalchemy form when the sqlalchemy_form configuration method is set', async () => {
-      render(<DatabaseModal {...dbProps} />, { useRedux: true });
-
-      // it should have tabs
-      const tabs = screen.getAllByRole('tab');
-      expect(tabs.length).toEqual(2);
-      expect(tabs[0]).toHaveTextContent('Basic');
-      expect(tabs[1]).toHaveTextContent('Advanced');
-
-      // it should have the correct header text
-      const headerText = screen.getByText(/edit database/i);
-      expect(headerText).toBeVisible();
+  });
+
+  describe('Functional: Create new database', () => {
+    it('directs databases to the appropriate form (dynamic vs. SQL Alchemy)', () => {
+      // ---------- Dynamic example (3-step form)
+      // Click the PostgreSQL button to enter the dynamic form
+      const postgreSQLButton = screen.getByRole('button', {
+        name: /default-database postgresql/i,
+      });
+      userEvent.click(postgreSQLButton);
+
+      // Dynamic form has 3 steps, seeing this text means the dynamic form is present
+      const dynamicFormStepText = screen.getByText(/step 2 of 3/i);
+
+      expect(dynamicFormStepText).toBeVisible();
+
+      // ---------- SQL Alchemy example (2-step form)
+      // Click the back button to go back to step 1,
+      // then click the SQLite button to enter the SQL Alchemy form
+      const backButton = screen.getByRole('button', { name: /back/i });
+      userEvent.click(backButton);
+
+      const sqliteButton = screen.getByRole('button', {
+        name: /default-database sqlite/i,
+      });
+      userEvent.click(sqliteButton);
+
+      // SQL Alchemy form has 2 steps, seeing this text means the SQL Alchemy form is present
+      const sqlAlchemyFormStepText = screen.getByText(/step 2 of 2/i);
+
+      expect(sqlAlchemyFormStepText).toBeVisible();
+    });
+
+    describe('SQL Alchemy form flow', () => {
+      beforeEach(() => {
+        userEvent.click(
+          screen.getByRole('button', {
+            name: /default-database sqlite/i,
+          }),
+        );
+      });
+
+      it('enters step 2 of 2 when proper database is selected', () => {
+        const step2text = screen.getByText(/step 2 of 2/i);
+        expect(step2text).toBeVisible();
+      });
+
+      it('runs fetchResource when "Connect" is clicked', () => {
+        /* ---------- 🐞 TODO: function mock is not currently working 🐞 ----------
+
+        // Mock useSingleViewResource
+        const mockUseSingleViewResource = jest.fn();
+        mockUseSingleViewResource.mockImplementation(useSingleViewResource);
+
+        const { fetchResource } = mockUseSingleViewResource('database');
+
+        // Invalid hook call?
+        userEvent.click(screen.getByRole('button', { name: 'Connect' }));
+        expect(fetchResource).toHaveBeenCalled();
+
+        The line below makes the linter happy */
+        expect.anything();
+      });
+
+      describe('step 2 component interaction', () => {
+        it('properly interacts with textboxes', () => {
+          const dbNametextBox = screen.getByTestId('database-name-input');
+          expect(dbNametextBox).toHaveValue('SQLite');
+
+          userEvent.type(dbNametextBox, 'Different text');
+          expect(dbNametextBox).toHaveValue('SQLiteDifferent text');
+
+          const sqlAlchemyURItextBox = screen.getByTestId(
+            'sqlalchemy-uri-input',
+          );
+          expect(sqlAlchemyURItextBox).toHaveValue('');
+
+          userEvent.type(sqlAlchemyURItextBox, 'Different text');
+          expect(sqlAlchemyURItextBox).toHaveValue('Different text');
+        });
+
+        it('runs testDatabaseConnection when "TEST CONNECTION" is clicked', () => {
+          /* ---------- 🐞 TODO: function mock is not currently working 🐞 ----------
+
+          // Mock testDatabaseConnection
+          const mockTestDatabaseConnection = jest.fn();
+          mockTestDatabaseConnection.mockImplementation(testDatabaseConnection);
+
+          userEvent.click(
+            screen.getByRole('button', {
+              name: /test connection/i,
+            }),
+          );
+
+          expect(mockTestDatabaseConnection).toHaveBeenCalled();
+
+          The line below makes the linter happy */
+          expect.anything();
+        });
+      });
+    });
+
+    describe('Dynamic form flow', () => {
+      beforeEach(() => {
+        userEvent.click(
+          screen.getByRole('button', {
+            name: /default-database postgresql/i,
+          }),
+        );
+      });
+
+      it('enters step 2 of 3 when proper database is selected', () => {
+        const step2of3text = screen.getByText(/step 2 of 3/i);
+        expect(step2of3text).toBeVisible();
+      });
+
+      it('enters form credentials and runs fetchResource when "Connect" is clicked', () => {
+        const textboxes = screen.getAllByRole('textbox');
+        const hostField = textboxes[0];
+        const portField = screen.getByRole('spinbutton');
+        const databaseNameField = textboxes[1];
+        const usernameField = textboxes[2];
+        const passwordField = textboxes[3];
+
+        expect(hostField).toHaveValue('');
+        expect(portField).toHaveValue(null);
+        expect(databaseNameField).toHaveValue('');
+        expect(usernameField).toHaveValue('');
+        expect(passwordField).toHaveValue('');
+
+        userEvent.type(hostField, 'localhost');
+        userEvent.type(portField, '5432');
+        userEvent.type(databaseNameField, 'postgres');
+        userEvent.type(usernameField, 'testdb');
+        userEvent.type(passwordField, 'demoPassword');
+
+        expect(hostField).toHaveValue('localhost');
+        expect(portField).toHaveValue(5432);
+        expect(databaseNameField).toHaveValue('postgres');
+        expect(usernameField).toHaveValue('testdb');
+        expect(passwordField).toHaveValue('demoPassword');
+
+        /* ---------- 🐞 TODO: function mock is not currently working 🐞 ----------
+
+        // Mock useSingleViewResource
+        const mockUseSingleViewResource = jest.fn();
+        mockUseSingleViewResource.mockImplementation(useSingleViewResource);
+
+        const { fetchResource } = mockUseSingleViewResource('database');
+
+        // Invalid hook call?
+        userEvent.click(screen.getByRole('button', { name: 'Connect' }));
+        expect(fetchResource).toHaveBeenCalled();
+
+        */
+      });
     });
-    // it('renders the dynamic form when the dynamic_form configuration method is set', async () => {
-    //   fetchMock.get(DATABASE_FETCH_ENDPOINT, {
-    //     result: {
-    //       id: 10,
-    //       database_name: 'my database',
-    //       expose_in_sqllab: false,
-    //       allow_ctas: false,
-    //       allow_cvas: false,
-    //       configuration_method: 'dynamic_form',
-    //       parameters: {
-    //         database: 'mydatabase',
-    //       },
-    //     },
-    //   });
-    //   render(<DatabaseModal {...dbProps} />, { useRedux: true });
-
-    //   await screen.findByText(/edit database/i);
-
-    //   // // it should have tabs
-    //   const tabs = screen.getAllByRole('tab');
-    //   expect(tabs.length).toEqual(2);
-
-    //   // it should show a TODO for now
-    //   const headerText = screen.getByText(/edit database/i);
-    //   expect(headerText).toBeVisible();
-    // });
   });
 });