Repository: freeCodeCamp/freeCodeCamp
File: e2e/editor.spec.ts (TypeScript)

Code before:
    }
  });

const testPage =
  '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3';

test.describe('Editor Component', () => {
  test('should allow the user to insert text', async ({ page, isMobile }) => {
    await page.goto(testPage);

    await focusEditor({ page, isMobile });
    await page.keyboard.insertText('<h2>FreeCodeCamp</h2>');
    const text = page.getByText('<h2>FreeCodeCamp</h2>');
    await expect(text).toBeVisible();
  });
});

test.describe('Python Terminal', () => {
  test('should display error message when the user enters invalid code', async ({
    page,
    isMobile
  }) => {
    await page.goto(
      'learn/scientific-computing-with-python/learn-string-manipulation-by-building-a-cipher/step-2'
    );

    await focusEditor({ page, isMobile });
    await clearEditor({ page, browserName });
    // Then enter invalid code
    await page.keyboard.insertText('def');
    const preview = page.getByTestId('preview-pane');

    // While it's displayed on multiple lines, the string itself has no newlines, hence:
    const error = `Traceback (most recent call last):  File "main.py", line 1    def       ^SyntaxError: invalid syntax`;
    // It shouldn't take this long, but the Python worker can be slow to respond.
    await expect(preview).toContainText(error, { timeout: 15000 });
  });
});

test.describe('Editor theme if the system theme is dark', () => {
  test.use({ colorScheme: 'dark' });

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

    test('should respect the user settings', async ({ page, request }) => {
      const editor = page.locator("div[role='code'].monaco-editor");

      await setTheme(request, 'night');
      await page.goto(testPage);


Review comment (suggestion):
`browserName` is still needed here, as `clearEditor` is using it on line 48.

It's highly recommended to setup the codebase and test the changes locally before pushing the changes up for review. These errors should have shown up in your editor. 

Code after:
    }
  });

const testPage =
  '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3';

test.describe('Editor Component', () => {
  test('should allow the user to insert text', async ({ page, isMobile }) => {
    await page.goto(testPage);

    await focusEditor({ page, isMobile });
    await page.keyboard.insertText('<h2>FreeCodeCamp</h2>');
    const text = page.getByText('<h2>FreeCodeCamp</h2>');
    await expect(text).toBeVisible();
  });
});

test.describe('Python Terminal', () => {
  test('should display error message when the user enters invalid code', async ({
    page,
    isMobile,
    browserName
  }) => {
    await page.goto(
      'learn/scientific-computing-with-python/learn-string-manipulation-by-building-a-cipher/step-2'
    );

    await focusEditor({ page, isMobile });
    await clearEditor({ page, browserName });
    // Then enter invalid code
    await page.keyboard.insertText('def');
    const preview = page.getByTestId('preview-pane');

    // While it's displayed on multiple lines, the string itself has no newlines, hence:
    const error = `Traceback (most recent call last):  File "main.py", line 1    def       ^SyntaxError: invalid syntax`;
    // It shouldn't take this long, but the Python worker can be slow to respond.
    await expect(preview).toContainText(error, { timeout: 15000 });
  });
});

test.describe('Editor theme if the system theme is dark', () => {
  test.use({ colorScheme: 'dark' });

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

    test('should respect the user settings', async ({ page, request }) => {
      const editor = page.locator("div[role='code'].monaco-editor");

      await setTheme(request, 'night');
      await page.goto(testPage);