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

Code before:
    });
  });

  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.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 the user selected theme is dark', async ({
      page
    }) => {
      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");
      await expect(editor).toHaveClass(/vs-dark/);
    });


Review comment (suggestion):
```suggestion
    test('should be in dark mode if the user selected theme is dark', async ({
```

Code after:
    });
  });

  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.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
    }) => {
      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");
      await expect(editor).toHaveClass(/vs-dark/);
    });