pleno-vue/tests/e2e/passkeyAuth.spec.ts

import { test, expect } from '@playwright/test';
import {
  passkeyTestData,
  goToUserLogin,
  goToSubuserLogin,
  isPasskeyButtonVisible,
} from './fixtures';

/** Passkey Authentication Tests */

// User Passkey Tests
test.describe('[AUTH][Passkey][User]', () => {
  test('should display passkey login button on user login page when supported', async ({ page }) => {
    await goToUserLogin(page);
    
    // Check if passkey button is visible (depends on browser WebAuthn support)
    const passkeyButton = page.locator('button[id="passkey-login-button"]');
    
    // The button visibility depends on WebAuthn support
    // In most modern browsers (Chrome, Edge, Firefox), it should be visible
    const isVisible = await passkeyButton.isVisible();
    
    if (isVisible) {
      await expect(passkeyButton).toBeVisible();
      await expect(passkeyButton.locator('.fa-fingerprint')).toBeVisible();
    }
  });

  test('should have passkey button with fingerprint icon', async ({ page }) => {
    await goToUserLogin(page);
    
    const passkeyButton = page.locator('button[id="passkey-login-button"]');
    
    // Skip test if passkeys not supported in this browser
    if (!(await passkeyButton.isVisible())) {
      test.skip();
      return;
    }
    
    // Button should contain fingerprint icon
    await expect(passkeyButton.locator('.fa-fingerprint')).toBeVisible();
  });

  test('should display loading spinner when passkey login is clicked', async ({ page }) => {
    await goToUserLogin(page);
    
    const passkeyButton = page.locator('button[id="passkey-login-button"]');
    
    // Skip test if passkeys not supported
    if (!(await passkeyButton.isVisible())) {
      test.skip();
      return;
    }
    
    // Click passkey button - this will trigger WebAuthn prompt
    // Note: The actual WebAuthn flow cannot be completed in automated tests
    // without additional browser configuration or mocking
    await passkeyButton.click();
    
    // Button should show loading spinner while waiting for authenticator
    // (This may be brief or the test may need adjustment based on actual behavior)
    await expect(passkeyButton.locator('.fa-spinner')).toBeVisible({ timeout: 1000 }).catch(() => {
      // Loading state may be too fast to catch
    });
  });

  test('should not disable other login options when passkey is available', async ({ page }) => {
    await goToUserLogin(page);
    
    // Regular login form should still be functional
    const customerNumberInput = page.locator('input[name="customer_number"]');
    const passwordInput = page.locator('input[name="password"]');
    const loginButton = page.locator('button[id="login-button"]');
    
    await expect(customerNumberInput).toBeVisible();
    await expect(passwordInput).toBeVisible();
    await expect(loginButton).toBeVisible();
    await expect(loginButton).not.toBeDisabled();
  });

  test('should show QR code login option alongside passkey', async ({ page }) => {
    await goToUserLogin(page);
    
    // QR code login should still be available
    const qrLoginLink = page.locator('a[href="/auth/loginqr"], a:has-text("QR")');
    await expect(qrLoginLink).toBeVisible();
  });
});

// Subuser Passkey Tests
test.describe('[AUTH][Passkey][Subuser]', () => {
  test('should display passkey login button on subuser login page when supported', async ({ page }) => {
    await goToSubuserLogin(page);
    
    const passkeyButton = page.locator('button[id="passkey-login-button"]');
    
    // The button visibility depends on WebAuthn support
    const isVisible = await passkeyButton.isVisible();
    
    if (isVisible) {
      await expect(passkeyButton).toBeVisible();
    }
  });

  test('should not disable phone login when passkey is available', async ({ page }) => {
    await goToSubuserLogin(page);
    
    // Regular login form should still be functional
    const phoneInput = page.locator('input[name="phone"]');
    const passwordInput = page.locator('input[name="password"]');
    const loginButton = page.locator('button[id="subuser-login-button"]');
    
    await expect(phoneInput).toBeVisible();
    await expect(passwordInput).toBeVisible();
    await expect(loginButton).toBeVisible();
    await expect(loginButton).not.toBeDisabled();
  });
});

// Passkey Browser Support Tests
test.describe('[AUTH][Passkey][Browser Support]', () => {
  test('should gracefully handle browsers without passkey support', async ({ page, browserName }) => {
    await goToUserLogin(page);
    
    // In browsers without WebAuthn, the passkey button should not be visible
    const passkeyButton = page.locator('button[id="passkey-login-button"]');
    
    // Get visibility state - this test documents the behavior rather than asserting specific state
    const isVisible = await passkeyButton.isVisible();
    
    // Log the state for test reporting
    console.log(`Passkey button visible in ${browserName}: ${isVisible}`);
    
    // The important thing is that the page loads correctly regardless
    await expect(page.locator('form')).toBeVisible();
  });

  test('should always show password-based login as fallback', async ({ page }) => {
    await goToUserLogin(page);
    
    // Password login should always be available, regardless of passkey support
    await expect(page.locator('input[name="customer_number"]')).toBeVisible();
    await expect(page.locator('input[name="password"]')).toBeVisible();
    await expect(page.locator('button[id="login-button"]')).toBeVisible();
  });
});

// Passkey Button State Tests
test.describe('[AUTH][Passkey][Button State]', () => {
  test('should disable passkey button while loading', async ({ page }) => {
    await goToUserLogin(page);
    
    const passkeyButton = page.locator('button[id="passkey-login-button"]');
    
    // Skip if passkeys not supported
    if (!(await passkeyButton.isVisible())) {
      test.skip();
      return;
    }
    
    // Initial state - button should be enabled
    await expect(passkeyButton).not.toBeDisabled();
    
    // After clicking, button should become disabled while loading
    await passkeyButton.click();
    
    // The button should be disabled during the authentication attempt
    await expect(passkeyButton).toBeDisabled();
  });
});