Skip to content
sendou.ink docs

User card · E2E tests

0 modules · 0 exports · 1 repository · 5 e2e tests · 3 routes

  • SSendou
  • NN-ZAP
  • Arrange data setup
  • Act what the user does
  • Assert what is expected
e2e/user-card.spec.ts

User card

edits banner and bio from the looking page

Sendouuser-card.spec.ts:12

Renders/q/looking/user-card/edit

Setup
Arrange
  1. Create SQ group member user ids Sendou
    await factories.SQGroupFactory.create({ memberUserIds: [ADMIN_ID] });
SSendou
SendouQ looking page
Act
  1. Open the SendouQ looking page
    await looking.goto();
  2. Open member card “Sendou” → card
    const card = await looking.ownGroupCard.openMemberCard("Sendou");
  3. Open edit page → cardEdit
    const cardEdit = await card.openEditPage();
Assert
  1. the page URL is /\/user-card\/edit/
    await expect(page).toHaveURL(/\/user-card\/edit/);
Act
  1. newBio = "New bio from e2e test"
    const newBio = "New bio from e2e test";
  2. Fill short bio with newBio
    await cardEdit.form.fill("shortBio", newBio);
  3. Select “COLOR” for banner type
    await cardEdit.form.select("bannerType", "COLOR");
  4. Select banner color “#4169e1”
    await cardEdit.selectBannerColor("#4169e1");
  5. Save
    await cardEdit.save();
Assert
  1. the page URL is SENDOUQ_LOOKING_PAGE
    await expect(page).toHaveURL(SENDOUQ_LOOKING_PAGE);
Act
  1. Open member card “Sendou”
    await looking.ownGroupCard.openMemberCard("Sendou");
Assert
  1. card.bio(newBio) is visible
    await expect(card.bio(newBio)).toBeVisible();
  2. card.locators.banner have CSS “background-color”, “rgb(65, 105, 225)”
    await expect(card.locators.banner).toHaveCSS(
	"background-color",
	"rgb(65, 105, 225)",
);
Source
test("edits banner and bio from the looking page", async ({
	page,
	factories,
}) => {
	await factories.SQGroupFactory.create({ memberUserIds: [ADMIN_ID] });

	await impersonate(page);

	const looking = new SendouQLookingPage(page);
	await looking.goto();

	const card = await looking.ownGroupCard.openMemberCard("Sendou");
	const cardEdit = await card.openEditPage();
	await expect(page).toHaveURL(/\/user-card\/edit/);

	const newBio = "New bio from e2e test";
	await cardEdit.form.fill("shortBio", newBio);
	await cardEdit.form.select("bannerType", "COLOR");
	await cardEdit.selectBannerColor("#4169e1");

	await cardEdit.save();
	await expect(page).toHaveURL(SENDOUQ_LOOKING_PAGE);

	await looking.ownGroupCard.openMemberCard("Sendou");
	await expect(card.bio(newBio)).toBeVisible();
	await expect(card.locators.banner).toHaveCSS(
		"background-color",
		"rgb(65, 105, 225)",
	);
})

shows the verified peak XP of the selected division

Sendouuser-card.spec.ts:43

Renders/q/looking/user-card/edit

Setup
Arrange
  1. Create SQ group member user ids Sendou
    await factories.SQGroupFactory.create({ memberUserIds: [ADMIN_ID] });
  2. Create X rank placement player Sendou power 3010 region “WEST”
    await factories.XRankPlacementFactory.create({
	playerUserId: ADMIN_ID,
	power: 3010,
	region: "WEST",
});
  3. Create X rank placement player Sendou power 3000 region “JPN” refresh peak xp true
    await factories.XRankPlacementFactory.create(
	{ playerUserId: ADMIN_ID, power: 3000, region: "JPN" },
	{ refreshPeakXp: true },
);
SSendou
SendouQ looking page
Act
  1. Open the SendouQ looking page
    await looking.goto();
  2. Open member card “Sendou” → card
    const card = await looking.ownGroupCard.openMemberCard("Sendou");
Assert
  1. card.xp(3010) is visible
    await expect(card.xp(3010)).toBeVisible();
Act
  1. Open edit page → cardEdit
    const cardEdit = await card.openEditPage();
  2. Select “JPN” for xp division
    await cardEdit.form.select("xpDivision", "JPN");
  3. Save
    await cardEdit.save();
Assert
  1. the page URL is SENDOUQ_LOOKING_PAGE
    await expect(page).toHaveURL(SENDOUQ_LOOKING_PAGE);
