+
+
+
+
+ Not Found
+That starter pack could not be found.
+ ${tryAgainButtonTemplate({ onClick: onRetry })}
+
+ 
+
+ ${record.description
+ ? html`
+
+
+ ${isAuthenticated
+ ? headerActionTemplate({
+ isOwner,
+ isFollowingAll,
+ permalink,
+ onFollowAll,
+ })
+ : ""}
+
+ ${record.name}
+
+
+ Starter pack by
+ ${isOwner
+ ? "you"
+ : html`@${creator.handle}`}
+
+
+ ${richTextTemplate({
+ text: record.description,
+ facets: record.descriptionFacets ?? [],
+ })}
+
`
+ : ""}
+ ${isAuthenticated
+ ? ""
+ : html``}
+ `;
+}
+
+function sortMembers({ members, optedOutDids, currentUserDid, isOwner }) {
+ const optedOut = new Set(optedOutDids);
+ const visible = members.filter(
+ (profile) =>
+ !profile.viewer?.blocking &&
+ !profile.viewer?.blockedBy &&
+ !profile.associated?.labeler,
+ );
+ visible.reverse();
+ return visible.sort((a, b) => {
+ const aOptedOut = optedOut.has(a.did);
+ const bOptedOut = optedOut.has(b.did);
+ if (aOptedOut !== bOptedOut) return aOptedOut ? -1 : 1;
+ if (isOwner) {
+ if (a.did === currentUserDid) return -1;
+ if (b.did === currentUserDid) return 1;
+ }
+ return 0;
+ });
+}
+
+export default async function starterPackDetailView({
+ root,
+ params,
+ context: {
+ dataLayer,
+ identityResolver,
+ isAuthenticated,
+ pluginService,
+ interactionHandlers,
+ },
+}) {
+ const { handleOrDid, rkey } = params;
+
+ const creatorDid = await resolveDidFromHandleOrDid(
+ handleOrDid,
+ identityResolver,
+ );
+ const starterPackUri = `at://${creatorDid}/app.bsky.graph.starterpack/${rkey}`;
+
+ const { postInteractionHandler, profileInteractionHandler } =
+ interactionHandlers;
+
+ const state = new ReactiveStore("starterPackDetailView");
+ state.$activeTab = new Signal.State("people");
+ state.$isFollowingAll = new Signal.State(false);
+
+ const $starterPackError = new Signal.Computed(
+ () =>
+ dataLayer.requests.statusStore.$errors.get(
+ "loadStarterPack-" + starterPackUri,
+ ) ?? null,
+ );
+
+ bindPageTitle(root, () => {
+ return (
+ dataLayer.derived.$starterPacks.get(starterPackUri)?.record?.name ?? null
+ );
+ });
+
+ pageEffect(root, () => {
+ const currentUser = dataLayer.derived.$currentUser.get();
+ const starterPack = dataLayer.derived.$starterPacks.get(starterPackUri);
+ const error = $starterPackError.get();
+ const list = starterPack?.list ?? null;
+ const listUri = list?.uri ?? null;
+ const feeds = starterPack?.feeds ?? [];
+ const membersEntry = listUri
+ ? dataLayer.derived.$listMembers.get(listUri)
+ : null;
+ const feed = listUri ? dataLayer.derived.$hydratedFeeds.get(listUri) : null;
+ const showLessInteractions = listUri
+ ? dataLayer.derived.$showLessInteractions.get(listUri)
+ : [];
+ const hiddenPostUris = showLessInteractions.map(
+ (interaction) => interaction.item,
+ );
+ const isFollowingAll = state.$isFollowingAll.get();
+ const activeTab = state.$activeTab.get();
+
+ const isLoaded = !!list;
+ const isOwner = isLoaded && starterPack.creator.did === currentUser?.did;
+ const permalink = isLoaded ? getPermalinkForStarterPack(starterPack) : null;
+ const tabs = isLoaded
+ ? [
+ { value: "people", label: "People" },
+ ...(feeds.length > 0 ? [{ value: "feeds", label: "Feeds" }] : []),
+ { value: "posts", label: "Posts" },
+ ]
+ : [];
+ const members = membersEntry
+ ? sortMembers({
+ members: membersEntry.members,
+ optedOutDids: membersEntry.optedOutDids,
+ currentUserDid: currentUser?.did ?? null,
+ isOwner,
+ })
+ : null;
+
+ render(
+ html`
+ ${headerTemplate({
+ title: "Starter pack",
+ rightItemTemplate: isLoaded
+ ? () => headerMenuTemplate({ permalink })
+ : null,
+ })}
+ ${!starterPack && !error
+ ? loadingTemplate()
+ : !isLoaded
+ ? notFoundTemplate({ onRetry: () => loadPageData() })
+ : html`
+ ${starterPackHeaderTemplate({
+ starterPack,
+ isOwner,
+ isAuthenticated,
+ isFollowingAll,
+ permalink,
+ onFollowAll: () => handleFollowAll(starterPack),
+ })}
+
+ `}
+
`,
+ root,
+ );
+ });
+
+ pageEffect(root, () => {
+ if (state.$activeTab.get() !== "feeds") return;
+ // Reset tab if feeds are no longer available
+ const feeds =
+ dataLayer.derived.$starterPacks.get(starterPackUri)?.feeds ?? [];
+ if (feeds.length === 0) state.$activeTab.set("posts");
+ });
+
+ async function handleFollowAll(starterPack) {
+ state.$isFollowingAll.set(true);
+ try {
+ await dataLayer.mutations.followAllStarterPackMembers(starterPack);
+ showToast("All accounts have been followed!", { style: "success" });
+ } catch (error) {
+ console.error(error);
+ showToast("An error occurred while trying to follow all", {
+ style: "error",
+ });
+ } finally {
+ state.$isFollowingAll.set(false);
+ }
+ }
+
+ async function loadFeed(listUri, { reload = false } = {}) {
+ await dataLayer.requests.loadNextFeedPage(
+ { type: "list", uri: listUri },
+ { reload, limit: FEED_PAGE_SIZE + 1 },
+ );
+ }
+
+ async function loadPageData() {
+ await dataLayer.requests.loadStarterPack(starterPackUri);
+ const listUri =
+ dataLayer.derived.$starterPacks.get(starterPackUri)?.list?.uri ?? null;
+ if (!listUri) return;
+ await Promise.all([
+ dataLayer.requests.loadAllListMembers(listUri),
+ loadFeed(listUri, { reload: true }),
+ ]);
+ }
+
+ onPageShow(root, ({ action }) => {
+ if (action === "restore") return;
+ loadPageData();
+ });
+}
diff --git a/tests/e2e/specs/views/feedDetail.view.test.js b/tests/e2e/specs/views/feedDetail.view.test.js
index 411e8872..0acad476 100644
--- a/tests/e2e/specs/views/feedDetail.view.test.js
+++ b/tests/e2e/specs/views/feedDetail.view.test.js
@@ -288,15 +288,37 @@ test.describe("Feed Detail view", () => {
});
test.describe("Logged-out behavior", () => {
- test("should redirect to /login when not authenticated", async ({
+ test("should render the feed without the pin button when not authenticated", async ({
page,
}) => {
- const loggedOutMockServer = new MockServer();
- await loggedOutMockServer.setup(page);
+ const mockServer = new MockServer();
+ const feed = createFeedGenerator({
+ uri: "at://did:plc:creator1/app.bsky.feed.generator/trending",
+ displayName: "Trending",
+ creatorHandle: "creator1.bsky.social",
+ });
+ const post = createPost({
+ uri: "at://did:plc:author1/app.bsky.feed.post/post1",
+ text: "First trending post",
+ authorHandle: "author1.bsky.social",
+ authorDisplayName: "Author One",
+ loggedOut: true,
+ });
+ mockServer.addFeedGenerators([feed]);
+ mockServer.addFeedItems(feed.uri, [post]);
+ await mockServer.setup(page);
await page.goto("/profile/creator1.bsky.social/feed/trending");
- await expect(page).toHaveURL(/\/login(\?|$)/, { timeout: 10000 });
+ const view = page.locator("#feed-detail-view");
+ await expect(view.locator('[data-testid="header-title"]')).toContainText(
+ "Trending",
+ { timeout: 10000 },
+ );
+ await expect(view.locator(".post-text").first()).toContainText(
+ "First trending post",
+ );
+ await expect(view.locator(".pin-feed-button")).toHaveCount(0);
});
});
});
diff --git a/tests/e2e/specs/views/listDetail.view.test.js b/tests/e2e/specs/views/listDetail.view.test.js
index d3fe9927..f8ad72fe 100644
--- a/tests/e2e/specs/views/listDetail.view.test.js
+++ b/tests/e2e/specs/views/listDetail.view.test.js
@@ -1025,15 +1025,37 @@ test.describe("List Detail view", () => {
});
test.describe("Logged-out behavior", () => {
- test("should redirect to /login when not authenticated", async ({
+ test("should render the list without pin or follow buttons when not authenticated", async ({
page,
}) => {
- const loggedOutMockServer = new MockServer();
- await loggedOutMockServer.setup(page);
+ const mockServer = new MockServer();
+ setupList(mockServer);
+ const member = createProfile({
+ did: "did:plc:member1",
+ handle: "member1.bsky.social",
+ displayName: "Member One",
+ });
+ mockServer.addListMembers(LIST_URI, [member]);
+ await mockServer.setup(page);
await page.goto("/profile/creator1.bsky.social/lists/mylist");
- await expect(page).toHaveURL(/\/login(\?|$)/, { timeout: 10000 });
+ const view = page.locator("#list-detail-view");
+ await expect(
+ view.locator('[data-testid="list-detail-name"]'),
+ ).toContainText("My Curated List", { timeout: 10000 });
+ await expect(view.locator('[data-testid="pin-list-button"]')).toHaveCount(
+ 0,
+ );
+
+ await view.locator('[data-testid="tab-people"]').click();
+ const memberRow = view
+ .locator(".profile-list-item")
+ .filter({ hasText: "member1.bsky.social" });
+ await expect(memberRow).toBeVisible();
+ await expect(
+ memberRow.locator('[data-testid="follow-button"]'),
+ ).toHaveCount(0);
});
});
});
diff --git a/tests/e2e/specs/views/starterPackDetail.view.test.js b/tests/e2e/specs/views/starterPackDetail.view.test.js
new file mode 100644
index 00000000..5ca45bc5
--- /dev/null
+++ b/tests/e2e/specs/views/starterPackDetail.view.test.js
@@ -0,0 +1,503 @@
+import { test, expect } from "../../base.js";
+import { login } from "../../helpers.js";
+import { MockServer } from "../../mockServer.js";
+import { userProfile } from "../../testData.js";
+import {
+ createFeedGenerator,
+ createPost,
+ createProfile,
+ createStarterPack,
+} from "../../../shared/factories.js";
+
+const PACK_URI = "at://did:plc:creator1/app.bsky.graph.starterpack/coolpack";
+const LIST_URI = "at://did:plc:creator1/app.bsky.graph.list/coolpack";
+const PACK_PATH = "/profile/creator1.bsky.social/starter-pack/coolpack";
+const OWN_PACK_URI = `at://${userProfile.did}/app.bsky.graph.starterpack/mine`;
+const OWN_LIST_URI = `at://${userProfile.did}/app.bsky.graph.list/mine`;
+
+function setupPack(mockServer, { description, feeds } = {}) {
+ const starterPack = createStarterPack({
+ uri: PACK_URI,
+ name: "Cool Pack",
+ creatorHandle: "creator1.bsky.social",
+ description,
+ list: true,
+ feeds,
+ });
+ mockServer.addStarterPacks([starterPack]);
+ return starterPack;
+}
+
+function setupMembers(mockServer, listUri = LIST_URI) {
+ const memberOne = createProfile({
+ did: "did:plc:member1",
+ handle: "member1.bsky.social",
+ displayName: "Member One",
+ });
+ const memberTwo = createProfile({
+ did: "did:plc:member2",
+ handle: "member2.bsky.social",
+ displayName: "Member Two",
+ });
+ mockServer.addListMembers(listUri, [memberOne, memberTwo]);
+ return [memberOne, memberTwo];
+}
+
+async function openPack(page, path = PACK_PATH) {
+ await login(page);
+ await page.goto(path);
+ const view = page.locator("#starter-pack-detail-view");
+ await expect(view.locator('[data-testid="starter-pack-name"]')).toBeVisible({
+ timeout: 10000,
+ });
+ return view;
+}
+
+test.describe("Starter Pack Detail view", () => {
+ test("should display name, creator link, and description", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ const starterPack = setupPack(mockServer, {
+ description: "Great people to follow. See https://example.com",
+ });
+ starterPack.record.descriptionFacets = [
+ {
+ index: { byteStart: 28, byteEnd: 47 },
+ features: [
+ {
+ $type: "app.bsky.richtext.facet#link",
+ uri: "https://example.com",
+ },
+ ],
+ },
+ ];
+ setupMembers(mockServer);
+ await mockServer.setup(page);
+
+ const view = await openPack(page);
+
+ await expect(view.locator('[data-testid="starter-pack-name"]')).toHaveText(
+ "Cool Pack",
+ );
+ await expect(
+ view.locator('[data-testid="starter-pack-creator"]'),
+ ).toContainText("@creator1.bsky.social");
+ await expect(
+ view.locator('[data-testid="starter-pack-description"]'),
+ ).toContainText("Great people to follow.");
+ await expect(
+ view.locator('[data-testid="starter-pack-description"] a'),
+ ).toHaveAttribute("href", "https://example.com/");
+
+ await view.locator('[data-testid="starter-pack-creator"] a').click();
+ await expect(page).toHaveURL(/\/profile\/creator1\.bsky\.social$/, {
+ timeout: 10000,
+ });
+ });
+
+ test("should resolve the bsky.app style routes to the same page", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ setupPack(mockServer);
+ setupMembers(mockServer);
+ await mockServer.setup(page);
+
+ await openPack(page, "/starter-pack/creator1.bsky.social/coolpack");
+ await page.goto("/start/creator1.bsky.social/coolpack");
+ await expect(
+ page.locator(
+ '#starter-pack-detail-view [data-testid="starter-pack-name"]',
+ ),
+ ).toHaveText("Cool Pack", { timeout: 10000 });
+ });
+
+ test("should list members on the People tab in reversed order and hide blocked ones", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ setupPack(mockServer);
+ const [memberOne, memberTwo] = setupMembers(mockServer);
+ const blocked = createProfile({
+ did: "did:plc:blocked",
+ handle: "blocked.bsky.social",
+ displayName: "Blocked Person",
+ viewer: { blocking: "at://did:plc:testuser123/app.bsky.graph.block/1" },
+ });
+ mockServer.addListMembers(LIST_URI, [memberOne, memberTwo, blocked]);
+ await mockServer.setup(page);
+
+ const view = await openPack(page);
+
+ await expect(
+ view.locator('[data-testid="starter-pack-tab-content"]'),
+ ).toHaveAttribute("data-teststate", "people");
+ const handles = view.locator('[data-testid="profile-list-item-handle"]');
+ await expect(handles).toHaveCount(2, { timeout: 10000 });
+ await expect(handles.nth(0)).toContainText("member2.bsky.social");
+ await expect(handles.nth(1)).toContainText("member1.bsky.social");
+ });
+
+ test("should show the Feeds tab only when the pack has feeds", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ const feed = createFeedGenerator({
+ uri: "at://did:plc:creator1/app.bsky.feed.generator/cool-feed",
+ displayName: "Cool Feed",
+ creatorHandle: "creator1.bsky.social",
+ });
+ mockServer.addFeedGenerators([feed]);
+ setupPack(mockServer, { feeds: [feed] });
+ setupMembers(mockServer);
+ await mockServer.setup(page);
+
+ const view = await openPack(page);
+
+ await view.locator('[data-testid="tab-feeds"]').click();
+ await expect(
+ view.locator('[data-testid="starter-pack-tab-content"]'),
+ ).toHaveAttribute("data-teststate", "feeds");
+ await expect(view.locator(".feeds-list-item")).toHaveCount(1);
+ await expect(view.locator(".feeds-list-item")).toContainText("Cool Feed");
+ });
+
+ test("should omit the Feeds tab when the pack has no feeds", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ setupPack(mockServer);
+ setupMembers(mockServer);
+ await mockServer.setup(page);
+
+ const view = await openPack(page);
+
+ await expect(view.locator('[data-testid="tab-people"]')).toBeVisible();
+ await expect(view.locator('[data-testid="tab-posts"]')).toBeVisible();
+ await expect(view.locator('[data-testid="tab-feeds"]')).toHaveCount(0);
+ });
+
+ test("should show the list feed on the Posts tab", async ({ page }) => {
+ const mockServer = new MockServer();
+ setupPack(mockServer);
+ setupMembers(mockServer);
+ const post = createPost({
+ uri: "at://did:plc:member1/app.bsky.feed.post/p1",
+ text: "A post from a pack member",
+ authorHandle: "member1.bsky.social",
+ authorDisplayName: "Member One",
+ });
+ mockServer.addListFeedItems(LIST_URI, [post]);
+ await mockServer.setup(page);
+
+ const view = await openPack(page);
+
+ await view.locator('[data-testid="tab-posts"]').click();
+ await expect(
+ view.locator('[data-testid="starter-pack-tab-content"]'),
+ ).toHaveAttribute("data-teststate", "posts");
+ await expect(view.locator('[data-testid="feed-item"]')).toHaveCount(1, {
+ timeout: 10000,
+ });
+ await expect(view).toContainText("A post from a pack member");
+ });
+
+ test("should show not found when the pack does not exist", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ mockServer.addStarterPacks([
+ createStarterPack({
+ uri: "at://did:plc:creator1/app.bsky.graph.starterpack/other",
+ name: "Other",
+ creatorHandle: "creator1.bsky.social",
+ }),
+ ]);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto(PACK_PATH);
+
+ await expect(
+ page.locator(
+ '#starter-pack-detail-view [data-testid="starter-pack-not-found"]',
+ ),
+ ).toBeVisible({ timeout: 10000 });
+ });
+
+ test("should show not found when the backing list is gone", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ mockServer.addStarterPacks([
+ createStarterPack({
+ uri: PACK_URI,
+ name: "Cool Pack",
+ creatorHandle: "creator1.bsky.social",
+ }),
+ ]);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto(PACK_PATH);
+
+ await expect(
+ page.locator(
+ '#starter-pack-detail-view [data-testid="starter-pack-not-found"]',
+ ),
+ ).toBeVisible({ timeout: 10000 });
+ });
+
+ test.describe("Follow all", () => {
+ test("should follow eligible members with the pack as via", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ const starterPack = setupPack(mockServer);
+ const [memberOne] = setupMembers(mockServer);
+ const alreadyFollowed = createProfile({
+ did: "did:plc:followed",
+ handle: "followed.bsky.social",
+ displayName: "Already Followed",
+ viewer: { following: "at://did:plc:testuser123/follow/1" },
+ });
+ const muted = createProfile({
+ did: "did:plc:muted",
+ handle: "muted.bsky.social",
+ displayName: "Muted Person",
+ viewer: { muted: true },
+ });
+ mockServer.addListMembers(LIST_URI, [
+ memberOne,
+ alreadyFollowed,
+ muted,
+ userProfile,
+ ]);
+ await mockServer.setup(page);
+
+ const view = await openPack(page);
+
+ const button = view.locator('[data-testid="starter-pack-follow-all"]');
+ await expect(button).toHaveAttribute("data-teststate", "idle");
+ await expect(
+ view.locator('[data-testid="starter-pack-share"]'),
+ ).toHaveCount(0);
+ await button.click();
+
+ await expect(page.locator('[data-testid="toast"]')).toBeVisible({
+ timeout: 10000,
+ });
+ await expect(button).toHaveAttribute("data-teststate", "idle");
+
+ const writes = mockServer.applyWritesCalls.flat();
+ expect(writes.length).toBe(1);
+ expect(writes[0].$type).toBe("com.atproto.repo.applyWrites#create");
+ expect(writes[0].collection).toBe("app.bsky.graph.follow");
+ expect(writes[0].value.subject).toBe("did:plc:member1");
+ expect(writes[0].value.via).toEqual({
+ uri: starterPack.uri,
+ cid: starterPack.cid,
+ });
+
+ const memberRow = view
+ .locator(".profile-list-item")
+ .filter({ hasText: "member1.bsky.social" });
+ await expect(
+ memberRow.locator('[data-testid="follow-button"]'),
+ ).toHaveAttribute("data-teststate", "following");
+ });
+
+ test("should toast an error and re-enable the button when the write fails", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ setupPack(mockServer);
+ setupMembers(mockServer);
+ await mockServer.setup(page);
+ await page.route("**/xrpc/com.atproto.repo.applyWrites*", (route) =>
+ route.fulfill({
+ status: 500,
+ contentType: "application/json",
+ body: JSON.stringify({ error: "InternalServerError" }),
+ }),
+ );
+
+ const view = await openPack(page);
+
+ const button = view.locator('[data-testid="starter-pack-follow-all"]');
+ await button.click();
+
+ await expect(page.locator('[data-testid="toast"].error')).toBeVisible({
+ timeout: 10000,
+ });
+ await expect(button).toHaveAttribute("data-teststate", "idle");
+ await expect(button).toBeEnabled();
+ });
+ });
+
+ test.describe("Share", () => {
+ test("should show Share instead of Follow all on the owner's pack and copy the link", async ({
+ page,
+ browserName,
+ }) => {
+ const mockServer = new MockServer();
+ mockServer.addStarterPacks([
+ createStarterPack({
+ uri: OWN_PACK_URI,
+ name: "My Pack",
+ creatorHandle: userProfile.handle,
+ list: true,
+ }),
+ ]);
+ setupMembers(mockServer, OWN_LIST_URI);
+ await mockServer.setup(page);
+ if (browserName === "chromium") {
+ await page
+ .context()
+ .grantPermissions(["clipboard-read", "clipboard-write"]);
+ }
+
+ const view = await openPack(
+ page,
+ `/profile/${userProfile.handle}/starter-pack/mine`,
+ );
+
+ await expect(
+ view.locator('[data-testid="starter-pack-creator"]'),
+ ).toContainText("by you");
+ await expect(
+ view.locator('[data-testid="starter-pack-follow-all"]'),
+ ).toHaveCount(0);
+ await view.locator('[data-testid="starter-pack-share"]').click();
+
+ await expect(page.locator('[data-testid="toast"]')).toBeVisible();
+ if (browserName === "chromium") {
+ const clipboardText = await page.evaluate(() =>
+ navigator.clipboard.readText(),
+ );
+ expect(clipboardText).toBe(
+ `https://bsky.app/starter-pack/${userProfile.handle}/mine`,
+ );
+ }
+ });
+
+ test("should copy the link from the header menu", async ({
+ page,
+ browserName,
+ }) => {
+ const mockServer = new MockServer();
+ setupPack(mockServer);
+ setupMembers(mockServer);
+ await mockServer.setup(page);
+ if (browserName === "chromium") {
+ await page
+ .context()
+ .grantPermissions(["clipboard-read", "clipboard-write"]);
+ }
+
+ const view = await openPack(page);
+
+ await view.locator(".context-menu-button").click();
+ await view
+ .locator('[data-testid="menu-action-starter-pack-copy-link"]')
+ .click();
+
+ await expect(page.locator('[data-testid="toast"]')).toBeVisible();
+ if (browserName === "chromium") {
+ const clipboardText = await page.evaluate(() =>
+ navigator.clipboard.readText(),
+ );
+ expect(clipboardText).toBe(
+ "https://bsky.app/starter-pack/creator1.bsky.social/coolpack",
+ );
+ }
+ });
+ });
+
+ test.describe("Logged-out behavior", () => {
+ test("should render the pack with a sign-in prompt and no follow buttons", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ setupPack(mockServer);
+ const [memberOne] = setupMembers(mockServer);
+ const hidden = createProfile({
+ did: "did:plc:hidden",
+ handle: "hidden.bsky.social",
+ displayName: "Hidden Person",
+ });
+ hidden.labels = [
+ {
+ val: "!no-unauthenticated",
+ src: hidden.did,
+ uri: `at://${hidden.did}/app.bsky.actor.profile/self`,
+ cts: "2025-01-01T00:00:00.000Z",
+ },
+ ];
+ mockServer.addListMembers(LIST_URI, [memberOne, hidden]);
+ await mockServer.setup(page);
+
+ await page.goto(PACK_PATH);
+
+ const view = page.locator("#starter-pack-detail-view");
+ await expect(
+ view.locator('[data-testid="starter-pack-name"]'),
+ ).toBeVisible({ timeout: 10000 });
+ await expect(
+ view.locator('[data-testid="starter-pack-follow-all"]'),
+ ).toHaveCount(0);
+ await expect(
+ view.locator('[data-testid="starter-pack-share"]'),
+ ).toHaveCount(0);
+ await expect(
+ view.locator('[data-testid="starter-pack-sign-in"]'),
+ ).toHaveAttribute("href", /^\/login/);
+
+ const rows = view.locator(".profile-list-item");
+ await expect(rows).toHaveCount(1);
+ await expect(rows.first()).toContainText("member1.bsky.social");
+ await expect(rows.locator('[data-testid="follow-button"]')).toHaveCount(
+ 0,
+ );
+ });
+ });
+
+ test("should open the pack from a post embed in-app", async ({ page }) => {
+ const mockServer = new MockServer();
+ const starterPack = setupPack(mockServer);
+ setupMembers(mockServer);
+ const post = createPost({
+ uri: "at://did:plc:author1/app.bsky.feed.post/embedpost",
+ text: "Check out this pack",
+ authorHandle: "author1.bsky.social",
+ authorDisplayName: "Author One",
+ });
+ post.embed = {
+ $type: "app.bsky.embed.record#view",
+ record: {
+ $type: "app.bsky.graph.defs#starterPackViewBasic",
+ uri: starterPack.uri,
+ cid: starterPack.cid,
+ record: starterPack.record,
+ creator: starterPack.creator,
+ },
+ };
+ mockServer.addPosts([post]);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto("/profile/author1.bsky.social/post/embedpost");
+
+ await page.locator(".starter-pack-embed a").first().click();
+
+ await expect(page).toHaveURL(new RegExp(PACK_PATH.replace(/\//g, "\\/")), {
+ timeout: 10000,
+ });
+ await expect(
+ page.locator(
+ '#starter-pack-detail-view [data-testid="starter-pack-name"]',
+ ),
+ ).toHaveText("Cool Pack", { timeout: 10000 });
+ });
+});
diff --git a/tests/shared/factories.js b/tests/shared/factories.js
index 64bc21d6..8474fe9b 100644
--- a/tests/shared/factories.js
+++ b/tests/shared/factories.js
@@ -317,9 +317,32 @@ export function createList({
};
}
-export function createStarterPack({ uri, name, creatorHandle, description }) {
+export function createStarterPack({
+ uri,
+ name,
+ creatorHandle,
+ description,
+ list,
+ feeds,
+}) {
const creatorDid = uri.split("/")[2];
const rkey = uri.split("/").pop();
+ const listUri = `at://${creatorDid}/app.bsky.graph.list/${rkey}`;
+ const fullView = {};
+ if (list) {
+ fullView.list =
+ list === true
+ ? createList({
+ uri: listUri,
+ name,
+ creatorHandle,
+ purpose: "app.bsky.graph.defs#referencelist",
+ })
+ : list;
+ }
+ if (feeds) {
+ fullView.feeds = feeds;
+ }
return {
uri,
cid: "bafyreitest" + rkey,
@@ -327,7 +350,7 @@ export function createStarterPack({ uri, name, creatorHandle, description }) {
$type: "app.bsky.graph.starterpack",
name,
description: description || "",
- list: `at://${creatorDid}/app.bsky.graph.list/${rkey}`,
+ list: listUri,
createdAt: "2025-01-01T00:00:00.000Z",
},
creator: {
@@ -344,6 +367,7 @@ export function createStarterPack({ uri, name, creatorHandle, description }) {
joinedAllTimeCount: 0,
indexedAt: "2025-01-01T00:00:00.000Z",
labels: [],
+ ...fullView,
};
}
diff --git a/tests/unit/specs/api.test.js b/tests/unit/specs/api.test.js
index 2ccbb375..50a70daa 100644
--- a/tests/unit/specs/api.test.js
+++ b/tests/unit/specs/api.test.js
@@ -2072,3 +2072,48 @@ describe("uploadVideoBlob", () => {
assert.deepEqual(thrownError.status, 500);
});
});
+
+describe("getAllListItems", () => {
+ function createPagingApi(pages) {
+ const calls = [];
+ const api = new Api(createMockSession({}));
+ api.getList = async (listUri, { limit, cursor }) => {
+ calls.push({ listUri, limit, cursor });
+ return pages[calls.length - 1];
+ };
+ return { api, calls };
+ }
+
+ it("should page until the response has no cursor", async () => {
+ const { api, calls } = createPagingApi([
+ { items: [{ uri: "a" }], cursor: "c1" },
+ { items: [{ uri: "b" }], cursor: "c2" },
+ { items: [{ uri: "c" }] },
+ ]);
+
+ const items = await api.getAllListItems("at://did/app.bsky.graph.list/1");
+
+ assert.deepEqual(
+ items.map((item) => item.uri),
+ ["a", "b", "c"],
+ );
+ assert.deepEqual(
+ calls.map((call) => call.cursor),
+ ["", "c1", "c2"],
+ );
+ assert.deepEqual(calls[0].limit, 50);
+ });
+
+ it("should stop after six pages", async () => {
+ const pages = Array.from({ length: 10 }, (_, index) => ({
+ items: [{ uri: String(index) }],
+ cursor: "c" + index,
+ }));
+ const { api, calls } = createPagingApi(pages);
+
+ const items = await api.getAllListItems("at://did/app.bsky.graph.list/1");
+
+ assert.deepEqual(items.length, 6);
+ assert.deepEqual(calls.length, 6);
+ });
+});
diff --git a/tests/unit/specs/dataLayer/derived.test.js b/tests/unit/specs/dataLayer/derived.test.js
index 99ebf5e9..24eb4b45 100644
--- a/tests/unit/specs/dataLayer/derived.test.js
+++ b/tests/unit/specs/dataLayer/derived.test.js
@@ -2293,6 +2293,25 @@ describe("$listMembers", () => {
assert.deepEqual(result.members.length, 1);
assert.deepEqual(result.members[0].handle, "member.test");
assert.deepEqual(result.cursor, "lc");
+ assert.deepEqual(result.optedOutDids, []);
+ });
+
+ it("should list the dids of members who opted out", () => {
+ const dataStore = new DataStore(createSessionState(null));
+ const { derived } = makeDerived(dataStore);
+ dataStore.setProfiles([
+ createProfile({ did: "did:plc:in", handle: "in.test" }),
+ createProfile({ did: "did:plc:out", handle: "out.test" }),
+ ]);
+ dataStore.$listMembers.set(listUri, {
+ items: [
+ { subject: { did: "did:plc:in" } },
+ { subject: { did: "did:plc:out" }, subjectOptedOut: true },
+ ],
+ cursor: null,
+ });
+ const result = derived.$listMembers.get(listUri);
+ assert.deepEqual(result.optedOutDids, ["did:plc:out"]);
});
});
diff --git a/tests/unit/specs/dataLayer/mutations.test.js b/tests/unit/specs/dataLayer/mutations.test.js
index 348c008f..f338a88c 100644
--- a/tests/unit/specs/dataLayer/mutations.test.js
+++ b/tests/unit/specs/dataLayer/mutations.test.js
@@ -367,6 +367,137 @@ describe("followProfile", () => {
});
});
+describe("followAllStarterPackMembers", () => {
+ const starterPack = {
+ uri: "at://did:plc:creator/app.bsky.graph.starterpack/pack",
+ cid: "bafypack",
+ list: { uri: "at://did:plc:creator/app.bsky.graph.list/pack" },
+ };
+
+ function makeItem(did, viewer = {}) {
+ return {
+ uri: `li-${did}`,
+ subject: { did, handle: did + ".test", viewer },
+ };
+ }
+
+ function setup({ listItems, applyWrites }) {
+ const dataStore = new DataStore(createSessionState(null));
+ const patchStore = new PatchStore();
+ const applyWritesCalls = [];
+ const api = {
+ session: { did: "did:plc:me" },
+ getAllListItems: async () => listItems,
+ applyWrites:
+ applyWrites ??
+ (async (writes) => {
+ applyWritesCalls.push(writes);
+ return {};
+ }),
+ };
+ const mutations = makeMutations(api, dataStore, patchStore, {
+ requirePreferences: () => Preferences.createLoggedOutPreferences(),
+ });
+ return { dataStore, mutations, applyWritesCalls };
+ }
+
+ it("should follow only eligible members with the pack as via", async () => {
+ const listItems = [
+ makeItem("did:plc:a"),
+ makeItem("did:plc:me"),
+ makeItem("did:plc:blocking", { blocking: "at://block" }),
+ makeItem("did:plc:blockedby", { blockedBy: true }),
+ makeItem("did:plc:muted", { muted: true }),
+ makeItem("did:plc:mutedbylist", { mutedByList: { uri: "l" } }),
+ makeItem("did:plc:following", { following: "at://follow" }),
+ makeItem("did:plc:b"),
+ ];
+ const { mutations, applyWritesCalls } = setup({ listItems });
+
+ const count = await mutations.followAllStarterPackMembers(starterPack);
+
+ assert.deepEqual(count, 2);
+ assert.deepEqual(applyWritesCalls.length, 1);
+ const writes = applyWritesCalls[0];
+ assert.deepEqual(
+ writes.map((write) => write.value.subject),
+ ["did:plc:a", "did:plc:b"],
+ );
+ for (const write of writes) {
+ assert.deepEqual(write.$type, "com.atproto.repo.applyWrites#create");
+ assert.deepEqual(write.collection, "app.bsky.graph.follow");
+ assert.deepEqual(typeof write.rkey, "string");
+ assert.deepEqual(write.value.$type, "app.bsky.graph.follow");
+ assert.deepEqual(write.value.via, {
+ uri: starterPack.uri,
+ cid: starterPack.cid,
+ });
+ }
+ });
+
+ it("should chunk writes at fifty", async () => {
+ const listItems = Array.from({ length: 120 }, (_, index) =>
+ makeItem(`did:plc:m${index}`),
+ );
+ const { mutations, applyWritesCalls } = setup({ listItems });
+
+ await mutations.followAllStarterPackMembers(starterPack);
+
+ assert.deepEqual(
+ applyWritesCalls.map((writes) => writes.length),
+ [50, 50, 20],
+ );
+ });
+
+ it("should skip the api call when nobody is eligible", async () => {
+ const listItems = [makeItem("did:plc:following", { following: "at://f" })];
+ const { mutations, applyWritesCalls } = setup({ listItems });
+
+ const count = await mutations.followAllStarterPackMembers(starterPack);
+
+ assert.deepEqual(count, 0);
+ assert.deepEqual(applyWritesCalls.length, 0);
+ });
+
+ it("should mark cached profiles as followed", async () => {
+ const listItems = [makeItem("did:plc:a"), makeItem("did:plc:b")];
+ const { dataStore, mutations } = setup({ listItems });
+ dataStore.setProfiles([{ did: "did:plc:a", handle: "a.test", viewer: {} }]);
+ dataStore.$detailedProfiles.set("did:plc:a", {
+ did: "did:plc:a",
+ handle: "a.test",
+ followersCount: 4,
+ viewer: {},
+ });
+
+ await mutations.followAllStarterPackMembers(starterPack);
+
+ const profile = dataStore.$profiles.get("did:plc:a");
+ assert.match(
+ profile.viewer.following,
+ /^at:\/\/did:plc:me\/app\.bsky\.graph\.follow\/[a-z2-7]{13}$/,
+ );
+ const detailed = dataStore.$detailedProfiles.get("did:plc:a");
+ assert.deepEqual(detailed.followersCount, 5);
+ assert.deepEqual(detailed.viewer.following, profile.viewer.following);
+ assert.deepEqual(dataStore.$profiles.get("did:plc:b"), null);
+ });
+
+ it("should rethrow api failures", async () => {
+ const { mutations } = setup({
+ listItems: [makeItem("did:plc:a")],
+ applyWrites: async () => {
+ throw new Error("boom");
+ },
+ });
+
+ await assert.rejects(
+ () => mutations.followAllStarterPackMembers(starterPack),
+ /boom/,
+ );
+ });
+});
+
describe("unfollowProfile", () => {
const testProfile = {
uri: "did:test:profile",
diff --git a/tests/unit/specs/dataLayer/requests.test.js b/tests/unit/specs/dataLayer/requests.test.js
index eb7f60d5..022e5b50 100644
--- a/tests/unit/specs/dataLayer/requests.test.js
+++ b/tests/unit/specs/dataLayer/requests.test.js
@@ -4173,6 +4173,26 @@ describe("loadFeedGenerator / loadList / loadStarterPack", () => {
assert.deepEqual(dataStore.$starterPacks.get(starterPack.uri), starterPack);
});
+
+ it("should record a starter pack load failure in the status store", async () => {
+ const dataStore = new DataStore(createSessionState(null));
+ const error = new ApiError({ status: 400, data: { error: "NotFound" } });
+ const mockApi = {
+ getStarterPack: async () => {
+ throw error;
+ },
+ };
+ const requests = makeRequests(mockApi, dataStore);
+ const uri = "at://did/app.bsky.graph.starterpack/sp";
+
+ await requests.loadStarterPack(uri);
+
+ assert.deepEqual(
+ requests.statusStore.getError("loadStarterPack-" + uri),
+ error,
+ );
+ assert.deepEqual(dataStore.$starterPacks.get(uri), null);
+ });
});
describe("loadListMembers", () => {
@@ -4241,6 +4261,54 @@ describe("loadListMembers", () => {
});
});
+describe("loadAllListMembers", () => {
+ const listUri = "at://did/app.bsky.graph.list/1";
+
+ it("should store every item with no cursor and hydrate profiles", async () => {
+ const dataStore = new DataStore(createSessionState(null));
+ dataStore.$listMembers.set(listUri, {
+ items: [{ uri: "stale", subject: { did: "did:plc:stale" } }],
+ cursor: "next",
+ });
+ const mockApi = {
+ getAllListItems: async () => [
+ { uri: "li1", subject: { did: "did:plc:a", handle: "a" } },
+ { uri: "li2", subject: { did: "did:plc:b", handle: "b" } },
+ ],
+ };
+ const requests = makeRequests(mockApi, dataStore);
+
+ await requests.loadAllListMembers(listUri);
+
+ const stored = dataStore.$listMembers.get(listUri);
+ assert.deepEqual(
+ stored.items.map((item) => item.uri),
+ ["li1", "li2"],
+ );
+ assert.deepEqual(stored.cursor, null);
+ assert.deepEqual(dataStore.$profiles.get("did:plc:b").handle, "b");
+ });
+
+ it("should record an api failure in the status store", async () => {
+ const dataStore = new DataStore(createSessionState(null));
+ const error = new ApiError({ status: 500, data: { error: "Boom" } });
+ const mockApi = {
+ getAllListItems: async () => {
+ throw error;
+ },
+ };
+ const requests = makeRequests(mockApi, dataStore);
+
+ await requests.loadAllListMembers(listUri);
+
+ assert.deepEqual(
+ requests.statusStore.getError("loadAllListMembers-" + listUri),
+ error,
+ );
+ assert.deepEqual(dataStore.$listMembers.get(listUri), null);
+ });
+});
+
describe("loadActorLists", () => {
const did = "did:plc:author";
diff --git a/tests/unit/specs/navigation.test.js b/tests/unit/specs/navigation.test.js
index 71e5ae63..135708bf 100644
--- a/tests/unit/specs/navigation.test.js
+++ b/tests/unit/specs/navigation.test.js
@@ -13,6 +13,8 @@ import {
linkToProfileFollowers,
linkToProfileFollowing,
linkToFeed,
+ linkToStarterPack,
+ getPermalinkForStarterPack,
linkToCommunityPlugin,
linkToPluginSettings,
getPermalinkForPost,
@@ -215,6 +217,37 @@ describe("linkToProfileFollowing", () => {
});
});
+describe("linkToStarterPack", () => {
+ const starterPack = {
+ uri: "at://did:plc:alice/app.bsky.graph.starterpack/3kpack",
+ creator: { did: "did:plc:alice", handle: "alice.bsky.social" },
+ };
+
+ it("should link by creator handle and rkey", () => {
+ assert.deepEqual(
+ linkToStarterPack(starterPack),
+ "/profile/alice.bsky.social/starter-pack/3kpack",
+ );
+ });
+
+ it("should fall back to the creator did when the handle is invalid", () => {
+ assert.deepEqual(
+ linkToStarterPack({
+ ...starterPack,
+ creator: { did: "did:plc:alice", handle: "handle.invalid" },
+ }),
+ "/profile/did:plc:alice/starter-pack/3kpack",
+ );
+ });
+
+ it("should build a bsky.app permalink", () => {
+ assert.deepEqual(
+ getPermalinkForStarterPack(starterPack),
+ "https://bsky.app/starter-pack/alice.bsky.social/3kpack",
+ );
+ });
+});
+
describe("linkToFeed", () => {
it("should return correct feed link", () => {
const feedGenerator = {
diff --git a/tests/unit/specs/templates/postEmbed.template.test.js b/tests/unit/specs/templates/postEmbed.template.test.js
index c8391646..cdca8216 100644
--- a/tests/unit/specs/templates/postEmbed.template.test.js
+++ b/tests/unit/specs/templates/postEmbed.template.test.js
@@ -390,7 +390,11 @@ describe("postEmbedTemplate - external links", () => {
},
labeler: null,
};
- const result = postEmbedTemplate({ embed, mediaLabel, isAuthenticated: true });
+ const result = postEmbedTemplate({
+ embed,
+ mediaLabel,
+ isAuthenticated: true,
+ });
const container = document.createElement("div");
render(result, container);
const warning = container.querySelector("moderation-warning");
@@ -1208,6 +1212,11 @@ describe("postEmbedTemplate - record embeds", () => {
});
const card = container.querySelector(".starter-pack-embed");
assert(card !== null);
+ assert.deepEqual(
+ card.querySelector("a").getAttribute("href"),
+ "/profile/creator.bsky.social/starter-pack/cool-pack",
+ );
+ assert.deepEqual(card.querySelector("a").getAttribute("target"), null);
assert(card.textContent.includes("Cool Pack"));
assert(card.textContent.includes("People to follow"));
assert(card.textContent.includes("@creator.bsky.social"));
diff --git a/tests/unit/specs/templates/profileFeed.template.test.js b/tests/unit/specs/templates/profileFeed.template.test.js
index 3def41e0..4ce5b54a 100644
--- a/tests/unit/specs/templates/profileFeed.template.test.js
+++ b/tests/unit/specs/templates/profileFeed.template.test.js
@@ -406,6 +406,48 @@ describe("profileFeedTemplate", () => {
);
});
+ it("should hide no-unauthenticated profiles when not authenticated", () => {
+ const hiddenActor = {
+ ...mockActor,
+ did: "did:plc:hidden",
+ handle: "hidden.bsky.social",
+ labels: [{ val: "!no-unauthenticated", src: "did:plc:hidden" }],
+ };
+ render(
+ profileFeedTemplate({
+ profiles: [mockActor, hiddenActor],
+ hasMore: false,
+ isAuthenticated: false,
+ }),
+ container,
+ );
+ const items = container.querySelectorAll(".profile-list-item");
+ assert.deepEqual(items.length, 1);
+ assert(container.textContent.includes("testuser.bsky.social"));
+ assert(!container.textContent.includes("hidden.bsky.social"));
+ });
+
+ it("should show no-unauthenticated profiles when authenticated", () => {
+ const hiddenActor = {
+ ...mockActor,
+ did: "did:plc:hidden",
+ handle: "hidden.bsky.social",
+ labels: [{ val: "!no-unauthenticated", src: "did:plc:hidden" }],
+ };
+ render(
+ profileFeedTemplate({
+ profiles: [mockActor, hiddenActor],
+ hasMore: false,
+ isAuthenticated: true,
+ }),
+ container,
+ );
+ assert.deepEqual(
+ container.querySelectorAll(".profile-list-item").length,
+ 2,
+ );
+ });
+
it("should render 10 skeletons by default when loading", () => {
const result = profileFeedTemplate({ profiles: null, hasMore: false });
render(result, container);
+ ${activeTab === "people"
+ ? html`
+
+ ${profileFeedTemplate({
+ profiles: members,
+ hasMore: false,
+ emptyMessage: "This starter pack has no members.",
+ showEndMessage: true,
+ isAuthenticated,
+ currentUserDid: currentUser?.did ?? null,
+ profileInteractionHandler,
+ pluginService,
+ })}
+
`
+ : activeTab === "feeds"
+ ? feedsFeedTemplate({
+ items: feeds,
+ renderItem: (feedGenerator) =>
+ feedGeneratorListItemTemplate({
+ feedGenerator,
+ currentUserDid: currentUser?.did ?? null,
+ }),
+ })
+ : html`
+ ${postFeedTemplate({
+ feed,
+ currentUser,
+ isAuthenticated,
+ hiddenPostUris,
+ onLoadMore: () => loadFeed(listUri),
+ postInteractionHandler,
+ pluginService,
+ showEndMessage: true,
+ })}
+
`}
+