sepehr
d59ec592eb
- Fix Muuri integration: add data-draggable and improve DOM sync - Fix Drag Visuals: remove opacity/rotation/scale in NoteCard and CSS to prevent 'gray/crooked' look - Feat(layout): switch to padding-based spacing strategy (16px gap) - Fix(css): correct media queries to maintain consistent spacing
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
|
|
});
|
|
});
|