ronantakizawa/codereview-bench huggingface dataset:
Repository: freeCodeCamp/freeCodeCamp
File: e2e/footer.spec.ts (TypeScript)

Code before:
import { test, expect, type Page } from '@playwright/test';

const footerComponentElements = {
  descriptions: 'footer-desc-col',
  trendingGuidesHeader: 'trending-guides-col-header',
  trendingGuideArticles: 'trending-guides-articles',
  footerBottomHeader: 'footer-bottom-col-header',
  footerBottomLinks: 'our-nonprofit'
} as const;

let page: Page;

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
  await page.goto('/');
});

test.afterAll(async () => {
  await page.close();
});

test('Has descriptions', async () => {
  const descriptions = page
    .getByTestId(footerComponentElements.descriptions)
    .locator('p');
  await expect(descriptions).toHaveCount(4);
  for (const desc of await descriptions.all()) {
    await expect(desc).toBeVisible();
  }
});

test('Has header for trending guides', async () => {
  const trendingGuidesHeader = page.getByTestId(
    footerComponentElements.trendingGuidesHeader
  );
  await expect(trendingGuidesHeader).toBeVisible();
});

test('Has 30 trending guide articles', async () => {
  const trendingGuideArticles = page
    .getByTestId(footerComponentElements.trendingGuideArticles)
    .locator('a');
  await expect(trendingGuideArticles).toHaveCount(30);
  for (const article of await trendingGuideArticles.all()) {
    await expect(article).toBeVisible();

Review comment (suggestion):
```suggestion
test.beforeEach(async ({ page }) => {
  await page.goto('/settings');
});
```

Ref: https://github.com/freeCodeCamp/freeCodeCamp/pull/51754#discussion_r1342543051

Code after:
import { test, expect } from '@playwright/test';

const footerComponentElements = {
  descriptions: 'footer-desc-col',
  trendingGuidesHeader: 'trending-guides-col-header',
  trendingGuideArticles: 'trending-guides-articles',
  footerBottomHeader: 'footer-bottom-col-header',
  footerBottomLinks: 'our-nonprofit'
} as const;

test.beforeEach(async ({ page }) => {
  await page.goto('/');
});

test('Has descriptions', async ({ page }) => {
  const descriptions = page
    .getByTestId(footerComponentElements.descriptions)
    .locator('p');
  await expect(descriptions).toHaveCount(4);
  for (const desc of await descriptions.all()) {
    await expect(desc).toBeVisible();
  }
});

test('Has header for trending guides', async ({ page }) => {
  const trendingGuidesHeader = page.getByTestId(
    footerComponentElements.trendingGuidesHeader
  );
  await expect(trendingGuidesHeader).toBeVisible();
});

test('Has 30 trending guide articles', async ({ page }) => {
  const trendingGuideArticles = page
    .getByTestId(footerComponentElements.trendingGuideArticles)
    .locator('a');
  await expect(trendingGuideArticles).toHaveCount(30);
  for (const article of await trendingGuideArticles.all()) {
    await expect(article).toBeVisible();
  }
});

test('Has header for footer bottom', async ({ page, isMobile }) => {
  const footerBottomHeader = page.getByTestId(
    footerComponentElements.footerBottomHeader
  );
Repository: freeCodeCamp/freeCodeCamp
File: e2e/footer.spec.ts (TypeScript)

Code before:
import { test, expect, type Page } from '@playwright/test';

const footerComponentElements = {
  descriptions: 'footer-desc-col',
  trendingGuidesHeader: 'trending-guides-col-header',
  trendingGuideArticles: 'trending-guides-articles',
  footerBottomHeader: 'footer-bottom-col-header',
  footerBottomLinks: 'our-nonprofit'
} as const;

let page: Page;

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
  await page.goto('/');
});

test.afterAll(async () => {
  await page.close();
});

test('Has descriptions', async () => {
  const descriptions = page
    .getByTestId(footerComponentElements.descriptions)
    .locator('p');
  await expect(descriptions).toHaveCount(4);
  for (const desc of await descriptions.all()) {
    await expect(desc).toBeVisible();
  }
});

test('Has header for trending guides', async () => {
  const trendingGuidesHeader = page.getByTestId(
    footerComponentElements.trendingGuidesHeader
  );
  await expect(trendingGuidesHeader).toBeVisible();
});

test('Has 30 trending guide articles', async () => {
  const trendingGuideArticles = page
    .getByTestId(footerComponentElements.trendingGuideArticles)
    .locator('a');
  await expect(trendingGuideArticles).toHaveCount(30);
  for (const article of await trendingGuideArticles.all()) {
    await expect(article).toBeVisible();
  }
});

Review comment (suggestion):
```suggestion
test('Has descriptions', async ({ page }) => {
```

Code after:
import { test, expect } from '@playwright/test';

const footerComponentElements = {
  descriptions: 'footer-desc-col',
  trendingGuidesHeader: 'trending-guides-col-header',
  trendingGuideArticles: 'trending-guides-articles',
  footerBottomHeader: 'footer-bottom-col-header',
  footerBottomLinks: 'our-nonprofit'
} as const;

test.beforeEach(async ({ page }) => {
  await page.goto('/');
});

test('Has descriptions', async ({ page }) => {
  const descriptions = page
    .getByTestId(footerComponentElements.descriptions)
    .locator('p');
  await expect(descriptions).toHaveCount(4);
  for (const desc of await descriptions.all()) {
    await expect(desc).toBeVisible();
  }
});

test('Has header for trending guides', async ({ page }) => {
  const trendingGuidesHeader = page.getByTestId(
    footerComponentElements.trendingGuidesHeader
  );
  await expect(trendingGuidesHeader).toBeVisible();
});

test('Has 30 trending guide articles', async ({ page }) => {
  const trendingGuideArticles = page
    .getByTestId(footerComponentElements.trendingGuideArticles)
    .locator('a');
  await expect(trendingGuideArticles).toHaveCount(30);
  for (const article of await trendingGuideArticles.all()) {
    await expect(article).toBeVisible();
  }
});

test('Has header for footer bottom', async ({ page, isMobile }) => {
  const footerBottomHeader = page.getByTestId(
    footerComponentElements.footerBottomHeader
  );
  if (isMobile) {
    await expect(footerBottomHeader).toBeVisible();
Repository: freeCodeCamp/freeCodeCamp
File: e2e/footer.spec.ts (TypeScript)

Code before:
  footerBottomHeader: 'footer-bottom-col-header',
  footerBottomLinks: 'our-nonprofit'
} as const;

let page: Page;

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
  await page.goto('/');
});

test.afterAll(async () => {
  await page.close();
});

test('Has descriptions', async () => {
  const descriptions = page
    .getByTestId(footerComponentElements.descriptions)
    .locator('p');
  await expect(descriptions).toHaveCount(4);
  for (const desc of await descriptions.all()) {
    await expect(desc).toBeVisible();
  }
});

test('Has header for trending guides', async () => {
  const trendingGuidesHeader = page.getByTestId(
    footerComponentElements.trendingGuidesHeader
  );
  await expect(trendingGuidesHeader).toBeVisible();
});

test('Has 30 trending guide articles', async () => {
  const trendingGuideArticles = page
    .getByTestId(footerComponentElements.trendingGuideArticles)
    .locator('a');
  await expect(trendingGuideArticles).toHaveCount(30);
  for (const article of await trendingGuideArticles.all()) {
    await expect(article).toBeVisible();
  }
});

test('Has header for footer bottom', async ({ isMobile }) => {
  const footerBottomHeader = page.getByTestId(
    footerComponentElements.footerBottomHeader
  );
  if (isMobile) {
    await expect(footerBottomHeader).toBeVisible();
  } else {
    await expect(footerBottomHeader).toBeHidden();
  }

Review comment (suggestion):
```suggestion
test('Has header for trending guides', async ({ page }) => {
```

Code after:
  footerBottomHeader: 'footer-bottom-col-header',
  footerBottomLinks: 'our-nonprofit'
} as const;

test.beforeEach(async ({ page }) => {
  await page.goto('/');
});

test('Has descriptions', async ({ page }) => {
  const descriptions = page
    .getByTestId(footerComponentElements.descriptions)
    .locator('p');
  await expect(descriptions).toHaveCount(4);
  for (const desc of await descriptions.all()) {
    await expect(desc).toBeVisible();
  }
});

test('Has header for trending guides', async ({ page }) => {
  const trendingGuidesHeader = page.getByTestId(
    footerComponentElements.trendingGuidesHeader
  );
  await expect(trendingGuidesHeader).toBeVisible();
});

test('Has 30 trending guide articles', async ({ page }) => {
  const trendingGuideArticles = page
    .getByTestId(footerComponentElements.trendingGuideArticles)
    .locator('a');
  await expect(trendingGuideArticles).toHaveCount(30);
  for (const article of await trendingGuideArticles.all()) {
    await expect(article).toBeVisible();
  }
});

test('Has header for footer bottom', async ({ page, isMobile }) => {
  const footerBottomHeader = page.getByTestId(
    footerComponentElements.footerBottomHeader
  );
  if (isMobile) {
    await expect(footerBottomHeader).toBeVisible();
  } else {
    await expect(footerBottomHeader).toBeHidden();
  }
});

test('Has 11 nonprofits', async ({ page }) => {
  const footerBottomLinks = page
    .getByTestId(footerComponentElements.footerBottomLinks)
    .locator('a');
  await expect(footerBottomLinks).toHaveCount(11);
Repository: freeCodeCamp/freeCodeCamp
File: e2e/footer.spec.ts (TypeScript)

Code before:
  page = await browser.newPage();
  await page.goto('/');
});

test.afterAll(async () => {
  await page.close();
});

test('Has descriptions', async () => {
  const descriptions = page
    .getByTestId(footerComponentElements.descriptions)
    .locator('p');
  await expect(descriptions).toHaveCount(4);
  for (const desc of await descriptions.all()) {
    await expect(desc).toBeVisible();
  }
});

test('Has header for trending guides', async () => {
  const trendingGuidesHeader = page.getByTestId(
    footerComponentElements.trendingGuidesHeader
  );
  await expect(trendingGuidesHeader).toBeVisible();
});

test('Has 30 trending guide articles', async () => {
  const trendingGuideArticles = page
    .getByTestId(footerComponentElements.trendingGuideArticles)
    .locator('a');
  await expect(trendingGuideArticles).toHaveCount(30);
  for (const article of await trendingGuideArticles.all()) {
    await expect(article).toBeVisible();
  }
});

test('Has header for footer bottom', async ({ isMobile }) => {
  const footerBottomHeader = page.getByTestId(
    footerComponentElements.footerBottomHeader
  );
  if (isMobile) {
    await expect(footerBottomHeader).toBeVisible();
  } else {
    await expect(footerBottomHeader).toBeHidden();
  }
});

test('Has 11 nonprofits', async () => {
  const footerBottomLinks = page
    .getByTestId(footerComponentElements.footerBottomLinks)
    .locator('a');
  await expect(footerBottomLinks).toHaveCount(11);

Review comment (suggestion):
```suggestion
test('Has 30 trending guide articles', async ({ page }) => {
```

Code after:

test('Has descriptions', async ({ page }) => {
  const descriptions = page
    .getByTestId(footerComponentElements.descriptions)
    .locator('p');
  await expect(descriptions).toHaveCount(4);
  for (const desc of await descriptions.all()) {
    await expect(desc).toBeVisible();
  }
});

test('Has header for trending guides', async ({ page }) => {
  const trendingGuidesHeader = page.getByTestId(
    footerComponentElements.trendingGuidesHeader
  );
  await expect(trendingGuidesHeader).toBeVisible();
});

test('Has 30 trending guide articles', async ({ page }) => {
  const trendingGuideArticles = page
    .getByTestId(footerComponentElements.trendingGuideArticles)
    .locator('a');
  await expect(trendingGuideArticles).toHaveCount(30);
  for (const article of await trendingGuideArticles.all()) {
    await expect(article).toBeVisible();
  }
});

test('Has header for footer bottom', async ({ page, isMobile }) => {
  const footerBottomHeader = page.getByTestId(
    footerComponentElements.footerBottomHeader
  );
  if (isMobile) {
    await expect(footerBottomHeader).toBeVisible();
  } else {
    await expect(footerBottomHeader).toBeHidden();
  }
});

test('Has 11 nonprofits', async ({ page }) => {
  const footerBottomLinks = page
    .getByTestId(footerComponentElements.footerBottomLinks)
    .locator('a');
  await expect(footerBottomLinks).toHaveCount(11);
  for (const footerBottomLink of await footerBottomLinks.all()) {
    await expect(footerBottomLink).toBeVisible();
  }
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/footer.spec.ts (TypeScript)

Code before:
    .getByTestId(footerComponentElements.descriptions)
    .locator('p');
  await expect(descriptions).toHaveCount(4);
  for (const desc of await descriptions.all()) {
    await expect(desc).toBeVisible();
  }
});

test('Has header for trending guides', async () => {
  const trendingGuidesHeader = page.getByTestId(
    footerComponentElements.trendingGuidesHeader
  );
  await expect(trendingGuidesHeader).toBeVisible();
});

test('Has 30 trending guide articles', async () => {
  const trendingGuideArticles = page
    .getByTestId(footerComponentElements.trendingGuideArticles)
    .locator('a');
  await expect(trendingGuideArticles).toHaveCount(30);
  for (const article of await trendingGuideArticles.all()) {
    await expect(article).toBeVisible();
  }
});

test('Has header for footer bottom', async ({ isMobile }) => {
  const footerBottomHeader = page.getByTestId(
    footerComponentElements.footerBottomHeader
  );
  if (isMobile) {
    await expect(footerBottomHeader).toBeVisible();
  } else {
    await expect(footerBottomHeader).toBeHidden();
  }
});

test('Has 11 nonprofits', async () => {
  const footerBottomLinks = page
    .getByTestId(footerComponentElements.footerBottomLinks)
    .locator('a');
  await expect(footerBottomLinks).toHaveCount(11);
  for (const footerBottomLink of await footerBottomLinks.all()) {
    await expect(footerBottomLink).toBeVisible();
  }
});


Review comment (suggestion):
```suggestion
test('Has header for footer bottom', async ({ page, isMobile }) => {
```

Code after:

test('Has header for trending guides', async ({ page }) => {
  const trendingGuidesHeader = page.getByTestId(
    footerComponentElements.trendingGuidesHeader
  );
  await expect(trendingGuidesHeader).toBeVisible();
});

test('Has 30 trending guide articles', async ({ page }) => {
  const trendingGuideArticles = page
    .getByTestId(footerComponentElements.trendingGuideArticles)
    .locator('a');
  await expect(trendingGuideArticles).toHaveCount(30);
  for (const article of await trendingGuideArticles.all()) {
    await expect(article).toBeVisible();
  }
});

test('Has header for footer bottom', async ({ page, isMobile }) => {
  const footerBottomHeader = page.getByTestId(
    footerComponentElements.footerBottomHeader
  );
  if (isMobile) {
    await expect(footerBottomHeader).toBeVisible();
  } else {
    await expect(footerBottomHeader).toBeHidden();
  }
});

test('Has 11 nonprofits', async ({ page }) => {
  const footerBottomLinks = page
    .getByTestId(footerComponentElements.footerBottomLinks)
    .locator('a');
  await expect(footerBottomLinks).toHaveCount(11);
  for (const footerBottomLink of await footerBottomLinks.all()) {
    await expect(footerBottomLink).toBeVisible();
  }
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/footer.spec.ts (TypeScript)

Code before:
  );
  await expect(trendingGuidesHeader).toBeVisible();
});

test('Has 30 trending guide articles', async () => {
  const trendingGuideArticles = page
    .getByTestId(footerComponentElements.trendingGuideArticles)
    .locator('a');
  await expect(trendingGuideArticles).toHaveCount(30);
  for (const article of await trendingGuideArticles.all()) {
    await expect(article).toBeVisible();
  }
});

test('Has header for footer bottom', async ({ isMobile }) => {
  const footerBottomHeader = page.getByTestId(
    footerComponentElements.footerBottomHeader
  );
  if (isMobile) {
    await expect(footerBottomHeader).toBeVisible();
  } else {
    await expect(footerBottomHeader).toBeHidden();
  }
});

test('Has 11 nonprofits', async () => {
  const footerBottomLinks = page
    .getByTestId(footerComponentElements.footerBottomLinks)
    .locator('a');
  await expect(footerBottomLinks).toHaveCount(11);
  for (const footerBottomLink of await footerBottomLinks.all()) {
    await expect(footerBottomLink).toBeVisible();
  }
});


Review comment (suggestion):
```suggestion
test('Has 11 nonprofits', async ({ page }) => {
```

Code after:
    .locator('a');
  await expect(trendingGuideArticles).toHaveCount(30);
  for (const article of await trendingGuideArticles.all()) {
    await expect(article).toBeVisible();
  }
});

test('Has header for footer bottom', async ({ page, isMobile }) => {
  const footerBottomHeader = page.getByTestId(
    footerComponentElements.footerBottomHeader
  );
  if (isMobile) {
    await expect(footerBottomHeader).toBeVisible();
  } else {
    await expect(footerBottomHeader).toBeHidden();
  }
});

test('Has 11 nonprofits', async ({ page }) => {
  const footerBottomLinks = page
    .getByTestId(footerComponentElements.footerBottomLinks)
    .locator('a');
  await expect(footerBottomLinks).toHaveCount(11);
  for (const footerBottomLink of await footerBottomLinks.all()) {
    await expect(footerBottomLink).toBeVisible();
  }
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/donate-page-default.spec.ts (TypeScript)

Code before:
    );
  });
  test('should display donation page benefit 2', async () => {
    const donateText2 = page.getByTestId('donate-text-2');
    await expect(donateText2).toHaveText(
      'When you donate to freeCodeCamp, you help people learn new skills and provide for their families.'
    );
  });
  test('should display donation page benefit 3', async () => {
    const donateText3 = page.getByTestId('donate-text-3');
    await expect(donateText3).toHaveText(
      'You also help us create new resources for you to use to expand your own technology skills.'
    );
  });

  test('should display the faq heading', async () => {
    const faqHead = page.getByTestId('faq-head');
    expect(faqHead).not.toBeNull();
    expect(await faqHead.textContent()).toBe('Frequently asked questions');
  });

  test('Frequently asked question list buttons', async () => {
    for (const i of frequentlyAskedQuestions) {
      await page.getByRole('button', { name: `${i}` }).click();
    }
  });
});


