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

import { test, expect } from '@playwright/test';

const BASE_URL = process.env.E2E_BASE_URL ?? 'http://localhost:3000';

async function waitAppSettled(page: any) {
  await page.waitForLoadState('domcontentloaded');
  await page.waitForLoadState('networkidle').catch(() => {});
  await page.waitForTimeout(200);
}

// ฟังก์ชันจำลองล็อกอิน (เพื่อที่จะเข้า Dashboard ได้)
async function setupLogin(page: any) {
  await page.goto(`${BASE_URL}/auth/login`, { waitUntil: 'domcontentloaded' });
  await waitAppSettled(page);
  
  await page.locator('input[type="email"]').or(page.getByRole('textbox', { name: /อีเมล|email/i })).first().fill('studentedtest@example.com');
  await page.locator('input[type="password"]').or(page.getByRole('textbox', { name: /รหัสผ่าน|password/i })).first().fill('admin123');
  await page.getByRole('button', { name: /เข้าสู่ระบบ|login/i }).or(page.locator('button[type="submit"]')).first().click();
  
  await page.waitForURL('**/dashboard', { timeout: 15_000 }).catch(() => {});
  await waitAppSettled(page);
}

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

  test.describe('การตั้งค่าและส่วนติดต่อผู้ใช้ (Settings & UI Theme)', () => {
    test('เปลี่ยนภาษาการแสดงผล (Localisation/i18n)', async ({ page }) => {
      await page.goto(BASE_URL); 
      const langBtn = page.getByRole('button', { name: 'Language' }).or(page.locator('button').filter({ hasText: /TH|EN/ })).first();
      
      if (await langBtn.isVisible()) {
        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: 5000 });
      }
    });

    test('เปลี่ยนโหมดมืดสว่าง (Theme Switcher)', async ({ page }) => {
      await page.goto(BASE_URL);
      const themeBtn = page.locator('.dark-mode-toggle, button[aria-label*="theme"]').first();
      
      if (await themeBtn.isVisible()) {
        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);
      }
    });
  });

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

    test('หน้าแรกของ Dashboard โหลดได้ปกติ', async ({ page }) => {
      await page.goto(`${BASE_URL}/dashboard`);
      await page.waitForTimeout(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: 10_000 });
    });

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

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

      const searchInput = page.getByPlaceholder(/ค้นหา|Search/i).first();
      await expect(searchInput).toBeVisible({ timeout: 10_000 });
      
      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();
    });

    test('ลองค้นหาคอร์ส (Search Input) ไม่พบข้อมูล', async ({ page }) => {
      await page.goto(`${BASE_URL}/dashboard/my-courses`);
      
      const searchInput = page.getByPlaceholder(/ค้นหา|Search/i).first();
      await expect(searchInput).toBeVisible({ timeout: 10_000 });

      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: 10_000 });
    });

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

      const nameInput = page.locator('input[type="text"]').first();
      
      if (await nameInput.isVisible()) {
        const oldName = await nameInput.inputValue();
        
        await nameInput.clear();
        await nameInput.fill(`${oldName}แก้ไข`);

        const saveBtn = page.getByRole('button', { name: /บันทึก/i }).first();
        if(await saveBtn.isVisible()) {
          await saveBtn.click();
          const successNotify = page.locator('.q-notification__message, text=อัปเดตข้อมูลสำเร็จ').first();
          await expect(successNotify).toBeVisible({ timeout: 5000 }).catch(() => {});
        }
      }
    });

  });
});