test(playwright): add tests for editor theme selection logic

e2e/editor.spec.ts

@@ -1,17 +1,15 @@
 import { expect, test } 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.describe('Editor Component', () => {
   test('should allow the user to insert text', async ({
     page,
     isMobile,
     browserName
   }) => {
+    await page.goto(
+      '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+    );
+
     const monacoEditor = page.getByLabel('Editor content');
 
     // The editor has an overlay div, which prevents the click event from bubbling up in iOS Safari.
@@ -28,3 +26,79 @@ test.describe('Editor Component', () => {
     await expect(text).toBeVisible();
   });
 });
+
+test.describe('Editor theme', () => {
+  test.describe('If the user is signed in', () => {
+    test.use({ storageState: 'playwright/.auth/certified-user.json' });
+
+    test('should be in dark mode if the selected theme is `night`', async ({
+      page
+    }) => {
+      await page.route('*/**/user/get-session-user', async route => {
+        const response = await route.fetch();
+        const json = await response.json();
+
+        json.user.certifieduser.theme = 'night';
+        await route.fulfill({ json });
+      });
+
+      await page.goto(
+        '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+      );
+
+      const editor = page.locator("div[role='code'].monaco-editor");
+      await expect(editor).toHaveClass(/vs-dark/);
+    });
+
+    test('should be in light mode if the selected theme is `default`', async ({
+      page
+    }) => {
+      await page.route('*/**/user/get-session-user', async route => {
+        const response = await route.fetch();
+        const json = await response.json();
+
+        json.user.certifieduser.theme = 'default';
+        await route.fulfill({ json });
+      });
+
+      await page.goto(
+        '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+      );
+
+      const editor = page.locator("div[role='code'].monaco-editor");
+      await expect(editor).toHaveClass(/\s+vs\s+/);
+    });
+  });
+
+  test.describe('If the user is signed out and the system theme is `dark`', () => {
+    test.use({
+      storageState: { cookies: [], origins: [] },
+      colorScheme: 'dark'
+    });
+
+    test('should be in dark mode', async ({ page }) => {
+      await page.goto(
+        '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+      );
+
+      const editor = page.locator("div[role='code'].monaco-editor");
+      await expect(editor).toHaveClass(/vs-dark/);
+    });
+  });
+
+  test.describe('If the user is signed out and the system theme is `light`', () => {
+    test.use({
+      storageState: { cookies: [], origins: [] },
+      colorScheme: 'light'
+    });
+
+    test('should be in light mode', async ({ page }) => {
+      await page.goto(
+        '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+      );
+
+      const editor = page.locator("div[role='code'].monaco-editor");
+      await expect(editor).toHaveClass(/\s+vs\s+/);
+    });
+  });
+});