From 26e6296e9e5d162cd3ac7423082f10cc6c977e3a Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 26 Jun 2024 15:27:58 -0300 Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20(index.tsx):=20add=20data-testid=20?= =?UTF-8?q?attribute=20to=20shared=20button=20for=20testing=20=E2=9C=85=20?= =?UTF-8?q?(store.spec.ts):=20update=20test=20selector=20to=20use=20new=20?= =?UTF-8?q?data-testid=20attribute=20=E2=99=BB=EF=B8=8F=20(textInputOutput?= =?UTF-8?q?.spec.ts):=20refactor=20element=20selection=20and=20interaction?= =?UTF-8?q?=20logic=20for=20clarity=20and=20maintainability?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/chatComponent/index.tsx | 1 + src/frontend/tests/end-to-end/store.spec.ts | 4 +- .../tests/end-to-end/textInputOutput.spec.ts | 103 ++++++++---------- 3 files changed, 51 insertions(+), 57 deletions(-) diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index 83c6c80c1..a88bd9573 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/src/frontend/src/components/chatComponent/index.tsx @@ -67,6 +67,7 @@ export default function FlowToolbar(): JSX.Element { ? "button-disable text-muted-foreground" : "", )} + data-testid="shared-button-flow" > { await page.getByText("Save").last().click(); await page.getByText("Close").last().click(); - await page.waitForSelector('[data-testid="icon-Share3"]', { + await page.waitForSelector('[data-testid="shared-button-flow"]', { timeout: 100000, }); - await page.getByTestId("icon-Share3").first().click(); + await page.getByTestId("shared-button-flow").first().click(); await page.getByText("Name:").isVisible(); await page.getByText("Description:").isVisible(); await page.getByText("Set workflow status to public").isVisible(); diff --git a/src/frontend/tests/end-to-end/textInputOutput.spec.ts b/src/frontend/tests/end-to-end/textInputOutput.spec.ts index 6a8c4b246..9857cfba6 100644 --- a/src/frontend/tests/end-to-end/textInputOutput.spec.ts +++ b/src/frontend/tests/end-to-end/textInputOutput.spec.ts @@ -69,37 +69,36 @@ test("TextInputOutputComponent", async ({ page }) => { await page.getByTitle("zoom out").click(); await page.getByTitle("zoom out").click(); - await page - .locator( - '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]', - ) - .waitFor({ - state: "visible", - timeout: 30000, - }); + const component1 = await page.locator( + '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]', + ); - await page - .locator( - '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]', - ) - .hover(); + const element1 = await page.locator( + '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]', + ); + + const component2 = await page.locator( + '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]', + ); + + const element2 = await page.locator( + '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]', + ); + + // ensure elements popups are not blocking + component1.blur(); + component2.blur(); + + // Click and hold on the first element and move to the second element + await element1?.dragTo(element2); + + await page.mouse.up(); + + await element1.hover(); await page.mouse.down(); - await page - .locator( - '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]', - ) - .waitFor({ - state: "visible", - timeout: 30000, - }); - // Move to the second element - await page - .locator( - '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]', - ) - .hover(); + await component2.hover(); // Release the mouse await page.mouse.up(); @@ -122,38 +121,32 @@ test("TextInputOutputComponent", async ({ page }) => { await page.getByTitle("zoom out").click(); await page.getByTitle("zoom out").click(); - await page - .locator( - '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[15]/button/div[1]', - ) - .waitFor({ - state: "visible", - timeout: 30000, - }); + const component3 = await page.locator( + '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]', + ); - // Click and hold on the first element - await page - .locator( - '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[15]/button/div[1]', - ) - .hover(); + const element3 = await page.locator( + '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div[1]', + ); + + const element4 = await page.locator( + '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[15]/button/div[1]', + ); + + // ensure elements popups are not blocking + component2.blur(); + component3.blur(); + + // Click and hold on the first element and move to the second element + await element4?.dragTo(element3); + + await page.mouse.up(); + + await element4.hover(); await page.mouse.down(); - await page - .locator( - '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div[1]', - ) - .waitFor({ - state: "visible", - timeout: 30000, - }); - // Move to the second element - await page - .locator( - '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div[1]', - ) - .hover(); + await element3.hover(); // Release the mouse await page.mouse.up();