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

Code before:
          exact: true
        })
      ).toBeVisible();
    }
  });

  test('Should display the Danger section properly', async ({ page }) => {
    await expect(page.getByText('Danger Zone')).toBeVisible();
    await expect(
      page.getByText(
        'Please be careful. Changes in this section are permanent.'
      )
    ).toBeVisible();
    await expect(
      page.getByRole('button', {
        name: 'Reset all of my progress'
      })
    ).toBeVisible();
    await expect(
      page.getByRole('button', {
        name: 'Delete my account'
      })
    ).toBeVisible();
  });

  test('Should allow empty string in any field in about settings', async ({
    page
  }) => {
    const saveButton = page.getByRole('button', {
      name: translations.settings.headings['personal-info']
    });

    const nameInput = page.getByLabel(translations.settings.labels.name);
    await nameInput.fill('');

    const locationInput = page.getByLabel(
      translations.settings.labels.location
    );
    await locationInput.fill('');

    const pictureInput = page.getByLabel(translations.settings.labels.picture);
    await pictureInput.fill('');

    const aboutInput = page.getByLabel(translations.settings.labels.about);
    await aboutInput.fill('');

    await expect(saveButton).not.toBeDisabled();
    await saveButton.click();
    await expect(
      page.getByText(translations.flash['updated-about-me'])
    ).toBeVisible();

Review comment (bug):
Given that initial bug was that you couldn't change from filled in fields to empty ones (for picture at least). Does this start with some data in any of the fields? If not, could you add something and then remove it?

Since we actually check the image link, it may need mocking. If this turns out to be a massive headache, we can rethink it!

Code after:
          exact: true
        })
      ).toBeVisible();
    }
  });

  test('Should display the Danger section properly', async ({ page }) => {
    await expect(page.getByText('Danger Zone')).toBeVisible();
    await expect(
      page.getByText(
        'Please be careful. Changes in this section are permanent.'
      )
    ).toBeVisible();
    await expect(
      page.getByRole('button', {
        name: 'Reset all of my progress'
      })
    ).toBeVisible();
    await expect(
      page.getByRole('button', {
        name: 'Delete my account'
      })
    ).toBeVisible();
  });

  test('Should allow empty string in any field in about settings', async ({
    page
  }) => {
    const saveButton = page.getByRole('button', {
      name: translations.settings.headings['personal-info']
    });

    const nameInput = page.getByLabel(translations.settings.labels.name, {
      exact: true
    });
    const locationInput = page.getByLabel(
      translations.settings.labels.location
    );
    const pictureInput = page.getByLabel(translations.settings.labels.picture);
    const aboutInput = page.getByLabel(translations.settings.labels.about);

    await nameInput.fill('Quincy Larson');
    await locationInput.fill('USA');
    await pictureInput.fill(
      'https://cdn.freecodecamp.org/platform/english/images/quincy-larson-signature.svg'
    );
    await aboutInput.fill('Teacher at freeCodeCamp');

    await expect(saveButton).not.toBeDisabled();
    await saveButton.click();
    await expect(