aa6a214f37
- Rename directory keep-notes -> memento-note with all code references - Prisma: SQLite -> PostgreSQL (both app and MCP server schemas) - Sync MCP schema with main app (add missing fields, relations, indexes) - Delete 17 SQLite migrations (clean slate for PostgreSQL) - Remove SQLite dependencies (@libsql/client, better-sqlite3, etc.) - Fix MCP server: hardcoded Windows DB paths -> DATABASE_URL env var - Fix MCP server: .dockerignore excluded index-sse.js (SSE mode broken) - MCP Dockerfile: node:20 -> node:22 - Docker Compose: add postgres service, remove SQLite volume - Generate favicon.ico, icon-192.png, icon-512.png, apple-icon.png - Update layout.tsx icons and manifest.json for PNG icons - Update all .env files for PostgreSQL - Rewrite README.md with updated sections - Remove mcp-server/node_modules and prisma/client-generated from git tracking Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Masonry Grid Spacing', () => {
|
|
test('should have correct spacing between notes', async ({ page }) => {
|
|
// Go to home page
|
|
await page.goto('/');
|
|
|
|
// Create two notes to ensure we have content
|
|
await page.click('input[placeholder="Take a note..."]');
|
|
await page.fill('input[placeholder="Title"]', 'Note A');
|
|
await page.click('button:has-text("Add")');
|
|
await page.waitForTimeout(500);
|
|
|
|
await page.click('input[placeholder="Take a note..."]');
|
|
await page.fill('input[placeholder="Title"]', 'Note B');
|
|
await page.click('button:has-text("Add")');
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Get the first two masonry items
|
|
const items = page.locator('.masonry-item');
|
|
const count = await items.count();
|
|
expect(count).toBeGreaterThanOrEqual(2);
|
|
|
|
const item1 = items.nth(0);
|
|
const item2 = items.nth(1);
|
|
|
|
// Get bounding boxes
|
|
const box1 = await item1.boundingBox();
|
|
const box2 = await item2.boundingBox();
|
|
|
|
if (!box1 || !box2) throw new Error('Could not get bounding boxes');
|
|
|
|
console.log('Box 1:', box1);
|
|
console.log('Box 2:', box2);
|
|
|
|
// Calculate horizontal distance between centers or edges?
|
|
// Assuming they are side-by-side in a multi-column layout on desktop
|
|
|
|
// Check viewport size
|
|
const viewport = page.viewportSize();
|
|
console.log('Viewport:', viewport);
|
|
|
|
if (viewport && viewport.width >= 1024) {
|
|
// Should be at least 2 columns
|
|
// Distance between left edges
|
|
const distance = Math.abs(box2.x - box1.x);
|
|
console.log('Distance betweeen left edges:', distance);
|
|
|
|
// Item width
|
|
console.log('Item 1 width:', box1.width);
|
|
|
|
// The visual gap depends on padding if we are using the padding strategy
|
|
// We can check the computed padding using evaluate
|
|
const padding = await item1.evaluate((el) => {
|
|
const style = window.getComputedStyle(el);
|
|
return style.padding;
|
|
});
|
|
console.log('Computed Padding:', padding);
|
|
}
|
|
});
|
|
|
|
test('should adjust columns on resize', async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.waitForSelector('.masonry-item');
|
|
|
|
// Desktop
|
|
await page.setViewportSize({ width: 1280, height: 800 });
|
|
await page.waitForTimeout(1000);
|
|
let items = page.locator('.masonry-item');
|
|
let box1 = await items.nth(0).boundingBox();
|
|
console.log('1280px width - Item width:', box1?.width);
|
|
|
|
// Mobile
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
await page.waitForTimeout(1000); // Wait for resize observer
|
|
items = page.locator('.masonry-item');
|
|
box1 = await items.nth(0).boundingBox();
|
|
console.log('375px width - Item width:', box1?.width);
|
|
|
|
// Calculate expectation logic here if needed
|
|
});
|
|
});
|