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

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

let page: Page;

test.beforeEach(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.afterEach(async () => {
  await page.close();
});

test.describe('Link MS user component (unlinked signedOut user)', () => {
  test('Component has proper main heading and relevant sections', async () => {
    const mainHeading = page.getByRole('heading', {
      name: translations.learn.ms['link-header']
    });
    await expect(mainHeading).toBeVisible();

    const linkSignInText = page.getByTestId('link-signin-text');
    await expect(linkSignInText).toBeVisible();
  });
});

test.describe('Link MS user component (unlinked signedIn user)', () => {

Review comment (suggestion):
```suggestion
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
```

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/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/trophy-write-your-first-code-using-c-sharp'
  );
});

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

test.describe('Link MS user component (unlinked signedOut user)', () => {
  test('Component has proper main heading and relevant sections', async ({
    page
  }) => {
    const mainHeading = page.getByRole('heading', {
      name: translations.learn.ms['link-header']
    });
    await expect(mainHeading).toBeVisible();

    const linkSignInText = page.getByTestId('link-signin-text');
    await expect(linkSignInText).toBeVisible();
  });
});

test.describe('Link MS user component (unlinked signedIn user)', () => {
  test.use({ storageState: 'playwright/.auth/certified-user.json' });
Repository: freeCodeCamp/freeCodeCamp
File: e2e/link-ms-user.spec.ts (TypeScript)

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

let page: Page;

test.beforeEach(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.afterEach(async () => {
  await page.close();
});

test.describe('Link MS user component (unlinked signedOut user)', () => {
  test('Component has proper main heading and relevant sections', async () => {
    const mainHeading = page.getByRole('heading', {
      name: translations.learn.ms['link-header']
    });
    await expect(mainHeading).toBeVisible();

    const linkSignInText = page.getByTestId('link-signin-text');
    await expect(linkSignInText).toBeVisible();
  });
});

test.describe('Link MS user component (unlinked signedIn user)', () => {
  test.use({ storageState: 'playwright/.auth/certified-user.json' });

  test('Component has proper main heading and relevant sections', async () => {
    const mainHeading = page.getByRole('heading', {
      name: translations.learn.ms['link-header']
    });
    await expect(mainHeading).toBeVisible();

    const linkSignInText = page.getByTestId('unlinked-text');
    await expect(linkSignInText).toBeVisible();
  });

  test('Component has proper list of actions', async () => {
    const linkText1 = page.getByTestId('link-li-1-text');

Review comment (suggestion):
```suggestion
  test('Component has proper main heading and relevant sections', async ({ page }) => {
```

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/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/trophy-write-your-first-code-using-c-sharp'
  );
});

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

test.describe('Link MS user component (unlinked signedOut user)', () => {
  test('Component has proper main heading and relevant sections', async ({
    page
  }) => {
    const mainHeading = page.getByRole('heading', {
      name: translations.learn.ms['link-header']
    });
    await expect(mainHeading).toBeVisible();

    const linkSignInText = page.getByTestId('link-signin-text');
    await expect(linkSignInText).toBeVisible();
  });
});

test.describe('Link MS user component (unlinked signedIn user)', () => {
  test.use({ storageState: 'playwright/.auth/certified-user.json' });

  test('Component has proper main heading and relevant sections', async ({
    page
  }) => {
    const mainHeading = page.getByRole('heading', {
      name: translations.learn.ms['link-header']
    });
    await expect(mainHeading).toBeVisible();

    const linkSignInText = page.getByTestId('unlinked-text');
    await expect(linkSignInText).toBeVisible();
  });

  test('Component has proper list of actions', async ({ page }) => {
Repository: freeCodeCamp/freeCodeCamp
File: e2e/bread-crumb.spec.ts (TypeScript)

Code before:
  );
});

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

test.describe('Challenge Breadcrumb Component Tests', () => {
  test('breadcrumb nav links should be visible', async ({ page }) => {
    const leftBreadcrumb = page.getByTestId('breadcrumb-left');
    const rightBreadcrumb = page.getByTestId('breadcrumb-right');
    await expect(leftBreadcrumb).toBeVisible();
    await expect(rightBreadcrumb).toBeVisible();
  });

  test('breadcrumb nav links should have correct name', async ({ page }) => {
    const leftBreadcrumb = page.getByTestId('breadcrumb-left');
    const rightBreadcrumb = page.getByTestId('breadcrumb-right');
    await expect(leftBreadcrumb).toHaveText(
      '(New) Foundational C# with Microsoft'
    );
    await expect(rightBreadcrumb).toHaveText('Write Your First Code Using C#');
  });

  test('left breadcrumb nav link should have correct URL', async ({ page }) => {
    await page.getByTestId('breadcrumb-left').click();
    await expect(page).toHaveURL(
      'http://localhost:8000/learn/foundational-c-sharp-with-microsoft'
    );
  });

  test('right breadcrumb nav link should have correct URL', async ({
    page
  }) => {
    await page.getByTestId('breadcrumb-right').click();
    await expect(page).toHaveURL(
      'http://localhost:8000/learn/foundational-c-sharp-with-microsoft/#write-your-first-code-using-c-sharp'
    );
  });
});


Review comment (suggestion):
This will work, but we could improve this as well by seeing if we can identify the role as clickable list item. 

Code after:
};

test.beforeEach(async ({ page }) => {
  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.afterEach(async ({ page }) => {
  await page.close();
});

test.describe('Challenge Breadcrumb Component Tests', () => {
  test('breadcrumb nav links should be visible', async ({ page }) => {
    await expect(
      page
        .getByRole('listitem')
        .filter({ hasText: breadcrumbNavs.leftBreadcrumb })
    ).toBeVisible();
    await expect(
      page
        .getByRole('listitem')
        .filter({ hasText: breadcrumbNavs.rightBreadcrumb })
    ).toBeVisible();
  });

  test('left breadcrumb nav link should have correct URL', async ({ page }) => {
    await page
      .getByRole('listitem')
      .filter({ hasText: breadcrumbNavs.leftBreadcrumb })
      .click();
    await expect(page).toHaveURL(
      'http://localhost:8000/learn/foundational-c-sharp-with-microsoft'
    );
  });

  test('right breadcrumb nav link should have correct URL', async ({
    page
  }) => {
    await page
      .getByRole('listitem')
      .filter({ hasText: breadcrumbNavs.rightBreadcrumb })
      .click();
    await expect(page).toHaveURL(
      'http://localhost:8000/learn/foundational-c-sharp-with-microsoft/#write-your-first-code-using-c-sharp'
    );
  });
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/challenge-description.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 Description Component Tests', () => {
  test('should be visible', async () => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toBeVisible();
  });

  test('should contain text', async () => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toHaveText(/ */);
  });
});


Review comment (suggestion):
```suggestion
test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/trophy-write-your-first-code-using-c-sharp'
  );
});
```

We should ideally run tests in isolation.

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

test.beforeEach(async ({ page }) => {
  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.afterEach(async ({ page }) => {
  await page.close();
});

test.describe('Challenge Description Component Tests', () => {
  test('should be visible', async ({ page }) => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toBeVisible();
  });

  test('should contain text', async ({ page }) => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toHaveText(/ */);
  });
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/challenge-description.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 Description Component Tests', () => {
  test('should be visible', async () => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toBeVisible();
  });

  test('should contain text', async () => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toHaveText(/ */);
  });
});


Review comment (suggestion):
```suggestion
import { test, expect } from '@playwright/test';
```

We don't need a global page variable because...

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

test.beforeEach(async ({ page }) => {
  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.afterEach(async ({ page }) => {
  await page.close();
});

test.describe('Challenge Description Component Tests', () => {
  test('should be visible', async ({ page }) => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toBeVisible();
  });

  test('should contain text', async ({ page }) => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toHaveText(/ */);
  });
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/challenge-description.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 Description Component Tests', () => {
  test('should be visible', async () => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toBeVisible();
  });

  test('should contain text', async () => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toHaveText(/ */);
  });
});


