From 372743433eb9b56951aee70c1fdd7d26ef50f69a Mon Sep 17 00:00:00 2001
From: Jessica Ho <hojessica1230@gmail.com>
Date: Sun, 25 Feb 2024 05:40:15 +0000
Subject: [PATCH] fix profile test

---
 package.json                    |  2 +-
 prisma/seed.ts                  |  2 +-
 prisma/utils.ts                 | 29 ++++++++------
 src/routes/profile/+page.svelte | 69 ++++++++++++++++++++-------------
 tests/profile.spec.ts           | 24 ++++++++----
 5 files changed, 76 insertions(+), 50 deletions(-)

diff --git a/package.json b/package.json
index cfa8f36..6131627 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
 		"build": "vite build",
 		"nodebuild": "NODE_MODE_ADAPTER=1 vite build",
 		"preview": "vite preview",
-		"test": "playwright test",
+		"test": "rm -f screenshot.png && playwright test",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test:unit": "vitest",
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 0f71430..23d8467 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -12,7 +12,7 @@ async function main() {
 		...[3, 4].map((userInd) => utils.createUserWithEmptyHousehold(userInd)),
 		...[2, 4, 6].map((userInd) => utils.createActiveSession(userInd)),
 		utils.createUserWithEmptyHousehold(5),
-		utils.createUserWithKid(6)
+		utils.createUserWithKid(6),
 	]);
 
 	await Promise.all([
diff --git a/prisma/utils.ts b/prisma/utils.ts
index 8bfdf41..ce62c55 100644
--- a/prisma/utils.ts
+++ b/prisma/utils.ts
@@ -1,4 +1,4 @@
-import { PrismaClient, Pronoun } from '@prisma/client';
+import { Prisma, PrismaClient, Pronoun } from '@prisma/client';
 
 export default class SeedUtils {
 	#now: Date;
@@ -11,10 +11,10 @@ export default class SeedUtils {
 		'+12015550125',
 		'+12015550126'
 	];
-	
+
 	constructor(now: Date, prisma: PrismaClient) {
 		this.#now = now;
-		this.#prisma = prisma
+		this.#prisma = prisma;
 	}
 
 	permsYes(phone: string) {
@@ -117,7 +117,7 @@ export default class SeedUtils {
 
 	async createUserWithNothing(userInd: number) {
 		const phone = this.PHONES[userInd - 1];
-	
+
 		await this.#prisma.user.upsert({
 			where: {
 				phone
@@ -132,10 +132,10 @@ export default class SeedUtils {
 
 	async createActiveSession(userInd: number) {
 		const phone = this.PHONES[userInd - 1];
-	
+
 		const expires = new Date(this.#now);
 		expires.setHours(expires.getHours() + 1);
-	
+
 		const userSessionToken = `user${userInd}session`;
 		const session = {
 			token: userSessionToken,
@@ -157,7 +157,7 @@ export default class SeedUtils {
 			...this.basicUser(userInd),
 			...this.emptyHousehold(userInd)
 		};
-	
+
 		await this.#prisma.user.upsert({
 			where: {
 				phone
@@ -177,7 +177,7 @@ export default class SeedUtils {
 			fromHouseholdId: fromUserInd,
 			fromUserId: fromUserInd
 		};
-	
+
 		await this.#prisma.friendRequest.upsert({
 			where: {
 				id: toUserInd
@@ -210,7 +210,7 @@ export default class SeedUtils {
 			householdId: fromUserInd,
 			fromUserId: fromUserInd
 		};
-	
+
 		await this.#prisma.joinHouseholdRequest.upsert({
 			where: {
 				id: toUserInd
@@ -225,9 +225,9 @@ export default class SeedUtils {
 			...this.basicUser(userInd),
 			...this.householdWithKid(userInd, 1)
 		};
-	
+
 		const phone = this.PHONES[userInd - 1];
-	
+
 		await this.#prisma.user.upsert({
 			where: {
 				phone
@@ -239,5 +239,10 @@ export default class SeedUtils {
 			}
 		});
 	}
-	
+
+	async deleteUsers(where: Prisma.UserWhereUniqueInput) {
+		await this.#prisma.user.deleteMany({
+			where
+		});
+	}
 }
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index d571a31..7fcf95c 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -139,34 +139,44 @@
 	{/if}
 
 	<form method="POST" action="/db" on:submit|preventDefault={saveToDB}>
-		<label class="subtitle" for="first-name">First Name<span class="red">*</span></label>
-		<input type="text" name="first-name" id="first-name" bind:value={firstName} required />
-
-		<label class="subtitle" for="last-name">Last Name</label>
-		<input type="text" name="last-name" bind:value={lastName} />
-
-		<label class="subtitle" for="pronouns">Pronouns<span class="red">*</span></label>
-		<select name="pronouns" id="pronouns" bind:value={pronouns} required>
-			<option value="" />
-			{#each Object.entries(PRONOUNS) as pronoun}
-				<option value={pronoun[0]}>{pronoun[1]}</option>
-			{/each}
-		</select>
-
-		<label class="subtitle" for="zone">Zone<span class="red">*</span></label>
-		<select name="zone" id="zone" bind:value={timeZone} required on:change={onChangeZone}>
-			{#each Intl.supportedValuesOf('timeZone') as zone}
-				<option value={zone}>{zone}</option>
-			{/each}
-		</select>
-
-		<label class="subtitle" for="locale">Language<span class="red">*</span></label>
-		<select name="locale" bind:value={locale} required>
-			<option value="" />
-			{#each $page.data.LANGUAGES as lang}
-				<option value={lang.name}>{lang.name}</option>
-			{/each}
-		</select>
+		<label class="subtitle" for="first-name"
+			>First Name<span class="red">*</span><br />
+			<input type="text" name="first-name" id="first-name" bind:value={firstName} required />
+		</label>
+
+		<label class="subtitle" for="last-name"
+			>Last Name<br />
+			<input type="text" name="last-name" id="last-name" bind:value={lastName} />
+		</label>
+
+		<label class="subtitle" for="pronouns"
+			>Pronouns<span class="red">*</span><br />
+			<select name="pronouns" id="pronouns" bind:value={pronouns} required>
+				<option value="" />
+				{#each Object.entries(PRONOUNS) as pronoun}
+					<option value={pronoun[0]}>{pronoun[1]}</option>
+				{/each}
+			</select>
+		</label>
+
+		<label class="subtitle" for="zone"
+			>Zone<span class="red">*</span><br />
+			<select name="zone" id="zone" bind:value={timeZone} required on:change={onChangeZone}>
+				{#each Intl.supportedValuesOf('timeZone') as zone}
+					<option value={zone}>{zone}</option>
+				{/each}
+			</select>
+		</label>
+
+		<label class="subtitle" for="locale"
+			>Language<span class="red">*</span><br />
+			<select name="locale" id="locale" bind:value={locale} required>
+				<option value="" />
+				{#each $page.data.LANGUAGES as lang}
+					<option value={lang.name}>{lang.name}</option>
+				{/each}
+			</select>
+		</label>
 
 		<label class="subtitle" for="email">Email</label>
 		<input type="text" name="email" bind:value={email} />
@@ -235,6 +245,9 @@
 </div>
 
 <style>
+	.subtitle > * {
+		font-weight: revert;
+	}
 	.subtitle-2 {
 		text-align: center;
 		font-size: 24px;
diff --git a/tests/profile.spec.ts b/tests/profile.spec.ts
index 372f9bd..3d9d4b6 100644
--- a/tests/profile.spec.ts
+++ b/tests/profile.spec.ts
@@ -1,17 +1,22 @@
 import { test, type ConsoleMessage } from '@playwright/test';
-import { run } from '../prisma/seed';
+import { PrismaClient } from '@prisma/client';
+import SeedUtils from '../prisma/utils';
 
 const host = 'http://localhost:5173';
+const phone = '+12016660127';
 
 test.beforeEach(async () => {
-	await run();
+	const prisma = new PrismaClient();
+	const utils = new SeedUtils(new Date(), prisma);
+	await utils.deleteUsers({ phone })
+	await prisma.$disconnect();
 });
 
 test.only('User can create new profile with valid phone number', async ({ page }) => {
 	await page.goto(host);
 
 	await page.waitForTimeout(3000);
-	await page.getByRole('textbox').fill('2016660127');
+	await page.getByRole('textbox').fill(phone);
 	await page.getByRole('button').click();
 
 	let token: string;
@@ -36,11 +41,14 @@ test.only('User can create new profile with valid phone number', async ({ page }
 	await page.waitForURL(`${host}/profile`);
 
 	// if this shows up, then that means the modal is open, which means this is a brand new user, as expected
-	await page.getByText('Accept').click();
-
-	await page.getByLabel('first-name').fill('FIRST_NAME');
-	await page.getByLabel('last-name').fill('LAST_NAME');
-	await page.getByLabel('pronouns').selectOption('SHE_HER_HERS');
+	const acceptBtn = page.locator('dialog button');
+	await acceptBtn.waitFor();
+	await acceptBtn.click()
+	await acceptBtn.waitFor({ state: 'hidden'});
+
+	await page.getByLabel('First Name').fill('FIRST_NAME');
+	await page.getByLabel('Last Name').fill('LAST_NAME');
+	await page.getByLabel('Pronouns').selectOption('SHE_HER_HERS');
 
 	await page.getByText('Save').click();
 	await page.waitForURL(`${host}/household`);