Repository: freeCodeCamp/freeCodeCamp
File: e2e/challenge-title.spec.ts (TypeScript)

Code before:
    .click({ force: true });

  await page
    .getByText(translations['buttons']['go-to-next'])
    .click({ force: true });

  await page.waitForLoadState('domcontentloaded');

  await page.goto(
    '/learn/information-security/python-for-penetration-testing/developing-a-port-scanner'
  );

  await page.waitForLoadState();
};

test.describe('Challenge Title Component (signed out)', () => {
  test('should render correctly', async ({ page }) => {
    await expect(page.getByLabel('Passed')).not.toBeVisible();

    await expect(page.getByText('Developing a Port Scanner')).toBeVisible();
  });

  test('should not display GreenPass after challenge completion', async ({
    page
  }) => {
    await completeChallenge(page);

    await expect(page.getByLabel('Passed')).not.toBeVisible();
  });

  test("should appropriately render 'Please Help Us Translate' link", async ({
    page
  }) => {
    // This test can be merged with the 'should render correctly' test,
    // but is isolated for now due to debugging. (Automatically skips this test)

    const visibleEnglishTitle = await page
      .getByText('Developing a Port Scanner')
      .isVisible();

    if (process.env.CURRICULUM_LOCALE != 'english' && visibleEnglishTitle) {
      // Challenge title has not been translated, expect a
      // 'Help us translate' button
      await expect(page.getByText('Help us translate')).toBeVisible();
    } else {
      // CURRICULUM_LOCALE is set to english or curriculum is already
      // translated. Do not expect a 'Help us translate' button.
      await expect(page.getByText('Help us translate')).not.toBeVisible();
    }
  });
});

Review comment (bug):
The actions are simple enough, so let's move them into the test instead of abstracting them away. Being explicit in tests would help ease the debugging process as we can see clearly how they run, and having the simulation/interaction separated would help isolate the tests, allowing us to make changes to them freely without having to worry about breaking other tests 🙂 

Code after:
  }) => {
    // Set `force: true` to bypass Playwright's check
    // as the radio is visually hidden and the click event is intercepted by the `span` element.
    await page
      .getByRole('radio', {
        name: 'If there is an error or if no host is found, .connect() raises an exception while .connect_ex() returns an error code.'
      })
      .click({ force: true });

    await page
      .getByRole('button', { name: translations.buttons['check-answer'] })
      .click();

    await page
      .getByRole('button', { name: translations.buttons['go-to-next'] })
      .click();

    // After clicking 'go-to-next' button, page redirects to courses list.
    // We need to wait for this navigation to be completed before navigating to the next
    // or Firefox will throw a NS_BINDING_ABORTED error.
    await page.waitForURL(
      '/learn/information-security/#python-for-penetration-testing'
    );

    // Returning back to the challenge, to verify that GreenPass is rendered on the challenge itself.
    await page.goto(
      '/learn/information-security/python-for-penetration-testing/developing-a-port-scanner'
    );

    await page.waitForLoadState();

    await expect(page.getByLabel('Passed')).not.toBeVisible();
  });

  test("should appropriately render 'Please Help Us Translate' link", async ({
    page
  }) => {
    const visibleEnglishTitle = await page
      .getByRole('heading', { name: 'Developing a Port Scanner' })
      .isVisible();

    if (process.env.CURRICULUM_LOCALE != 'english' && visibleEnglishTitle) {
      // Challenge title has not been translated, expect a
      // 'Help us translate' button
      await expect(page.getByText('Help us translate')).toBeVisible();
    } else {
      // CURRICULUM_LOCALE is set to english or curriculum is already
      // translated. Do not expect a 'Help us translate' button.
      await expect(page.getByText('Help us translate')).not.toBeVisible();
    }
  });