eos_test/tests/homePage.test.ts

import { test, expect } from '@playwright/test';
import { HomePage } from './pages/HomePage';
import { expectedMenuTexts, homePageCards, expectedHalloText, expectedMainHeading, expectedHeroToHaveText, expectedHalloToHaveText2, expectedSearchPlaceholder} from './assets/texts/textHelpers';
import { time } from 'console';

test.describe('EndeavourOS HomePage - POM', () => {
  let homePage: HomePage;

  // Před každým testem vytvoříme novou instanci stránky
  test.beforeEach(async ({ page }) => {
    homePage = new HomePage(page);
    await homePage.navigate();
  });

  test.describe('homePage text', () => {
    
    test('overification of basic elements', async ({ page }) => {
      await expect(page).toHaveTitle('Domů - EndeavourOS CZ');
      await expect(homePage.mainHeading).toBeVisible();
      await expect(homePage.halloDescription).toBeVisible();
      await expect(homePage.mainHeading).toHaveText(expectedMainHeading);
    });
  
    test('check all hello text visibility', async ({ page }) => {
      await homePage.checkHalloText(expectedHalloText);
      const locator = page.locator('.hero');

      await expect(locator).toHaveText(expectedHeroToHaveText);
      await expect(homePage.halloDescription2).toHaveText(expectedHalloToHaveText2);

  
    });
  });

  test.describe('navigate', () => {

    test('search for a term', async ({page}) => {
      await homePage.searchInput.fill('EndeavourOS');
      // nejdříve je nutno opravit vyhledávaní na webu
      // await page.getByText('Linux pacman příkazy').click();
      
    });

    test('check all menu items visibility', async () => {
      await homePage.checkMenuTexts(expectedMenuTexts);
    });

    test('navigation to EndeavourOS', async ({ page }) => {
      await homePage.clickMenuItem('EndeavourOS');
      await expect(page).toHaveURL(new RegExp(`.*${homePage.url}/endeavouros`));
    });

    test('navigation to Články', async ({ page }) => {
      await homePage.clickMenuItem('Články');
      await expect(page).toHaveURL(new RegExp(`.*${homePage.url}/rozcestnik`));
    });

    test('navigation to Krátké návody', async ({ page }) => {
      await homePage.clickMenuItem('Krátké návody');
      await expect(page).toHaveURL(new RegExp(`.*${homePage.url}/cheatsheet`));
    });

    // Seznam externích odkazů, které chceme prověřit
    // Nyní nejde nutno doopravit
    // test('externí odkazy v menu jsou platné', async ({ page, request }) => {
    //   const homePage = new HomePage(page);
    //   await homePage.navigate();
    
      // Seznam externích odkazů, které chceme prověřit
      // test('kontrola externích odkazů na zdraví (status 200)', async ({ page, request }) => {
      //   const homePage = new HomePage(page);
      //   await homePage.navigate();
      
      //   for (const link of externalLinks) {
      //     // Ověříme, že text tlačítka je na stránce vidět
      //     const href = await homePage.getMenuItemHref(link.name);
          
      //     // Ověříme, že href v HTML odpovídá tomu, co máme v datech
      //     expect(href).toBe(link.url);
      
      //     // Provedeme rychlou kontrolu, zda link není "mrtvý"
      //     const response = await request.get(link.url);
      //     expect(response.ok(), `Odkaz ${link.name} na adrese ${link.url} vrací chybu!`).toBeTruthy();
          
      //     console.log(`Log: Odkaz "${link.name}" je v pořádku.`);
      //   }
      // });

      //funkční řešení - otevře web
      test('externí Fórum -> odkaz má správnou adresu', async () => {
        const href = await homePage.getMenuItemLinkHref('Fórum'); // Příklad
        expect(href).toBe('https://forum.arch-linux.cz/'); 
      });
    
    test('navigation to O nás', async ({ page }) => {
      await homePage.clickMenuItem('O nás');
      await expect(page).toHaveURL(new RegExp(`.*${homePage.url}/o-nas`));
    });
  });

 

  test.describe('Carts (Karty) na HomePage', () => {
    let homePage: HomePage;

    test.beforeEach(async ({ page }) => {
      homePage = new HomePage(page);
      await homePage.navigate();
    });

    // Otestuje textace na kartách
    test('should display all cards correctly', async () => {
      for (const card of homePageCards) {
        // Používáme naši POM metodu pro každou kartu
        await homePage.verifyCardContent(card.title, card.description);
      }
    });

  //   test('should navigate after clicking on a specific card', async ({ page }) => {
  //     // Příklad pro jednu konkrétní kartu
  //     await homePage.clickCardButton('Lehkost a rychlost');
  //     // 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()
    });
  });
  });
});