test: Add test IDs and improve UI wait handling in frontend tests (#5188)

📝 (header/index.tsx): add data-testid attribute to new-project-btn button for testing purposes
📝 (dragAndDrop.spec.ts): add comments and improve readability of the test code
📝 (lock-flow.spec.ts): add comments and improve readability of the test code, ensure UI updates are properly handled
This commit is contained in:
Cristhian Zanforlin Lousa 2024-12-10 15:59:08 -03:00 committed by GitHub
commit 5b29c32570
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 53 additions and 8 deletions

View file

@ -141,6 +141,7 @@ const HeaderComponent = ({
className="!px-3 md:!px-4 md:!pl-3.5"
onClick={() => setNewProjectModal(true)}
id="new-project-btn"
data-testid="new-project-btn"
>
<ForwardedIconComponent
name="Plus"

View file

@ -8,9 +8,27 @@ test(
async ({ page }) => {
await awaitBootstrapTest(page);
await page.locator("span").filter({ hasText: "Close" }).first().click();
//add a new flow just to have the workspace available
await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.locator("span").filter({ hasText: "My Projects" }).isVisible();
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 100000,
});
await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
timeout: 100000,
});
await page.getByTestId("icon-ChevronLeft").first().click();
await page.waitForSelector("text=my projects", {
timeout: 5000,
});
await page.waitForSelector('[data-testid="new-project-btn"]', {
timeout: 100000,
});
await simulateDragAndDrop(
page,
@ -44,9 +62,27 @@ test(
async ({ page }) => {
await awaitBootstrapTest(page);
await page.locator("span").filter({ hasText: "Close" }).first().click();
await page.locator("span").filter({ hasText: "My Projects" }).isVisible();
//add a new flow just to have the workspace available
await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 100000,
});
await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
timeout: 100000,
});
await page.getByTestId("icon-ChevronLeft").first().click();
await page.waitForSelector("text=my projects", {
timeout: 5000,
});
await page.waitForSelector('[data-testid="new-project-btn"]', {
timeout: 100000,
});
// Read your file into a buffer.
const jsonContent = readFileSync(
"tests/assets/flow_test_drag_and_drop.json",

View file

@ -23,13 +23,17 @@ test(
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 100000,
state: "visible",
});
await page.getByTestId("lock_unlock").click();
//ensure the UI is updated
await page.waitForTimeout(500);
await page.waitForSelector('[data-testid="icon-Lock"]', {
timeout: 3000,
});
expect(page.getByTestId("icon-Lock")).toBeVisible();
await page.getByTestId("icon-ChevronLeft").click();
await page.waitForSelector('[data-testid="mainpage_title"]', {
@ -39,18 +43,20 @@ test(
await page.getByTestId("list-card").first().click();
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 100000,
state: "visible",
});
//ensure the UI is updated
await page.waitForTimeout(500);
await page.waitForSelector('[data-testid="icon-Lock"]', {
timeout: 3000,
});
expect(page.getByTestId("icon-Lock")).toBeVisible();
await page.getByTestId("lock_unlock").click();
await page.waitForSelector('[data-testid="icon-LockOpen"]', {
timeout: 3000,
});
expect(page.getByTestId("icon-LockOpen")).toBeVisible();
await page.getByTestId("icon-ChevronLeft").click();
await page.waitForSelector('[data-testid="mainpage_title"]', {
@ -58,13 +64,15 @@ test(
});
await page.getByTestId("list-card").first().click();
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 100000,
state: "visible",
});
await page.waitForSelector('[data-testid="icon-LockOpen"]', {
timeout: 3000,
state: "visible",
});
expect(page.getByTestId("icon-LockOpen")).toBeVisible();
},
);