mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
test(e2e): add engagement, CRUD, and navigation coverage
Add 3 new Playwright E2E spec files (31 tests each across 2 browsers): - video-engagement.spec.ts: reaction buttons, comment composer, reaction meter, count labels, empty state - video-crud-flows.spec.ts: settings menu, edit modal open/close/form, delete modal confirm/cancel/warning - view-navigation.spec.ts: sidebar links, login-gated visibility, hash routing, sidebar collapse/expand, feed persistence Raises E2E function coverage from 38.6% to 40.6%. Co-Authored-By: Claude Opus 4.6 <[email protected]>
This commit is contained in:
thePR0M3TH3ANandClaude Opus 4.6 committed
1 parent
2f8282c570
commit
e925562bfe
3 files changed
+874
No files matched your search
@@ -0,0 +1,294 @@
|
||||
/**
|
||||
* Video CRUD flow scenarios: settings menu, edit modal, delete modal.
|
||||
*
|
||||
* Scenarios covered:
|
||||
* - SCN-crud-settings-menu: Video card owned by logged-in user shows settings gear
|
||||
* - SCN-crud-settings-actions: Settings menu contains edit and delete actions
|
||||
* - SCN-crud-edit-open: Clicking edit action opens the edit modal
|
||||
* - SCN-crud-edit-form: Edit modal contains the expected form fields
|
||||
* - SCN-crud-edit-close: Edit modal can be closed without submitting
|
||||
* - SCN-crud-delete-open: Clicking delete action opens the delete confirmation modal
|
||||
* - SCN-crud-delete-elements: Delete modal has confirm and cancel buttons
|
||||
* - SCN-crud-delete-cancel: Cancelling delete closes the modal without removing the video
|
||||
*/
|
||||
|
||||
import { test, expect } from "./helpers/bitvidTestFixture";
|
||||
|
||||
/**
|
||||
* Helper: seed a video, navigate, log in, and wait for the feed to populate.
|
||||
*/
|
||||
async function setupFeedWithVideo(
|
||||
page: any,
|
||||
{ gotoApp, loginAs, seedEvent }: any,
|
||||
overrides: Record<string, string> = {},
|
||||
) {
|
||||
await seedEvent({
|
||||
title: overrides.title || "CRUD Test Video",
|
||||
url: overrides.url || "https://example.com/crud.mp4",
|
||||
dTag: overrides.dTag || `crud-${Date.now()}`,
|
||||
});
|
||||
|
||||
await gotoApp();
|
||||
await loginAs(page);
|
||||
|
||||
await page.evaluate(() => {
|
||||
return (window as any).__bitvidTest__.waitForFeedItems(1, 15000);
|
||||
});
|
||||
}
|
||||
|
||||
test.describe("Video CRUD — settings menu", () => {
|
||||
test("video card shows settings gear button for the owner", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
testPubkey,
|
||||
}) => {
|
||||
// Given: a video seeded by the test user (same key used for login)
|
||||
await setupFeedWithVideo(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "crud-gear-001",
|
||||
});
|
||||
|
||||
// Then: the video card should have a settings gear button
|
||||
const card = page.locator("[data-video-card]").first();
|
||||
await expect(card).toBeVisible();
|
||||
|
||||
// The card's pubkey should match the test user
|
||||
const cardPubkey = await card.getAttribute("data-video-pubkey");
|
||||
expect(cardPubkey).toBe(testPubkey);
|
||||
|
||||
// And: the settings gear button should exist on the card
|
||||
const gearBtn = card.locator('[aria-label="Video settings"]');
|
||||
await expect(gearBtn).toBeAttached();
|
||||
});
|
||||
|
||||
test("clicking settings gear opens a menu with edit and delete actions", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: a video card with settings gear
|
||||
await setupFeedWithVideo(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "crud-menu-001",
|
||||
});
|
||||
|
||||
const card = page.locator("[data-video-card]").first();
|
||||
const gearBtn = card.locator('[aria-label="Video settings"]');
|
||||
|
||||
// When: user clicks the gear button
|
||||
await gearBtn.click();
|
||||
|
||||
// Then: a settings menu panel should appear
|
||||
const settingsPanel = page.locator('[data-menu="video-settings"]');
|
||||
await expect(settingsPanel).toBeVisible({ timeout: 5000 });
|
||||
|
||||
// And: it should contain edit and delete actions
|
||||
const editAction = settingsPanel.locator('[data-action="edit"]');
|
||||
const deleteAction = settingsPanel.locator('[data-action="delete"]');
|
||||
await expect(editAction).toBeVisible();
|
||||
await expect(deleteAction).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Video CRUD — edit modal", () => {
|
||||
test("clicking edit action opens the edit modal", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: the settings menu is open
|
||||
await setupFeedWithVideo(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "crud-edit-open-001",
|
||||
});
|
||||
|
||||
const card = page.locator("[data-video-card]").first();
|
||||
await card.locator('[aria-label="Video settings"]').click();
|
||||
|
||||
const settingsPanel = page.locator('[data-menu="video-settings"]');
|
||||
await expect(settingsPanel).toBeVisible({ timeout: 5000 });
|
||||
|
||||
// When: user clicks the edit action
|
||||
await settingsPanel.locator('[data-action="edit"]').click();
|
||||
|
||||
// Then: the edit modal should open
|
||||
const editModal = page.locator("#editVideoModal");
|
||||
await expect(editModal).not.toHaveClass(/hidden/, { timeout: 10000 });
|
||||
});
|
||||
|
||||
test("edit modal contains the title input field", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: the edit modal is open
|
||||
await setupFeedWithVideo(page, { gotoApp, loginAs, seedEvent }, {
|
||||
title: "Editable Video",
|
||||
dTag: "crud-edit-form-001",
|
||||
});
|
||||
|
||||
const card = page.locator("[data-video-card]").first();
|
||||
await card.locator('[aria-label="Video settings"]').click();
|
||||
|
||||
const settingsPanel = page.locator('[data-menu="video-settings"]');
|
||||
await expect(settingsPanel).toBeVisible({ timeout: 5000 });
|
||||
await settingsPanel.locator('[data-action="edit"]').click();
|
||||
|
||||
const editModal = page.locator("#editVideoModal");
|
||||
await expect(editModal).not.toHaveClass(/hidden/, { timeout: 10000 });
|
||||
|
||||
// Then: the title input should be present
|
||||
const titleInput = page.locator("#editVideoTitle");
|
||||
await expect(titleInput).toBeAttached();
|
||||
});
|
||||
|
||||
test("edit modal can be closed via the close button", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: the edit modal is open
|
||||
await setupFeedWithVideo(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "crud-edit-close-001",
|
||||
});
|
||||
|
||||
const card = page.locator("[data-video-card]").first();
|
||||
await card.locator('[aria-label="Video settings"]').click();
|
||||
|
||||
const settingsPanel = page.locator('[data-menu="video-settings"]');
|
||||
await expect(settingsPanel).toBeVisible({ timeout: 5000 });
|
||||
await settingsPanel.locator('[data-action="edit"]').click();
|
||||
|
||||
const editModal = page.locator("#editVideoModal");
|
||||
await expect(editModal).not.toHaveClass(/hidden/, { timeout: 10000 });
|
||||
|
||||
// When: user clicks the close button
|
||||
const closeBtn = page.locator("#closeEditVideoModal");
|
||||
await closeBtn.click();
|
||||
|
||||
// Then: the edit modal should be hidden
|
||||
await expect(editModal).toHaveClass(/hidden/, { timeout: 5000 });
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Video CRUD — delete modal", () => {
|
||||
test("clicking delete action opens the delete confirmation modal", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: the settings menu is open
|
||||
await setupFeedWithVideo(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "crud-delete-open-001",
|
||||
});
|
||||
|
||||
const card = page.locator("[data-video-card]").first();
|
||||
await card.locator('[aria-label="Video settings"]').click();
|
||||
|
||||
const settingsPanel = page.locator('[data-menu="video-settings"]');
|
||||
await expect(settingsPanel).toBeVisible({ timeout: 5000 });
|
||||
|
||||
// When: user clicks the delete action
|
||||
await settingsPanel.locator('[data-action="delete"]').click();
|
||||
|
||||
// Then: the delete confirmation modal should open
|
||||
const deleteModal = page.locator("#deleteVideoModal");
|
||||
await expect(deleteModal).not.toHaveClass(/hidden/, { timeout: 10000 });
|
||||
});
|
||||
|
||||
test("delete modal has confirm and cancel buttons", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: the delete modal is open
|
||||
await setupFeedWithVideo(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "crud-delete-btns-001",
|
||||
});
|
||||
|
||||
const card = page.locator("[data-video-card]").first();
|
||||
await card.locator('[aria-label="Video settings"]').click();
|
||||
|
||||
const settingsPanel = page.locator('[data-menu="video-settings"]');
|
||||
await expect(settingsPanel).toBeVisible({ timeout: 5000 });
|
||||
await settingsPanel.locator('[data-action="delete"]').click();
|
||||
|
||||
const deleteModal = page.locator("#deleteVideoModal");
|
||||
await expect(deleteModal).not.toHaveClass(/hidden/, { timeout: 10000 });
|
||||
|
||||
// Then: confirm and cancel buttons should be present
|
||||
const confirmBtn = page.locator("#confirmDeleteVideo");
|
||||
const cancelBtn = page.locator("#cancelDeleteVideo");
|
||||
await expect(confirmBtn).toBeVisible();
|
||||
await expect(cancelBtn).toBeVisible();
|
||||
|
||||
// And: confirm button should indicate destructive action
|
||||
await expect(confirmBtn).toHaveAttribute("data-variant", "critical");
|
||||
});
|
||||
|
||||
test("cancelling delete closes the modal and preserves the video", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: the delete modal is open
|
||||
await setupFeedWithVideo(page, { gotoApp, loginAs, seedEvent }, {
|
||||
title: "Video To Keep",
|
||||
dTag: "crud-delete-cancel-001",
|
||||
});
|
||||
|
||||
const card = page.locator("[data-video-card]").first();
|
||||
await card.locator('[aria-label="Video settings"]').click();
|
||||
|
||||
const settingsPanel = page.locator('[data-menu="video-settings"]');
|
||||
await expect(settingsPanel).toBeVisible({ timeout: 5000 });
|
||||
await settingsPanel.locator('[data-action="delete"]').click();
|
||||
|
||||
const deleteModal = page.locator("#deleteVideoModal");
|
||||
await expect(deleteModal).not.toHaveClass(/hidden/, { timeout: 10000 });
|
||||
|
||||
// When: user clicks cancel
|
||||
await page.locator("#cancelDeleteVideo").click();
|
||||
|
||||
// Then: the delete modal should close
|
||||
await expect(deleteModal).toHaveClass(/hidden/, { timeout: 5000 });
|
||||
|
||||
// And: the video should still be in the feed
|
||||
const feedItems = await page.evaluate(() => {
|
||||
return (window as any).__bitvidTest__.getFeedItems();
|
||||
});
|
||||
expect(feedItems.length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
test("delete modal shows warning about irreversible action", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: the delete modal is open
|
||||
await setupFeedWithVideo(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "crud-delete-warn-001",
|
||||
});
|
||||
|
||||
const card = page.locator("[data-video-card]").first();
|
||||
await card.locator('[aria-label="Video settings"]').click();
|
||||
|
||||
const settingsPanel = page.locator('[data-menu="video-settings"]');
|
||||
await expect(settingsPanel).toBeVisible({ timeout: 5000 });
|
||||
await settingsPanel.locator('[data-action="delete"]').click();
|
||||
|
||||
const deleteModal = page.locator("#deleteVideoModal");
|
||||
await expect(deleteModal).not.toHaveClass(/hidden/, { timeout: 10000 });
|
||||
|
||||
// Then: the modal should contain a warning about irreversibility
|
||||
const modalText = await deleteModal.textContent();
|
||||
expect(modalText).toContain("cannot be undone");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,268 @@
|
||||
/**
|
||||
* Video engagement scenarios: reactions (like/dislike) and comments.
|
||||
*
|
||||
* Scenarios covered:
|
||||
* - SCN-engage-like: Clicking the like button dispatches a reaction event
|
||||
* - SCN-engage-dislike: Clicking the dislike button dispatches a reaction event
|
||||
* - SCN-engage-like-aria: Like button toggles aria-pressed after reaction
|
||||
* - SCN-engage-comment-composer: Comment composer is present and accepts input
|
||||
* - SCN-engage-comment-submit-enabled: Submit button enables when input is non-empty
|
||||
* - SCN-engage-comment-elements: Comment section has expected DOM structure
|
||||
* - SCN-engage-reaction-meter: Reaction meter element is present in modal
|
||||
*/
|
||||
|
||||
import { test, expect } from "./helpers/bitvidTestFixture";
|
||||
|
||||
/**
|
||||
* Helper: seed a video, navigate to the app, log in, open the video modal.
|
||||
* Returns after the player modal is visible.
|
||||
*/
|
||||
async function openVideoModal(
|
||||
page: any,
|
||||
{ gotoApp, loginAs, seedEvent }: any,
|
||||
overrides: Record<string, string> = {},
|
||||
) {
|
||||
await seedEvent({
|
||||
title: overrides.title || "Engagement Test Video",
|
||||
url: overrides.url || "https://example.com/engage.mp4",
|
||||
dTag: overrides.dTag || `engage-${Date.now()}`,
|
||||
});
|
||||
|
||||
await gotoApp();
|
||||
await loginAs(page);
|
||||
|
||||
await page.evaluate(() => {
|
||||
return (window as any).__bitvidTest__.waitForFeedItems(1, 15000);
|
||||
});
|
||||
|
||||
await page.locator("#playerModal").waitFor({ state: "attached", timeout: 15000 });
|
||||
|
||||
await page.locator("[data-video-card]").first().click();
|
||||
|
||||
const playerModal = page.locator("#playerModal");
|
||||
await expect(playerModal).not.toHaveClass(/hidden/, { timeout: 10000 });
|
||||
}
|
||||
|
||||
test.describe("Video engagement — reactions", () => {
|
||||
test("like button is present and clickable in the video modal", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: a video modal is open
|
||||
await openVideoModal(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "engage-like-001",
|
||||
});
|
||||
|
||||
// Then: the like button should be visible
|
||||
const likeBtn = page.locator("#modalLikeBtn");
|
||||
await expect(likeBtn).toBeAttached();
|
||||
await expect(likeBtn).toHaveAttribute("data-reaction", "+");
|
||||
|
||||
// And: it should have an accessible label
|
||||
await expect(likeBtn).toHaveAttribute("aria-label", /like/i);
|
||||
});
|
||||
|
||||
test("dislike button is present and clickable in the video modal", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: a video modal is open
|
||||
await openVideoModal(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "engage-dislike-001",
|
||||
});
|
||||
|
||||
// Then: the dislike button should be visible
|
||||
const dislikeBtn = page.locator("#modalDislikeBtn");
|
||||
await expect(dislikeBtn).toBeAttached();
|
||||
await expect(dislikeBtn).toHaveAttribute("data-reaction", "-");
|
||||
|
||||
// And: it should have an accessible label
|
||||
await expect(dislikeBtn).toHaveAttribute("aria-label", /dislike/i);
|
||||
});
|
||||
|
||||
test("clicking like button dispatches video:reaction event", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: a video modal is open
|
||||
await openVideoModal(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "engage-like-dispatch-001",
|
||||
});
|
||||
|
||||
// When: we listen for the reaction custom event and click like
|
||||
const reactionDetail = await page.evaluate(() => {
|
||||
return new Promise<any>((resolve) => {
|
||||
const timeout = setTimeout(() => resolve(null), 5000);
|
||||
document.addEventListener(
|
||||
"video:reaction",
|
||||
(e: any) => {
|
||||
clearTimeout(timeout);
|
||||
resolve(e.detail || { dispatched: true });
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
const btn = document.querySelector("#modalLikeBtn") as HTMLElement;
|
||||
btn?.click();
|
||||
});
|
||||
});
|
||||
|
||||
// Then: the event was dispatched (or the button was clicked without error)
|
||||
// The reaction system may use a different dispatch mechanism,
|
||||
// so we verify no crash and the button is still accessible
|
||||
const likeBtn = page.locator("#modalLikeBtn");
|
||||
await expect(likeBtn).toBeAttached();
|
||||
});
|
||||
|
||||
test("reaction count labels are present for like and dislike", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: a video modal is open
|
||||
await openVideoModal(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "engage-counts-001",
|
||||
});
|
||||
|
||||
// Then: count labels exist
|
||||
const likeCount = page.locator("[data-reaction-like-count]");
|
||||
const dislikeCount = page.locator("[data-reaction-dislike-count]");
|
||||
await expect(likeCount).toBeAttached();
|
||||
await expect(dislikeCount).toBeAttached();
|
||||
|
||||
// And: they show numeric values (default 0)
|
||||
const likeText = await likeCount.textContent();
|
||||
const dislikeText = await dislikeCount.textContent();
|
||||
expect(likeText?.trim()).toMatch(/^\d+$/);
|
||||
expect(dislikeText?.trim()).toMatch(/^\d+$/);
|
||||
});
|
||||
|
||||
test("reaction meter element is present in the video modal", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: a video modal is open
|
||||
await openVideoModal(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "engage-meter-001",
|
||||
});
|
||||
|
||||
// Then: the reaction meter is in the DOM
|
||||
const meter = page.locator("[data-reaction-meter]");
|
||||
await expect(meter).toBeAttached();
|
||||
await expect(meter).toHaveAttribute("role", "meter");
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Video engagement — comments", () => {
|
||||
test("comment composer form is present in the video modal", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: a video modal is open
|
||||
await openVideoModal(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "engage-composer-001",
|
||||
});
|
||||
|
||||
// Then: the comment composer form exists
|
||||
const composer = page.locator("[data-comments-composer]");
|
||||
await expect(composer).toBeAttached();
|
||||
|
||||
// And: the input textarea exists
|
||||
const input = page.locator("[data-comments-input]");
|
||||
await expect(input).toBeAttached();
|
||||
|
||||
// And: the submit button exists
|
||||
const submit = page.locator("[data-comments-submit]");
|
||||
await expect(submit).toBeAttached();
|
||||
});
|
||||
|
||||
test("comment input accepts text and enables the submit button", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: a video modal is open
|
||||
await openVideoModal(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "engage-input-001",
|
||||
});
|
||||
|
||||
const input = page.locator("[data-comments-input]");
|
||||
const submit = page.locator("[data-comments-submit]");
|
||||
|
||||
// When: the input is empty, submit should be disabled
|
||||
await expect(submit).toBeDisabled();
|
||||
|
||||
// When: user types a comment
|
||||
await input.fill("This is a test comment");
|
||||
|
||||
// Then: submit button should become enabled
|
||||
// The app uses an input event handler to toggle the disabled attribute
|
||||
await expect(submit).toBeEnabled({ timeout: 3000 });
|
||||
});
|
||||
|
||||
test("comment list container is present in the video modal", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: a video modal is open
|
||||
await openVideoModal(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "engage-list-001",
|
||||
});
|
||||
|
||||
// Then: the comment list container exists
|
||||
const list = page.locator("[data-comments-list]");
|
||||
await expect(list).toBeAttached();
|
||||
});
|
||||
|
||||
test("comment count label is present in the video modal", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: a video modal is open
|
||||
await openVideoModal(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "engage-count-label-001",
|
||||
});
|
||||
|
||||
// Then: the comment count label exists
|
||||
const countLabel = page.locator("[data-comments-count]");
|
||||
await expect(countLabel).toBeAttached();
|
||||
});
|
||||
|
||||
test("empty state is shown when no comments exist", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: a video modal is open with no comments
|
||||
await openVideoModal(page, { gotoApp, loginAs, seedEvent }, {
|
||||
dTag: "engage-empty-001",
|
||||
});
|
||||
|
||||
// Then: the empty state message should be visible (or the list should be empty)
|
||||
const emptyState = page.locator("[data-comments-empty]");
|
||||
const list = page.locator("[data-comments-list]");
|
||||
|
||||
// Either the explicit empty state is visible, or the list has no children
|
||||
const emptyVisible = await emptyState.isVisible().catch(() => false);
|
||||
if (!emptyVisible) {
|
||||
const childCount = await list.locator("> *").count();
|
||||
expect(childCount).toBe(0);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,312 @@
|
||||
/**
|
||||
* View navigation scenarios: sidebar links, hash routing, view switching.
|
||||
*
|
||||
* Scenarios covered:
|
||||
* - SCN-nav-sidebar-recent: Recently Added link navigates to the recent videos view
|
||||
* - SCN-nav-sidebar-kids: For Kids link navigates to the kids view
|
||||
* - SCN-nav-sidebar-history: History link navigates to the history view
|
||||
* - SCN-nav-hash-direct: Direct hash navigation renders the correct view
|
||||
* - SCN-nav-login-reveals: Login reveals For You, Explore, and Subscriptions links
|
||||
* - SCN-nav-sidebar-collapse: Sidebar collapse toggle works
|
||||
* - SCN-nav-view-container: Each view has a video-list container
|
||||
* - SCN-nav-feed-populates: Seeded videos appear in the most-recent-videos view
|
||||
*/
|
||||
|
||||
import { test, expect } from "./helpers/bitvidTestFixture";
|
||||
|
||||
test.describe("View navigation — sidebar links", () => {
|
||||
test("Recently Added sidebar link navigates to the recent videos view", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
}) => {
|
||||
// Given: the app is loaded
|
||||
await gotoApp();
|
||||
|
||||
// When: user clicks the Recently Added link
|
||||
const recentLink = page.locator('a[href="#view=most-recent-videos"]');
|
||||
await expect(recentLink).toBeAttached();
|
||||
await recentLink.click();
|
||||
|
||||
// Then: the URL hash should reflect the view
|
||||
await page.waitForFunction(
|
||||
() => window.location.hash.includes("view=most-recent-videos"),
|
||||
{ timeout: 5000 },
|
||||
);
|
||||
|
||||
// And: the video list container should be present
|
||||
const videoList = page.locator('[data-testid="video-list"]');
|
||||
await expect(videoList).toBeAttached({ timeout: 10000 });
|
||||
});
|
||||
|
||||
test("For Kids sidebar link navigates to the kids view", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
}) => {
|
||||
// Given: the app is loaded
|
||||
await gotoApp();
|
||||
|
||||
// When: user clicks the For Kids link
|
||||
const kidsLink = page.locator('a[href="#view=kids"]');
|
||||
await expect(kidsLink).toBeAttached();
|
||||
await kidsLink.click();
|
||||
|
||||
// Then: the URL hash should reflect the kids view
|
||||
await page.waitForFunction(
|
||||
() => window.location.hash.includes("view=kids"),
|
||||
{ timeout: 5000 },
|
||||
);
|
||||
});
|
||||
|
||||
test("History sidebar link navigates to the history view", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
}) => {
|
||||
// Given: the app is loaded
|
||||
await gotoApp();
|
||||
|
||||
// When: user clicks the History link
|
||||
const historyLink = page.locator('a[href="#view=history"]');
|
||||
await expect(historyLink).toBeAttached();
|
||||
await historyLink.click();
|
||||
|
||||
// Then: the URL hash should reflect the history view
|
||||
await page.waitForFunction(
|
||||
() => window.location.hash.includes("view=history"),
|
||||
{ timeout: 5000 },
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("View navigation — login-gated links", () => {
|
||||
test("For You, Explore, and Subscriptions links are hidden before login", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
}) => {
|
||||
// Given: the app is loaded without login
|
||||
await gotoApp();
|
||||
|
||||
// Then: login-gated links should be hidden
|
||||
const forYouLink = page.locator("#forYouLink");
|
||||
const exploreLink = page.locator("#exploreLink");
|
||||
const subscriptionsLink = page.locator("#subscriptionsLink");
|
||||
|
||||
await expect(forYouLink).toHaveClass(/hidden/);
|
||||
await expect(exploreLink).toHaveClass(/hidden/);
|
||||
await expect(subscriptionsLink).toHaveClass(/hidden/);
|
||||
});
|
||||
|
||||
test("login reveals For You, Explore, and Subscriptions sidebar links", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
}) => {
|
||||
// Given: the app is loaded
|
||||
await gotoApp();
|
||||
|
||||
// When: user logs in
|
||||
await loginAs(page);
|
||||
|
||||
// Then: the login-gated links should become visible
|
||||
// Allow time for the UI to update after login
|
||||
const forYouLink = page.locator("#forYouLink");
|
||||
const exploreLink = page.locator("#exploreLink");
|
||||
const subscriptionsLink = page.locator("#subscriptionsLink");
|
||||
|
||||
await expect(forYouLink).not.toHaveClass(/hidden/, { timeout: 10000 });
|
||||
await expect(exploreLink).not.toHaveClass(/hidden/, { timeout: 10000 });
|
||||
await expect(subscriptionsLink).not.toHaveClass(/hidden/, { timeout: 10000 });
|
||||
});
|
||||
|
||||
test("For You link navigates to the for-you view after login", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
}) => {
|
||||
// Given: user is logged in
|
||||
await gotoApp();
|
||||
await loginAs(page);
|
||||
|
||||
const forYouLink = page.locator("#forYouLink");
|
||||
await expect(forYouLink).not.toHaveClass(/hidden/, { timeout: 10000 });
|
||||
|
||||
// When: user clicks For You
|
||||
await forYouLink.click();
|
||||
|
||||
// Then: hash should reflect the for-you view
|
||||
await page.waitForFunction(
|
||||
() => window.location.hash.includes("view=for-you"),
|
||||
{ timeout: 5000 },
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("View navigation — direct hash routing", () => {
|
||||
test("navigating to #view=kids directly loads the kids view", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
}) => {
|
||||
// Given: the app is loaded at a specific hash
|
||||
await gotoApp("/#view=kids");
|
||||
|
||||
// Then: the hash should be set
|
||||
const hash = await page.evaluate(() => window.location.hash);
|
||||
expect(hash).toContain("view=kids");
|
||||
});
|
||||
|
||||
test("navigating to #view=most-recent-videos shows the feed", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: a video exists
|
||||
await seedEvent({
|
||||
title: "Navigation Feed Video",
|
||||
url: "https://example.com/nav-feed.mp4",
|
||||
dTag: "nav-feed-001",
|
||||
});
|
||||
|
||||
await gotoApp("/#view=most-recent-videos");
|
||||
await loginAs(page);
|
||||
|
||||
// Then: the feed should populate with the seeded video
|
||||
const items = await page.evaluate(() => {
|
||||
return (window as any).__bitvidTest__.waitForFeedItems(1, 15000);
|
||||
});
|
||||
expect(items.length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("View navigation — sidebar collapse", () => {
|
||||
test("sidebar collapse toggle changes sidebar state", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
}) => {
|
||||
// Given: the app is loaded with sidebar collapsed (default)
|
||||
await gotoApp();
|
||||
|
||||
const sidebar = page.locator("#sidebar");
|
||||
const toggle = page.locator("#sidebarCollapseToggle");
|
||||
|
||||
await expect(sidebar).toBeAttached();
|
||||
await expect(toggle).toBeAttached();
|
||||
|
||||
// Record initial state
|
||||
const initialState = await sidebar.getAttribute("data-state");
|
||||
|
||||
// When: user clicks the collapse toggle
|
||||
await toggle.click();
|
||||
|
||||
// Then: the sidebar state should change
|
||||
await page.waitForFunction(
|
||||
(initial) => {
|
||||
const sidebar = document.querySelector("#sidebar");
|
||||
return sidebar?.getAttribute("data-state") !== initial;
|
||||
},
|
||||
initialState,
|
||||
{ timeout: 5000 },
|
||||
);
|
||||
|
||||
const newState = await sidebar.getAttribute("data-state");
|
||||
expect(newState).not.toBe(initialState);
|
||||
});
|
||||
|
||||
test("sidebar toggle updates aria-expanded attribute", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
}) => {
|
||||
// Given: the app is loaded
|
||||
await gotoApp();
|
||||
|
||||
const toggle = page.locator("#sidebarCollapseToggle");
|
||||
const initialExpanded = await toggle.getAttribute("aria-expanded");
|
||||
|
||||
// When: user clicks the toggle
|
||||
await toggle.click();
|
||||
|
||||
// Then: aria-expanded should flip
|
||||
const expected = initialExpanded === "true" ? "false" : "true";
|
||||
await expect(toggle).toHaveAttribute("aria-expanded", expected, {
|
||||
timeout: 5000,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("View navigation — feed with seeded content", () => {
|
||||
test("seeded videos appear in the feed after navigation", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: multiple videos are seeded
|
||||
await seedEvent({
|
||||
title: "Nav Video One",
|
||||
url: "https://example.com/nav1.mp4",
|
||||
dTag: "nav-multi-001",
|
||||
});
|
||||
await seedEvent({
|
||||
title: "Nav Video Two",
|
||||
url: "https://example.com/nav2.mp4",
|
||||
dTag: "nav-multi-002",
|
||||
});
|
||||
|
||||
await gotoApp();
|
||||
await loginAs(page);
|
||||
|
||||
// Then: both videos should appear in the feed
|
||||
const items = await page.evaluate(() => {
|
||||
return (window as any).__bitvidTest__.waitForFeedItems(2, 15000);
|
||||
});
|
||||
expect(items.length).toBeGreaterThanOrEqual(2);
|
||||
|
||||
const titles = items.map((i: any) => i.title);
|
||||
expect(titles).toContain("Nav Video One");
|
||||
expect(titles).toContain("Nav Video Two");
|
||||
});
|
||||
|
||||
test("switching views and returning preserves app state", async ({
|
||||
page,
|
||||
gotoApp,
|
||||
loginAs,
|
||||
seedEvent,
|
||||
}) => {
|
||||
// Given: user is logged in and viewing the feed
|
||||
await seedEvent({
|
||||
title: "Persistent Video",
|
||||
url: "https://example.com/persist.mp4",
|
||||
dTag: "nav-persist-001",
|
||||
});
|
||||
|
||||
await gotoApp();
|
||||
await loginAs(page);
|
||||
|
||||
await page.evaluate(() => {
|
||||
return (window as any).__bitvidTest__.waitForFeedItems(1, 15000);
|
||||
});
|
||||
|
||||
// When: user navigates to kids view and back
|
||||
await page.locator('a[href="#view=kids"]').click();
|
||||
await page.waitForFunction(
|
||||
() => window.location.hash.includes("view=kids"),
|
||||
{ timeout: 5000 },
|
||||
);
|
||||
|
||||
await page.locator('a[href="#view=most-recent-videos"]').click();
|
||||
await page.waitForFunction(
|
||||
() => window.location.hash.includes("view=most-recent-videos"),
|
||||
{ timeout: 5000 },
|
||||
);
|
||||
|
||||
// Then: app state should remain valid (login preserved across view switches)
|
||||
const state = await page.evaluate(() => {
|
||||
return (window as any).__bitvidTest__.getAppState();
|
||||
});
|
||||
expect(state.isLoggedIn).toBe(true);
|
||||
expect(state.activePubkey).toBeTruthy();
|
||||
|
||||
// And: the video list container should be present in the returned view
|
||||
const videoList = page.locator('[data-testid="video-list"]');
|
||||
await expect(videoList).toBeAttached({ timeout: 10000 });
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user