mARTin
c82572935c
- Add dark mode color adjustment helper for category colors - Support multiple motivational quote source URLs - Fix text wrapping for tasks/events to prevent horizontal overflow - Improve someday list item layout for long text - Add CLAUDE.md with semantic versioning and git workflow rules - Update test/doc URLs and planning docs v1.1.0 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Login Page Structure and Tailwind Debug', () => {
|
|
test('should display login page with proper structure', async ({ page }) => {
|
|
await page.goto('http://localhost:3001/auth/login');
|
|
|
|
// Verify main layout structure
|
|
await expect(page.locator('div.min-h-screen.bg-gray-50')).toBeVisible();
|
|
await expect(page.locator('div.flex.flex-col.items-center.justify-center.min-h-screen.py-12.px-4.sm:px-6.lg:px-8')).toBeVisible();
|
|
|
|
// Check header elements
|
|
await expect(page.locator('h1.text-3xl.font-bold.text-gray-900')).toBeVisible();
|
|
await expect(page.locator('p.mt-2.text-gray-600')).toContainText('Sign in to your account');
|
|
|
|
// Check form structure
|
|
await expect(page.locator('form')).toBeVisible();
|
|
await expect(page.locator('div.max-w-md.w-full.space-y-8.bg-white.rounded-xl.shadow-lg.p-8')).toBeVisible();
|
|
|
|
// Check input fields
|
|
await expect(page.locator('#email-address')).toBeVisible();
|
|
await expect(page.locator('#password')).toBeVisible();
|
|
|
|
// Check for submit button
|
|
await expect(page.locator('button[type="submit"]')).toBeVisible();
|
|
|
|
// Check links
|
|
await expect(page.locator('a[href="/auth/signup"]')).toBeVisible();
|
|
await expect(page.locator('a[href="/auth/forgot-password"]')).toBeVisible();
|
|
});
|
|
|
|
test('should have proper Tailwind CSS classes applied', async ({ page }) => {
|
|
await page.goto('http://localhost:3001/auth/login');
|
|
|
|
// Test that the page uses Tailwind utility classes appropriately
|
|
const pageBody = await page.evaluate(() => {
|
|
const body = document.querySelector('body');
|
|
return body?.className || '';
|
|
});
|
|
|
|
// Check for essential Tailwind classes
|
|
expect(pageBody).toContain('min-h-screen');
|
|
expect(pageBody).toContain('bg-gray-50');
|
|
|
|
// Check form container classes
|
|
const formContainer = await page.evaluate(() => {
|
|
const container = document.querySelector('.max-w-md.w-full.space-y-8.bg-white.rounded-xl.shadow-lg.p-8');
|
|
return container?.className || '';
|
|
});
|
|
|
|
expect(formContainer).toContain('max-w-md');
|
|
expect(formContainer).toContain('bg-white');
|
|
expect(formContainer).toContain('rounded-xl');
|
|
expect(formContainer).toContain('shadow-lg');
|
|
expect(formContainer).toContain('p-8');
|
|
});
|
|
|
|
test('should have interactive elements working', async ({ page }) => {
|
|
await page.goto('http://localhost:3001/auth/login');
|
|
|
|
// Test password visibility toggle
|
|
const passwordField = page.locator('#password');
|
|
const toggleButton = page.locator('button:has-text("Toggle password visibility")');
|
|
|
|
// Check initial state
|
|
const initialType = await passwordField.getAttribute('type');
|
|
expect(initialType).toBe('password');
|
|
|
|
// If toggle exists, test it
|
|
if (await toggleButton.isVisible()) {
|
|
await toggleButton.click();
|
|
|
|
const toggledType = await passwordField.getAttribute('type');
|
|
expect(toggledType).toBe('text');
|
|
|
|
await toggleButton.click();
|
|
const finalType = await passwordField.getAttribute('type');
|
|
expect(finalType).toBe('password');
|
|
}
|
|
});
|
|
}); |