61 lines
2.5 KiB
TypeScript
61 lines
2.5 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Note Resizing', () => {
|
|
test('should increase note height when changing size to Large', async ({ page }) => {
|
|
// Go to home page
|
|
await page.goto('/');
|
|
|
|
// Create a new note to ensure we have a clean slate
|
|
const notesInput = page.locator('input[placeholder="Take a note..."]');
|
|
// If text is localized, try selector
|
|
const mainInput = page.locator('.note-input-container, [data-testid="note-input"]');
|
|
|
|
// Just click anywhere that looks like the input bar
|
|
// Or assume the placeholder might be localized.
|
|
// Best to find by visual structure if possible, but placeholder is common.
|
|
// Let's stick to the existing notes check.
|
|
|
|
// Wait for at least one note card
|
|
const firstNote = page.locator('.note-card').first();
|
|
await firstNote.waitFor({ state: 'visible', timeout: 5000 });
|
|
|
|
// Get initial height
|
|
const initialBox = await firstNote.boundingBox();
|
|
if (!initialBox) throw new Error('Note card has no bounding box');
|
|
console.log(`Initial height: ${initialBox.height}`);
|
|
|
|
// Hover to show actions
|
|
await firstNote.hover();
|
|
|
|
// Click "More options" button (3 vertical dots)
|
|
// Use selector ensuring it's the one inside THIS note
|
|
const moreBtn = firstNote.locator('button:has(svg.lucide-more-vertical)');
|
|
await moreBtn.waitFor({ state: 'visible' });
|
|
await moreBtn.click();
|
|
|
|
// Click "Large" option
|
|
// It's the 3rd item in the second group usually.
|
|
// Or we can look for the maximize icon
|
|
const largeOption = page.locator('div[role="menuitem"]:has(svg.lucide-maximize-2)').last();
|
|
// The sizes are Small, Medium, Large. All use Maximize2 icon in the current code?
|
|
// Let's check NoteActions code.
|
|
// Yes: <Maximize2 className="h-4 w-4 mr-2" /> for all sizes.
|
|
// And they are rendered in order: Small, Medium, Large.
|
|
// So "Large" is the LAST one.
|
|
|
|
await largeOption.waitFor({ state: 'visible' });
|
|
await largeOption.click();
|
|
|
|
// Wait for update
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Get new height
|
|
const newBox = await firstNote.boundingBox();
|
|
if (!newBox) throw new Error('Note card has no bounding box after resize');
|
|
console.log(`New height: ${newBox.height}`);
|
|
|
|
// Assert
|
|
expect(newBox.height).toBeGreaterThan(initialBox.height + 50);
|
|
});
|
|
});
|