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

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

const challengeButtons = [
  'Instructions',
  'index.html',
  'styles.css',
  'Console'
];

const editorButtons = ['index.html', 'styles.css'];

let page: Page;

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
  await page.goto(
    '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
  );
});

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

function getActionRowLocator(): Locator {
  return page.getByTestId('action-row');
}

function getTabsRowLocator(): Locator {
  return page.getByTestId('action-row');
}

test('Action row buttons are visible', async ({ isMobile }) => {
  const previewFrame = page.getByTitle('challenge preview');
  const actionRow = getActionRowLocator();
  const tabsRow = getTabsRowLocator();

  // if it's mobile action row component does not render
  if (isMobile) {
    await expect(actionRow).toBeHidden();
  } else {
    const n = challengeButtons.length;
    for (let i = 0; i < n; i++) {
      const btn = tabsRow.getByRole('button', { name: challengeButtons[i] });
      await expect(btn).toBeVisible();
    }
    await expect(previewFrame).toBeVisible();
  }

Review comment (suggestion):
```suggestion
test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
  );
});

test.afterEach(async ({ page }) => {
  await page.close();
});
```

It's ideal to run the tests in isolation.

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

const challengeButtons = [
  'Instructions',
  'index.html',
  'styles.css',
  'Console'
];

const editorButtons = ['index.html', 'styles.css'];

test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
  );
});
test.afterEach(async ({ page }) => {
  await page.close();
});

function getActionRowLocator(page: Page): Locator {
  return page.getByTestId('action-row');
}

function getTabsRowLocator(page: Page): Locator {
  return page.getByTestId('action-row');
}

test('Action row buttons are visible', async ({ isMobile, page }) => {
  const previewFrame = page.getByTitle('challenge preview');
  const actionRow = getActionRowLocator(page);
  const tabsRow = getTabsRowLocator(page);

  // if it's mobile action row component does not render
  if (isMobile) {
    await expect(actionRow).toBeHidden();
  } else {
    const n = challengeButtons.length;
    for (let i = 0; i < n; i++) {
      const btn = tabsRow.getByRole('button', { name: challengeButtons[i] });
      await expect(btn).toBeVisible();
    }
    await expect(previewFrame).toBeVisible();
  }
});

test('Clicking instructions button hides editor buttons', async ({
  isMobile,
Repository: freeCodeCamp/freeCodeCamp
File: e2e/action-row.spec.ts (TypeScript)

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

const challengeButtons = [
  'Instructions',
  'index.html',
  'styles.css',
  'Console'
];

const editorButtons = ['index.html', 'styles.css'];

let page: Page;

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
  await page.goto(
    '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
  );
});

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

function getActionRowLocator(): Locator {
  return page.getByTestId('action-row');
}

function getTabsRowLocator(): Locator {
  return page.getByTestId('action-row');
}

test('Action row buttons are visible', async ({ isMobile }) => {
  const previewFrame = page.getByTitle('challenge preview');
  const actionRow = getActionRowLocator();
  const tabsRow = getTabsRowLocator();


Review comment (suggestion):
```suggestion
import { test, expect, type Locator } from '@playwright/test';

const challengeButtons = [
  'Instructions',
  'index.html',
  'styles.css',
  'Console'
];

const editorButtons = ['index.html', 'styles.css'];
```

We also don't need a global `page` because...

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

const challengeButtons = [
  'Instructions',
  'index.html',
  'styles.css',
  'Console'
];

const editorButtons = ['index.html', 'styles.css'];

test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
  );
});
test.afterEach(async ({ page }) => {
  await page.close();
});

function getActionRowLocator(page: Page): Locator {
  return page.getByTestId('action-row');
}

function getTabsRowLocator(page: Page): Locator {
  return page.getByTestId('action-row');
}