Review comment (suggestion):
I think we should just check if the list of buttons is presented on the page, so the test description should be updated a bit, and we should use the `.toBeVisible()` assertion to be explicit in the expectation.

```suggestion
  test('should display the frequently asked question buttons', async () => {
    for (const i of frequentlyAskedQuestions) {
      await page.getByRole('button', { name: `${i}` }).toBeVisible();
    }
  });
```

Code after:
      'freeCodeCamp is a highly efficient education charity.'
    );
  });

  test('should display donation page benefit 2', async () => {
    const donateText2 = page.getByTestId('donate-text-2');
    await expect(donateText2).toHaveText(
      'When you donate to freeCodeCamp, you help people learn new skills and provide for their families.'
    );
  });

  test('should display donation page benefit 3', async () => {
    const donateText3 = page.getByTestId('donate-text-3');
    await expect(donateText3).toHaveText(
      'You also help us create new resources for you to use to expand your own technology skills.'
    );
  });

  test('should display the faq heading', async () => {
    const faqHead = page.getByTestId('faq-head');
    expect(faqHead).not.toBeNull();
    expect(await faqHead.textContent()).toBe('Frequently asked questions');
  });

  test('Frequently asked question list buttons', async () => {
    for (const i of frequentlyAskedQuestions) {
      await page.getByRole('button', { name: `${i}` }).isVisible();
    }
  });
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/challenges.test.ts (TypeScript)

