Fix flaky e2e test tutorial-1 (#6362)

* change date set

* update loader margin

* update branch generator to avoid undefined in the string

* update merge test

* add random branches

* delete branch after test

* set to 2 workers

* remove test id for cypress

* update test to ensure the alert visibility

Author: pa-lem

frontend/app/playwright.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
     toHaveScreenshot: { maxDiffPixels: 5000 },
   },
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 3 : undefined,
+  workers: process.env.CI ? 2 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: [
     ["list"],

frontend/app/src/shared/components/buttons/button.tsx

@@ -109,7 +109,7 @@ export const Button = forwardRef((props: ButtonProps, ref: any) => {
       onClick={handleClick}
       disabled={isLoading ? true : propsToPass.disabled}
     >
-      {isLoading ? <Spinner className="mr-2" /> : children}
+      {isLoading ? <Spinner className="mx-2" /> : children}
     </button>
   );
 });

frontend/app/src/shared/components/ui/form.tsx

@@ -150,7 +150,7 @@ export const FormSubmit = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const isLoading = formState.isSubmitting || formState.isValidating;
 
     return (
-      <Button ref={ref} disabled={isLoading} {...props} type="submit" data-cy="submit-form">
+      <Button ref={ref} disabled={isLoading} {...props} type="submit">
         <span className={classNames(isLoading && "invisible")}>{children}</span>
         {isLoading && <Spinner className="absolute" />}
       </Button>

frontend/app/tests/e2e/branches/merge-branch.spec.ts

@@ -1,24 +1,34 @@
 import { expect, test } from "@playwright/test";
 import { ACCOUNT_STATE_PATH } from "../../constants";
+import { generateRandomBranchName } from "../../utils";
+import { deleteBranchAPI } from "../utils/graphql";
 
 test.describe("Verify branch merge button state", () => {
   test.use({ storageState: ACCOUNT_STATE_PATH.ADMIN });
 
+  const BRANCH_NAME = generateRandomBranchName("merge-action-test");
+
+  test.afterAll(async ({ request }) => {
+    await deleteBranchAPI(request, BRANCH_NAME);
+  });
+
   test("create a branch, merge it and verify button state", async ({ page }) => {
     await test.step("Create and access a new branch", async () => {
       await page.goto("/branches");
       await page.getByTestId("branch-selector-trigger").click();
       await page.getByTestId("create-branch-button").click();
-      await page.getByRole("textbox", { name: "New branch name *" }).fill("merge-action-test");
+      await page.getByRole("textbox", { name: "New branch name *" }).fill(BRANCH_NAME);
       await page.getByRole("button", { name: "Create a new branch" }).click();
       await expect(page.getByText("New branch name *")).not.toBeVisible();
-      await expect(page.getByTestId("branches-items").getByText("merge-action-test")).toBeVisible();
-      await page.getByTestId("branches-items").getByText("merge-action-test").click();
-      await expect(page.getByText("Namemerge-action-test")).toBeVisible();
+      await expect(page.getByTestId("branches-items").getByText(BRANCH_NAME)).toBeVisible();
+      await page.getByTestId("branches-items").getByText(BRANCH_NAME).click();
+      await expect(page.getByText(`Name${BRANCH_NAME}`)).toBeVisible();
       await page.getByText("Tasks").click();
     });
 
     await test.step("Merge the branch and verify button state", async () => {
+      test.slow();
+
       await page.getByRole("button", { name: "Merge", exact: true }).click();
       await expect(page.getByText("Branch merge requested!")).toBeVisible();
       await expect(page.getByText("RUNNINGMerge branch graphQL")).toBeVisible();

frontend/app/tests/e2e/docs-regression-check/tutorials/tutorial-1_object-create-update-diff-and-merge.spec.ts

@@ -11,14 +11,14 @@ test.describe("Getting started with Infrahub - Object and branch creation, updat
   let dateBeforeTest: Date;
 
   test("1. Create a new organization", async ({ page }) => {
-    dateBeforeTest = new Date();
-
     await page.goto("/");
 
     await page.getByTestId("sidebar").getByRole("button", { name: "Organization" }).click();
     await page.getByRole("menuitem", { name: "Tenant" }).click();
     await expect(page.getByRole("link", { name: "Duff" })).toBeVisible();
 
+    dateBeforeTest = new Date();
+
     await test.step("fill and submit form for new organization", async () => {
       await page.getByTestId("create-object-button").click();
 

frontend/app/tests/e2e/docs-regression-check/tutorials/tutorial-2_data-lineage-and-metadata.spec.ts

@@ -35,6 +35,8 @@ test.describe("Getting started with Infrahub - Data lineage and metadata", () =>
       await saveScreenshotForDocs(page, "tutorial_4_metadata_edit");
       await page.getByRole("button", { name: "Save" }).click();
 
+      await expect(page.getByText("Metadata updated")).toBeVisible();
+
       await page.getByText("Description-").getByTestId("view-metadata-button").click();
 
       await expect(page.getByText("Is protectedTrue")).toBeVisible();

frontend/app/tests/e2e/proposed-changes/proposed-changes.spec.ts

@@ -1,5 +1,6 @@
 import { expect, test } from "@playwright/test";
 import { ACCOUNT_STATE_PATH } from "../../constants";
+import { generateRandomBranchName } from "../../utils";
 import { createBranchAPI, deleteBranchAPI } from "../utils/graphql";
 
 test.describe("/proposed-changes", () => {
@@ -46,9 +47,9 @@ test.describe("/proposed-changes", () => {
     test.describe("Create, edit and merge proposed change", async () => {
       test.describe.configure({ mode: "serial" });
 
-      const pcName = "pc-e2e";
-      const pcNameEdit = "pc-e2e-edit";
-      const pcBranchName = "main-copy-for-pc-e2e";
+      const pcName = generateRandomBranchName("pc-e2e");
+      const pcNameEdit = generateRandomBranchName("pc-e2e-edit");
+      const pcBranchName = generateRandomBranchName("main-copy-for-pc-e2e");
 
       test.beforeAll(async ({ request }) => {
         await createBranchAPI(request, pcBranchName);

frontend/app/tests/utils.ts

@@ -25,5 +25,5 @@ export const deleteBranch = async (page: Page, branchName: string) => {
 };
 
 export const generateRandomBranchName = (prefix?: string) => {
-  return `${prefix}${Math.random().toString(36).substring(2, 15)}`;
+  return `${prefix ?? ""}${Math.random().toString(36).substring(2, 15)}`;
 };