270 lines
12 KiB
TypeScript
270 lines
12 KiB
TypeScript
import { describe, expect, it, vi } from "vitest";
|
|
import { createElement } from "react";
|
|
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { FeedView, RefreshButton, type FeedViewProps } from "@/components/FeedView";
|
|
import { fetchFeedPage, FeedLoadError } from "@/lib/feed-client";
|
|
import { commentsLabel, firstLoadFailure, formatDuration, mergePosts, relativeTime, toCardPost, toCardPosts, upgradeVideos } from "@/lib/feed-model";
|
|
|
|
const NOW = Date.parse("2026-10-19T12:00:00Z");
|
|
const post = (id: string, publishedAt: string, extra: Record<string, unknown> = {}) => ({
|
|
type: "post",
|
|
publishedAt,
|
|
likesCount: 3,
|
|
commentsCount: 2,
|
|
post: {
|
|
id,
|
|
content: `text ${id}\nsecond line`,
|
|
author: { id: "a", displayName: `Author ${id}`, profilePictureUrl: "https://img/a.jpg" },
|
|
mediaItems: [],
|
|
...extra,
|
|
},
|
|
});
|
|
|
|
function render(over: Partial<FeedViewProps>) {
|
|
const props: FeedViewProps = {
|
|
posts: [], status: "ready", loadingMore: false, loadMoreFailed: false,
|
|
newCount: 0, onRetry: () => {}, onShowNew: () => {}, now: NOW, ...over,
|
|
};
|
|
return renderToStaticMarkup(createElement(FeedView, props));
|
|
}
|
|
|
|
describe("feed model", () => {
|
|
it("skips non-post items and posts without a post object", () => {
|
|
const items = [
|
|
{ type: "trending-conversations", conversations: [] },
|
|
{ type: "post", publishedAt: "2026-10-19T11:00:00Z" },
|
|
post("1", "2026-10-19T11:00:00Z"),
|
|
];
|
|
expect(toCardPosts(items).map((p) => p.id)).toEqual(["1"]);
|
|
});
|
|
|
|
it("sorts strictly by publishedAt descending, interleaving own posts", () => {
|
|
// API returns own posts first; they must land in time order.
|
|
const items = [
|
|
post("own-old", "2026-10-19T08:00:00Z"),
|
|
post("own-new", "2026-10-19T11:30:00Z"),
|
|
post("other-mid", "2026-10-19T10:00:00Z"),
|
|
post("other-new", "2026-10-19T11:45:00Z"),
|
|
];
|
|
expect(mergePosts(toCardPosts(items)).map((p) => p.id)).toEqual([
|
|
"other-new", "own-new", "other-mid", "own-old",
|
|
]);
|
|
});
|
|
|
|
it("dedupes and re-sorts across pages", () => {
|
|
const a = toCardPosts([post("1", "2026-10-19T10:00:00Z")]);
|
|
const b = toCardPosts([post("1", "2026-10-19T10:00:00Z"), post("2", "2026-10-19T11:00:00Z")]);
|
|
expect(mergePosts(a, b).map((p) => p.id)).toEqual(["2", "1"]);
|
|
});
|
|
|
|
it("falls back to first+last name and picks the image url in order", () => {
|
|
const [p] = toCardPosts([
|
|
post("1", "2026-10-19T10:00:00Z", {
|
|
author: { firstName: "Ada", lastName: "Lovelace" },
|
|
mediaItems: [
|
|
{ order: 2, mediaType: "image", imageUrl: "https://i/2.jpg" },
|
|
{ order: 1, mediaType: "image", imageMediumUrl: "https://i/1m.jpg", imageUrl: "https://i/1.jpg" },
|
|
{ order: 3, mediaType: "image", imageMediumWebpUrl: "https://i/3.webp", imageUrl: "https://i/3.jpg" },
|
|
{ order: 4, mediaType: "video", thumbnailUrl: "https://i/v.jpg", hlsUrl: "https://stream.mux.com/x" },
|
|
],
|
|
}),
|
|
]);
|
|
expect(p.authorName).toBe("Ada Lovelace");
|
|
expect(p.media.map((m) => m.src)).toEqual([
|
|
"https://i/1m.jpg", "https://i/2.jpg", "https://i/3.webp", "https://i/v.jpg",
|
|
]);
|
|
});
|
|
|
|
it("formats relative time", () => {
|
|
expect(relativeTime("2026-10-19T11:55:00Z", NOW)).toBe("5m ago");
|
|
expect(relativeTime("2026-10-19T09:00:00Z", NOW)).toBe("3h ago");
|
|
});
|
|
});
|
|
|
|
describe("FeedView", () => {
|
|
it("renders cards with full multi-line text, counts and avatar", () => {
|
|
const long = "x".repeat(2000);
|
|
const posts = toCardPosts([
|
|
post("1", "2026-10-19T11:00:00Z", { content: `line one\nline two ${long}` }),
|
|
post("2", "2026-10-19T10:00:00Z", { author: { displayName: "No Pic" } }),
|
|
]);
|
|
const html = render({ posts });
|
|
expect((html.match(/data-testid="post-card"/g) ?? []).length).toBe(2);
|
|
expect(html).toContain("line one\nline two " + long);
|
|
expect(html).toContain('src="https://img/a.jpg"');
|
|
expect(html).toContain("NP"); // initials tile
|
|
expect(html).toContain("1h ago");
|
|
expect(html).toContain("3 likes");
|
|
expect(html).toContain("2 comments");
|
|
});
|
|
|
|
it("does not render a non-post item", () => {
|
|
const posts = toCardPosts([{ type: "trending-conversations" }, post("1", "2026-10-19T11:00:00Z")]);
|
|
const html = render({ posts });
|
|
expect((html.match(/data-testid="post-card"/g) ?? []).length).toBe(1);
|
|
expect(html).not.toContain("trending");
|
|
});
|
|
|
|
it("empty state", () => {
|
|
expect(render({ posts: [] })).toContain("No posts yet.");
|
|
});
|
|
|
|
it("error state with retry", () => {
|
|
const html = render({ status: "error" });
|
|
expect(html).toContain("The feed did not load.");
|
|
expect(html).toContain("Try again");
|
|
});
|
|
|
|
it("skeleton card while loading more and the new-posts pill", () => {
|
|
const html = render({ posts: toCardPosts([post("1", "2026-10-19T11:00:00Z")]), loadingMore: true, newCount: 2 });
|
|
expect(html).toContain('data-testid="feed-skeleton"');
|
|
expect(html).not.toContain('class="spinner"');
|
|
expect(html).toContain("btn-grow");
|
|
expect(html).toContain("2 new posts");
|
|
expect(html).not.toContain("Load more");
|
|
});
|
|
});
|
|
|
|
describe("fetchFeedPage", () => {
|
|
it("returns items + nextCursor and sends the cursor", async () => {
|
|
const f = vi.fn(async () => new Response(JSON.stringify({ items: [1], nextCursor: "C" }), { status: 200 }));
|
|
const page = await fetchFeedPage("X", f as unknown as typeof fetch);
|
|
expect(page).toEqual({ items: [1], nextCursor: "C" });
|
|
expect(String((f.mock.calls[0] as unknown[])[0])).toContain("cursor=X");
|
|
});
|
|
it("401 -> signedOut, 500 -> not", async () => {
|
|
const mk = (s: number) => (async () => new Response("{}", { status: s })) as unknown as typeof fetch;
|
|
await expect(fetchFeedPage(null, mk(401))).rejects.toMatchObject({ signedOut: true });
|
|
await expect(fetchFeedPage(null, mk(500))).rejects.toBeInstanceOf(FeedLoadError);
|
|
await expect(fetchFeedPage(null, mk(500))).rejects.toMatchObject({ signedOut: false });
|
|
});
|
|
});
|
|
|
|
describe("video transcoding", () => {
|
|
const vid = (hls: unknown) =>
|
|
toCardPosts([post("7", "2026-10-19T10:00:00Z", { mediaItems: [{ mediaType: "video", thumbnailUrl: "https://i/t.jpg", hlsUrl: hls }] })]);
|
|
|
|
it("keeps a just-published video as a thumbnail with no hlsUrl", () => {
|
|
const [p] = vid(null);
|
|
expect(p.media).toEqual([{ kind: "video", src: "https://i/t.jpg", hlsUrl: null, mp4Url: null }]);
|
|
});
|
|
|
|
it("keeps a video with neither thumbnail nor hlsUrl as a pending card", () => {
|
|
const [p] = toCardPosts([post("8", "2026-10-19T10:00:00Z", { mediaItems: [{ mediaType: "video" }] })]);
|
|
expect(p.media).toHaveLength(1);
|
|
expect(p.media[0].src).toBeNull();
|
|
});
|
|
|
|
it("upgrades the shown thumbnail to the player when hlsUrl appears", () => {
|
|
const shown = vid(null);
|
|
const next = upgradeVideos(shown, vid("https://stream.mux.com/abc"));
|
|
expect(next[0].media[0].hlsUrl).toContain("stream.mux.com");
|
|
expect(upgradeVideos(next, vid("https://stream.mux.com/abc"))).toBe(next);
|
|
expect(upgradeVideos(shown, vid(null))).toBe(shown);
|
|
});
|
|
|
|
it("captures mp4Url on the feed CDN and rejects other hosts", () => {
|
|
const mk = (u: unknown) =>
|
|
toCardPosts([post("9", "2026-10-19T10:00:00Z", { mediaItems: [{ mediaType: "video", thumbnailUrl: "https://i/t.jpg", mp4Url: u }] })])[0].media[0];
|
|
expect(mk("https://cdn.feed.sharedservices.vt.com/v.mp4").mp4Url).toBe("https://cdn.feed.sharedservices.vt.com/v.mp4");
|
|
expect(mk("https://evil.example/v.mp4").mp4Url).toBeNull();
|
|
expect(mk("http://cdn.feed.sharedservices.vt.com/v.mp4").mp4Url).toBeNull();
|
|
});
|
|
|
|
it("upgrades the thumbnail in place when only mp4Url appears", () => {
|
|
const withMp4 = toCardPosts([post("7", "2026-10-19T10:00:00Z", { mediaItems: [{ mediaType: "video", thumbnailUrl: "https://i/t.jpg", mp4Url: "https://cdn.feed.sharedservices.vt.com/v.mp4" }] })]);
|
|
const shown = vid(null);
|
|
const next = upgradeVideos(shown, withMp4);
|
|
expect(next[0].media[0].mp4Url).toContain("cdn.feed");
|
|
expect(upgradeVideos(next, vid(null))).toBe(next);
|
|
});
|
|
|
|
it("renders the thumbnail while transcoding and the player once hlsUrl is present", () => {
|
|
const html = render({ posts: vid(null) });
|
|
expect(html).toContain("https://i/t.jpg");
|
|
expect(html).not.toContain("<video");
|
|
const live = render({ posts: vid("https://stream.mux.com/abc") });
|
|
expect(live).toContain("<video");
|
|
});
|
|
});
|
|
|
|
describe("video duration", () => {
|
|
it("reads videoDuration (seconds) first and formats it as m:ss", () => {
|
|
const [m] = toCardPost({ type: "post", post: { id: "v", author: {}, mediaItems: [{ mediaType: "video", videoDuration: 154, duration: 9 }] } })!.media;
|
|
expect(m.durationSeconds).toBe(154);
|
|
expect(formatDuration(154)).toBe("2:34");
|
|
expect(formatDuration(5)).toBe("0:05");
|
|
expect(formatDuration(3725)).toBe("1:02:05");
|
|
expect(formatDuration(0)).toBeNull();
|
|
expect(formatDuration(undefined)).toBeNull();
|
|
});
|
|
it("falls back to durationSeconds, then duration, else none", () => {
|
|
const dur = (item: object) => toCardPost({ type: "post", post: { id: "v", author: {}, mediaItems: [{ mediaType: "video", ...item }] } })!.media[0].durationSeconds;
|
|
expect(dur({ durationSeconds: 30 })).toBe(30);
|
|
expect(dur({ duration: 12 })).toBe(12);
|
|
expect(dur({})).toBeUndefined();
|
|
});
|
|
});
|
|
|
|
describe("refresh button", () => {
|
|
it("is in the Home feed header with its accessible name", () => {
|
|
const html = render({ onRefresh: () => {} });
|
|
expect(html).toContain('aria-label="Refresh feed"');
|
|
expect(html.indexOf("Home feed")).toBeLessThan(html.indexOf("Refresh feed"));
|
|
});
|
|
|
|
it("is absent without a handler", () => {
|
|
expect(render({})).not.toContain("Refresh feed");
|
|
});
|
|
|
|
it("triggers a reload when clicked", () => {
|
|
const onRefresh = vi.fn();
|
|
const el = RefreshButton({ onRefresh }) as { props: { onClick: () => void } };
|
|
el.props.onClick();
|
|
expect(onRefresh).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("is disabled and spinning while a reload runs", () => {
|
|
const html = render({ onRefresh: () => {}, refreshing: true });
|
|
expect(html).toMatch(/<button[^>]*disabled[^>]*aria-label="Refresh feed"|<button[^>]*aria-label="Refresh feed"[^>]*disabled/);
|
|
expect(html).toContain("refresh-icon-spin");
|
|
});
|
|
});
|
|
|
|
describe("comments label", () => {
|
|
it("is singular for 1 and plural otherwise", () => {
|
|
expect(commentsLabel(1)).toBe("1 comment");
|
|
expect(commentsLabel(0)).toBe("0 comments");
|
|
expect(commentsLabel(2)).toBe("2 comments");
|
|
});
|
|
|
|
it("renders singular on a one-comment post", () => {
|
|
const posts = toCardPosts([{ ...post("1", "2026-10-19T11:00:00Z"), commentsCount: 1 }]);
|
|
const html = render({ posts });
|
|
expect(html).toContain("1 comment<");
|
|
expect(html).not.toContain("1 comments");
|
|
});
|
|
});
|
|
|
|
describe("failed refresh versus failed first load", () => {
|
|
it("a failed refresh keeps the posts and shows an inline error with a usable button", () => {
|
|
const posts = toCardPosts([post("1", "2026-10-19T11:00:00Z")]);
|
|
const html = render({ posts, onRefresh: () => {}, refreshFailed: true });
|
|
expect(html).toContain("Could not refresh. Try again.");
|
|
expect(html).toContain("text 1");
|
|
expect(html).not.toContain("The feed did not load.");
|
|
expect(html).not.toMatch(/<button[^>]*disabled[^>]*aria-label="Refresh feed"|<button[^>]*aria-label="Refresh feed"[^>]*disabled/);
|
|
});
|
|
|
|
it("a failed first load shows the full error state", () => {
|
|
const html = render({ status: "error", onRefresh: () => {} });
|
|
expect(html).toContain("The feed did not load.");
|
|
expect(html).not.toContain("Could not refresh");
|
|
});
|
|
|
|
it("the loader maps a failure to the right outcome", () => {
|
|
expect(firstLoadFailure(true)).toEqual({ fullError: false, refreshFailed: true });
|
|
expect(firstLoadFailure(false)).toEqual({ fullError: true, refreshFailed: false });
|
|
});
|
|
});
|