Act
  1. Open member card “Sendou”
    await looking.ownGroupCard.openMemberCard("Sendou");
Assert
  1. card.xp(3000) is visible
    await expect(card.xp(3000)).toBeVisible();
  2. card.xp(3010) is not visible
    await expect(card.xp(3010)).not.toBeVisible();
Source
test("shows the verified peak XP of the selected division", async ({
	page,
	factories,
}) => {
	await factories.SQGroupFactory.create({ memberUserIds: [ADMIN_ID] });
	await factories.XRankPlacementFactory.create({
		playerUserId: ADMIN_ID,
		power: 3010,
		region: "WEST",
	});
	await factories.XRankPlacementFactory.create(
		{ playerUserId: ADMIN_ID, power: 3000, region: "JPN" },
		{ refreshPeakXp: true },
	);

	await impersonate(page);

	const looking = new SendouQLookingPage(page);
	await looking.goto();

	const card = await looking.ownGroupCard.openMemberCard("Sendou");
	await expect(card.xp(3010)).toBeVisible();

	const cardEdit = await card.openEditPage();
	await cardEdit.form.select("xpDivision", "JPN");
	await cardEdit.save();
	await expect(page).toHaveURL(SENDOUQ_LOOKING_PAGE);

	await looking.ownGroupCard.openMemberCard("Sendou");
	await expect(card.xp(3000)).toBeVisible();
	await expect(card.xp(3010)).not.toBeVisible();
})

User card friend request

receiver sees add friend button that accepts the incoming request

N-ZAPSendouuser-card.spec.ts:78

Renders/friends/lfg

Setup
Arrange
  1. Create LFG post author N-ZAP
    await factories.LFGPostFactory.create({ authorId: NZAP_TEST_ID });
NN-ZAP
Friends page
Act
  1. Open the friends page
    await friends.goto();
  2. Send request “Sendou”
    await friends.sendRequest("Sendou");
Assert
  1. cancel request button is visible
    await expect(friends.locators.cancelRequestButton).toBeVisible();
SSendou
LFG page
Act
  1. Open the LFG page
    await lfg.goto();
  2. Open user card “N-ZAP” → card
    const card = await lfg.openUserCard("N-ZAP");
Assert
  1. card.locators.acceptFriendRequestButton is visible
    await expect(card.locators.acceptFriendRequestButton).toBeVisible();
  2. card.locators.pendingFriendRequestButton is not visible
    await expect(card.locators.pendingFriendRequestButton).not.toBeVisible();
Act
  1. Accept friend request
    await card.acceptFriendRequest();
Assert
  1. card.locators.friendRequestAcceptedToast is in the page
    await expect(card.locators.friendRequestAcceptedToast).toBeAttached();
  2. card.locators.acceptFriendRequestButton is not visible
    await expect(card.locators.acceptFriendRequestButton).not.toBeVisible();
  3. card.locators.sendFriendRequestButton is not visible
    await expect(card.locators.sendFriendRequestButton).not.toBeVisible();
Friends page
Act
  1. Open the friends page
    await friends.goto();
Assert
  1. first friend button “N-ZAP” is visible
    await expect(friends.friendButton("N-ZAP").first()).toBeVisible();
Source
test("receiver sees add friend button that accepts the incoming request", async ({
	page,
	factories,
}) => {
	await factories.LFGPostFactory.create({ authorId: NZAP_TEST_ID });

	await impersonate(page, NZAP_TEST_ID);

	const friends = new FriendsPage(page);
	await friends.goto();
	await friends.sendRequest("Sendou");
	await expect(friends.locators.cancelRequestButton).toBeVisible();

	await impersonate(page);

	const lfg = new LFGPage(page);
	await lfg.goto();
	const card = await lfg.openUserCard("N-ZAP");

	await expect(card.locators.acceptFriendRequestButton).toBeVisible();
	await expect(card.locators.pendingFriendRequestButton).not.toBeVisible();

	await card.acceptFriendRequest();

	await expect(card.locators.friendRequestAcceptedToast).toBeAttached();
	await expect(card.locators.acceptFriendRequestButton).not.toBeVisible();
	await expect(card.locators.sendFriendRequestButton).not.toBeVisible();

	await friends.goto();
	await expect(friends.friendButton("N-ZAP").first()).toBeVisible();
})

sender still sees pending state on the receiver's card

Sendouuser-card.spec.ts:110

Renders/friends/lfg

