elearning/frontend_management/tests/auth/login.spec.ts

import { test, expect } from '@playwright/test';
import { TEST_ADMIN, TEST_INSTRUCTOR, TEST_URLS } from '../fixtures/test-data';

test.describe('Login Page', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto(TEST_URLS.login);
    });

    test('should display login form', async ({ page }) => {
        // Title
        await expect(page.locator('h1')).toContainText('E-Learning');

        // Email & password fields
        await expect(page.locator('input[type="email"]')).toBeVisible();
        await expect(page.locator('input[type="password"]')).toBeVisible();

        // Submit button
        await expect(page.locator('button[type="submit"]')).toBeVisible();

        // Register link
        await expect(page.locator('a[href="/register"]')).toBeVisible();
    });

    test('should show validation errors for empty fields', async ({ page }) => {
        // Click submit without filling fields
        await page.locator('button[type="submit"]').click();

        // Expect validation messages in Thai
        await expect(page.getByText('กรุณากรอกอีเมล')).toBeVisible();
    });

    test('should show validation errors for empty fields password', async ({ page }) => {
        // Click submit without filling fields
        await page.locator('input[type="email"]').fill('test@email.com');
        await page.locator('button[type="submit"]').click();

        // Expect validation messages in Thai
        await expect(page.getByText('กรุณากรอกรหัสผ่าน')).toBeVisible();
    });

    test('should toggle password visibility', async ({ page }) => {
        const passwordInput = page.locator('input[type="password"]');

        await page.waitForTimeout(1000);
        await passwordInput.fill('test123');

        await page.waitForTimeout(1000);
        // Click the visibility toggle icon
        await page.locator('//i[normalize-space(text())="visibility"]').click();

        // Password field should now be text type
        await expect(page.locator('input[type="text"]').last()).toHaveValue('test123');
    });

    test('should show error for invalid credentials', async ({ page }) => {
        await page.waitForTimeout(1000);
        await page.locator('input[type="email"]').fill('wrong@email.com');
        await page.waitForTimeout(500);
        await page.locator('input[type="password"]').fill('wrongpassword');
        await page.locator('button[type="submit"]').click();

        // Should show error notification (Quasar Notify)
        await expect(page.locator('.q-notification')).toBeVisible({ timeout: 10_000 });
    });

    test('should login as admin and redirect to /admin', async ({ page }) => {
        await page.waitForTimeout(1000);
        await page.locator('input[type="email"]').fill(TEST_ADMIN.email);
        await page.waitForTimeout(500);
        await page.locator('input[type="password"]').fill(TEST_ADMIN.password);
        await page.locator('button[type="submit"]').click();

        // Should redirect to admin dashboard
        await page.waitForURL('**/admin**', { timeout: 15_000 });
        await expect(page).toHaveURL(/\/admin/);
    });

    test('should login as instructor and redirect to /instructor', async ({ page }) => {
        await page.locator('input[type="email"]').fill(TEST_INSTRUCTOR.email);
        await page.waitForTimeout(1000);
        await page.locator('input[type="password"]').fill(TEST_INSTRUCTOR.password);
        await page.waitForTimeout(1000);
        await page.locator('button[type="submit"]').click();

        // Should redirect to instructor dashboard
        await page.waitForURL('**/instructor**', { timeout: 15_000 });
        await expect(page).toHaveURL(/\/instructor/);
    });

    test('should open forgot password modal', async ({ page }) => {
        await page.getByText('ลืมรหัสผ่าน?').click();

        // Modal should be visible
        await expect(page.getByText('ลืมรหัสผ่าน').nth(1)).toBeVisible();
        await expect(page.locator('.q-dialog input[type="email"]')).toBeVisible();
    });

    test('should remember email after login with remember me checked', async ({ page }) => {
        // 1. Fill credentials
        await page.waitForTimeout(500);
        await page.locator('input[type="email"]').fill(TEST_ADMIN.email);
        await page.waitForTimeout(500);
        await page.locator('input[type="password"]').fill(TEST_ADMIN.password);
        await page.waitForTimeout(500);
        // 2. Check "remember me"
        await page.getByText('จดจำฉันไว้').click();

        // 3. Login
        await page.locator('button[type="submit"]').click();
        await page.waitForURL('**/admin**', { timeout: 15_000 });

        // 4. Logout - click avatar menu then logout
        await page.getByText('ออกจากระบบ').click();
        await page.waitForTimeout(1000);
        // 5. Confirm logout dialog
        await page.locator("(//button[@type='button'])[2]").click();

        // 6. Should redirect back to login page
        await page.waitForURL('**/login**', { timeout: 15_000 });

        // 7. Verify the email is still pre-filled
        await expect(page.locator('input[type="email"]')).toHaveValue(TEST_ADMIN.email);
    });
});