elearning/Frontend-Learner/tests/e2e/student-account.spec.ts

/**
 * @file student-account.spec.ts
 * @description ทดสอบระบบพื้นที่ส่วนตัวผู้เรียน (Student Account / Portal)
 */
import { test, expect } from '@playwright/test';
import { BASE_URL, TIMEOUT, waitAppSettled, setupLogin } from './helpers';

test.describe('ระบบพื้นที่ส่วนตัวผู้เรียน (Student Account / Portal)', () => {

  test.describe('การตั้งค่าและส่วนติดต่อผู้ใช้ (Settings & UI Theme)', () => {
    test('เปลี่ยนภาษาการแสดงผล (Localisation/i18n)', async ({ page }) => {
      await page.goto(BASE_URL);
      await waitAppSettled(page);

      // หาปุ่มภาษา — ถ้าไม่เจอให้ test.skip แทนที่จะผ่านเงียบๆ
      const langBtn = page.getByRole('button', { name: 'Language' })
        .or(page.locator('button').filter({ hasText: /TH|EN/ }))
        .first();

      const isLangBtnVisible = await langBtn.isVisible().catch(() => false);
      if (!isLangBtnVisible) {
        test.skip(true, 'Language button not found on page — skipping');
        return;
      }

      await langBtn.click();
      const englishOpt = page.locator('text=English, text=EN').first();
      await englishOpt.click();

      const loginLink = page.locator('a[href*="login"], button').filter({ hasText: /Log in|Sign In/i });
      await expect(loginLink).toBeVisible({ timeout: TIMEOUT.ELEMENT });

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

    test('เปลี่ยนโหมดมืดสว่าง (Theme Switcher)', async ({ page }) => {
      await page.goto(BASE_URL);
      await waitAppSettled(page);

      // หาปุ่ม Theme — ถ้าไม่เจอให้ test.skip แทนที่จะผ่านเงียบๆ
      const themeBtn = page.locator('.dark-mode-toggle, button[aria-label*="theme"]').first();

      const isThemeBtnVisible = await themeBtn.isVisible().catch(() => false);
      if (!isThemeBtnVisible) {
        test.skip(true, 'Theme toggle button not found on page — skipping');
        return;
      }

      const htmlBefore = await page.evaluate(() => document.documentElement.className);
      await themeBtn.click();
      await page.waitForTimeout(500);
      const htmlAfter = await page.evaluate(() => document.documentElement.className);
      expect(htmlBefore).not.toEqual(htmlAfter);

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

  test.describe('ระบบหน้าแดชบอร์ดนักเรียน (Dashboard & My Courses)', () => {
    test.beforeEach(async ({ page }) => {
      await setupLogin(page);
    });

    test('หน้าแรกของ Dashboard โหลดได้ปกติ', async ({ page }) => {
      await page.goto(`${BASE_URL}/dashboard`);
      await waitAppSettled(page, 1000);

      const welcomeText = page.getByText(/ยินดีต้อนรับกลับ/i, { exact: false });
      const profileSummary = page.locator('.q-avatar, img[alt*="Profile"], img[src*="avatar"]').first();

      await expect(welcomeText.first().or(profileSummary)).toBeVisible({ timeout: TIMEOUT.ELEMENT });

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

    test('โหลดหน้า คอร์สของฉัน (My Courses)', async ({ page }) => {
      await page.goto(`${BASE_URL}/dashboard/my-courses`);
      await waitAppSettled(page);

      const heading = page.locator('h2').filter({ hasText: /คอร์สของฉัน|My Courses/i }).first();
      await expect(heading).toBeVisible({ timeout: TIMEOUT.ELEMENT });

      const searchInput = page.getByPlaceholder(/ค้นหา|Search/i).first();
      await expect(searchInput).toBeVisible({ timeout: TIMEOUT.ELEMENT });

      await expect(page.locator('i.q-icon').filter({ hasText: 'grid_view' }).first()).toBeVisible();
      await expect(page.locator('i.q-icon').filter({ hasText: 'view_list' }).first()).toBeVisible();

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

    test('ลองค้นหาคอร์ส (Search Input) ไม่พบข้อมูล', async ({ page }) => {
      await page.goto(`${BASE_URL}/dashboard/my-courses`);
      await waitAppSettled(page);

      const searchInput = page.getByPlaceholder(/ค้นหา|Search/i).first();
      await expect(searchInput).toBeVisible({ timeout: TIMEOUT.ELEMENT });

      await searchInput.fill('คอร์สที่ไม่มีอยู่จริงแน่นอน1234');

      const emptyState = page.locator('h3').filter({ hasText: /ไม่พบ|ไม่เจอ|No result/i }).first()
                           .or(page.locator('i.q-icon').filter({ hasText: 'search_off' }));

      await expect(emptyState.first()).toBeVisible({ timeout: TIMEOUT.ELEMENT });

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

    test('แก้ไขและบันทึกข้อมูลส่วนตัว (Edit Profile)', async ({ page }) => {
      await page.goto(`${BASE_URL}/dashboard/profile`);
      await waitAppSettled(page, 1000);

      // หา input ชื่อ — ใช้ textbox "First Name" หรือ input[type="text"] ตัวแรก
      const nameInput = page.getByRole('textbox', { name: /First Name|ชื่อ/i }).first()
        .or(page.locator('input[type="text"]').first());

      const isNameVisible = await nameInput.isVisible().catch(() => false);
      if (!isNameVisible) {
        test.skip(true, 'Profile name input not found — skipping');
        return;
      }

      const oldName = await nameInput.inputValue();
      await nameInput.clear();
      await nameInput.fill(`${oldName}แก้ไข`);

      // ปุ่มบันทึก — รองรับทั้งภาษาไทยและอังกฤษ
      const saveBtn = page.getByRole('button', { name: /บันทึก|Save Changes|Save/i }).first();
      await expect(saveBtn).toBeVisible({ timeout: TIMEOUT.ELEMENT });
      await saveBtn.click();

      // Toast สำเร็จ — รองรับทั้ง 2 ภาษา
      const successNotify = page.getByText(/อัปเดตข้อมูลสำเร็จ|บันทึกข้อมูล|updated|saved|success/i).first();
      await expect(successNotify).toBeVisible({ timeout: TIMEOUT.ELEMENT }).catch(() => {});

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