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

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

let page: Page;

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
  await page.goto(
    '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/trophy-write-your-first-code-using-c-sharp'
  );
});

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

test.describe('Challenge Title Component tests', () => {
  test('Entire Component is rendered correctly', async () => {
    await expect(page.getByTestId('challenge-title-wrap')).toBeVisible();
    await expect(page.getByTestId('challenge-title')).toBeVisible();
  });

  test('Title Displays correctly', async () => {
    const title = page.getByText('Trophy - Write Your First Code Using C#', {
      exact: true
    });
    await expect(title).toBeVisible();
  });
});


Review comment (suggestion):
Since this is a test file, having the "tests" suite name is redundant.

```suggestion
test.describe('Challenge Title Component', () => {
```

Code after:
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';

test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/information-security/python-for-penetration-testing/developing-a-port-scanner'
  );
});

test.describe('Challenge Title Component (signed out)', () => {
  test.use({ storageState: { cookies: [], origins: [] } });

  test('should render correctly', async ({ page }) => {
    await expect(page.getByLabel('Passed')).not.toBeVisible();

    await expect(
      page.getByRole('heading', { name: 'Developing a Port Scanner' })
    ).toBeVisible();
  });

  test('should not display GreenPass after challenge completion', async ({
    page
  }) => {
    // 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
Repository: freeCodeCamp/freeCodeCamp
File: e2e/challenge-title.spec.ts (TypeScript)

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

let page: Page;

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
  await page.goto(
    '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/trophy-write-your-first-code-using-c-sharp'
  );
});

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

test.describe('Challenge Title Component tests', () => {
  test('Entire Component is rendered correctly', async () => {
    await expect(page.getByTestId('challenge-title-wrap')).toBeVisible();
    await expect(page.getByTestId('challenge-title')).toBeVisible();
  });

  test('Title Displays correctly', async () => {
    const title = page.getByText('Trophy - Write Your First Code Using C#', {
      exact: true
    });
    await expect(title).toBeVisible();
  });
});


Review comment (suggestion):
Usually we would want to the name of the test case to be in hypothesis format, so that we can immediately tell what the expected result is.

```suggestion
  test('should render correctly', async () => {
```

Code after:
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';

test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/information-security/python-for-penetration-testing/developing-a-port-scanner'
  );
});

test.describe('Challenge Title Component (signed out)', () => {
  test.use({ storageState: { cookies: [], origins: [] } });

  test('should render correctly', async ({ page }) => {
    await expect(page.getByLabel('Passed')).not.toBeVisible();

    await expect(
      page.getByRole('heading', { name: 'Developing a Port Scanner' })
    ).toBeVisible();
  });

  test('should not display GreenPass after challenge completion', async ({
    page
  }) => {
    // 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.
Repository: freeCodeCamp/freeCodeCamp
File: e2e/challenge-title.spec.ts (TypeScript)

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

let page: Page;

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
  await page.goto(
    '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/trophy-write-your-first-code-using-c-sharp'
  );
});

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

test.describe('Challenge Title Component tests', () => {
  test('Entire Component is rendered correctly', async () => {
    await expect(page.getByTestId('challenge-title-wrap')).toBeVisible();
    await expect(page.getByTestId('challenge-title')).toBeVisible();
  });

  test('Title Displays correctly', async () => {
    const title = page.getByText('Trophy - Write Your First Code Using C#', {
      exact: true
    });
    await expect(title).toBeVisible();
  });
});


Review comment (suggestion):
I think this one can be merged with the test above because we are essentially looking for the same element in the DOM). And instead of looking for the test ID (`challenge-title`), we can just look for the title text.

Code after:
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';

test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/information-security/python-for-penetration-testing/developing-a-port-scanner'
  );
});

