light to dark theme

tests/homePage.test.ts

@@ -122,56 +122,83 @@ test.describe('EndeavourOS HomePage - POM', () => {
   //     // Zde by následoval expect na novou URL
   //   });
    });
+
+  test.describe('Theme', () => {
+    test.describe('Theme -- dark default to light', () => {
+      let homePage: HomePage;
+  
+      test.beforeEach(async ({ page }) => {
+        homePage = new HomePage(page);
+        await homePage.navigate();
+      });
+      test('switch theme sun', async ({ page }) => {
+        await homePage.switchThemeFunctionLight()
+      });
+      
+    });
+    test.describe('Mock date light', () => {
+      test('vynucený start ve světlém režimu + kontrola režimu', async ({ page }) => {
+        // 1. Nastavíme emulaci systému na light (to je základ)
+        await page.emulateMedia({ colorScheme: 'light' });
+      
+        // 2. Mockujeme stav paměti a DOMu
+        await page.addInitScript(() => {
+          // Vnutíme informaci, že chceme light do paměti
+          window.localStorage.setItem('theme', 'light');
+          window.localStorage.setItem('color-theme', 'light'); // Pro jistotu oba běžné názvy
+          
+          // Tady je ten trik: Sledujeme, kdyby se web snažil přidat 'dark' a hned to smažeme
+          const observer = new MutationObserver(() => {
+            if (document.documentElement.classList.contains('dark')) {
+              document.documentElement.classList.remove('dark');
+            }
+          });
+          observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+        });
+      
+        // 3. Jdeme na web
+        await page.goto('https://endeavouros.cz');
+      
+        // 4. OVĚŘENÍ: Teď už musí být světlý
+        const html = page.locator('html');
+        await expect(html).not.toHaveClass(/dark/);
+        
+        // Vizuální kontrola - barva pozadí by teď měla být bílá/světlá (rgb 255, 255, 255)
+        // Poznámka: Pokud má web i ve světlém režimu jinou barvu, uprav si rgb hodnotu
+        await expect(page.locator('body')).toHaveCSS('background-color', 'rgb(248, 249, 250)');
+        await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
+    
+      });
+      test('Light to Dark check', async ({ page }) => {
+        // 1. Nastavíme emulaci systému na light (to je základ)
+        await page.emulateMedia({ colorScheme: 'light' });
+      
+        // 2. Mockujeme stav paměti a DOMu
+        await page.addInitScript(() => {
+          // Vnutíme informaci, že chceme light do paměti
+          window.localStorage.setItem('theme', 'light');
+          window.localStorage.setItem('color-theme', 'light'); // Pro jistotu oba běžné názvy
+          
+          // Tady je ten trik: Sledujeme, kdyby se web snažil přidat 'dark' a hned to smažeme
+          const observer = new MutationObserver(() => {
+            if (document.documentElement.classList.contains('dark')) {
+              document.documentElement.classList.remove('dark');
+            }
+          });
+          observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+        });
+      
+        // 3. Jdeme na web
+        await page.goto('https://endeavouros.cz');
+      
+        // 4. OVĚŘENÍ: Teď už musí být světlý
+        const html = page.locator('html');
+        await expect(html).not.toHaveClass(/dark/);
+        await homePage.switchThemeFunctionDark()
+    });
+  });
+  });
 });
 
 
 
-test.describe('Theme', () => {
-  test.describe('Theme -- dark default to light', () => {
-    let homePage: HomePage;
-
-    test.beforeEach(async ({ page }) => {
-      homePage = new HomePage(page);
-      await homePage.navigate();
-    });
-    test('switch theme sun', async ({ page }) => {
-      await homePage.switchThemeFunction()
-    });
-    
-  });
-  test.describe('Mock date light', () => {
-    test('vynucený start ve světlém režimu + kontrola režimu', async ({ page }) => {
-      // 1. Nastavíme emulaci systému na light (to je základ)
-      await page.emulateMedia({ colorScheme: 'light' });
-    
-      // 2. Mockujeme stav paměti a DOMu
-      await page.addInitScript(() => {
-        // Vnutíme informaci, že chceme light do paměti
-        window.localStorage.setItem('theme', 'light');
-        window.localStorage.setItem('color-theme', 'light'); // Pro jistotu oba běžné názvy
-        
-        // Tady je ten trik: Sledujeme, kdyby se web snažil přidat 'dark' a hned to smažeme
-        const observer = new MutationObserver(() => {
-          if (document.documentElement.classList.contains('dark')) {
-            document.documentElement.classList.remove('dark');
-          }
-        });
-        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-      });
-    
-      // 3. Jdeme na web
-      await page.goto('https://endeavouros.cz');
-    
-      // 4. OVĚŘENÍ: Teď už musí být světlý
-      const html = page.locator('html');
-      await expect(html).not.toHaveClass(/dark/);
-      
-      // Vizuální kontrola - barva pozadí by teď měla být bílá/světlá (rgb 255, 255, 255)
-      // Poznámka: Pokud má web i ve světlém režimu jinou barvu, uprav si rgb hodnotu
-      await expect(page.locator('body')).toHaveCSS('background-color', 'rgb(248, 249, 250)');
-      await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
-  
-    });
-    
-  });
-});

tests/pages/HomePage.ts

@@ -99,13 +99,18 @@ export class HomePage {
   /*
   * Test theme
   */
-  // Test Theme sun
-  async switchThemeFunction() {
+  // Test Theme Light
+  async switchThemeFunctionLight() {
     const themeButton = this.page.locator('#themeToggle'); 
     await themeButton.click();
     await expect(this.page.locator('html')).toHaveAttribute('data-theme', 'light');
-    
-    
+  }
+
+  // Test Theme Dark
+  async switchThemeFunctionDark() {
+    const themeButton = this.page.locator('#themeToggle'); 
+    await themeButton.click();
+    await expect(this.page.locator('html')).toHaveAttribute('data-theme', 'dark');
   }
   }