peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test(e2e): golden-master Playwright net for the Platform refactor

Browse Source 
Locks the five flows the refactor must not break (feed, channel, player,
settings, nav) so later sprints can prove they changed nothing. Adds a thin
data-testid layer and a dedicated seeded non-demo account; the suite runs on
the baked :8080 stack (authoritative) or :5173. No product-behaviour change.
This commit is contained in:
peter
2026-07-18 00:35:57 +02:00
parent bc5f95f807
commit e7091158fd
25 changed files with 709 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ActiveFilterChips.tsx
+8 -1
View File
@@ -16,13 +16,19 @@ export default function ActiveFilterChips({
if (filters.length === 0) return null;
return (
<div className="flex flex-wrap items-center gap-1.5 pb-3" aria-label={t("feed.chips.label")}>
<div
data-testid="active-filter-chips"
className="flex flex-wrap items-center gap-1.5 pb-3"
aria-label={t("feed.chips.label")}
>
<span className="text-[11px] uppercase tracking-wider text-muted mr-0.5">
{t("feed.chips.label")}
</span>
{filters.map((f) => (
<button
key={f.key}
data-testid="active-filter-chip"
data-filter-key={f.key}
onClick={f.remove}
title={t("feed.chips.remove", { name: f.label })}
aria-label={t("feed.chips.remove", { name: f.label })}
@@ -34,6 +40,7 @@ export default function ActiveFilterChips({
))}
{filters.length > 1 && (
<button
data-testid="active-filter-clear-all"
onClick={onClearAll}
className="ml-0.5 text-xs text-muted hover:text-fg underline underline-offset-2 transition"
>
frontend/src/components/ChannelPage.tsx
+2 -1
View File
@@ -244,6 +244,7 @@ export default function ChannelPage({
/>
)}
<button
data-testid="channel-back"
onClick={onBack}
className="absolute top-5 left-7 sm:left-9 z-10 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-black/45 text-white hover:bg-black/65 backdrop-blur-sm"
>
@@ -263,7 +264,7 @@ export default function ChannelPage({
/>
<div className="flex-1 min-w-0 pb-1">
<div className="flex items-center gap-2 flex-wrap">
<h1 className="text-xl font-semibold truncate">{name}</h1>
<h1 data-testid="channel-title" className="text-xl font-semibold truncate">{name}</h1>
{ch?.blocked ? (
<span className="text-xs px-2 py-0.5 rounded-full bg-danger/15 text-danger">
{t("channel.blockedBadge")}
frontend/src/components/Feed.tsx
+2 -1
View File
@@ -538,6 +538,7 @@ export default function Feed({
{SHOW_IDS.map((id) => (
<button
key={id}
data-testid={`feed-show-${id}`}
onClick={() => setFilters({ ...filters, show: id })}
aria-pressed={filters.show === id}
className={`text-xs px-3 py-1.5 rounded-full border transition ${
@@ -595,7 +596,7 @@ export default function Feed({
</>
)}
<span className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
<span className="text-xs text-muted whitespace-nowrap">
<span data-testid="feed-result-count" className="text-xs text-muted whitespace-nowrap">
{countQuery.data
? t("feed.videoCount", {
count: countQuery.data.count,
frontend/src/components/NavSidebar.tsx
+2
View File
@@ -236,6 +236,7 @@ export default function NavSidebar({
return (
<button
key={p}
data-testid={`nav-${p}`}
onClick={() => setPage(p)}
title={slim ? label : undefined}
aria-current={active ? "page" : undefined}
@@ -350,6 +351,7 @@ export default function NavSidebar({
</button>
</div>
<button
data-testid="nav-settings"
onClick={() => setPage("settings")}
title={slim ? t("header.account.settings") : undefined}
aria-current={page === "settings" ? "page" : undefined}
frontend/src/components/PlayerModal.tsx
+2
View File
@@ -591,6 +591,7 @@ export default function PlayerModal({
return createPortal(
<div
ref={dialogRef}
data-testid="player-modal"
className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-sm"
onClick={onClose}
role="dialog"
@@ -801,6 +802,7 @@ export default function PlayerModal({
document.body
)}
<button
data-testid="player-close"
onClick={onClose}
title={t("player.closeEsc")}
className="shrink-0 inline-flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-lg text-muted hover:text-fg hover:bg-surface transition"
frontend/src/components/SettingsPanel.tsx
+1
View File
@@ -69,6 +69,7 @@ export default function SettingsPanel({
return (
<button
key={tabItem.id}
data-testid={`settings-tab-${tabItem.id}`}
onClick={() => setTab(tabItem.id)}
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left transition ${
active
frontend/src/components/Sidebar.tsx
+2
View File
@@ -37,6 +37,8 @@ function TagChip({
const { t } = useTranslation();
return (
<button
data-testid="filter-tag-chip"
data-tag={tag.name}
onClick={onClick}
title={t("sidebar.channelCount", { count })}
className={`inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full border shadow-sm hover:shadow active:translate-y-px transition ${
frontend/src/components/VideoCard.tsx
+5 -2
View File
@@ -448,6 +448,7 @@ function VideoCard({
const channelButton = (
<button
ref={channelRef}
data-testid="video-card-channel"
onClick={(e) => {
e.stopPropagation();
onOpenChannel?.(video.channel_id, video.channel_title ?? t("card.thisChannel"));
@@ -497,7 +498,7 @@ function VideoCard({
const pct = resumePct(video);
const fits = (needs: number) => width === 0 || width >= needs;
return (
<div className={clsx(rowShell, "flex items-center gap-3 px-3 py-2", watched && "opacity-55")}>
<div data-testid="video-card" data-video-id={video.id} className={clsx(rowShell, "flex items-center gap-3 px-3 py-2", watched && "opacity-55")}>
{/* Actions lead: this is where the eye already is (the title is the thing you read), so
they're the shortest pointer trip from it. */}
<div className="shrink-0 w-48">{actions}</div>
@@ -550,7 +551,7 @@ function VideoCard({
if (spec.family === "row") {
return (
<div className={clsx(rowShell, "flex gap-3 p-2", watched && "opacity-55")}>
<div data-testid="video-card" data-video-id={video.id} className={clsx(rowShell, "flex gap-3 p-2", watched && "opacity-55")}>
<Thumb
video={video}
className={clsx("aspect-video shrink-0", spec.actionsBelow ? "w-40" : "w-44")}
@@ -580,6 +581,8 @@ function VideoCard({
// by a pixel or two forever, which shows up as the whole page juddering.
return (
<div
data-testid="video-card"
data-video-id={video.id}
className={clsx(
"cv-card group glass-card glass-hover rounded-2xl transition-all duration-150 hover:-translate-y-1",
"flex flex-col",
frontend/src/components/ui/DraftSaveBar.tsx
+4 -2
View File
@@ -44,8 +44,8 @@ export function DraftSaveBar({
// mask) scopes this z-40 and fades the bar's bottom edge. The inline variant is in normal flow
// and stays put.
const bar = (
<div className={wrap}>
<span className="text-sm text-muted">
<div data-testid="draft-save-bar" className={wrap}>
<span data-testid="draft-save-status" data-state={state} className="text-sm text-muted">
{state === "saved" ? (
<span className="text-emerald-500 inline-flex items-center gap-1.5">
<Check className="w-4 h-4" />
@@ -59,6 +59,7 @@ export function DraftSaveBar({
</span>
<div className="flex items-center gap-2">
<button
data-testid="draft-discard"
onClick={onDiscard}
disabled={saving || !dirty}
className="glass-card glass-hover flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm disabled:opacity-40 transition"
@@ -67,6 +68,7 @@ export function DraftSaveBar({
{labels.discard}
</button>
<button
data-testid="draft-save"
onClick={onSave}
disabled={saving || !dirty}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-accent text-accent-fg font-medium shadow-md shadow-accent/20 disabled:opacity-40 transition"
frontend/src/lib/useActiveFilters.ts
+1 -1
View File
@@ -11,7 +11,7 @@ export interface ActiveFilter {
}
/** What the feed looks like with nothing applied — the baseline every "active" check reads against. */
export const DEFAULT_SIDEBAR_FILTERS: Omit<FeedFilters, "q" | "scope"> = {
const DEFAULT_SIDEBAR_FILTERS: Omit<FeedFilters, "q" | "scope"> = {
tags: [],
tagMode: "or",
channelIds: [],