(index.tsx): add data-testid attribute to shared button for testing

 (store.spec.ts): update test selector to use new data-testid attribute
♻️ (textInputOutput.spec.ts): refactor element selection and interaction logic for clarity and maintainability
This commit is contained in:
cristhianzl 2024-06-26 15:27:58 -03:00 committed by Gabriel Luiz Freitas Almeida
commit 26e6296e9e
3 changed files with 51 additions and 57 deletions

View file

@ -67,6 +67,7 @@ export default function FlowToolbar(): JSX.Element {
? "button-disable text-muted-foreground"
: "",
)}
data-testid="shared-button-flow"
>
<ForwardedIconComponent
name="Share3"

View file

@ -259,11 +259,11 @@ test("should share component with share button", async ({ page }) => {
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();

View file

@ -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();