add test for 04

exercises/04.inputs/01.solution.checkbox/action.test.ts

@@ -0,0 +1,77 @@
+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 waiverSignedInput = await screen.findByLabelText(/waiver signed/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.click(waiverSignedInput)
+		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',
+				waiver: 'on',
+				startDate: '2023-01-01',
+			}),
+		)
+	})
+} finally {
+	// Restore original console.log after tests
+	console.log = originalLog
+}

exercises/04.inputs/01.solution.checkbox/form.test.ts

@@ -0,0 +1,60 @@
+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('Waiver Signed input is rendered', async () => {
+	const waiverSignedInput = await screen.findByLabelText(/waiver signed/i)
+	expect(waiverSignedInput).toHaveAttribute('name', 'waiver')
+	expect(waiverSignedInput).toHaveAttribute('type', 'checkbox')
+})
+
+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/04.inputs/02.solution.select/action.test.ts

@@ -0,0 +1,80 @@
+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 accountTypeSelect = await screen.findByLabelText(/account type/i)
+		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 waiverSignedInput = await screen.findByLabelText(/waiver signed/i)
+		const startDateInput = await screen.findByLabelText(/start date/i)
+		const submitButton = await screen.findByRole('button', { name: /submit/i })
+
+		fireEvent.change(accountTypeSelect, { target: { value: 'teacher' } })
+		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.click(waiverSignedInput)
+		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({
+				accountType: 'teacher',
+				username: 'testuser',
+				password: 'password123',
+				age: '25',
+				color: '#ff0000',
+				waiver: 'on',
+				startDate: '2023-01-01',
+			}),
+		)
+	})
+} finally {
+	// Restore original console.log after tests
+	console.log = originalLog
+}

exercises/04.inputs/02.solution.select/form.test.ts

@@ -0,0 +1,74 @@
+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('Account Type select is rendered', async () => {
+	const accountTypeSelect = await screen.findByLabelText(/account type/i)
+	expect(accountTypeSelect).toHaveAttribute('name', 'accountType')
+	expect(accountTypeSelect.tagName.toLowerCase()).toBe('select')
+
+	const options = accountTypeSelect.querySelectorAll('option')
+	expect(options).toHaveLength(5)
+	expect(options[0]).toHaveTextContent('--Please select an option--')
+	expect(options[1]).toHaveTextContent('Admin')
+	expect(options[2]).toHaveTextContent('Teacher')
+	expect(options[3]).toHaveTextContent('Parent')
+	expect(options[4]).toHaveTextContent('Student')
+})
+
+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('Waiver Signed input is rendered', async () => {
+	const waiverSignedInput = await screen.findByLabelText(/waiver signed/i)
+	expect(waiverSignedInput).toHaveAttribute('name', 'waiver')
+	expect(waiverSignedInput).toHaveAttribute('type', 'checkbox')
+})
+
+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/04.inputs/03.solution.radio/action.test.ts

@@ -0,0 +1,83 @@
+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 accountTypeSelect = await screen.findByLabelText(/account type/i)
+		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 publicRadio = await screen.findByLabelText(/public/i)
+		const waiverSignedInput = await screen.findByLabelText(/waiver signed/i)
+		const startDateInput = await screen.findByLabelText(/start date/i)
+		const submitButton = await screen.findByRole('button', { name: /submit/i })
+
+		fireEvent.change(accountTypeSelect, { target: { value: 'teacher' } })
+		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.click(publicRadio)
+		fireEvent.click(waiverSignedInput)
+		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({
+				accountType: 'teacher',
+				username: 'testuser',
+				password: 'password123',
+				age: '25',
+				color: '#ff0000',
+				visibility: 'public',
+				waiver: 'on',
+				startDate: '2023-01-01',
+			}),
+		)
+	})
+} finally {
+	// Restore original console.log after tests
+	console.log = originalLog
+}