Setup
Arrange
  1. Create LFG post author N-ZAP
    await factories.LFGPostFactory.create({ authorId: NZAP_TEST_ID });
SSendou
Friends page
Act
  1. Open the friends page
    await friends.goto();
  2. Send request “N-ZAP”
    await friends.sendRequest("N-ZAP");
Assert
  1. cancel request button is visible
    await expect(friends.locators.cancelRequestButton).toBeVisible();
LFG page
Act
  1. Open the LFG page
    await lfg.goto();
  2. Open user card “N-ZAP” → card
    const card = await lfg.openUserCard("N-ZAP");
Assert
  1. card.locators.pendingFriendRequestButton is visible
    await expect(card.locators.pendingFriendRequestButton).toBeVisible();
  2. card.locators.pendingFriendRequestButton is disabled
    await expect(card.locators.pendingFriendRequestButton).toBeDisabled();
  3. card.locators.acceptFriendRequestButton is not visible
    await expect(card.locators.acceptFriendRequestButton).not.toBeVisible();
Source
test("sender still sees pending state on the receiver's card", async ({
	page,
	factories,
}) => {
	await factories.LFGPostFactory.create({ authorId: NZAP_TEST_ID });

	await impersonate(page);

	const friends = new FriendsPage(page);
	await friends.goto();
	await friends.sendRequest("N-ZAP");
	await expect(friends.locators.cancelRequestButton).toBeVisible();

	const lfg = new LFGPage(page);
	await lfg.goto();
	const card = await lfg.openUserCard("N-ZAP");

	await expect(card.locators.pendingFriendRequestButton).toBeVisible();
	await expect(card.locators.pendingFriendRequestButton).toBeDisabled();
	await expect(card.locators.acceptFriendRequestButton).not.toBeVisible();
})

sending a request does not mark another user's card pending after navigating between user pages

Sendouuser-card.spec.ts:132

Renders/u/:identifier/u/:identifier

Setup
Arrange
  1. otherUsername = "FriendTarget"
    const otherUsername = "FriendTarget";
  2. Create user discord name otherUsername
    await factories.UserFactory.create({ discordName: otherUsername });
SSendou
User page
Act
  1. Open the user page N-ZAP
    await userPage.goto(NZAP_TEST_ID);
  2. Open user card “N-ZAP” → nzapCard
    const nzapCard = await userPage.openUserCard("N-ZAP");
  3. Send friend request
    await nzapCard.sendFriendRequest();
Assert
  1. nzapCard.locators.pendingFriendRequestButton is visible
    await expect(nzapCard.locators.pendingFriendRequestButton).toBeVisible();
Act
  1. Close
    await nzapCard.close();
Global search dialog
Act
  1. Open
    await search.open();
  2. Select type “users”
    await search.selectType("users");
  3. Search otherUsername
    await search.search(otherUsername);
  4. Select option otherUsername
    await search.selectOption(otherUsername);
User page
Assert
  1. username heading otherUsername is visible
    await expect(userPage.usernameHeading(otherUsername)).toBeVisible();
Act
  1. Open user card otherUsername → otherCard
    const otherCard = await userPage.openUserCard(otherUsername);
Assert
  1. otherCard.locators.sendFriendRequestButton is visible
    await expect(otherCard.locators.sendFriendRequestButton).toBeVisible();
  2. otherCard.locators.pendingFriendRequestButton is not visible
    await expect(
	otherCard.locators.pendingFriendRequestButton,
).not.toBeVisible();
Source
test("sending a request does not mark another user's card pending after navigating between user pages", async ({
	page,
	factories,
}) => {
	const otherUsername = "FriendTarget";
	await factories.UserFactory.create({ discordName: otherUsername });

	await impersonate(page);

	const userPage = new UserPage(page);
	await userPage.goto(NZAP_TEST_ID);

	const nzapCard = await userPage.openUserCard("N-ZAP");
	await nzapCard.sendFriendRequest();
	await expect(nzapCard.locators.pendingFriendRequestButton).toBeVisible();
	await nzapCard.close();

	const search = new GlobalSearchDialog(page);
	await search.open();
	await search.selectType("users");
	await search.search(otherUsername);
	await search.selectOption(otherUsername);
	await expect(userPage.usernameHeading(otherUsername)).toBeVisible();

	const otherCard = await userPage.openUserCard(otherUsername);
	await expect(otherCard.locators.sendFriendRequestButton).toBeVisible();
	await expect(
		otherCard.locators.pendingFriendRequestButton,
	).not.toBeVisible();
})