Repository: Significant-Gravitas/Auto-GPT
File: autogpt_platform/frontend/src/tests/profile-form.spec.ts (TypeScript)

Code before:
    ];

    await profileFormPage.setDisplayName(newDisplayName);
    await profileFormPage.setHandle(newHandle);
    await profileFormPage.setBio(newBio);
    await profileFormPage.setLinks(newLinks);

    try {
      await page.keyboard.press("Escape");
    } catch {}

    await profileFormPage.saveChanges();

    expect(await profileFormPage.getDisplayName()).toBe(newDisplayName);
    expect(await profileFormPage.getHandle()).toBe(newHandle);
    expect(await profileFormPage.getBio()).toBe(newBio);
    for (let i = 1; i <= 5; i++) {
      expect(await profileFormPage.getLink(i)).toBe(newLinks[i - 1]);
    }

    await page.reload();
    await expect(profileFormPage.isLoaded()).resolves.toBeTruthy();

    expect(await profileFormPage.getDisplayName()).toBe(newDisplayName);
    expect(await profileFormPage.getHandle()).toBe(newHandle);
    expect(await profileFormPage.getBio()).toBe(newBio);
    for (let i = 1; i <= 5; i++) {
      expect(await profileFormPage.getLink(i)).toBe(newLinks[i - 1]);
    }
  });

  // Currently we are not using hook form inside the profile form, so cancel button is not working as expected, once that's fixed, we can unskip this test
  test.skip("can cancel profile changes", async ({ page }) => {
    await profileFormPage.navbar.clickProfileLink();

    await expect(profileFormPage.isLoaded()).resolves.toBeTruthy();
    await hasUrl(page, new RegExp("/profile"));

    const originalDisplayName = await profileFormPage.getDisplayName();
    const originalHandle = await profileFormPage.getHandle();
    const originalBio = await profileFormPage.getBio();
    const originalLinks: string[] = [];
    for (let i = 1; i <= 5; i++) {
      originalLinks.push(await profileFormPage.getLink(i));
    }

    const suffix = `${Date.now().toString().slice(-6)}_cancel`;
    await profileFormPage.setDisplayName(`Tmp Name ${suffix}`);
    await profileFormPage.setHandle(`tmpuser${suffix}`);
    await profileFormPage.setBio(`Tmp bio ${suffix}`);
    for (let i = 1; i <= 5; i++) {

Review comment (refactor):
If `Cancel` button is not working, we might just hide it for now until we refactor the form to use `react-hook-form` ?

Code after:
    ];

    await profileFormPage.setDisplayName(newDisplayName);
    await profileFormPage.setHandle(newHandle);
    await profileFormPage.setBio(newBio);
    await profileFormPage.setLinks(newLinks);
    await profileFormPage.saveChanges();

    expect(await profileFormPage.getDisplayName()).toBe(newDisplayName);
    expect(await profileFormPage.getHandle()).toBe(newHandle);
    expect(await profileFormPage.getBio()).toBe(newBio);
    for (let i = 1; i <= 5; i++) {
      expect(await profileFormPage.getLink(i)).toBe(newLinks[i - 1]);
    }

    await page.reload();
    await expect(profileFormPage.isLoaded()).resolves.toBeTruthy();

    expect(await profileFormPage.getDisplayName()).toBe(newDisplayName);
    expect(await profileFormPage.getHandle()).toBe(newHandle);
    expect(await profileFormPage.getBio()).toBe(newBio);
    for (let i = 1; i <= 5; i++) {
      expect(await profileFormPage.getLink(i)).toBe(newLinks[i - 1]);
    }
  });

  // Currently we are not using hook form inside the profile form, so cancel button is not working as expected, once that's fixed, we can unskip this test
  test.skip("can cancel profile changes", async ({ page }) => {
    await profileFormPage.navbar.clickProfileLink();

    await expect(profileFormPage.isLoaded()).resolves.toBeTruthy();
    await hasUrl(page, new RegExp("/profile"));

    const originalDisplayName = await profileFormPage.getDisplayName();
    const originalHandle = await profileFormPage.getHandle();
    const originalBio = await profileFormPage.getBio();
    const originalLinks: string[] = [];
    for (let i = 1; i <= 5; i++) {
      originalLinks.push(await profileFormPage.getLink(i));
    }

    const suffix = `${Date.now().toString().slice(-6)}_cancel`;
    await profileFormPage.setDisplayName(`Tmp Name ${suffix}`);
    await profileFormPage.setHandle(`tmpuser${suffix}`);
    await profileFormPage.setBio(`Tmp bio ${suffix}`);
    for (let i = 1; i <= 5; i++) {
      await profileFormPage.setLink(i, `https://tmp.example/${suffix}/${i}`);
    }

    await profileFormPage.clickCancel();