tests for exercise 3

exercises/03.forms/03.solution.types/action.test.ts

@@ -0,0 +1,13 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+
+import './index.tsx'
+
+const form = await dtl.waitFor(() => {
+	const form = document.querySelector('form')
+	expect(form).toBeInTheDocument()
+	return form
+})
+
+await testStep('Form has correct action', async () => {
+	expect(form).toHaveAttribute('action', 'api/onboarding')
+})

exercises/03.forms/03.solution.types/form.test.ts

@@ -0,0 +1,54 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+
+import './index.tsx'
+
+await testStep('Form is rendered', () => {
+	return dtl.waitFor(() => {
+		const form = document.querySelector('form')
+		expect(form).toBeInTheDocument()
+		return form
+	})
+})
+
+await testStep('Username input is rendered', async () => {
+	const usernameInput = await screen.findByLabelText(/username/i)
+	expect(usernameInput).toHaveAttribute('name', 'username')
+})
+
+await testStep('Password input is rendered', async () => {
+	const passwordInput = await screen.findByLabelText(/password/i)
+	expect(passwordInput).toHaveAttribute('name', 'password')
+	expect(passwordInput).toHaveAttribute('type', 'password')
+})
+
+await testStep('Age input is rendered', async () => {
+	const ageInput = await screen.findByLabelText(/age/i)
+	expect(ageInput).toHaveAttribute('name', 'age')
+	expect(ageInput).toHaveAttribute('type', 'number')
+	expect(ageInput).toHaveAttribute('min', '0')
+	expect(ageInput).toHaveAttribute('max', '200')
+})
+
+await testStep('Photo input is rendered', async () => {
+	const photoInput = await screen.findByLabelText(/photo/i)
+	expect(photoInput).toHaveAttribute('name', 'photo')
+	expect(photoInput).toHaveAttribute('type', 'file')
+	expect(photoInput).toHaveAttribute('accept', 'image/*')
+})
+
+await testStep('Favorite Color input is rendered', async () => {
+	const colorInput = await screen.findByLabelText(/favorite color/i)
+	expect(colorInput).toHaveAttribute('name', 'color')
+	expect(colorInput).toHaveAttribute('type', 'color')
+})
+
+await testStep('Start Date input is rendered', async () => {
+	const startDateInput = await screen.findByLabelText(/start date/i)
+	expect(startDateInput).toHaveAttribute('name', 'startDate')
+	expect(startDateInput).toHaveAttribute('type', 'date')
+})
+
+await testStep('Submit button is rendered', () =>
+	screen.findByRole('button', { name: /submit/i }),
+)

exercises/03.forms/04.solution.submit/action.test.ts

@@ -0,0 +1,21 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+
+import './index.tsx'
+
+const form = await dtl.waitFor(() => {
+	const form = document.querySelector('form')
+	expect(form).toBeInTheDocument()
+	return form
+})
+
+await testStep('Form has correct action', async () => {
+	expect(form).toHaveAttribute('action', 'api/onboarding')
+})
+
+await testStep('Form has correct method', async () => {
+	expect(form).toHaveAttribute('method', 'POST')
+})
+
+await testStep('Form has correct encType', async () => {
+	expect(form).toHaveAttribute('encType', 'multipart/form-data')
+})

exercises/03.forms/04.solution.submit/api.test.ts

@@ -0,0 +1,14 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+
+await testStep('POST api/onboarding', async () => {
+	const formData = new FormData()
+	const name = 'Kody Koala'
+	formData.set('name', name)
+	const response = await fetch('api/onboarding', {
+		method: 'POST',
+		body: formData,
+	})
+
+	expect(response.status).toBe(200)
+	expect(await response.text()).toContain(name)
+})

exercises/03.forms/04.solution.submit/form.test.ts

