f5692ea109
Add an `overflowTooltip` Svelte action that sets a native `title` only when an element is actually clipped (ellipsis or line-clamp), re-checking on resize. Native title is keyboard/touch reachable and zero-dep, unlike a hover-only popover. Applied to the clipped titles on MangaCard, BookmarkList, HistoryList, and the Continue-reading shelf. Unit tests cover the overflow decision and the set/clear/update behaviour; an e2e verifies a real-browser truncated card title gets the tooltip while a short one does not. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
import { test, expect, type Page } from './fixtures';
|
|
|
|
// The overflowTooltip action sets a native `title` on a manga card's title
|
|
// only when it's actually truncated. Verified in a real browser (jsdom can't
|
|
// lay out, so scrollWidth/clientWidth are meaningless there).
|
|
|
|
const LONG_TITLE =
|
|
'An Extraordinarily Long Manga Title That Cannot Possibly Fit Within Two Clamped Lines Of A Narrow Card';
|
|
const SHORT_TITLE = 'Bleach';
|
|
|
|
function manga(id: string, title: string) {
|
|
return {
|
|
id,
|
|
title,
|
|
status: 'ongoing',
|
|
alt_titles: [],
|
|
description: null,
|
|
cover_image_path: null,
|
|
created_at: '2026-01-01T00:00:00Z',
|
|
updated_at: '2026-01-01T00:00:00Z',
|
|
authors: [],
|
|
genres: []
|
|
};
|
|
}
|
|
|
|
async function mockHome(page: Page) {
|
|
await page.route('**/api/v1/auth/config', (r) =>
|
|
r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ self_register_enabled: true, private_mode: false }) })
|
|
);
|
|
await page.route('**/api/v1/auth/me', (r) =>
|
|
r.fulfill({ status: 401, contentType: 'application/json', body: JSON.stringify({ error: { code: 'unauthenticated', message: 'no' } }) })
|
|
);
|
|
await page.route('**/api/v1/auth/me/preferences', (r) =>
|
|
r.fulfill({ status: 401, contentType: 'application/json', body: '{}' })
|
|
);
|
|
await page.route('**/api/v1/genres*', (r) =>
|
|
r.fulfill({ status: 200, contentType: 'application/json', body: '[]' })
|
|
);
|
|
await page.route('**/api/v1/me/read-progress*', (r) =>
|
|
r.fulfill({ status: 401, contentType: 'application/json', body: JSON.stringify({ error: { code: 'unauthenticated', message: 'no' } }) })
|
|
);
|
|
await page.route('**/api/v1/mangas*', (r) =>
|
|
r.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({
|
|
items: [manga('m1', LONG_TITLE), manga('m2', SHORT_TITLE)],
|
|
page: { limit: 50, offset: 0, total: 2 }
|
|
})
|
|
})
|
|
);
|
|
}
|
|
|
|
test('adds a title tooltip to truncated card titles but not to ones that fit', async ({ page }) => {
|
|
await mockHome(page);
|
|
// Narrow (mobile) grid so the long title clamps and overflows.
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.goto('/');
|
|
|
|
const longLink = page.getByRole('link', { name: LONG_TITLE });
|
|
await expect(longLink).toBeVisible();
|
|
await expect(longLink).toHaveAttribute('title', LONG_TITLE);
|
|
|
|
const shortLink = page.getByRole('link', { name: SHORT_TITLE });
|
|
await expect(shortLink).not.toHaveAttribute('title');
|
|
});
|