elearning/Frontend-Learner/tests/e2e/discovery.spec.ts

/**
 * @file discovery.spec.ts
 * @description ทดสอบหมวดหน้าค้นหาคอร์สและผลลัพธ์ (Discovery & Browse)
 */
import { test, expect } from '@playwright/test';
import { BASE_URL, TIMEOUT, waitAppSettled } from './helpers';

test.describe('หมวดหน้าค้นหาคอร์สและผลลัพธ์ (Discovery & Browse)', () => {

  test.describe('ส่วนหน้าแรก (Home)', () => {
    test('โหลดหน้าแรก และตรวจสอบแสดงผลครบถ้วน (Hero, Cards, Categories)', async ({ page }) => {
      await page.goto(BASE_URL);
      await waitAppSettled(page);

      const heroTitle = page.locator('h1, h2, .hero-title').first();
      await expect(heroTitle).toBeVisible({ timeout: TIMEOUT.PAGE_LOAD });

      const ctaButton = page.locator('a[href="/browse"]').first();
      if (await ctaButton.isVisible()) {
        await expect(ctaButton).toBeVisible();
      }

      const courseSectionHeading = page.getByText(/คอร์สออนไลน์|Online Courses/i).first();
      await expect(courseSectionHeading).toBeVisible({ timeout: TIMEOUT.ELEMENT });

      const allCategoryBtn = page.getByRole('button', { name: /ทั้งหมด|All/i }).first();
      await expect(allCategoryBtn).toBeVisible();

      const courseCards = page.locator('div.cursor-pointer').filter({ has: page.locator('img') });
      await expect(courseCards.first()).toBeVisible({ timeout: TIMEOUT.PAGE_LOAD });
      expect(await courseCards.count()).toBeGreaterThan(0);

      await page.screenshot({ path: 'tests/e2e/screenshots/discovery-home.png', fullPage: true });
    });
  });

  test.describe('ส่วนค้นหาและแคตตาล็อก (Browse)', () => {
    test('ค้นหาหลักสูตร (Search Course)', async ({ page }) => {
      await page.goto(`${BASE_URL}/browse`);
      await waitAppSettled(page);

      const searchInput = page.locator('input[placeholder="ค้นหาคอร์ส..."]').first();
      await expect(searchInput).toBeVisible({ timeout: TIMEOUT.ELEMENT });
      await searchInput.fill('Python');
      await searchInput.press('Enter');
      await waitAppSettled(page);

      // ต้องเจออย่างใดอย่างหนึ่ง: ผลลัพธ์คอร์ส หรือ empty state
      const searchResults = page.locator('a[href*="/course/"]').filter({ has: page.locator('img') }).first();
      const emptyState = page.getByText(/ไม่พบ|ไม่เจอ|No result|not found/i).first()
        .or(page.locator('i.q-icon').filter({ hasText: 'search_off' }).first());

      await expect(searchResults.or(emptyState)).toBeVisible({ timeout: TIMEOUT.PAGE_LOAD });

      await page.screenshot({ path: 'tests/e2e/screenshots/discovery-search.png', fullPage: true });
    });

    test('ตัวกรองหมวดหมู่คอร์ส (Category Filter)', async ({ page }) => {
      await page.goto(`${BASE_URL}/browse`);
      await waitAppSettled(page);

      const categoryButton = page.locator('button').filter({ hasText: 'การออกแบบ' }).first();

      if (await categoryButton.isVisible()) {
        await categoryButton.click();
        const courseCard = page.locator('a[href*="/course/"]').filter({ has: page.locator('img') }).first();
        await expect(courseCard).toBeVisible({ timeout: TIMEOUT.PAGE_LOAD });
      }

      await page.screenshot({ path: 'tests/e2e/screenshots/discovery-filter.png', fullPage: true });
    });
  });

  test.describe('หน้ารายละเอียดคอร์ส (Course Detail)', () => {
    test('โหลดเนื้อหาวิชา (Curriculum) แถบรายละเอียดขึ้นปกติ', async ({ page }) => {
      await page.goto(`${BASE_URL}/course/1`);
      await waitAppSettled(page);

      const courseTitle = page.locator('h1').first();
      await expect(courseTitle).toBeVisible({ timeout: TIMEOUT.PAGE_LOAD });

      const curriculumTab = page.getByRole('tab', { name: /เนื้อหาวิชา|ส่วนหลักสูตร|Curriculum/i }).first();
      if (await curriculumTab.isVisible()) {
        await curriculumTab.click();
      }

      const lessonItems = page.locator('.q-expansion-item, .lesson-item, [role="listitem"]');
      await expect(lessonItems.first()).toBeVisible().catch(() => {});

      await page.screenshot({ path: 'tests/e2e/screenshots/discovery-curriculum.png', fullPage: true });
    });

    test('การแสดงผลปุ่ม เข้าเรียน/ลงทะเบียน (Enroll / Start Learning)', async ({ page }) => {
      await page.goto(`${BASE_URL}/course/1`);
      await waitAppSettled(page);

      const enrollStartBtn = page.locator('button').filter({ hasText: /(เข้าสู่ระบบ|ลงทะเบียน|เข้าเรียน|เรียนต่อ|ซื้อ|ฟรี|Enroll|Start|Buy|Login)/i }).first();
      await expect(enrollStartBtn).toBeVisible({ timeout: TIMEOUT.ELEMENT });

      await page.screenshot({ path: 'tests/e2e/screenshots/discovery-enroll-btn.png', fullPage: true });
    });
  });
});