Add E2E tests for ClickHouse Data Source

[fredalai]

Summary

We need contributors to help develop end-to-end (E2E) tests for the ClickHouse data source. The goal is to cover the entire onboarding process—from connecting ClickHouse to reaching the home page after successful data source setup.

Description

The goal is to ensure the entire onboarding flow for ClickHouse works as expected, including:

• Connect to ClickHouse by selecting it as a data source and filling out the connection details (e.g., host, port, username, password...etc).
• Select all tables as data models.
• Accept all recommended relationships if they have.
• Successfully reach the home page after completing the setup process.

Develop

Note:

• When development is complete, please execute CLI to run the tests and include the results in your PR. Ensure that at least the test you added is included, e.g.,: yarn test:e2e e2e/specs/connectClickHouse.spec.ts

References:

• Use Playwright for writing the E2E tests, please refer to the WrenAI E2E testing README to develop.
• Feel free to explore our existing codebase, we also have shared functions and test cases in our current test suite to help you get started: WrenAI E2E Specs
• ClickHouse Cloud Documentation

[princetoday]

I would like to work on this issue. Please assign it to me.

[fredalai]

@princetoday assigned~! :D

[princetoday]

import { test, expect } from '@playwright/test';

test.describe('ClickHouse Data Source Onboarding', () => {

test('should connect to ClickHouse and reach the home page', async ({ page }) => {

// Navigate to data source page
await page.goto('http://your-app-url/data-source-setup');

// Step 1: Select ClickHouse as a data source
await page.click('text=Select Data Source');
await page.click('text=ClickHouse');

// Step 2: Fill in connection details
await page.fill('input[name="host"]', 'localhost');
await page.fill('input[name="port"]', '9000');
await page.fill('input[name="username"]', 'default');
await page.fill('input[name="password"]', 'password');

// Submit the connection details
await page.click('button[type="submit"]');

// Step 3: Select all tables as data models
await page.waitForSelector('text=Select Tables');
await page.click('button:has-text("Select All")');
await page.click('button:has-text("Next")');

// Step 4: Accept recommended relationships
await page.waitForSelector('text=Recommended Relationships');
await page.click('button:has-text("Accept All")');

// Step 5: Verify successful onboarding
await page.waitForURL('http://your-app-url/home');
expect(page.url()).toBe('http://your-app-url/home');

});

}); something like this??

[fredalai]

Hi @princetoday,

I'm not entirely sure what your specific question is, but from the code snippet you shared, I believe the overall testing steps are on the right track. However, one thing to note is that we shouldn't hard-code the connection details directly into the script. Instead, remember to use getTestConfig() (the connection info should be in your e2e.config.json file, which won’t be submitted when you make a PR). Also, it might be helpful to look into the newer Playwright syntax for writing tests more efficiently.

Thanks, Freda

[ongdisheng]

Hi, I noticed that this issue has been inactive for the past two weeks. Would it be alright if I take it over and work on it?

[chilijung]

@ongdisheng reassigned thanks!