Review comment (suggestion):
```suggestion
  test('should be visible', async ({ page }) => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toBeVisible();
  });

  test('should contain text', async ({ page }) => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toHaveText(/ */);
```

We can get the `page` directly from the function arguments.

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

test.beforeEach(async ({ page }) => {
  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.afterEach(async ({ page }) => {
  await page.close();
});

test.describe('Challenge Description Component Tests', () => {
  test('should be visible', async ({ page }) => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toBeVisible();
  });

  test('should contain text', async ({ page }) => {
    const challengeDescription = page.getByTestId('challenge-description');
    await expect(challengeDescription).toHaveText(/ */);
  });
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/editor.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/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
  );
});

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

test.describe('Editor Component', () => {
  test('Should be clicked and able to insert text', async () => {
    const monacoEditor = page.getByLabel('Editor content');
    await monacoEditor.click();
    await page.keyboard.insertText('<h2>FreeCodeCamp</h2>');
    const text = page.getByText('<h2>FreeCodeCamp</h2>');
    await expect(text).toBeVisible();
  });
});


Review comment (suggestion):
```suggestion
test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
  );
});

test.afterEach(async () => {
  await page.close();
});
```

Ideally we run the tests in isolation.

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

test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
  );
});
test.afterEach(async ({ page }) => {
  await page.close();
});

