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

Code before:

test.beforeAll(() => {
  execSync('node ./tools/scripts/seed/seed-demo-user');
});

test.afterAll(() => {
  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(() => {
      page.getByRole('button', { name: 'Add a new portfolio Item' });
    }).toPass();

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

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


Review comment (suggestion):
For `toPass` to be useful, there have to be assertions inside the callback. What it does is keep calling the callback until either it passes or something times out (the test, probably). If there are no assertions it immediately resolves, so it doesn't help.

Instead, what you need to do is assert that we've ended up in the expected state. In this case, we can check that the `Add a new portfolio Item` button is disabled, since that happens in response to a successful click.

TL;DR: the callback needs to assert that something has happened in response to the click.

Code after:

test.beforeAll(() => {
  execSync('node ./tools/scripts/seed/seed-demo-user');
});

test.afterAll(() => {
  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();
  });