Code before:
  const testLearnPageHeader = async () => {
    const header = page.getByTestId('learn-heading');
    await expect(header).toBeVisible();
    await expect(header).toContainText(translations.learn.heading);
  };

  const runLearnTests = async () => {
    await testLearnPageTitle();
    await testLearnPageHeader();
  };

  for (const { input, expected } of pathsToTest) {
    test(`should redirect from ${input} to ${expected}, if it fails runs a DOM test`, async () => {
      try {
        await page.goto(input);
        const currentPath = new URL(page.url()).pathname;
        expect(currentPath).toBe(expected);
      } catch (error) {
        console.log(
          `Failed to redirect from ${input} to ${expected}. Running DOM tests.`
        );
        await runLearnTests();
      }
    });
  }
});


Review comment (suggestion):
Hey @KyleGrande, thank you for the tests!

For posterity, I think we should add a code comment here to explain why the error would occur and how we handle it.

Code after:
  const testLearnPageHeader = async () => {
    const header = page.getByTestId('learn-heading');
    await expect(header).toBeVisible();
    await expect(header).toContainText(translations.learn.heading);
  };

  const runLearnTests = async () => {
    await testLearnPageTitle();
    await testLearnPageHeader();
  };

  for (const { input, expected } of pathsToTest) {
    test(`should redirect from ${input} to ${expected}, if it fails runs a DOM test`, async () => {
      try {
        await page.goto(input);
        const currentPath = new URL(page.url()).pathname;
        expect(currentPath).toBe(expected);
        // Due to inconsistent URL behavior in WebKit & Mobile Safari.
        // The URL may not correctly reflect the page.
        // Fallback to running a DOM test and validate page content.
        // Ensures we are on the expected page despite URL.
      } catch (error) {
        console.log(
          `Failed to redirect from ${input} to ${expected}. Running DOM tests.`
        );
        await runLearnTests();
      }
    });
  }
});