test.describe('Editor Component', () => {
  test('Should be clicked and able to insert text', async ({ page }) => {
    const monacoEditor = page.getByLabel('Editor content');
    await monacoEditor.click();
    await page.keyboard.insertText('<h2>FreeCodeCamp</h2>');
    const text = page.getByText('<h2>FreeCodeCamp</h2>');
    await expect(text).toBeVisible();
  });
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/editor.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/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
  );
});

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

test.describe('Editor Component', () => {
  test('Should be clicked and able to insert text', async () => {
    const monacoEditor = page.getByLabel('Editor content');
    await monacoEditor.click();
    await page.keyboard.insertText('<h2>FreeCodeCamp</h2>');
    const text = page.getByText('<h2>FreeCodeCamp</h2>');
    await expect(text).toBeVisible();
  });
});


Review comment (suggestion):
```suggestion
import { test, expect } from '@playwright/test';
```

We don't need a global page because...

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

test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
  );
});
test.afterEach(async ({ page }) => {
  await page.close();
});

test.describe('Editor Component', () => {
  test('Should be clicked and able to insert text', async ({ page }) => {
    const monacoEditor = page.getByLabel('Editor content');
    await monacoEditor.click();
    await page.keyboard.insertText('<h2>FreeCodeCamp</h2>');
    const text = page.getByText('<h2>FreeCodeCamp</h2>');
    await expect(text).toBeVisible();
  });
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/editor.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/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
  );
});

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

test.describe('Editor Component', () => {
  test('Should be clicked and able to insert text', async () => {
    const monacoEditor = page.getByLabel('Editor content');
    await monacoEditor.click();
    await page.keyboard.insertText('<h2>FreeCodeCamp</h2>');
    const text = page.getByText('<h2>FreeCodeCamp</h2>');
    await expect(text).toBeVisible();
  });
});


Review comment (suggestion):
```suggestion
  test('Should be clicked and able to insert text', async ({ page }) => {
```

We can get the `page` directly from the function args.

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

test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
  );
});
test.afterEach(async ({ page }) => {
  await page.close();
});

test.describe('Editor Component', () => {
  test('Should be clicked and able to insert text', async ({ page }) => {
    const monacoEditor = page.getByLabel('Editor content');
    await monacoEditor.click();
    await page.keyboard.insertText('<h2>FreeCodeCamp</h2>');
    const text = page.getByText('<h2>FreeCodeCamp</h2>');
    await expect(text).toBeVisible();
  });
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/map.spec.ts (TypeScript)

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

import {
  SuperBlockStages,
  superBlockOrder
} from '../shared/config/superblocks';
test.beforeEach(async ({ page }) => {
  await page.goto('/learn');
});

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

const superBlocksWithLinks = [
  ...superBlockOrder[SuperBlockStages.FrontEnd],
  ...superBlockOrder[SuperBlockStages.Backend],
  ...superBlockOrder[SuperBlockStages.Python],
  ...superBlockOrder[SuperBlockStages.Professional],
  ...superBlockOrder[SuperBlockStages.Extra]
];

test.describe('Map Component E2E Test Suite', () => {
  test('Verifies the headings', async ({ page }) => {
    await expect(
      page.getByText(translations.landing['core-certs-heading'])
    ).toBeVisible();
    await expect(
      page.getByText(translations.landing['professional-certs-heading'])
    ).toBeVisible();
    await expect(
      page.getByText(translations.landing['interview-prep-heading'])
    ).toBeVisible();
  });

  test('verifies all the certifications links rendered correctly', async ({
    page
  }) => {
    const curriculumBtns = page.getByTestId('curriculum-map-button');

Review comment (suggestion):
```suggestion
```

We actually don't need this. Playwright closes the page automatically. 

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';

import {
  SuperBlockStages,
  superBlockOrder
} from '../shared/config/superblocks';

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

const superBlocksWithLinks = [
  ...superBlockOrder[SuperBlockStages.FrontEnd],
  ...superBlockOrder[SuperBlockStages.Backend],
  ...superBlockOrder[SuperBlockStages.Python],
  ...superBlockOrder[SuperBlockStages.Professional],
  ...superBlockOrder[SuperBlockStages.Extra]
];

test.describe('Map Component', () => {
  test('should render correctly', async ({ page }) => {
    await expect(
      page.getByText(translations.landing['core-certs-heading'])
    ).toBeVisible();
    await expect(
      page.getByText(translations.landing['professional-certs-heading'])
    ).toBeVisible();
    await expect(
      page.getByText(translations.landing['interview-prep-heading'])
    ).toBeVisible();
    const curriculumBtns = page.getByTestId('curriculum-map-button');
    await expect(curriculumBtns).toHaveCount(15);
    for (let i = 0; i < superBlocksWithLinks.length; i++) {
      const superblockLink = page.getByRole('link', {
        name: intro[superBlocksWithLinks[i]].title
      });
      expect(await superblockLink.getAttribute('href')).toBe(
        `/learn/${superBlocksWithLinks[i]}/`
      );