✅ (typescript_test.yml): update shard configuration to include 6 shards

✅ (index.tsx): add data-testid attribute to checkbox component
✅ (basicExamples.spec.ts): add waitForSelector for send icon to improve test stability
✅ (chatInputOutputUser.spec.ts): add waitForSelector for send icon to improve test stability
✅ (deleteComponentFlows.spec.ts): add waitForSelector for various elements to improve test stability
✅ (generalBugs.spec.ts): add waitForSelector for send icon to improve test stability

.github/workflows/typescript_test.yml

@@ -23,8 +23,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5]
-        shardTotal: [5]
+        shardIndex: [1, 2, 3, 4, 5, 6]
+        shardTotal: [6]
     env:
       OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
     steps:

src/frontend/src/components/cardComponent/index.tsx

@@ -229,6 +229,7 @@ export default function CollectionCardComponent({
                       render={({ field }) => (
                         <FormControl>
                           <Checkbox
+                            data-testid={`checkbox-component`}
                             aria-label="checkbox-component"
                             checked={field.value}
                             onCheckedChange={field.onChange}

src/frontend/tests/end-to-end/basicExamples.spec.ts

@@ -163,6 +163,11 @@ test("Memory Chatbot", async ({ page }) => {
     .getByTestId("input-chat-playground")
     .last()
     .fill("try reproduce the sound I made in words");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
   await page.getByTestId("icon-LucideSend").last().click();
 
   await page.waitForSelector("text=roar", { timeout: 30000 });

src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts

@@ -58,6 +58,11 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
   });
 
   await page.getByTestId("input-chat-playground").fill("Hello, how are you?");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
   await page.getByTestId("icon-LucideSend").click();
   let valueUser = await page.getByTestId("sender_name_user").textContent();
 
@@ -79,6 +84,11 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
       "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
     );
   await page.getByText("Playground", { exact: true }).last().click();
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
   await page.getByTestId("icon-LucideSend").click();
   await page.getByText("Close", { exact: true }).click();
   await page.getByText("Chat Input", { exact: true }).click();
@@ -101,6 +111,11 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
     .fill("TestSenderNameAI");
 
   await page.getByText("Playground", { exact: true }).last().click();
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
   await page.getByTestId("icon-LucideSend").click();
 
   valueUser = await page
@@ -233,7 +248,8 @@ test("user must be able to send an image on chat", async ({ page }) => {
   await page.getByTestId("dropdown-model_name").click();
   await page.getByTestId("gpt-4o-0-option").click();
 
-  await page.waitForTimeout(2000);
+  await page.waitForSelector("text=Chat Input", { timeout: 30000 });
+
   await page.getByText("Chat Input", { exact: true }).click();
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
@@ -242,7 +258,7 @@ test("user must be able to send an image on chat", async ({ page }) => {
   await page.getByText("Playground", { exact: true }).click();
 
   // Read the image file as a binary string
-  const filePath = "tests/end-to-end/assets/chain.png";
+  const filePath = "src/frontend/tests/end-to-end/assets/chain.png";
   const fileContent = readFileSync(filePath, "base64");
 
   // Create the DataTransfer and File objects within the browser context
@@ -268,11 +284,14 @@ test("user must be able to send an image on chat", async ({ page }) => {
   // Dispatch the drop event on the target element
   await element.dispatchEvent("drop", { dataTransfer });
 
-  await page.waitForTimeout(4000);
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
 
-  await page.getByText("chain.png").isVisible();
   await page.getByTestId("icon-LucideSend").click();
-  await page.waitForTimeout(2000);
+
+  await page.waitForSelector("text=chain.png", { timeout: 30000 });
+
   await page.getByText("chain.png").isVisible();
 
   await page.getByText("Close", { exact: true }).click();
@@ -282,5 +301,6 @@ test("user must be able to send an image on chat", async ({ page }) => {
   });
 
   await page.getByTestId("icon-ScanEye").nth(4).click();
+
   await page.getByText("Restart").isHidden();
 });

src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts

@@ -9,13 +9,27 @@ test("should delete a flow", async ({ page }) => {
   await page
     .getByPlaceholder("Insert your API Key", { exact: true })
     .fill(process.env.STORE_API_KEY ?? "");
+
+  await page.waitForSelector("text=Save", { timeout: 30000 });
+
   await page.getByText("Save").last().click();
-  await page.waitForTimeout(8000);
+
+  await page.waitForSelector("text=Store", { timeout: 30000 });
+
   await page.getByText("Store").nth(0).click();
 
+  await page.waitForSelector('[data-testid="install-Website Content QA"]', {
+    timeout: 100000,
+  });
+
   await page.getByTestId("install-Website Content QA").click();
-  await page.waitForTimeout(5000);
+
+  await page.waitForSelector("text=My Collection", { timeout: 30000 });
+
   await page.getByText("My Collection").nth(0).click();
+
+  await page.waitForSelector("text=Website Content QA", { timeout: 30000 });
+
   await page.getByText("Website Content QA").first().isVisible();
 
   await page.getByLabel("checkbox-component").last().waitFor({
@@ -23,7 +37,11 @@ test("should delete a flow", async ({ page }) => {
     timeout: 30000, // Timeout of 30 seconds
   });
 
-  await page.getByLabel("checkbox-component").first().click();
+  await page.waitForSelector('[data-testid="checkbox-component"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("checkbox-component").first().click();
 
   await page.getByTestId("icon-Trash2").click();
   await page

src/frontend/tests/end-to-end/generalBugs.spec.ts

@@ -95,6 +95,11 @@ test("erase button should clear the chat messages", async ({ page }) => {
   });
 
   await page.getByTestId("input-chat-playground").fill("Hello, how are you?");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
   await page.getByTestId("icon-LucideSend").click();
   let valueUser = await page.getByTestId("sender_name_user").textContent();