test('Action row buttons are visible', async ({ isMobile, page }) => {
  const previewFrame = page.getByTitle('challenge preview');
  const actionRow = getActionRowLocator(page);
  const tabsRow = getTabsRowLocator(page);

  // if it's mobile action row component does not render
  if (isMobile) {
    await expect(actionRow).toBeHidden();
  } else {
Repository: freeCodeCamp/freeCodeCamp
File: e2e/action-row.spec.ts (TypeScript)

Code before:
];

const editorButtons = ['index.html', 'styles.css'];

let page: Page;

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
  await page.goto(
    '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
  );
});

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

function getActionRowLocator(): Locator {
  return page.getByTestId('action-row');
}

function getTabsRowLocator(): Locator {
  return page.getByTestId('action-row');
}

test('Action row buttons are visible', async ({ isMobile }) => {
  const previewFrame = page.getByTitle('challenge preview');
  const actionRow = getActionRowLocator();
  const tabsRow = getTabsRowLocator();

  // if it's mobile action row component does not render
  if (isMobile) {
    await expect(actionRow).toBeHidden();
  } else {
    const n = challengeButtons.length;
    for (let i = 0; i < n; i++) {
      const btn = tabsRow.getByRole('button', { name: challengeButtons[i] });
      await expect(btn).toBeVisible();
    }
    await expect(previewFrame).toBeVisible();
  }
});

test('Clicking instructions button hides editor buttons', async ({
  isMobile
}) => {
  const instructionsButton = page.getByTestId('instructions-button');
  const tabsRow = getTabsRowLocator();

  if (isMobile) {
    await expect(tabsRow).toBeHidden();

Review comment (suggestion):
```suggestion
test('Action row buttons are visible', async ({ isMobile, page }) => {
```

We can get `page` directly from the function args.

Code after:
];

const editorButtons = ['index.html', 'styles.css'];

test.beforeEach(async ({ page }) => {
  await page.goto(
    '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
  );
});
test.afterEach(async ({ page }) => {
  await page.close();
});

function getActionRowLocator(page: Page): Locator {
  return page.getByTestId('action-row');
}

function getTabsRowLocator(page: Page): Locator {
  return page.getByTestId('action-row');
}

test('Action row buttons are visible', async ({ isMobile, page }) => {
  const previewFrame = page.getByTitle('challenge preview');
  const actionRow = getActionRowLocator(page);
  const tabsRow = getTabsRowLocator(page);

  // if it's mobile action row component does not render
  if (isMobile) {
    await expect(actionRow).toBeHidden();
  } else {
    const n = challengeButtons.length;
    for (let i = 0; i < n; i++) {
      const btn = tabsRow.getByRole('button', { name: challengeButtons[i] });
      await expect(btn).toBeVisible();
    }
    await expect(previewFrame).toBeVisible();
  }
});

test('Clicking instructions button hides editor buttons', async ({
  isMobile,
  page
}) => {
  const instructionsButton = page.getByTestId('instructions-button');
  const tabsRow = getTabsRowLocator(page);

  if (isMobile) {
    await expect(tabsRow).toBeHidden();
  } else {
    // Click instructions button to hide instructions panel and editor buttons
    await instructionsButton.click();
Repository: freeCodeCamp/freeCodeCamp
File: e2e/action-row.spec.ts (TypeScript)

Code before:
      await expect(btn).toBeHidden();
    }

    const instructionsPanelTitle = page.getByRole('heading', {
      name: 'Build a Survey Form'
    });
    await expect(instructionsPanelTitle).toBeHidden();
  }
});

test('Clicking Console button shows console panel', async ({ isMobile }) => {
  const actionRow = getActionRowLocator();
  const tabsRow = getTabsRowLocator();
  const consoleBtn = tabsRow.getByRole('button', { name: 'Console' });

  if (isMobile) {
    await expect(actionRow).toBeHidden();
  } else {
    // Click the console button to show the console panel
    await consoleBtn.click();
    const consolePanel = page.getByLabel('Console');
    await expect(consolePanel).toBeVisible();
  }
});

test('Clicking Preview button hides preview', async ({ isMobile }) => {
  const previewButton = page.getByTestId('preview-button');
  const previewFrame = page.getByTitle('challenge preview');
  const actionRow = getActionRowLocator();

  if (isMobile) {
    await expect(actionRow).toBeHidden();
  } else {
    await previewButton.click();
    await expect(previewFrame).toBeHidden();
  }
});


Review comment (suggestion):
```suggestion
test('Clicking Preview button hides preview', async ({ isMobile, page }) => {
```

Code after:
    const instructionsPanelTitle = page.getByRole('heading', {
      name: 'Build a Survey Form'
    });
    await expect(instructionsPanelTitle).toBeHidden();
  }
});

