finish tests

Author: kentcdodds

exercises/04.slots/01.solution.context/index.test.tsx

@@ -0,0 +1,49 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { App } from './app.tsx'
+
+await testStep('can render the app', () => {
+	render(<App />)
+})
+
+const toggle = await testStep('Toggle is rendered', () =>
+	screen.findByRole('switch', { name: /party mode/i }),
+)
+
+await testStep('Toggle is off to start', () =>
+	expect(toggle).to.have.attr('aria-checked', 'false'),
+)
+
+await testStep(`Renders "Sad town 😭" when off`, () =>
+	screen.findByText('Sad town 😭'),
+)
+
+await testStep(
+	`Does not render "Let's party 🥳" when off`,
+	() => expect(screen.queryByText("Let's party 🥳")).to.be.null,
+)
+
+await userEvent.click(toggle)
+
+await testStep('Clicking the toggle turns it on', async () => {
+	expect(toggle).to.have.attr('aria-checked', 'true')
+})
+
+await testStep(`Renders "Let's party 🥳" when on`, () =>
+	screen.findByText("Let's party 🥳"),
+)
+
+await testStep(
+	'Does not render "Sad town 😭" when on',
+	() => expect(screen.queryByText('Sad town 😭')).to.be.null,
+)
+
+const textField = await testStep('TextField is rendered', () =>
+	screen.findByLabelText('Venue'),
+)
+
+await testStep('TextField label and input are associated', () => {
+	const label = screen.getByText('Venue')
+	expect(label).to.have.attr('for', textField.id)
+})

exercises/04.slots/02.solution.generic/index.test.tsx

@@ -0,0 +1,49 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { App } from './app.tsx'
+
+await testStep('can render the app', () => {
+	render(<App />)
+})
+
+const toggle = await testStep('Toggle is rendered', () =>
+	screen.findByRole('switch', { name: /party mode/i }),
+)
+
+await testStep('Toggle is off to start', () =>
+	expect(toggle).to.have.attr('aria-checked', 'false'),
+)
+
+await testStep(`Renders "Sad town 😭" when off`, () =>
+	screen.findByText('Sad town 😭'),
+)
+
+await testStep(
+	`Does not render "Let's party 🥳" when off`,
+	() => expect(screen.queryByText("Let's party 🥳")).to.be.null,
+)
+
+await userEvent.click(toggle)
+
+await testStep('Clicking the toggle turns it on', async () => {
+	expect(toggle).to.have.attr('aria-checked', 'true')
+})
+
+await testStep(`Renders "Let's party 🥳" when on`, () =>
+	screen.findByText("Let's party 🥳"),
+)
+
+await testStep(
+	'Does not render "Sad town 😭" when on',
+	() => expect(screen.queryByText('Sad town 😭')).to.be.null,
+)
+
+const textField = await testStep('TextField is rendered', () =>
+	screen.findByLabelText('Venue'),
+)
+
+await testStep('TextField label and input are associated', () => {
+	const label = screen.getByText('Venue')
+	expect(label).to.have.attr('for', textField.id)
+})

exercises/04.slots/03.solution.prop/index.test.tsx