@@ -0,0 +1,54 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+import './index.tsx'
+
+await testStep('Form is rendered', () => {
+	return dtl.waitFor(() => {
+		const form = document.querySelector('form')
+		expect(form).toBeInTheDocument()
+		return form
+	})
+})
+
+await testStep('Username input is rendered', async () => {
+	const usernameInput = await screen.findByLabelText(/username/i)
+	expect(usernameInput).toHaveAttribute('name', 'username')
+})
+
+await testStep('Password input is rendered', async () => {
+	const passwordInput = await screen.findByLabelText(/password/i)
+	expect(passwordInput).toHaveAttribute('name', 'password')
+	expect(passwordInput).toHaveAttribute('type', 'password')
+})
+
+await testStep('Age input is rendered', async () => {
+	const ageInput = await screen.findByLabelText(/age/i)
+	expect(ageInput).toHaveAttribute('name', 'age')
+	expect(ageInput).toHaveAttribute('type', 'number')
+	expect(ageInput).toHaveAttribute('min', '0')
+	expect(ageInput).toHaveAttribute('max', '200')
+})
+
+await testStep('Photo input is rendered', async () => {
+	const photoInput = await screen.findByLabelText(/photo/i)
+	expect(photoInput).toHaveAttribute('name', 'photo')
+	expect(photoInput).toHaveAttribute('type', 'file')
+	expect(photoInput).toHaveAttribute('accept', 'image/*')
+})
+
+await testStep('Favorite Color input is rendered', async () => {
+	const colorInput = await screen.findByLabelText(/favorite color/i)
+	expect(colorInput).toHaveAttribute('name', 'color')
+	expect(colorInput).toHaveAttribute('type', 'color')
+})
+
+await testStep('Start Date input is rendered', async () => {
+	const startDateInput = await screen.findByLabelText(/start date/i)
+	expect(startDateInput).toHaveAttribute('name', 'startDate')
+	expect(startDateInput).toHaveAttribute('type', 'date')
+})
+
+await testStep('Submit button is rendered', () =>
+	screen.findByRole('button', { name: /submit/i }),
+)

exercises/03.forms/04.solution.submit/submit.test.ts

@@ -0,0 +1,53 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+import './index.tsx'
+
+// Mock console.log
+const originalLog = console.log
+const mockLogs: Array<any> = []
+console.log = (...args) => {
+	// Forward all args to the originalLog
+	originalLog(...args)
+
+	// Check if the log is coming from the onSubmit function
+	const stack = new Error().stack
+	if (stack?.includes('onSubmit')) {
+		mockLogs.push(args)
+	}
+}
+
+try {
+	await testStep('Form submission logs correct data', async () => {
+		// Fill out the form
+		const usernameInput = await screen.findByLabelText(/username/i)
+		const passwordInput = await screen.findByLabelText(/password/i)
+		const ageInput = await screen.findByLabelText(/age/i)
+		const colorInput = await screen.findByLabelText(/favorite color/i)
+		const startDateInput = await screen.findByLabelText(/start date/i)
+		const submitButton = await screen.findByRole('button', { name: /submit/i })
+
+		fireEvent.change(usernameInput, { target: { value: 'testuser' } })
+		fireEvent.change(passwordInput, { target: { value: 'password123' } })
+		fireEvent.change(ageInput, { target: { value: '25' } })
+		fireEvent.change(colorInput, { target: { value: '#ff0000' } })
+		fireEvent.change(startDateInput, { target: { value: '2023-01-01' } })
+
+		// Submit the form
+		fireEvent.click(submitButton)
+
+		// Assert that console.log was called with the correct form data
+		expect(mockLogs[0][0]).toEqual(
+			expect.objectContaining({
+				username: 'testuser',
+				password: 'password123',
+				age: '25',
+				color: '#ff0000',
+				startDate: '2023-01-01',
+			}),
+		)
+	})
+} finally {
+	// Restore original console.log after tests
+	console.log = originalLog
+}

exercises/03.forms/05.solution.action/action.test.ts