test('Clicking Console button shows console panel', async ({
  isMobile,
  page
}) => {
  const actionRow = getActionRowLocator(page);
  const tabsRow = getTabsRowLocator(page);
  const consoleBtn = tabsRow.getByRole('button', { name: 'Console' });

  if (isMobile) {
    await expect(actionRow).toBeHidden();
  } else {
    // Click the console button to show the console panel
    await consoleBtn.click();
    const consolePanel = page.getByLabel('Console');
    await expect(consolePanel).toBeVisible();
  }
});

test('Clicking Preview button hides preview', async ({ isMobile, page }) => {
  const previewButton = page.getByTestId('preview-button');
  const previewFrame = page.getByTitle('challenge preview');
  const actionRow = getActionRowLocator(page);

  if (isMobile) {
    await expect(actionRow).toBeHidden();
  } else {
    await previewButton.click();
    await expect(previewFrame).toBeHidden();
  }
});
Repository: freeCodeCamp/freeCodeCamp
File: e2e/settings.spec.ts (TypeScript)

Code before:
import { test, expect, type Page } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
test.use({ storageState: 'playwright/.auth/certified-user.json' });

const settingsTestIds = {
  settingsHeading: 'settings-heading',
  usernameSettings: 'username-settings',
  newEmail: 'new-email',
  confirmEmail: 'confirm-email',
  internetPresence: 'internet-presence',
  portfolioItems: 'portfolio-items',
  camperIdentity: 'camper-identity'
};

