Add team invite test

Author: ostenbom

app/(dashboard)/dashboard/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Loader2, PlusCircle } from "lucide-react";
-import { Suspense, useActionState } from "react";
+import { Suspense, useActionState, useEffect } from "react";
 import useSWR from "swr";
 import { inviteTeamMember, removeTeamMember } from "@/app/(login)/actions";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
@@ -21,6 +21,7 @@ import type { TeamDataWithMembers, User } from "@/lib/db/schema";
 type ActionState = {
 	error?: string;
 	success?: string;
+	id?: number;
 };
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
@@ -123,7 +124,11 @@ function TeamMembers() {
 			<CardContent>
 				<ul className="space-y-4">
 					{teamData.teamMembers.map((member, index) => (
-						<li key={member.id} className="flex items-center justify-between">
+						<li
+							data-testid="team-member"
+							key={member.id}
+							className="flex items-center justify-between"
+						>
 							<div className="flex items-center space-x-4">
 								<Avatar>
 									{/* 
@@ -143,10 +148,13 @@ function TeamMembers() {
 									</AvatarFallback>
 								</Avatar>
 								<div>
-									<p className="font-medium">
+									<p data-testid="team-member-name" className="font-medium">
 										{getUserDisplayName(member.user)}
 									</p>
-									<p className="text-sm text-muted-foreground capitalize">
+									<p
+										data-testid="team-member-role"
+										className="text-sm text-muted-foreground capitalize"
+									>
 										{member.role}
 									</p>
 								</div>
@@ -193,6 +201,12 @@ function InviteTeamMember() {
 		FormData
 	>(inviteTeamMember, {});
 
+	useEffect(() => {
+		if (inviteState?.id) {
+			console.log("[inviteState]", inviteState.id);
+		}
+	}, [inviteState]);
+
 	return (
 		<Card>
 			<CardHeader>

app/(login)/actions.ts

@@ -330,13 +330,16 @@ export const inviteTeamMember = validatedActionWithUser(
 		}
 
 		// Create a new invitation
-		await db.insert(invitations).values({
-			teamId: userWithTeam.teamId,
-			email,
-			role,
-			invitedBy: user.id,
-			status: "pending",
-		});
+		const invitation = await db
+			.insert(invitations)
+			.values({
+				teamId: userWithTeam.teamId,
+				email,
+				role,
+				invitedBy: user.id,
+				status: "pending",
+			})
+			.returning();
 
 		await logActivity(
 			userWithTeam.teamId,
@@ -347,6 +350,6 @@ export const inviteTeamMember = validatedActionWithUser(
 		// TODO: Send invitation email and include ?inviteId={id} to sign-up URL
 		// await sendInvitationEmail(email, userWithTeam.team.name, role)
 
-		return { success: "Invitation sent successfully" };
+		return { success: "Invitation sent successfully", id: invitation[0].id };
 	},
 );

tests/team-invitation.spec.ts

@@ -0,0 +1,94 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Team Invitation Flow", () => {
+	test("should successfully invite a team member and complete signup process", async ({
+		page,
+		context,
+	}) => {
+		const newUserEmail = `testuser${Date.now()}@example.com`;
+		let invitationId: string | null = null;
+
+		const existingMemberName =
+			await test.step("Navigate to dashboard and verify current team member", async () => {
+				await page.goto("/dashboard");
+				await expect(
+					page.getByRole("heading", { name: "Team Settings" }),
+				).toBeVisible();
+
+				const existingMember = await page.getByTestId("team-member");
+				const existingMemberName = await existingMember
+					.getByTestId("team-member-name")
+					.textContent();
+				if (!existingMemberName) {
+					throw new Error("Existing member name not found");
+				}
+				expect(
+					await existingMember.getByTestId("team-member-role"),
+				).toContainText("owner");
+
+				return existingMemberName;
+			});
+
+		await test.step("Send team invitation", async () => {
+			page.on("console", (msg) => {
+				const text = msg.text();
+				const match = text.match(/\[inviteState\]\s+(\d+)/);
+				if (match) {
+					invitationId = match[1];
+					console.log(`Captured invitation ID: ${invitationId}`);
+				}
+			});
+
+			await page.getByRole("textbox", { name: "Email" }).fill(newUserEmail);
+			await expect(page.getByRole("radio", { name: "Member" })).toBeChecked();
+			await page.getByRole("button", { name: "Invite Member" }).click();
+			await expect(
+				page.getByText("Invitation sent successfully"),
+			).toBeVisible();
+
+			await page.waitForTimeout(1000);
+			expect(invitationId).not.toBeNull();
+		});
+
+		await test.step("Sign out current user", async () => {
+			await page.getByTestId("user-menu-trigger").click();
+			await page.getByRole("button", { name: "Sign out" }).click();
+		});
+
+		await test.step("Complete signup process with invitation", async () => {
+			await page.goto("/sign-up?inviteId=" + invitationId);
+			await expect(
+				page.getByRole("heading", { name: "Create your account" }),
+			).toBeVisible();
+
+			await page.getByRole("textbox", { name: "Email" }).fill(newUserEmail);
+			await page
+				.getByRole("textbox", { name: "Password" })
+				.fill("testpassword123");
+			await page.getByRole("button", { name: "Sign up" }).click();
+		});
+
+		await test.step("Verify successful team member addition", async () => {
+			await expect(
+				page.getByRole("heading", { name: "Team Settings" }),
+			).toBeVisible();
+			await expect(page).toHaveURL("/dashboard");
+
+			const firstTeamMember = await page.getByTestId("team-member").first();
+			expect(firstTeamMember.getByTestId("team-member-name")).toContainText(
+				existingMemberName,
+			);
+			expect(firstTeamMember.getByTestId("team-member-role")).toContainText(
+				"owner",
+			);
+
+			const secondTeamMember = await page.getByTestId("team-member").nth(1);
+			expect(secondTeamMember.getByTestId("team-member-name")).toContainText(
+				newUserEmail,
+			);
+			expect(secondTeamMember.getByTestId("team-member-role")).toContainText(
+				"member",
+			);
+		});
+	});
+});

tutorial.config.ts

@@ -37,6 +37,7 @@ export const tutorialConfig: TutorialConfig = {
 				"tests/change-name.spec.ts",
 				"tests/plan-upgrade.spec.ts",
 				"tests/change-email.spec.ts",
+				"tests/team-invitation.spec.ts",
 			],
 		},
 		{

tutorial/stage-2-generated-tests/generate-tests-playwright-mcp.mdx

@@ -389,6 +389,23 @@ Here are a few more prompts you can try out to generate more tests (don't forget
 - verify that the new email is displayed on the general page in the email field.
 ```
 
+#### Invite a new user
+```
+# Test scenario
+- Navigate to the dashboard at /dashboard.
+- Navigate to the team settings section.
+- Copy the name/email of the currently only team member.
+- Fill in the Invite Team Member email field with a new randomly generated email.
+- Click the "Invite" button.
+- The application will console.log the invitation id in the format [inviteState] {id}.
+r
+- Sign out
+- Sign up with the new email and password "testpassword123".
+- Verify that we are logged in and on the team settings page.
+- Verify that there are two team members in the team members list.
+- Verify that the new team member's name/email is displayed in the team members list.
+```
+
 
 
 ## List of bugs we found and fixed in the course of generating these tests