@quillsql/admin 1.6.0 → 1.6.2

package/dist/cjs/public_components/__tests__/CreateEnvironment.test.js

@@ -0,0 +1,685 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const CreateEnvironment_1 = __importDefault(require("../CreateEnvironment"));
+const AdminProvider_1 = require("../../AdminProvider");
+const dataFetcher_1 = require("../../utils/dataFetcher");
+const dotenv_1 = __importDefault(require("dotenv"));
+const path_1 = __importDefault(require("path"));
+// Load environment variables from .env.local
+dotenv_1.default.config({ path: path_1.default.resolve(__dirname, '../../../.env.local') });
+// Mock necessary modules
+jest.mock('../../AdminProvider');
+jest.mock('@quillsql/react');
+// Mock sessionStorage
+const mockSessionStorage = {
+    getItem: jest.fn(),
+    setItem: jest.fn(),
+    removeItem: jest.fn(),
+    clear: jest.fn(),
+    length: 0,
+    key: jest.fn(),
+};
+Object.defineProperty(window, 'sessionStorage', {
+    value: mockSessionStorage,
+    writable: true,
+});
+// Mock SqlTextEditor
+jest.mock('../../components/SqlTextEditor', () => ({
+    __esModule: true,
+    default: ({ value, setValue }) => ((0, jsx_runtime_1.jsx)("textarea", { "data-testid": "sql-editor", value: value, onChange: (e) => setValue(e.target.value) })),
+}));
+// Mock scrollIntoView
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+// avoid error thrown by jspdf
+jest.mock('jspdf', () => ({
+    __esModule: true,
+    default: jest.fn(() => ({
+        text: jest.fn(),
+        save: jest.fn(),
+    })),
+}));
+// Mock ResizeObserver
+global.ResizeObserver = class MockResizeObserver {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+};
+const testDatabases = [
+    {
+        databaseType: 'PostgreSQL',
+        databaseLabel: 'PostgreSQL',
+        databaseConnectionString: process.env.TEST_POSTGRES_CONNECTION_STRING,
+        databaseCredentials: null,
+        schemaName: 'public',
+        tenant: {
+            name: 'Test Tenant',
+            tenantField: 'customer_id',
+            tenantTable: 'public.customers',
+            idField: 'id',
+            nameField: 'name',
+            tagField: 'id',
+            defaultTenant: 'Acme',
+        },
+        virtualTableQuery: 'SELECT * FROM public.transactions;',
+    },
+    {
+        databaseType: 'PostgreSQL',
+        databaseLabel: 'PostgreSQL',
+        databaseConnectionString: null,
+        databaseCredentials: {
+            user: process.env.TEST_POSTGRES_USER,
+            password: process.env.TEST_POSTGRES_PASSWORD,
+            host: process.env.TEST_POSTGRES_HOST,
+            port: process.env.TEST_POSTGRES_PORT,
+            database: process.env.TEST_POSTGRES_DATABASE,
+        },
+        schemaName: 'public',
+        tenant: {
+            name: 'Test Tenant',
+            tenantField: 'customer_id',
+            tenantTable: 'public.customers',
+            idField: 'id',
+            nameField: 'name',
+            tagField: 'id',
+            defaultTenant: 'Acme',
+        },
+        virtualTableQuery: 'SELECT * FROM public.transactions;',
+    },
+    {
+        databaseType: 'MySQL',
+        databaseLabel: 'MySQL',
+        databaseConnectionString: null,
+        databaseCredentials: {
+            user: process.env.TEST_MYSQL_USER,
+            password: process.env.TEST_MYSQL_PASSWORD,
+            host: process.env.TEST_MYSQL_HOST,
+            port: process.env.TEST_MYSQL_PORT,
+            database: process.env.TEST_MYSQL_DATABASE,
+        },
+        schemaName: 'railway',
+        tenant: {
+            name: 'Test Tenant',
+            tenantField: 'customer_id',
+            tenantTable: 'railway.customers',
+            idField: 'id',
+            nameField: 'name',
+            tagField: 'id',
+            defaultTenant: 'Acme',
+        },
+        virtualTableQuery: 'SELECT * FROM railway.transactions;',
+    },
+    {
+        databaseType: 'MySQL',
+        databaseLabel: 'MySQL',
+        databaseConnectionString: process.env.TEST_MYSQL_CONNECTION_STRING,
+        databaseCredentials: {
+            user: null,
+            password: null,
+            host: null,
+            port: null,
+            database: null,
+        },
+        schemaName: 'railway',
+        tenant: {
+            name: 'Test Tenant',
+            tenantField: 'customer_id',
+            tenantTable: 'railway.customers',
+            idField: 'id',
+            nameField: 'name',
+            tagField: 'id',
+            defaultTenant: 'Acme',
+        },
+        virtualTableQuery: 'SELECT * FROM railway.transactions;',
+    },
+    {
+        databaseType: 'MSSQL',
+        databaseLabel: 'SQL Server',
+        databaseConnectionString: null,
+        databaseCredentials: {
+            user: process.env.TEST_MSSQL_USER,
+            password: process.env.TEST_MSSQL_PASSWORD,
+            host: process.env.TEST_MSSQL_HOST,
+            port: process.env.TEST_MSSQL_PORT,
+            database: process.env.TEST_MSSQL_DATABASE,
+        },
+        schemaName: 'dbo',
+        tenant: {
+            name: 'Test Tenant',
+            tenantField: 'customer_id',
+            tenantTable: 'dbo.customers',
+            idField: 'id',
+            nameField: 'name',
+            tagField: 'id',
+            defaultTenant: 'Acme',
+        },
+        virtualTableQuery: 'SELECT * FROM [dbo].[transactions];',
+    },
+    {
+        databaseType: 'ClickHouse',
+        databaseLabel: 'ClickHouse',
+        databaseConnectionString: null,
+        databaseCredentials: {
+            user: process.env.TEST_CLICKHOUSE_USER,
+            password: process.env.TEST_CLICKHOUSE_PASSWORD,
+            host: process.env.TEST_CLICKHOUSE_HOST,
+            port: process.env.TEST_CLICKHOUSE_PORT,
+            database: null,
+        },
+        schemaName: 'default',
+        tenant: {
+            name: 'Test Tenant',
+            tenantField: 'merchant_id',
+            tenantTable: 'default.merchants',
+            idField: 'id',
+            nameField: 'name',
+            tagField: 'id',
+            defaultTenant: 'Merchant A',
+        },
+        virtualTableQuery: 'SELECT * FROM "default"."transactions";',
+    },
+    {
+        databaseType: 'Snowflake',
+        databaseLabel: 'Snowflake',
+        databaseConnectionString: null,
+        databaseCredentials: {
+            user: process.env.TEST_SNOWFLAKE_USER,
+            password: process.env.TEST_SNOWFLAKE_PASSWORD,
+            host: process.env.TEST_SNOWFLAKE_HOST,
+            database: process.env.TEST_SNOWFLAKE_DATABASE,
+            warehouse: process.env.TEST_SNOWFLAKE_WAREHOUSE,
+            port: null,
+        },
+        schemaName: 'CSVS',
+        tenant: {
+            name: 'Test Tenant',
+            tenantField: 'COMPANY_ID',
+            tenantTable: 'CSVS.COMPANIES',
+            idField: 'ID',
+            nameField: 'NAME',
+            tagField: 'ID',
+            defaultTenant: 'Google',
+        },
+        virtualTableQuery: 'SELECT * FROM "CSVS"."CONTACTS";',
+    },
+    {
+        databaseType: 'BigQuery',
+        databaseLabel: 'BigQuery',
+        databaseConnectionString: null,
+        databaseCredentials: {
+            user: null,
+            password: null,
+            host: null,
+            port: null,
+            database: null,
+            warehouse: null,
+        },
+        jsonString: process.env.TEST_BIGQUERY_CONNECTION_JSON,
+        schemaName: 'transactions',
+        tenant: {
+            name: 'Test Tenant',
+            tenantField: 'customer_id',
+            tenantTable: 'transactions.customers',
+            idField: '_id_',
+            nameField: 'name',
+            tagField: '_id_',
+            defaultTenant: 'Acme',
+        },
+        virtualTableQuery: 'SELECT amount, customer_id FROM `transactions`.`transactions`;',
+    },
+];
+describe('CreateEnvironment', () => {
+    const mockOnOnboardComplete = jest.fn();
+    let mockState;
+    let mockSetClient;
+    let mockDispatch;
+    // let mockQuillFetch: jest.Mock;
+    let clientId;
+    beforeEach(() => {
+        mockSetClient = jest.fn();
+        mockDispatch = jest.fn();
+        // mockQuillFetch = jest.fn((args) => quillFetch(args));
+        mockState = {
+            queryEndpoint: 'http://localhost:8080/cloud',
+            domainName: 'test-domain',
+        };
+        AdminProvider_1.useAdmin.mockReturnValue({
+            state: mockState,
+            setClient: mockSetClient,
+            dispatch: mockDispatch,
+            getToken: () => 'test-token',
+            quillFetchWithToken: (args) => {
+                return (0, dataFetcher_1.quillFetch)({ ...args, getToken: () => 'test-token' });
+            },
+        });
+    });
+    afterEach(async () => {
+        if (clientId) {
+            // wait for other stuff to finish
+            await new Promise((resolve) => setTimeout(resolve, 3000));
+            await (0, dataFetcher_1.quillFetch)({
+                task: 'delete-client',
+                metadata: {
+                    clientId,
+                },
+                client: {
+                    queryEndpoint: 'http://localhost:8080/cloud',
+                    clientId,
+                    withCredentials: false,
+                },
+                getToken: async () => '',
+            });
+        }
+        jest.clearAllMocks();
+    });
+    it.each(testDatabases)('completes onboarding with $databaseType database', async (database) => {
+        expect(process.env.TEST_MODE).toBe('true');
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(CreateEnvironment_1.default, { onOnboardComplete: mockOnOnboardComplete }));
+        expect(react_2.screen.getByText(database.databaseLabel)).toBeInTheDocument();
+        // 1. Connect database
+        // Check before states
+        let element = react_2.screen.getByTestId('quill-client-id');
+        let envSteps = JSON.parse(element.getAttribute('data-create-env-steps') || '{}');
+        // createEnvSteps
+        expect(envSteps.connectDB.open).toBe(true);
+        expect(envSteps.connectSchema.open).toBe(false);
+        expect(envSteps.createVirtualTables.open).toBe(false);
+        // state
+        const state = JSON.parse(element.getAttribute('data-state') || '{}');
+        expect(state.queryEndpoint).not.toBeNull();
+        // Start inputting details
+        // Switch to database type
+        await (0, react_1.act)(async () => {
+            react_2.fireEvent.click(react_2.screen.getByText(new RegExp(database.databaseLabel, 'i')));
+        });
+        if (database.databaseConnectionString) {
+            // Fill in connection string
+            // Click on Connection String tab
+            await (0, react_1.act)(async () => {
+                react_2.fireEvent.click(react_2.screen.getByTestId('quill-tab-Connection String'));
+            });
+            // Should now show Connection String input
+            expect(react_2.screen.getAllByText('Connection String')[0]).toBeInTheDocument();
+            // Verify Connect button is disabled initially
+            expect(react_2.screen.getByTestId('quill-connect-button').querySelector('button')
+                .className).toContain('quill-button-disabled');
+            // Enter connection string
+            await (0, react_1.act)(async () => {
+                react_2.fireEvent.change(react_2.screen
+                    .getByTestId('quill-input-connectionString')
+                    .querySelector('input'), {
+                    target: { value: database.databaseConnectionString },
+                });
+            });
+            // Verify Connect button is enabled
+            expect(react_2.screen.getByTestId('quill-connect-button').querySelector('button')
+                .className).not.toContain('quill-button-disabled');
+        }
+        else if (database.jsonString) {
+            // Mock file upload by directly setting the JSON string
+            await (0, react_1.act)(async () => {
+                const fileInput = react_2.screen.getByTestId('quill-input-fileInput');
+                const file = new File([database.jsonString], 'service-account.json', { type: 'application/json' });
+                Object.defineProperty(fileInput, 'files', {
+                    value: [file],
+                });
+                react_2.fireEvent.change(fileInput);
+            });
+            // Verify the file label was updated
+            await (0, react_2.waitFor)(() => {
+                expect(react_2.screen.getByTestId('quill-file-label')).toHaveTextContent('service-account.json');
+            });
+        }
+        else {
+            // Verify Connect button is disabled
+            expect(react_2.screen.getByTestId('quill-connect-button').querySelector('button')
+                .className).toContain('quill-button-disabled');
+            if (database.databaseCredentials?.database) {
+                await (0, react_1.act)(async () => {
+                    react_2.fireEvent.change(react_2.screen
+                        .getByTestId('quill-input-databaseName')
+                        .querySelector('input'), { target: { value: database.databaseCredentials.database } });
+                });
+            }
+            if (database.databaseCredentials?.host) {
+                await (0, react_1.act)(async () => {
+                    react_2.fireEvent.change(react_2.screen.getByTestId('quill-input-host').querySelector('input'), { target: { value: database.databaseCredentials.host } });
+                });
+            }
+            if (database.databaseCredentials?.user) {
+                await (0, react_1.act)(async () => {
+                    react_2.fireEvent.change(react_2.screen.getByTestId('quill-input-user').querySelector('input'), { target: { value: database.databaseCredentials.user } });
+                });
+            }
+            if (database.databaseCredentials?.password) {
+                await (0, react_1.act)(async () => {
+                    react_2.fireEvent.change(react_2.screen
+                        .getByTestId('quill-input-password')
+                        .querySelector('input'), { target: { value: database.databaseCredentials.password } });
+                });
+            }
+            if (database.databaseCredentials?.port) {
+                await (0, react_1.act)(async () => {
+                    react_2.fireEvent.change(react_2.screen.getByTestId('quill-input-port').querySelector('input'), { target: { value: database.databaseCredentials.port } });
+                });
+            }
+            if (database.databaseCredentials?.warehouse) {
+                await (0, react_1.act)(async () => {
+                    react_2.fireEvent.change(react_2.screen
+                        .getByTestId('quill-input-warehouse')
+                        .querySelector('input'), { target: { value: database.databaseCredentials.warehouse } });
+                });
+            }
+            // Verify Connect button is enabled
+            expect(react_2.screen.getByTestId('quill-connect-button').querySelector('button')
+                .className).not.toContain('quill-button-disabled');
+        }
+        // Click connect
+        await (0, react_1.act)(async () => {
+            react_2.fireEvent.click(react_2.screen.getByText('Connect'));
+        });
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByText('Connection Successful')).toBeInTheDocument();
+        }, { timeout: 5000 });
+        // Verify setEnvironmentDetails was called by checking state changes
+        element = react_2.screen.getByTestId('quill-client-id');
+        let newClient = JSON.parse(element.getAttribute('data-new-client') || '{}');
+        expect(typeof newClient.clientId).toBe('string');
+        expect(newClient.clientId.length).toBeGreaterThan(0);
+        await (0, react_1.act)(async () => {
+            mockState.client = newClient;
+        });
+        // Wait for the state update to be reflected
+        await (0, react_2.waitFor)(() => {
+            const element = react_2.screen.getByTestId('quill-client-id');
+            const currentState = JSON.parse(element.getAttribute('data-state') || '{}');
+            return currentState.client?.id === newClient.clientId;
+        }, { timeout: 5000 });
+        // Click the select button to open the dropdown
+        await (0, react_1.act)(async () => {
+            expect(react_2.screen.getByTestId('quill-schema-select')).toBeInTheDocument();
+            const selectButton = react_2.screen
+                .getByTestId('quill-schema-select')
+                .querySelector('button');
+            react_2.fireEvent.click(selectButton);
+        });
+        // Wait for the dropdown to appear and select schema
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByText(database.schemaName)).toBeInTheDocument();
+        }, { timeout: 5000 });
+        await (0, react_1.act)(async () => {
+            // Click the schema option
+            const schemaOption = react_2.screen.getByText(database.schemaName);
+            react_2.fireEvent.click(schemaOption);
+            const selectButton = react_2.screen
+                .getByTestId('quill-schema-select')
+                .querySelector('button');
+            react_2.fireEvent.click(selectButton);
+        });
+        // Wait for all updates to complete
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByText(database.schemaName)).toBeInTheDocument();
+        }, { timeout: 5000 });
+        // Wait for the button to be enabled and click it
+        await (0, react_2.waitFor)(() => {
+            const looksGoodButton = react_2.screen
+                .getByTestId('quill-looks-good-button')
+                .querySelector('button');
+            expect(looksGoodButton.className).not.toContain('quill-button-disabled');
+        }, { timeout: 5000 });
+        // Click the Looks Good button
+        await (0, react_1.act)(async () => {
+            const looksGoodButton = react_2.screen
+                .getByTestId('quill-looks-good-button')
+                .querySelector('button');
+            react_2.fireEvent.click(looksGoodButton);
+        });
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByText('How do you represent your customers in your database?')).toBeInTheDocument();
+        }, { timeout: 10000 });
+        const environmentDetails = JSON.parse(element.getAttribute('data-environment-details') || '{}');
+        element = react_2.screen.getByTestId('quill-client-id');
+        newClient = JSON.parse(element.getAttribute('data-new-client') || '{}');
+        // Verify database schema was set
+        expect(environmentDetails.databaseSchema).toBeInstanceOf(Array);
+        // Client should have databaseType, schemaNames (non empty array), and domainName
+        expect(newClient.schemaNames).toBeInstanceOf(Array);
+        expect(newClient.schemaNames.length).toBeGreaterThan(0);
+        expect(newClient.databaseType).toBe(database.databaseType);
+        // 2. Connect schema
+        // Check before states
+        element = react_2.screen.getByTestId('quill-client-id');
+        envSteps = JSON.parse(element.getAttribute('data-create-env-steps') || '{}');
+        // createEnvSteps
+        expect(envSteps.connectSchema.open).toBe(true);
+        expect(envSteps.createVirtualTables.open).toBe(false);
+        expect(envSteps.connectDB.open).toBe(false);
+        // databaseSchema
+        let databaseSchema = JSON.parse(element.getAttribute('data-database-schema') || '{}');
+        expect(databaseSchema).toBeInstanceOf(Array);
+        expect(databaseSchema.length).toBeGreaterThan(0);
+        await (0, react_1.act)(async () => {
+            mockState.databaseSchema = {
+                schema: databaseSchema,
+            };
+        });
+        // connection.type
+        let connection = JSON.parse(element.getAttribute('data-connection') || '{}');
+        expect(connection.type).toBe(database.databaseType);
+        // discard changes button hidden
+        expect(react_2.screen.queryByText(/Discard Changes/i)).toBeNull();
+        // Create a row level tenant
+        // Fill in tenant name
+        await (0, react_1.act)(async () => {
+            const tenantNameInput = react_2.screen
+                .getByTestId('quill-input-tenant-name')
+                .querySelector('input');
+            react_2.fireEvent.change(tenantNameInput, {
+                target: { value: database.tenant.name },
+            });
+        });
+        // Fill in tenant table
+        await (0, react_1.act)(async () => {
+            const tableSelect = react_2.screen
+                .getByTestId('quill-select-tenant-table')
+                .querySelector('button');
+            react_2.fireEvent.click(tableSelect);
+        });
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByText(database.tenant.tenantTable)).toBeInTheDocument();
+        }, { timeout: 5000 });
+        await (0, react_1.act)(async () => {
+            react_2.fireEvent.click(react_2.screen.getByText(database.tenant.tenantTable));
+        });
+        // Fill in id field
+        await (0, react_1.act)(async () => {
+            const idFieldSelect = react_2.screen
+                .getByTestId('quill-select-tenant-id-field')
+                .querySelector('button');
+            expect(idFieldSelect).not.toBeDisabled();
+            react_2.fireEvent.click(idFieldSelect);
+        });
+        await (0, react_1.act)(async () => {
+            const container = react_2.screen.getByTestId('quill-select-portal-id-field');
+            const targetElement = (0, react_2.within)(container).getByText(database.tenant.idField);
+            react_2.fireEvent.click(targetElement);
+        });
+        // Fill in name field
+        await (0, react_1.act)(async () => {
+            const nameFieldSelect = react_2.screen
+                .getByTestId('quill-select-tenant-name-field')
+                .querySelector('button');
+            expect(nameFieldSelect).not.toBeDisabled();
+            react_2.fireEvent.click(nameFieldSelect);
+        });
+        await (0, react_1.act)(async () => {
+            const container = react_2.screen.getByTestId('quill-select-portal-name-field');
+            const targetElement = (0, react_2.within)(container).getByText(database.tenant.nameField);
+            react_2.fireEvent.click(targetElement);
+        });
+        // Fill in tenant field (foreign key)
+        await (0, react_1.act)(async () => {
+            const tenantFieldInput = react_2.screen
+                .getByTestId('quill-input-tenant-field')
+                .querySelector('input');
+            react_2.fireEvent.change(tenantFieldInput, {
+                target: { value: database.tenant.tenantField },
+            });
+        });
+        // Fill in tag
+        await (0, react_1.act)(async () => {
+            const flagFieldSelect = react_2.screen
+                .getByTestId('quill-select-tenant-flag-field')
+                .querySelector('button');
+            expect(flagFieldSelect).not.toBeDisabled();
+            react_2.fireEvent.click(flagFieldSelect);
+        });
+        await (0, react_1.act)(async () => {
+            const container = react_2.screen.getByTestId('quill-select-portal-flag-field');
+            const targetElement = (0, react_2.within)(container).getByText(database.tenant.tagField);
+            react_2.fireEvent.click(targetElement);
+        });
+        // Press save changes (should be enabled now)
+        // Click Save Changes button
+        await (0, react_1.act)(async () => {
+            const saveButton = react_2.screen
+                .getByTestId('quill-save-changes-button')
+                .querySelector('button');
+            expect(saveButton.className).not.toContain('quill-button-disabled');
+            react_2.fireEvent.click(saveButton);
+        });
+        // Wait for tenant IDs modal to appear and select default tenant
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByText('Tenant IDs')).toBeInTheDocument();
+        }, { timeout: 5000 });
+        // Looks good button disabled until default tenant set
+        // Set default tenant id
+        // Select default tenant ID
+        await (0, react_1.act)(async () => {
+            const defaultTenantSelect = react_2.screen
+                .getByTestId('quill-select-default-tenant-id-field')
+                .querySelector('button');
+            react_2.fireEvent.click(defaultTenantSelect);
+        });
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByText(database.tenant.defaultTenant)).toBeInTheDocument();
+        }, { timeout: 5000 });
+        await (0, react_1.act)(async () => {
+            const button = react_2.screen.getByText(database.tenant.defaultTenant);
+            react_2.fireEvent.click(button);
+        });
+        // Click Looks Good button
+        await (0, react_1.act)(async () => {
+            const looksGoodButton = react_2.screen.getByText('Looks Good');
+            react_2.fireEvent.click(looksGoodButton);
+        });
+        // Press looks good
+        // handleEditTenant called with submit true
+        // onSubmitEditTenant called
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByText('Create a cleaned schema that makes it easier to write queries.')).toBeInTheDocument();
+        }, { timeout: 5000 });
+        // tenantInit should be set
+        element = react_2.screen.getByTestId('quill-client-id');
+        const tenantInit = JSON.parse(element.getAttribute('data-tenant-init') || '{}');
+        expect(tenantInit).toBeInstanceOf(Object);
+        const ownerTenant = tenantInit.ownerTenant;
+        expect(ownerTenant).toBeInstanceOf(Object);
+        expect(ownerTenant.name).toBe(database.tenant.name);
+        expect(ownerTenant.tenantField).toBe(database.tenant.tenantField);
+        expect(ownerTenant.tenantFlagField).toBe(database.tenant.tagField);
+        expect(ownerTenant.tenantIdField).toBe(database.tenant.idField);
+        expect(ownerTenant.tenantLabelField).toBe(database.tenant.nameField);
+        // client should have ownerTenantFields and allTenantTypes set with tenantInit
+        newClient = JSON.parse(element.getAttribute('data-new-client') || '{}');
+        expect(newClient.ownerTenantFields).toBeInstanceOf(Array);
+        expect(newClient.allTenantTypes).toBeInstanceOf(Array);
+        expect(newClient.ownerTenantFields.length).toBeGreaterThan(0);
+        expect(newClient.allTenantTypes.length).toBeGreaterThan(0);
+        expect(newClient.ownerTenantFields).toContain(database.tenant.tenantField);
+        // Check create-tenant task was called with success true
+        // 3. Create virtual tables
+        // Check before states
+        element = react_2.screen.getByTestId('quill-client-id');
+        envSteps = JSON.parse(element.getAttribute('data-create-env-steps') || '{}');
+        // createEnvSteps
+        expect(envSteps.createVirtualTables.open).toBe(true);
+        expect(envSteps.connectSchema.open).toBe(false);
+        expect(envSteps.connectDB.open).toBe(false);
+        // databaseSchema
+        databaseSchema = JSON.parse(element.getAttribute('data-database-schema') || '{}');
+        expect(databaseSchema).toBeInstanceOf(Array);
+        expect(databaseSchema.length).toBeGreaterThan(0);
+        // connection.type
+        connection = JSON.parse(element.getAttribute('data-connection') || '{}');
+        expect(connection.type).toBe(database.databaseType);
+        // sqlTables empty at start
+        let sqlTables = JSON.parse(element.getAttribute('data-sql-tables') || '{}');
+        expect(sqlTables).toBeInstanceOf(Array);
+        expect(sqlTables.length).toBe(0);
+        // client should have schemaNames and clientId set
+        newClient = JSON.parse(element.getAttribute('data-new-client') || '{}');
+        expect(newClient.schemaNames).toBeInstanceOf(Array);
+        expect(newClient.schemaNames.length).toBeGreaterThan(0);
+        expect(newClient.clientId.length).toBeGreaterThan(0);
+        // Looks good button hidden until virtual tables created
+        expect(react_2.screen.queryByText(/Looks Good/i)).toBeNull();
+        // fill in a query and run it
+        // Enter and execute a query
+        const query = database.virtualTableQuery;
+        const sqlEditor = react_2.screen.getByTestId('sql-editor');
+        react_2.fireEvent.change(sqlEditor, {
+            target: { value: query },
+        });
+        // Click Run query button
+        await (0, react_1.act)(async () => {
+            react_2.fireEvent.click(react_2.screen.getByText('Run query'));
+        });
+        // if there is tableData, show virtual tables button
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByText('Add Virtual Table')).toBeInTheDocument();
+        }, { timeout: 5000 });
+        // click add virtual tables button
+        await (0, react_1.act)(async () => {
+            react_2.fireEvent.click(react_2.screen
+                .getByTestId('add-virtual-table-button')
+                .querySelector('button'));
+        });
+        // Wait for the modal and confirm
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByText('Confirm')).toBeInTheDocument();
+        }, { timeout: 5000 });
+        await (0, react_1.act)(async () => {
+            react_2.fireEvent.click(react_2.screen.getByText('Confirm'));
+        });
+        // createVirtualTable called
+        // sqlTables updated
+        // Looks good button enabled
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByText('Looks good')).toBeInTheDocument();
+        }, { timeout: 5000 });
+        element = react_2.screen.getByTestId('quill-client-id');
+        sqlTables = JSON.parse(element.getAttribute('data-sql-tables') || '{}');
+        expect(sqlTables).toBeInstanceOf(Array);
+        expect(sqlTables.length).toBeGreaterThan(0);
+        // Press looks good
+        // Click Looks good button
+        react_2.fireEvent.click(react_2.screen.getByText('Looks good'));
+        // Verify onboarding completion
+        // Call completeOnboarding
+        // quillFetch called with task finish-onboarding
+        // Client is set to response.data.client
+        // onOnboardComplete function called
+        await (0, react_2.waitFor)(() => {
+            expect(mockOnOnboardComplete).toHaveBeenCalled();
+        }, { timeout: 5000 });
+        // for cleanup
+        clientId = react_2.screen.getByTestId('quill-client-id').textContent;
+    }, 30000);
+});