83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
import { describe, expect, test, vi } from "vitest";
|
|
import { screen } from "@testing-library/react";
|
|
import { userEvent } from "@testing-library/user-event";
|
|
import { PlaylistCard } from "../../../components/playlist/PlaylistCard.tsx";
|
|
import { makePlaylist } from "../../fixtures.ts";
|
|
import { currentPath, renderWithContexts } from "../../render.tsx";
|
|
import { markPlaylistVisited } from "../../../utils/shared/visited.ts";
|
|
|
|
describe("PlaylistCard", () => {
|
|
test("title, badge, owner, count; clicking opens it and marks it seen", async () => {
|
|
const user = userEvent.setup();
|
|
const p = makePlaylist({
|
|
id: "p1",
|
|
slug: "mix",
|
|
title: "Mix",
|
|
ownerUsername: "ann",
|
|
dumpCount: 1,
|
|
isPublic: false,
|
|
description: "Tunes",
|
|
});
|
|
const { container } = renderWithContexts(
|
|
<ul>
|
|
<PlaylistCard playlist={p} />
|
|
</ul>,
|
|
);
|
|
expect(screen.getByRole("link", { name: /Mix/ })).toHaveAttribute(
|
|
"href",
|
|
"/playlists/mix",
|
|
);
|
|
expect(screen.getByText("private")).toBeInTheDocument();
|
|
expect(screen.getByRole("link", { name: "@ann" })).toHaveAttribute(
|
|
"href",
|
|
"/users/ann",
|
|
);
|
|
expect(screen.getByText("1 dump")).toBeInTheDocument();
|
|
expect(screen.getByText("Tunes")).toBeInTheDocument();
|
|
await user.click(container.querySelector(".playlist-card-inner")!);
|
|
expect(currentPath()).toBe("/playlists/mix");
|
|
});
|
|
|
|
test("the owner doesn't see their own name, or an unread dot", () => {
|
|
const p = makePlaylist({ ownerUsername: "me", createdAt: new Date() });
|
|
const { container } = renderWithContexts(
|
|
<ul>
|
|
<PlaylistCard playlist={p} isOwner />
|
|
</ul>,
|
|
);
|
|
expect(screen.queryByText("@me")).not.toBeInTheDocument();
|
|
expect(container.querySelector(".unread-dot")).toBeNull();
|
|
});
|
|
|
|
test("a new playlist has a dot until visited", () => {
|
|
const p = makePlaylist({ id: "fresh", createdAt: new Date() });
|
|
const first = renderWithContexts(
|
|
<ul>
|
|
<PlaylistCard playlist={p} />
|
|
</ul>,
|
|
);
|
|
expect(first.container.querySelector(".unread-dot")).not.toBeNull();
|
|
first.unmount();
|
|
markPlaylistVisited("fresh");
|
|
const again = renderWithContexts(
|
|
<ul>
|
|
<PlaylistCard playlist={p} />
|
|
</ul>,
|
|
);
|
|
expect(again.container.querySelector(".unread-dot")).toBeNull();
|
|
});
|
|
|
|
test("delete doesn't open the playlist", async () => {
|
|
const onDelete = vi.fn();
|
|
const user = userEvent.setup();
|
|
renderWithContexts(
|
|
<ul>
|
|
<PlaylistCard playlist={makePlaylist()} onDelete={onDelete} />
|
|
</ul>,
|
|
);
|
|
await user.click(screen.getByRole("button", { name: "Delete playlist" }));
|
|
expect(onDelete).toHaveBeenCalled();
|
|
expect(currentPath()).toBe("/");
|
|
});
|
|
});
|