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

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

/**
 * Register Page Tests
 * Test instructor registration flow
 */
test.describe('Register Page', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto(TEST_URLS.register);
    });

    test('check display register form', async ({ page }) => {
        // Header
        await expect(page.getByText('ลงทะเบียนเป็นผู้สอน')).toBeVisible();
        await expect(page.getByText('สร้างบัญชีเพื่อเริ่มสร้างหลักสูตร')).toBeVisible();

        // Form fields
        await expect(page.locator('label').filter({ hasText: 'ชื่อผู้ใช้ (Username)' })).toBeVisible();
        await expect(page.locator('label').filter({ hasText: 'อีเมล' })).toBeVisible();
        await expect(page.locator('label').filter({ hasText: 'รหัสผ่าน *' })).toBeVisible();
        await expect(page.locator('label').filter({ hasText: 'ยืนยันรหัสผ่าน' })).toBeVisible();
        await expect(page.locator('label').filter({ hasText: 'คำนำหน้า' })).toBeVisible();
        await expect(page.locator('label').filter({ hasText: 'ชื่อจริง' })).toBeVisible();
        await expect(page.locator('label').filter({ hasText: 'นามสกุล' })).toBeVisible();
        await expect(page.locator('label').filter({ hasText: 'เบอร์โทรศัพท์' })).toBeVisible();

        // Submit button
        await expect(page.getByRole('button', { name: 'ลงทะเบียน' })).toBeVisible();

        // Login link
        await expect(page.getByText('มีบัญชีอยู่แล้ว?')).toBeVisible();
        await expect(page.getByText('เข้าสู่ระบบ')).toBeVisible();
    });

    test('should show validation errors for empty fields', async ({ page }) => {
        await page.getByRole('button', { name: 'ลงทะเบียน' }).click();

        await expect(page.getByText('กรุณากรอก username')).toBeVisible();
        await expect(page.getByText('กรุณากรอกอีเมล')).toBeVisible();
        await expect(page.getByText('กรุณากรอกรหัสผ่าน')).toBeVisible();
        await expect(page.getByText('กรุณายืนยันรหัสผ่าน')).toBeVisible();
        await expect(page.getByText('กรุณากรอกชื่อ')).toBeVisible();
        await expect(page.getByText('กรุณากรอกนามสกุล')).toBeVisible();
        await expect(page.getByText('กรุณากรอกเบอร์โทร')).toBeVisible();
    });

    test('should show username min length validation', async ({ page }) => {
        const usernameInput = page.locator('label').filter({ hasText: 'ชื่อผู้ใช้ (Username)' }).locator('input');
        await usernameInput.fill('ab');
        await page.getByRole('button', { name: 'ลงทะเบียน' }).click();

        await expect(page.getByText('อย่างน้อย 4 ตัวอักษร')).toBeVisible();
    });

    test('should show email format validation', async ({ page }) => {
        const emailInput = page.locator('input[type="email"]');
        await emailInput.fill('invalid-email');
        await page.getByRole('button', { name: 'ลงทะเบียน' }).click();

        await expect(page.getByText('รูปแบบอีเมลไม่ถูกต้อง')).toBeVisible();
    });

    test('should show password min length validation', async ({ page }) => {
        const passwordInput = page.locator('label').filter({ hasText: 'รหัสผ่าน *' }).locator('input');
        await passwordInput.fill('1234');
        await page.getByRole('button', { name: 'ลงทะเบียน' }).click();

        await expect(page.getByText('อย่างน้อย 8 ตัวอักษร')).toBeVisible();
    });

    test('should show password mismatch validation', async ({ page }) => {
        const passwordInput = page.locator('label').filter({ hasText: 'รหัสผ่าน *' }).locator('input');
        const confirmInput = page.locator('label').filter({ hasText: 'ยืนยันรหัสผ่าน' }).locator('input');

        await passwordInput.fill('password123');
        await confirmInput.fill('differentpass');
        await page.getByRole('button', { name: 'ลงทะเบียน' }).click();

        await expect(page.getByText('รหัสผ่านไม่ตรงกัน')).toBeVisible();
    });

    test('should toggle password visibility', async ({ page }) => {
        const passwordInput = page.locator('label').filter({ hasText: 'รหัสผ่าน *' }).locator('input');
        await passwordInput.fill('test1234');

        // Click visibility icon
        await page.locator('label').filter({ hasText: 'รหัสผ่าน *' }).locator('.q-icon').filter({ hasText: 'visibility' }).click();

        // Both password fields should now be text type
        await expect(passwordInput).toHaveAttribute('type', 'text');
    });

    test('should navigate to login page', async ({ page }) => {
        await page.getByText('เข้าสู่ระบบ').click();
        await page.waitForURL('**/login**', { timeout: 10_000 });
        await expect(page).toHaveURL(/\/login/);
    });

    test('should register successfully with valid data', async ({ page }) => {
        const username = faker.internet.username().toLowerCase().replace(/[^a-z0-9]/g, '') + faker.string.alpha({ length: 4, casing: 'lower' });
        const email = faker.internet.email().toLowerCase();
        const password = 'Test@1234';
        const firstName = faker.person.firstName();
        const lastName = faker.person.lastName();
        const phone = `0${faker.string.numeric(9)}`;

        // Fill form
        const usernameInput = page.locator('label').filter({ hasText: 'ชื่อผู้ใช้ (Username)' }).locator('input');
        await usernameInput.fill(username);

        await page.locator('input[type="email"]').fill(email);

        const passwordInput = page.locator('label').filter({ hasText: 'รหัสผ่าน *' }).locator('input');
        await passwordInput.fill(password);

        const confirmInput = page.locator('label').filter({ hasText: 'ยืนยันรหัสผ่าน' }).locator('input');
        await confirmInput.fill(password);

        // Select prefix
        const prefixSelect = page.locator('label').filter({ hasText: 'คำนำหน้า' });
        await prefixSelect.click();
        await page.waitForTimeout(300);
        await page.locator('.q-item__label').filter({ hasText: 'นาย / Mr.' }).click();

        // Fill name
        const firstNameInput = page.locator('label').filter({ hasText: 'ชื่อจริง' }).locator('input');
        await firstNameInput.fill(firstName);

        const lastNameInput = page.locator('label').filter({ hasText: 'นามสกุล' }).locator('input');
        await lastNameInput.fill(lastName);

        // Fill phone
        const phoneInput = page.locator('label').filter({ hasText: 'เบอร์โทรศัพท์' }).locator('input');
        await phoneInput.fill(phone);

        // Submit
        await page.getByRole('button', { name: 'ลงทะเบียน' }).click();

        // Should show success notification and redirect to login
        await expect(page.locator('.q-notification')).toBeVisible({ timeout: 10_000 });
        await page.waitForURL('**/login**', { timeout: 15_000 });
        await expect(page).toHaveURL(/\/login/);
    });
});