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

Code before:
          page.getByText('We have updated your theme')
        ).toBeVisible();
      }

      const editor = page.locator("div[role='code'].monaco-editor");
      await expect(editor).toHaveClass(/vs-dark/);
    });

    test('should be in light mode if the user selected theme is light', async ({
      page
    }) => {
      // Open the nav menu and toggle the theme
      await page.getByRole('button', { name: 'Menu' }).click();

      const toggle = page.getByRole('button', { name: 'Night Mode' });
      await expect(toggle).toBeVisible();
      const isDarkMode = await toggle.getAttribute('aria-pressed');

      if (isDarkMode === 'true') {
        const listItem = page.getByRole('listitem').filter({ has: toggle });

        // The button's click event is intercepted by the `li`,
        // so we need to click on the `li` to trigger the theme change action.
        await listItem.click();

        // Ensure that the action is completed before checking the editor.
        await expect(
          page.getByText('We have updated your theme')
        ).toBeVisible();
      }

      const editor = page.locator("div[role='code'].monaco-editor");
      await expect(editor).toHaveClass(/vs(?!\w)/);
    });
  });

  test.describe('If the user is signed out', () => {
    test.use({ storageState: { cookies: [], origins: [] } });

    test('should be in dark mode', async ({ page }) => {
      const editor = page.locator("div[role='code'].monaco-editor");
      await expect(editor).toHaveClass(/vs-dark/);
    });
  });
});

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

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

Review comment (bug):
We do have `storageState` set during the setup phase:

https://github.com/freeCodeCamp/freeCodeCamp/blob/84a81c842b0fe9cf51981dd5ab64eb175a4b2053/e2e/global-setup.ts#L8

But for some reason that doesn't have any effect, and the user is logged out, which causes some tests to fail. Setting `storageState` again within the test suite is the only workaround at the moment, until I can figure out what the issue is.

Code after:
    } else {
      await page.keyboard.press('Control+a');
    }
    await page.keyboard.press('Backspace');
    // 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.beforeEach(async ({ page }) => {
    await page.goto(
      '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
    );
  });

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

    test('should be in dark mode if the user selected theme is dark', async ({
      page
    }) => {
      // Open the nav menu and toggle the theme
      await page.getByRole('button', { name: 'Menu' }).click();

      const toggle = page.getByRole('button', { name: 'Night Mode' });
      await expect(toggle).toBeVisible();
      const isDarkMode = await toggle.getAttribute('aria-pressed');

      if (isDarkMode === 'false') {
        const listItem = page.getByRole('listitem').filter({ has: toggle });

        // The button's click event is intercepted by the `li`,
        // so we need to click on the `li` to trigger the theme change action.
        await listItem.click();

        // Ensure that the action is completed before checking the editor.
        await expect(
          page.getByText('We have updated your theme')
        ).toBeVisible();
      }

      const editor = page.locator("div[role='code'].monaco-editor");