reorganize and add more test cases

e2e/editor.spec.ts

@@ -29,11 +29,13 @@ test.describe('Editor Component', () => {
   });
 });
 
-test.describe('Editor theme', () => {
+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 be in dark mode if the user selected theme is dark', async ({
+    test('should be in dark mode the user selected theme is dark', async ({
       page
     }) => {
       await page.getByRole('button', { name: 'Menu' }).click();
@@ -86,23 +88,77 @@ test.describe('Editor theme', () => {
     });
   });
 
-  test.describe('If the user is signed out and the system theme is dark', () => {
-    test.use({
-      storageState: { cookies: [], origins: [] },
-      colorScheme: 'dark'
-    });
+  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' });
+
+    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/);
+    });
+
+    test('should be in light mode if the user selected theme is light', 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 === 'true') {
+        const listItem = page.getByRole('listitem').filter({ has: toggle });
 
-  test.describe('If the user is signed out and the system theme is light', () => {
-    test.use({
-      storageState: { cookies: [], origins: [] },
-      colorScheme: 'light'
+        // 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 light mode', async ({ page }) => {
       const editor = page.locator("div[role='code'].monaco-editor");