Repository: freeCodeCamp/freeCodeCamp
File: e2e/portfolio.spec.ts (TypeScript)

Code before:
  execSync('node ./tools/scripts/seed/seed-demo-user --certified-user');
});

test.describe('Add Portfolio Item', () => {
  test.beforeEach(async ({ page }) => {
    test.setTimeout(61000);
    await page.goto('/developmentuser');

    if (!process.env.CI) {
      await page
        .getByRole('button', { name: 'Preview custom 404 page' })
        .click();
    }

    await page.getByRole('button', { name: 'Edit my profile' }).click();

    await page
      .getByRole('button', { name: 'Add a new portfolio Item' })
      .click();

    // Will check if the portfolio button is hydrated correctly with different intervals.
    await expect(async () => {
      await expect(
        page.getByRole('button', { name: 'Add a new portfolio Item' })
      ).toBeDisabled();
    }).toPass();
  });

  test('The title has validation', async ({ page }) => {
    await page.getByLabel(translations.settings.labels.title).fill('T');
    await expect(page.getByTestId('title-validation')).toContainText(
      'Title is too short'
    );

    await page
      .getByLabel(translations.settings.labels.title)
      .fill(
        'This is the longest title you will ever see in your entire life, you will never see such a long title again. This is the longest title in existen'
      );
    await expect(page.getByTestId('title-validation')).toContainText(
      'Title is too long'
    );
    await page
      .getByLabel(translations.settings.labels.title)
      .fill('My portfolio');
    await expect(page.getByTestId('title-validation')).toBeHidden();
  });

  test('The url has validation', async ({ page }) => {
    await page.getByLabel(translations.settings.labels.url).fill('T');
    await expect(page.getByTestId('url-validation')).toContainText(

Review comment (bug):
```suggestion

    // Will check if the portfolio button is hydrated correctly with different intervals.
    await expect(async () => {
      const addPortfolioItemButton = page.getByRole('button', {
        name: 'Add a new portfolio Item'
      });
      await addPortfolioItemButton.click();

      await expect(addPortfolioItemButton).toBeDisabled({ timeout: 1 });
    }).toPass();
```
So, the thing is, there's no point re-checking if the button is disabled without clicking it. The problem is that if playwright clicks too early, the button click doesn't do anything, so waiting for even longer (i.e. what `toPass` does) just makes the test take longer to fail.

The way to think about `toPass` is that it lets you retry something unreliable (clicking) until it finally succeeds (button is disabled). You have to do both in the callback for that to work.

Code after:
  execSync('node ./tools/scripts/seed/seed-demo-user --certified-user');
});

test.describe('Add Portfolio Item', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/developmentuser');

    if (!process.env.CI) {
      await page
        .getByRole('button', { name: 'Preview custom 404 page' })
        .click();
    }

    await page.getByRole('button', { name: 'Edit my profile' }).click();

    // Will check if the portfolio button is hydrated correctly with different intervals.
    await expect(async () => {
      const addPortfolioItemButton = page.getByRole('button', {
        name: 'Add a new portfolio Item'
      });
      await addPortfolioItemButton.click();

      await expect(addPortfolioItemButton).toBeDisabled({ timeout: 1 });
    }).toPass();
  });

  test('The title has validation', async ({ page }) => {
    await page.getByLabel(translations.settings.labels.title).fill('T');
    await expect(page.getByTestId('title-validation')).toContainText(
      'Title is too short'
    );

    await page
      .getByLabel(translations.settings.labels.title)
      .fill(
        'This is the longest title you will ever see in your entire life, you will never see such a long title again. This is the longest title in existen'
      );
    await expect(page.getByTestId('title-validation')).toContainText(
      'Title is too long'
    );
    await page
      .getByLabel(translations.settings.labels.title)
      .fill('My portfolio');
    await expect(page.getByTestId('title-validation')).toBeHidden();
  });

  test('The url has validation', async ({ page }) => {
    await page.getByLabel(translations.settings.labels.url).fill('T');
    await expect(page.getByTestId('url-validation')).toContainText(
      'Please use a valid URL'
    );