@@ -0,0 +1,53 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { App } from './app.tsx'
+
+await testStep('can render the app', () => {
+	render(<App />)
+})
+
+const toggle = await testStep('Toggle is rendered', () =>
+	screen.findByRole('switch', { name: /party mode/i }),
+)
+
+await testStep('Toggle is off to start', () =>
+	expect(toggle).to.have.attr('aria-checked', 'false'),
+)
+
+await testStep(`Renders "Sad town 😭" when off`, () =>
+	screen.findByText('Sad town 😭'),
+)
+
+await testStep(`Does not render "Let's party 🥳" when off`, () => {
+	const textNode = screen.queryByText("Let's party 🥳")
+	if (textNode) {
+		expect(textNode).not.toBeVisible()
+	}
+})
+
+await userEvent.click(toggle)
+
+await testStep('Clicking the toggle turns it on', async () => {
+	expect(toggle).to.have.attr('aria-checked', 'true')
+})
+
+await testStep(`Renders "Let's party 🥳" when on`, () =>
+	screen.findByText("Let's party 🥳"),
+)
+
+await testStep('Does not render "Sad town 😭" when on', () => {
+	const textNode = screen.queryByText('Sad town 😭')
+	if (textNode) {
+		expect(textNode).not.toBeVisible()
+	}
+})
+
+const textField = await testStep('TextField is rendered', () =>
+	screen.findByLabelText('Venue'),
+)
+
+await testStep('TextField label and input are associated', () => {
+	const label = screen.getByText('Venue')
+	expect(label).to.have.attr('for', textField.id)
+})

exercises/06.state-initializers/01.solution.initial/index.test.tsx

@@ -0,0 +1,26 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { App } from './app.tsx'
+
+await testStep('can render the app', () => {
+	render(<App />)
+})
+
+await testStep('Toggle is rendered and initially on', async () => {
+	const toggleElement = await screen.findByRole('switch')
+	expect(toggleElement).toHaveAttribute('aria-checked', 'true')
+})
+
+await testStep('Toggle can be turned off', async () => {
+	const toggleElement = await screen.findByRole('switch')
+	await userEvent.click(toggleElement)
+	expect(toggleElement).toHaveAttribute('aria-checked', 'false')
+})
+
+await testStep('Clicking reset turns the toggle back on', async () => {
+	const resetButton = await screen.findByRole('button', { name: /reset/i })
+	await userEvent.click(resetButton)
+	const toggleElement = await screen.findByRole('switch')
+	expect(toggleElement).toHaveAttribute('aria-checked', 'true')
+})

exercises/06.state-initializers/02.solution.stability/index.test.tsx

@@ -0,0 +1,39 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { App } from './app.tsx'
+
+await testStep('can render the app', () => {
+	render(<App />)
+})
+
+await testStep('Toggle is rendered and initially on', async () => {
+	const toggleElement = await screen.findByRole('switch')
+	expect(toggleElement).toHaveAttribute('aria-checked', 'true')
+})
+
+await testStep('Toggle can be turned off', async () => {
+	const toggleElement = await screen.findByRole('switch')
+	await userEvent.click(toggleElement)
+	expect(toggleElement).toHaveAttribute('aria-checked', 'false')
+})
+
+await testStep('Changing initialOn updates the initialOn option', async () => {
+	const initialOnButton = await screen.findByRole('button', {
+		name: /initialOn/i,
+	})
+	await userEvent.click(initialOnButton)
+})
+
+await testStep(
+	'Clicking reset turns the toggle back on even though the initialOn option was changed to false',
+	async () => {
+		const resetButton = await screen.findByRole('button', { name: /reset/i })
+		await userEvent.click(resetButton)
+		const toggleElement = await screen.findByRole('switch')
+		expect(
+			toggleElement,
+			'🚨 Did you forget to stablize the initalOn value?',
+		).toHaveAttribute('aria-checked', 'true')
+	},
+)

shared/switch.tsx

@@ -5,8 +5,6 @@
 // your `render` method or the `getTogglerProps` method
 // (if we've gotten to that part)
 
-// this is only a class component so we can do some implementation-detail
-// tests to make sure you're doing things as instructed :)
 export function Switch({
 	on,
 	className = '',
@@ -25,7 +23,9 @@ export function Switch({
 	return (
 		<button
 			role="switch"
-			aria-label={ariaLabel ?? 'Toggle'}
+			// if it has an id then it's probably going to be labeled, otherwise we'll use a generic label
+			// note, this is mostly for testing purposes
+			aria-label={ariaLabel ?? ('id' in props ? undefined : 'Toggle')}
 			aria-checked={on}
 			onClick={onClick}
 			className={btnClassName}