@@ -0,0 +1,74 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+import './index.tsx'
+
+const form = await dtl.waitFor(() => {
+	const form = document.querySelector('form')
+	expect(form).toBeInTheDocument()
+	return form
+})
+
+await testStep('Form has correct action', async () => {
+	expect(form).toHaveAttribute(
+		'action',
+		expect.stringMatching(/javascript:throw/),
+	)
+})
+
+await testStep('Form has correct method (none)', async () => {
+	expect(form).not.toHaveAttribute('method', 'POST')
+})
+
+await testStep('Form has correct encType (none)', async () => {
+	expect(form).not.toHaveAttribute('encType', 'multipart/form-data')
+})
+
+// Mock console.log
+const originalLog = console.log
+const mockLogs: Array<any> = []
+console.log = (...args) => {
+	// Forward all args to the originalLog
+	originalLog(...args)
+
+	// Check if the log is coming from the action function
+	const stack = new Error().stack
+	if (stack?.includes('action')) {
+		mockLogs.push(args)
+	}
+}
+
+try {
+	await testStep('Form action logs correct data', async () => {
+		// Fill out the form
+		const usernameInput = await screen.findByLabelText(/username/i)
+		const passwordInput = await screen.findByLabelText(/password/i)
+		const ageInput = await screen.findByLabelText(/age/i)
+		const colorInput = await screen.findByLabelText(/favorite color/i)
+		const startDateInput = await screen.findByLabelText(/start date/i)
+		const submitButton = await screen.findByRole('button', { name: /submit/i })
+
+		fireEvent.change(usernameInput, { target: { value: 'testuser' } })
+		fireEvent.change(passwordInput, { target: { value: 'password123' } })
+		fireEvent.change(ageInput, { target: { value: '25' } })
+		fireEvent.change(colorInput, { target: { value: '#ff0000' } })
+		fireEvent.change(startDateInput, { target: { value: '2023-01-01' } })
+
+		// Submit the form
+		fireEvent.click(submitButton)
+
+		// Assert that console.log was called with the correct form data
+		expect(mockLogs[0][0]).toEqual(
+			expect.objectContaining({
+				username: 'testuser',
+				password: 'password123',
+				age: '25',
+				color: '#ff0000',
+				startDate: '2023-01-01',
+			}),
+		)
+	})
+} finally {
+	// Restore original console.log after tests
+	console.log = originalLog
+}

exercises/03.forms/05.solution.action/form.test.ts

@@ -0,0 +1,54 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+
+import './index.tsx'
+
+await testStep('Form is rendered', () => {
+	return dtl.waitFor(() => {
+		const form = document.querySelector('form')
+		expect(form).toBeInTheDocument()
+		return form
+	})
+})
+
+await testStep('Username input is rendered', async () => {
+	const usernameInput = await screen.findByLabelText(/username/i)
+	expect(usernameInput).toHaveAttribute('name', 'username')
+})
+
+await testStep('Password input is rendered', async () => {
+	const passwordInput = await screen.findByLabelText(/password/i)
+	expect(passwordInput).toHaveAttribute('name', 'password')
+	expect(passwordInput).toHaveAttribute('type', 'password')
+})
+
+await testStep('Age input is rendered', async () => {
+	const ageInput = await screen.findByLabelText(/age/i)
+	expect(ageInput).toHaveAttribute('name', 'age')
+	expect(ageInput).toHaveAttribute('type', 'number')
+	expect(ageInput).toHaveAttribute('min', '0')
+	expect(ageInput).toHaveAttribute('max', '200')
+})
+
+await testStep('Photo input is rendered', async () => {
+	const photoInput = await screen.findByLabelText(/photo/i)
+	expect(photoInput).toHaveAttribute('name', 'photo')
+	expect(photoInput).toHaveAttribute('type', 'file')
+	expect(photoInput).toHaveAttribute('accept', 'image/*')
+})
+
+await testStep('Favorite Color input is rendered', async () => {
+	const colorInput = await screen.findByLabelText(/favorite color/i)
+	expect(colorInput).toHaveAttribute('name', 'color')
+	expect(colorInput).toHaveAttribute('type', 'color')
+})
+
+await testStep('Start Date input is rendered', async () => {
+	const startDateInput = await screen.findByLabelText(/start date/i)
+	expect(startDateInput).toHaveAttribute('name', 'startDate')
+	expect(startDateInput).toHaveAttribute('type', 'date')
+})
+
+await testStep('Submit button is rendered', () =>
+	screen.findByRole('button', { name: /submit/i }),
+)