test.describe('Challenge Title Component (signed out)', () => {
  test.use({ storageState: { cookies: [], origins: [] } });

  test('should render correctly', async ({ page }) => {
    await expect(page.getByLabel('Passed')).not.toBeVisible();

    await expect(
      page.getByRole('heading', { name: 'Developing a Port Scanner' })
    ).toBeVisible();
  });

  test('should not display GreenPass after challenge completion', async ({
    page
  }) => {
    // 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'
    );
Repository: freeCodeCamp/freeCodeCamp
File: e2e/challenge-title.spec.ts (TypeScript)

Code before:
  test('should display GreenPass after challenge completion', async ({
    page
  }) => {
    await expect(page.getByText('Developing a Port Scanner')).toBeVisible();

    await page
      .getByText(
        'If there is an error or if no host is found, .connect() raises an exception while .connect_ex() returns an error code.'
      )
      .click();

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

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

    await page.waitForLoadState('domcontentloaded');

    // After clicking 'go-to-next' button, page redirects to courses list.
    // 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')).toBeVisible();
  });
});


Review comment (suggestion):
Same `NS_BINDING_ABORTED` error raised here as well.

Code after:

test.describe('Challenge Title Component (signed in)', () => {
  test.use({ storageState: 'playwright/.auth/certified-user.json' });

  test('should display GreenPass after challenge completion', async ({
    page,
    browserName
  }) => {
    test.skip(
      browserName === 'webkit',
      'user does not seem to be authenticated on Safari'
    );

    await expect(
      page.getByRole('heading', { name: 'Developing a Port Scanner' })
    ).toBeVisible();

    // 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')).toBeVisible();
  });
});
Repository: freeCodeCamp/freeCodeCamp
File: api/src/routes/auth.ts (TypeScript)

Code before:
import {
  FastifyInstance,
  FastifyPluginCallback,
  FastifyRequest
} from 'fastify';

import rateLimit from 'express-rate-limit';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import MongoStoreRL from 'rate-limit-mongo';

import { createUserInput } from '../utils/create-user';
import { AUTH0_DOMAIN, HOME_LOCATION, MONGOHQ_URL } from '../utils/env';

declare module 'fastify' {
  interface Session {
    user: {
      id: string;
    };
  }
}

const getEmailFromAuth0 = async (req: FastifyRequest) => {
  const auth0Res = await fetch(`https://${AUTH0_DOMAIN}/userinfo`, {
    headers: {
      Authorization: req.headers.authorization ?? ''
    }
  });

  if (!auth0Res.ok) {
    req.log.error(auth0Res);
    throw new Error('Invalid Auth0 Access Token');
  }


Review comment (suggestion):
```suggestion
// @ts-expect-error whatever the error actually is
```
ts-expect-error is nicer because it means you find out when the issue is fixed and you can remove the comment. (idk what the error is, though, so please put in something sensible!)

Code after:
import {
  FastifyInstance,
  FastifyPluginCallback,
  FastifyRequest
} from 'fastify';

import rateLimit from 'express-rate-limit';
// @ts-expect-error - no types
import MongoStoreRL from 'rate-limit-mongo';

import { createUserInput } from '../utils/create-user';
import { AUTH0_DOMAIN, HOME_LOCATION, MONGOHQ_URL } from '../utils/env';

declare module 'fastify' {
  interface Session {
    user: {
      id: string;
    };
  }
}

const getEmailFromAuth0 = async (req: FastifyRequest) => {
  const auth0Res = await fetch(`https://${AUTH0_DOMAIN}/userinfo`, {
    headers: {
      Authorization: req.headers.authorization ?? ''
    }
  });

  if (!auth0Res.ok) {
    req.log.error(auth0Res);
    throw new Error('Invalid Auth0 Access Token');
  }

  const { email } = (await auth0Res.json()) as { email: string };
Repository: freeCodeCamp/freeCodeCamp
File: e2e/header.spec.ts (TypeScript)

Code before:
  skipContent: 'header-skip-content',
  examNav: 'header-exam-nav',
  universalNav: 'header-universal-nav',
  universalNavLogo: 'header-universal-nav-logo'
} as const;

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

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

test('Has link for skip content', async ({ page }) => {
  const skipContent = page.getByTestId(headerComponentElements.skipContent);
  await expect(skipContent).toBeVisible();
});

test('Has nav for universal', async ({ page }) => {
  const universalNavigation = page.getByTestId(
    headerComponentElements.universalNav
  );
  const universalNavigationLogo = page.getByTestId(
    headerComponentElements.universalNavLogo
  );
  await expect(universalNavigation).toBeVisible();
  await expect(universalNavigationLogo).toBeVisible();
});


Review comment (suggestion):
I think we could also check if the link has the correct `href`:

```ts
await expect(skipContent).toHaveAttribute('href', '#content-start');
```

Code after:
const headerComponentElements = {
  skipContent: 'header-skip-content',
  examNav: 'header-exam-nav',
  examNavLogo: 'header-exam-nav-microsoft-logo',
  universalNav: 'header-universal-nav',
  universalNavLogo: 'header-universal-nav-logo'
} as const;

const examUrl =
  '/learn/foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam';

test.use({ storageState: 'playwright/.auth/certified-user.json' });

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

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

test('Has link for skip content', async ({ page }) => {
  const skipContent = page.getByTestId(headerComponentElements.skipContent);
  await expect(skipContent).toBeVisible();
  await expect(skipContent).toHaveAttribute('href', '#content-start');
});

test('Has nav for universal', async ({ page }) => {
  const universalNavigation = page.getByTestId(
    headerComponentElements.universalNav
  );
  const universalNavigationLogo = page.getByTestId(
    headerComponentElements.universalNavLogo
  );
  await expect(universalNavigation).toBeVisible();
  await expect(universalNavigationLogo).toBeVisible();
  await expect(universalNavigationLogo).toHaveAttribute('href', '/learn');
});

test('Has nav for exams', async ({ page }) => {
  await page
    .getByRole('button', {
      name: translations.buttons['click-start-exam']
    })
    .click();
  await expect(page).toHaveURL(examUrl);
  await expect(page.getByTestId(headerComponentElements.examNav)).toBeVisible();
  await expect(
    page.getByTestId(headerComponentElements.examNavLogo)
  ).toBeVisible();
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/header.spec.ts (TypeScript)

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

const headerComponentElements = {
  skipContent: 'header-skip-content',
  examNav: 'header-exam-nav',
  universalNav: 'header-universal-nav',
  universalNavLogo: 'header-universal-nav-logo'
} as const;

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

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

test('Has link for skip content', async ({ page }) => {
  const skipContent = page.getByTestId(headerComponentElements.skipContent);
  await expect(skipContent).toBeVisible();
});

test('Has nav for universal', async ({ page }) => {
  const universalNavigation = page.getByTestId(
    headerComponentElements.universalNav
  );
  const universalNavigationLogo = page.getByTestId(
    headerComponentElements.universalNavLogo
  );
  await expect(universalNavigation).toBeVisible();
  await expect(universalNavigationLogo).toBeVisible();
});


Review comment (suggestion):
Same here.

```ts
await expect(universalNavigationLogo).toHaveAttribute('href', '/learn');
```

Code after:

test.use({ storageState: 'playwright/.auth/certified-user.json' });

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

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

test('Has link for skip content', async ({ page }) => {
  const skipContent = page.getByTestId(headerComponentElements.skipContent);
  await expect(skipContent).toBeVisible();
  await expect(skipContent).toHaveAttribute('href', '#content-start');
});

test('Has nav for universal', async ({ page }) => {
  const universalNavigation = page.getByTestId(
    headerComponentElements.universalNav
  );
  const universalNavigationLogo = page.getByTestId(
    headerComponentElements.universalNavLogo
  );
  await expect(universalNavigation).toBeVisible();
  await expect(universalNavigationLogo).toBeVisible();
  await expect(universalNavigationLogo).toHaveAttribute('href', '/learn');
});

test('Has nav for exams', async ({ page }) => {
  await page
    .getByRole('button', {
      name: translations.buttons['click-start-exam']
    })
    .click();
  await expect(page).toHaveURL(examUrl);
  await expect(page.getByTestId(headerComponentElements.examNav)).toBeVisible();
  await expect(
    page.getByTestId(headerComponentElements.examNavLogo)
  ).toBeVisible();
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/exam-show-qualified.spec.ts (TypeScript)

Code before:
import { test, expect, type Page } from '@playwright/test';
import intro from '../client/i18n/locales/english/intro.json';
import translations from '../client/i18n/locales/english/translations.json';

test.use({ storageState: 'playwright/.auth/certified-user.json' });

let page: Page;
const examUrl =
  '/learn/foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam';

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

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

test.beforeEach(async () => {
  await page.goto(examUrl);
});
test.describe('Exam Show E2E Test Suite for qualified user', () => {
  test('The page renders with correct title', async () => {
    await expect(page).toHaveTitle(
      'Foundational C# with Microsoft Certification Exam: Foundational C# with Microsoft Certification Exam | freeCodeCamp.org'
    );
  });

  test('The page has correct header', async () => {
    const header = page.getByTestId('challenge-title');
    await expect(header).toBeVisible();
    await expect(header).toContainText(

Review comment (suggestion):
We should now pull `page` out from the callback instead of defining it globally.

Code after:
import { test, expect } from '@playwright/test';
import intro from '../client/i18n/locales/english/intro.json';
import translations from '../client/i18n/locales/english/translations.json';

test.use({ storageState: 'playwright/.auth/certified-user.json' });

const examUrl =
  '/learn/foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam';

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

test.describe('Exam Show E2E Test Suite for qualified user', () => {
  test('The page renders with correct title', async ({ page }) => {
    await expect(page).toHaveTitle(
      'Foundational C# with Microsoft Certification Exam: Foundational C# with Microsoft Certification Exam | freeCodeCamp.org'
    );
  });

  test('The page has correct header', async ({ page }) => {
    const header = page.getByTestId('challenge-title');
    await expect(header).toBeVisible();
    await expect(header).toContainText(
      intro['foundational-c-sharp-with-microsoft'].blocks[
        'foundational-c-sharp-with-microsoft-certification-exam'
      ].title
    );
  });

  test('The page has qualified for exam alert ', async ({ page }) => {
    await expect(
Repository: freeCodeCamp/freeCodeCamp
File: e2e/exam-started-show.spec.ts (TypeScript)

Code before:
import { test, expect, type Page } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
import intro from '../client/i18n/locales/english/intro.json';

test.use({ storageState: 'playwright/.auth/certified-user.json' });

let page: Page;
const examUrl =
  '/learn/foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam';

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

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

test.beforeEach(async () => {
  await page.goto(examUrl);
  await page
    .getByRole('button', {
      name: translations.buttons['click-start-exam']
    })
    .click();
});

test.describe('Exam Show E2E Test Suite for started exam', () => {
  test('The page renders with correct title', async () => {
    await expect(page).toHaveTitle(
      'Foundational C# with Microsoft Certification Exam: Foundational C# with Microsoft Certification Exam | freeCodeCamp.org'
    );

Review comment (suggestion):
We should now pull `page` out from the callback instead of defining it globally.

Code after:
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
import intro from '../client/i18n/locales/english/intro.json';

test.use({ storageState: 'playwright/.auth/certified-user.json' });

const examUrl =
  '/learn/foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam';

test.beforeEach(async ({ page }) => {
  await page.goto(examUrl);
  await page
    .getByRole('button', {
      name: translations.buttons['click-start-exam']
    })
    .click();
});

test.describe('Exam Show E2E Test Suite for started exam', () => {
  test('The page renders with correct title', async ({ page }) => {
    await expect(page).toHaveTitle(
      'Foundational C# with Microsoft Certification Exam: Foundational C# with Microsoft Certification Exam | freeCodeCamp.org'
    );
  });

  test('The page has correct navigation direct flow', async ({ page }) => {
    const QUESTION_COUNT = 5;
    const headerTitle = page.getByTestId('exam-show-title');
    const prevQuestionBtn = page.getByRole('button', {
      name: translations.buttons['previous-question']
    });
    const exitButton = page.getByRole('button', {