more tests wip

playwright.config.ts

@@ -16,7 +16,7 @@ const config: PlaywrightTestConfig = {
 	expect: {
 		timeout: 3000
 	},
-	// timeout: 10000,
+	timeout: 10000,
 	testDir: 'tests',
 	use: {
 		locale: 'en-US',

prisma/constants.ts

@@ -1,8 +1,3 @@
-export const PHONES = [
-	'+12015550121',
-	'+12015550122',
-	'+12015550123',
-	'+12015550124',
-	'+12015550125',
-	'+12015550126'
-];
+export const USERS_WITH_NOTHING = [1, 2, 7];
+export const USERS_WITH_EMPTY_HOUSEHOLD = [3, 4];
+export const USERS_WITH_ACTIVE_SESSION = [2, 4, 6, 7];

prisma/seed.ts

@@ -1,16 +1,20 @@
 import { PrismaClient } from '@prisma/client';
+import { USERS_WITH_ACTIVE_SESSION, USERS_WITH_EMPTY_HOUSEHOLD, USERS_WITH_NOTHING } from './constants';
 import SeedUtils from './utils';
 
 const prisma = new PrismaClient();
 
 async function main() {
 	const utils = new SeedUtils(new Date(), prisma);
+
+	await utils.deleteAllHouseholds();
+
 	await Promise.all([
 		utils.deleteAllFriendRequests(),
 		utils.createExpiredLink(1),
-		...[1, 2].map((userInd) => utils.createUserWithNothing(userInd)),
-		...[3, 4].map((userInd) => utils.createUserWithEmptyHousehold(userInd)),
-		...[2, 4, 6].map((userInd) => utils.createActiveSession(userInd)),
+		...USERS_WITH_NOTHING.map((userInd) => utils.createUserWithNothing(userInd)),
+		...USERS_WITH_EMPTY_HOUSEHOLD.map((userInd) => utils.createUserWithEmptyHousehold(userInd)),
+		...USERS_WITH_ACTIVE_SESSION.map((userInd) => utils.createActiveSession(userInd)),
 		utils.createUserWithEmptyHousehold(5),
 		utils.createUserWithKid(6),
 	]);

prisma/utils.ts

@@ -9,7 +9,8 @@ export default class SeedUtils {
 		'+12015550123',
 		'+12015550124',
 		'+12015550125',
-		'+12015550126'
+		'+12015550126',
+		'+12015550127'
 	];
 
 	constructor(now: Date, prisma: PrismaClient) {
@@ -100,6 +101,15 @@ export default class SeedUtils {
 			.catch(() => console.log('No friend request table to delete'));
 	}
 
+	async deleteAllHouseholds() {
+		await this.#prisma.householdChild
+			.deleteMany()
+			.catch(() => console.log('No household child table to delete'));
+		await this.#prisma.household
+			.deleteMany()
+			.catch(() => console.log('No household table to delete'));
+	}
+
 	async createExpiredLink(userInd: number) {
 		const expiredLink = {
 			token: '3e99472f1003794c',

src/lib/components/Dashboard/ScheduleTable.svelte

@@ -66,9 +66,7 @@
 	.flex {
 		display: flex;
 	}
-	.border-right {
-		border-right: 1px solid #dddddd;
-	}
+
 	table {
 		border-collapse: collapse;
 		border: 1px solid #dddddd;

src/routes/household/+page.svelte

@@ -411,7 +411,7 @@
 		{/if}
 		<p class="subtitle">Kids</p>
 		{#each kids as kid, ind}
-			<div class="card">
+			<div class="card kid-card">
 				<p>{kid.firstName} {kid.lastName ?? ''}</p>
 				<p class="small-font">Pronouns: {PRONOUNS[kid.pronouns]}</p>
 				<p class="small-font">Age: {isNaN(kid.age) ? 'N/A' : kid.age}</p>
@@ -421,26 +421,34 @@
 		{/each}
 
 		<form method="POST" action="/db" id="kid-form" on:submit|preventDefault={addKid}>
-			<label class="subtitle-2" for="first-name">First Name<span class="red">*</span></label>
-			<input type="text" name="first-name" required />
-
-			<label class="subtitle-2" for="last-name">Last Name</label>
-			<input type="text" name="last-name" />
-
-			<label class="subtitle-2" for="pronouns">Pronouns<span class="red">*</span></label>
-			<select name="pronouns" required>
-				<option value="" />
-				{#each Object.entries(PRONOUNS) as pronoun}
-					<option value={pronoun[0]}>{pronoun[1]}</option>
-				{/each}
-			</select>
-
-			<label class="subtitle-2" for="dob">Date of Birth</label>
-			<input
-				type="date"
-				name="dob"
-				max={`${now.getFullYear()}-${now.getMonth()}-${now.getDay()}`}
-			/>
+			<label class="subtitle-2" for="first-name"
+				>First Name<span class="red">*</span><br />
+				<input type="text" name="first-name" required />
+			</label>
+
+			<label class="subtitle-2" for="last-name"
+				>Last Name<br />
+				<input type="text" name="last-name" />
+			</label>
+
+			<label class="subtitle-2" for="pronouns"
+				>Pronouns<span class="red">*</span><br />
+				<select name="pronouns" required>
+					<option value="" />
+					{#each Object.entries(PRONOUNS) as pronoun}
+						<option value={pronoun[0]}>{pronoun[1]}</option>
+					{/each}
+				</select>
+			</label>
+
+			<label class="subtitle-2" for="dob"
+				>Date of Birth<br />
+				<input
+					type="date"
+					name="dob"
+					max={`${now.getFullYear()}-${now.getMonth()}-${now.getDay()}`}
+				/>
+			</label>
 
 			<div id="btn-container-2"><button class="text-btn">Save Child</button></div>
 		</form>

tests/household.spec.ts

@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test';
+import { run } from '../prisma/seed';
+
+const host = 'http://localhost:5173';
+
+test.beforeAll(async () => {
+    await run();
+});
+
+test('User can create new kid', async ({ page, context }) => {
+    await context.addCookies([
+		{
+			name: 'session',
+			value: 'user7session',
+			url: host
+		}
+	]);
+	await page.goto(host);
+	await page.waitForURL(`${host}/household`);
+    await page.waitForTimeout(2000)
+    expect(await page.locator('.kid-card').count()).toBe(0)
+
+    await page.locator('input[name="first-name"]').fill('FIRST_NAME')
+    await page.locator('input[name="last-name"]').fill('LAST_NAME')
+	await page.locator('select[name="pronouns"]').selectOption('SHE_HER_HERS');
+
+    await page.getByText('Save Child').click();
+    await page.locator('.kid-card').first().waitFor();
+    expect(await page.locator('.kid-card').count()).toBe(1)
+});