const settingsObject = {
  email: 'foo@bar.com',
  certifiedUsername: 'certifieduser',
  testEmail: 'test@gmail.com',
  pageTitle: `${translations.buttons.settings} | freeCodeCamp.org`,
  userNamePlaceholder: '{{username}}',
  testUser: 'testuser',
  errorCode: '404',
  invalidUserName: 'user!',
  tooShortUserName: 'us',
  private: 'Private',
  public: 'Public',

Review comment (suggestion):
```suggestion
import { test, expect } from '@playwright/test';
```

See below

Code after:
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
test.use({ storageState: 'playwright/.auth/certified-user.json' });

const settingsTestIds = {
  settingsHeading: 'settings-heading',
  newEmail: 'new-email-input',
  confirmEmail: 'confirm-email-input',
  internetPresence: 'internet-presence',
  portfolioItems: 'portfolio-items',
  camperIdentity: 'camper-identity'
};

const settingsObject = {
  email: 'foo@bar.com',
  certifiedUsername: 'certifieduser',
  testEmail: 'test@gmail.com',
  pageTitle: `${translations.buttons.settings} | freeCodeCamp.org`,
  userNamePlaceholder: '{{username}}',
  testUser: 'testuser',
  errorCode: '404',
  invalidUserName: 'user!',
  tooShortUserName: 'us',
  private: 'Private',
  public: 'Public',
  supportEmail: 'support@freecodecamp.org',
Repository: freeCodeCamp/freeCodeCamp
File: e2e/settings.spec.ts (TypeScript)

Code before:
    ).toBeVisible();
    await expect(
      page.getByText(translations.settings.honesty.p2)
    ).toBeVisible();
    await expect(
      page.getByText(translations.settings.honesty.p3)
    ).toBeVisible();
    await expect(
      page.getByText(translations.settings.honesty.p4)
    ).toBeVisible();
    await expect(
      page.getByText(translations.settings.honesty.p5)
    ).toBeVisible();
    await expect(
      page.getByText(translations.settings.honesty.p6)
    ).toBeVisible();
    await expect(
      page.getByText(
        translations.settings.honesty.p7.replace(
          settingsObject.supportEmailPlaceholder,
          settingsObject.supportEmail
        )
      )
    ).toBeVisible();
  });
  test('Should validate Certification Settings', async () => {
    await expect(
      page.getByRole('heading', {
        name: translations.settings.headings.certs,
        exact: true
      })
    ).toBeVisible();
    for (let i = 0; i < certifications.length; i++) {
      await expect(
        page.getByRole('heading', {
          name: certifications[i],
          exact: true
        })
      ).toBeVisible();
      await expect(
        page.getByRole('link', {
          name: `${translations.buttons['show-cert']} ${certifications[i]}`
        })
      ).toBeVisible();
    }
  });

  test('Should validate Legacy Certification Settings', async () => {
    await expect(
      page.getByRole('heading', {
        name: translations.settings.headings['legacy-certs'],

Review comment (suggestion):
```suggestion
  test('Should validate Certification Settings', async ({ page }) => {
```

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

  test('Should validate Certification Settings', async ({
    page,
    browserName
  }) => {
    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');
    await expect(
      page.getByRole('heading', {
        name: translations.settings.headings.certs,
        exact: true
      })
    ).toBeVisible();
    for (let i = 0; i < certifications.length; i++) {
      await expect(
        page.getByRole('heading', {
          name: certifications[i],
          exact: true
        })
      ).toBeVisible();
      await expect(
        page.getByRole('link', {
          name: `${translations.buttons['show-cert']} ${certifications[i]}`
        })
      ).toBeVisible();
    }
  });

  test('Should validate Legacy Certification Settings', async ({
    page,
    browserName
  }) => {
    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');
    await expect(
      page.getByRole('heading', {
        name: translations.settings.headings['legacy-certs'],
        exact: true
      })
    ).toBeVisible();
    for (let i = 0; i < legacyCertifications.length; i++) {
      await expect(
        page.getByRole('heading', {
          name: legacyCertifications[i],
          exact: true
        })
      ).toBeVisible();
      await expect(
        page.getByRole('link', {
Repository: freeCodeCamp/freeCodeCamp
File: e2e/settings.spec.ts (TypeScript)

Code before:
      )
    ).toBeVisible();
  });
  test('Should validate Certification Settings', async () => {
    await expect(
      page.getByRole('heading', {
        name: translations.settings.headings.certs,
        exact: true
      })
    ).toBeVisible();
    for (let i = 0; i < certifications.length; i++) {
      await expect(
        page.getByRole('heading', {
          name: certifications[i],
          exact: true
        })
      ).toBeVisible();
      await expect(
        page.getByRole('link', {
          name: `${translations.buttons['show-cert']} ${certifications[i]}`
        })
      ).toBeVisible();
    }
  });

  test('Should validate Legacy Certification Settings', async () => {
    await expect(
      page.getByRole('heading', {
        name: translations.settings.headings['legacy-certs'],
        exact: true
      })
    ).toBeVisible();
    for (let i = 0; i < legacyCertifications.length; i++) {
      await expect(
        page.getByRole('heading', {
          name: legacyCertifications[i],
          exact: true
        })
      ).toBeVisible();
      await expect(
        page.getByRole('link', {
          name: `${translations.buttons['show-cert']} ${legacyCertifications[i]}`,
          exact: true
        })
      ).toBeVisible();
    }
  });
  test('Should validate Danger Section Settings', async () => {
    await expect(
      page.getByRole('tab', {
        name: translations.settings.danger.heading,

Review comment (suggestion):
```suggestion
  test('Should validate Legacy Certification Settings', async ({ page }) => {
```

Code after:
      ).toBeVisible();
      await expect(
        page.getByRole('link', {
          name: `${translations.buttons['show-cert']} ${certifications[i]}`
        })
      ).toBeVisible();
    }
  });

  test('Should validate Legacy Certification Settings', async ({
    page,
    browserName
  }) => {
    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');
    await expect(
      page.getByRole('heading', {
        name: translations.settings.headings['legacy-certs'],
        exact: true
      })
    ).toBeVisible();
    for (let i = 0; i < legacyCertifications.length; i++) {
      await expect(
        page.getByRole('heading', {
          name: legacyCertifications[i],
          exact: true
        })
      ).toBeVisible();
      await expect(
        page.getByRole('link', {
          name: `${translations.buttons['show-cert']} ${legacyCertifications[i]}`,
          exact: true
        })
      ).toBeVisible();
    }
  });

  test('Should validate Danger Section Settings', async ({
    page,
    browserName
  }) => {
    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');
    await expect(
      page.getByText(translations.settings.danger.heading, {
        exact: true
      })
    ).toBeVisible();
    await expect(
      page.getByText(translations.settings.danger['be-careful'], {
        exact: true
      })
    ).toBeVisible();
Repository: freeCodeCamp/freeCodeCamp
File: e2e/settings.spec.ts (TypeScript)

Code before:
    }
  });

  test('Should validate Legacy Certification Settings', async () => {
    await expect(
      page.getByRole('heading', {
        name: translations.settings.headings['legacy-certs'],
        exact: true
      })
    ).toBeVisible();
    for (let i = 0; i < legacyCertifications.length; i++) {
      await expect(
        page.getByRole('heading', {
          name: legacyCertifications[i],
          exact: true
        })
      ).toBeVisible();
      await expect(
        page.getByRole('link', {
          name: `${translations.buttons['show-cert']} ${legacyCertifications[i]}`,
          exact: true
        })
      ).toBeVisible();
    }
  });
  test('Should validate Danger Section Settings', async () => {
    await expect(
      page.getByRole('tab', {
        name: translations.settings.danger.heading,
        exact: true
      })
    ).toBeVisible();
    await expect(
      page.getByText(translations.settings.danger['be-careful'], {
        exact: true
      })
    ).toBeVisible();
    await page
      .getByRole('button', {
        name: translations.settings.danger.reset,
        exact: true
      })
      .click();
    await page
      .getByRole('button', {
        name: translations.settings.danger['nevermind-2'],
        exact: true
      })
      .click();
    await expect(
      page.getByRole('button', {

Review comment (suggestion):
```suggestion
  test('Should validate Danger Section Settings', async ({ page }) => {
```

Code after:
        page.getByRole('heading', {
          name: legacyCertifications[i],
          exact: true
        })
      ).toBeVisible();
      await expect(
        page.getByRole('link', {
          name: `${translations.buttons['show-cert']} ${legacyCertifications[i]}`,
          exact: true
        })
      ).toBeVisible();
    }
  });

  test('Should validate Danger Section Settings', async ({
    page,
    browserName
  }) => {
    test.skip(browserName === 'webkit', 'csrf_token cookie is being deleted');
    await expect(
      page.getByText(translations.settings.danger.heading, {
        exact: true
      })
    ).toBeVisible();
    await expect(
      page.getByText(translations.settings.danger['be-careful'], {
        exact: true
      })
    ).toBeVisible();
    await page
      .getByRole('button', {
        name: translations.settings.danger.reset,
        exact: true
      })
      .click();
    await page
      .getByRole('button', {
        name: translations.settings.danger['nevermind-2'],
        exact: true
      })
      .click();
    await expect(
      page.getByRole('button', {
        name: translations.settings.danger['reset-confirm'],
        exact: true
      })
    ).toBeVisible();
    await page
      .getByRole('button', {
        name: translations.settings.danger.delete,
        exact: true