tests for exercise 1

Author: kentcdodds

epicshop/.diffignore

@@ -1 +1,2 @@
 tsconfig.json
+*.test.*

exercises/01.managing-ui-state/01.solution.use-state/filtering.test.ts

@@ -0,0 +1,30 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+import './index.tsx'
+
+const searchBox = await testStep(
+	'The user can see the search box',
+	async () => {
+		const result = await screen.findByRole('searchbox', { name: /search/i })
+		expect(result).toHaveValue('')
+		return result
+	},
+)
+
+const catResult = await testStep('The user can see the results', async () => {
+	const result = screen.getByText(/caring for your feline friend/i)
+	expect(result).toBeInTheDocument()
+	return result
+})
+
+await testStep('The user can search for a term', async () => {
+	fireEvent.change(searchBox, { target: { value: 'dog' } })
+})
+
+await testStep('The results are filtered', async () => {
+	await dtl.waitFor(() => {
+		expect(catResult).not.toBeInTheDocument()
+	})
+	await screen.findByText(/the joy of owning a dog/i)
+})

exercises/01.managing-ui-state/02.solution.control/controlled-search.test.ts

@@ -0,0 +1,43 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+import './index.tsx'
+
+const searchBox = await testStep(
+	'The user can see the search box',
+	async () => {
+		const result = await screen.findByRole('searchbox', { name: /search/i })
+		expect(result).toHaveValue('')
+		return result
+	},
+)
+
+const dogCheckbox = await testStep(
+	'The user can see the dog checkbox',
+	async () => {
+		const result = await screen.findByRole('checkbox', { name: /dog/i })
+		expect(result).not.toBeChecked()
+		return result
+	},
+)
+
+await testStep('The user can select the dog checkbox', async () => {
+	fireEvent.click(dogCheckbox)
+	expect(dogCheckbox).toBeChecked()
+})
+
+await testStep(
+	'Selecting the checkbox updates the search and results',
+	async () => {
+		// Check that the search box value has been updated
+		expect(searchBox).toHaveValue('dog')
+
+		// Check that the results have been filtered
+		await dtl.waitFor(async () => {
+			await screen.findByText(/the joy of owning a dog/i)
+
+			const catResult = screen.queryByText(/caring for your feline friend/i)
+			expect(catResult).not.toBeInTheDocument()
+		})
+	},
+)

exercises/01.managing-ui-state/02.solution.control/filtering.test.ts

@@ -0,0 +1,30 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+import './index.tsx'
+
+const searchBox = await testStep(
+	'The user can see the search box',
+	async () => {
+		const result = await screen.findByRole('searchbox', { name: /search/i })
+		expect(result).toHaveValue('')
+		return result
+	},
+)
+
+const catResult = await testStep('The user can see the results', async () => {
+	const result = screen.getByText(/caring for your feline friend/i)
+	expect(result).toBeInTheDocument()
+	return result
+})
+
+await testStep('The user can search for a term', async () => {
+	fireEvent.change(searchBox, { target: { value: 'dog' } })
+})
+
+await testStep('The results are filtered', async () => {
+	await dtl.waitFor(() => {
+		expect(catResult).not.toBeInTheDocument()
+	})
+	await screen.findByText(/the joy of owning a dog/i)
+})

exercises/01.managing-ui-state/03.solution.derive/controlled-checkbox.test.ts

@@ -0,0 +1,30 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+import './index.tsx'
+
+const searchBox = await testStep(
+	'The user can see the search box',
+	async () => {
+		const result = await screen.findByRole('searchbox', { name: /search/i })
+		expect(result).toHaveValue('')
+		return result
+	},
+)
+
+const dogCheckbox = await testStep(
+	'The user can see the dog checkbox',
+	async () => {
+		const result = await screen.findByRole('checkbox', { name: /dog/i })
+		expect(result).not.toBeChecked()
+		return result
+	},
+)
+
+await testStep('The user can search for a checkbox value', async () => {
+	fireEvent.change(searchBox, { target: { value: 'dog' } })
+})
+
+await testStep('checkbox is checked automatically', async () => {
+	expect(dogCheckbox).toBeChecked()
+})

exercises/01.managing-ui-state/03.solution.derive/controlled-search.test.ts

@@ -0,0 +1,43 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+import './index.tsx'
+
+const searchBox = await testStep(
+	'The user can see the search box',
+	async () => {
+		const result = await screen.findByRole('searchbox', { name: /search/i })
+		expect(result).toHaveValue('')
+		return result
+	},
+)
+
+const dogCheckbox = await testStep(
+	'The user can see the dog checkbox',
+	async () => {
+		const result = await screen.findByRole('checkbox', { name: /dog/i })
+		expect(result).not.toBeChecked()
+		return result
+	},
+)
+
+await testStep('The user can select the dog checkbox', async () => {
+	fireEvent.click(dogCheckbox)
+	expect(dogCheckbox).toBeChecked()
+})
+
+await testStep(
+	'Selecting the checkbox updates the search and results',
+	async () => {
+		// Check that the search box value has been updated
+		expect(searchBox).toHaveValue('dog')
+
+		// Check that the results have been filtered
+		await dtl.waitFor(async () => {
+			await screen.findByText(/the joy of owning a dog/i)
+
+			const catResult = screen.queryByText(/caring for your feline friend/i)
+			expect(catResult).not.toBeInTheDocument()
+		})
+	},
+)

exercises/01.managing-ui-state/03.solution.derive/filtering.test.ts

@@ -0,0 +1,30 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+import './index.tsx'
+
+const searchBox = await testStep(
+	'The user can see the search box',
+	async () => {
+		const result = await screen.findByRole('searchbox', { name: /search/i })
+		expect(result).toHaveValue('')
+		return result
+	},
+)
+
+const catResult = await testStep('The user can see the results', async () => {
+	const result = screen.getByText(/caring for your feline friend/i)
+	expect(result).toBeInTheDocument()
+	return result
+})
+
+await testStep('The user can search for a term', async () => {
+	fireEvent.change(searchBox, { target: { value: 'dog' } })
+})
+
+await testStep('The results are filtered', async () => {
+	await dtl.waitFor(() => {
+		expect(catResult).not.toBeInTheDocument()
+	})
+	await screen.findByText(/the joy of owning a dog/i)
+})

exercises/01.managing-ui-state/04.solution.init/controlled-checkbox.test.ts

@@ -0,0 +1,30 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+import './index.tsx'
+
+const searchBox = await testStep(
+	'The user can see the search box',
+	async () => {
+		const result = await screen.findByRole('searchbox', { name: /search/i })
+		expect(result).toHaveValue('')
+		return result
+	},
+)
+
+const dogCheckbox = await testStep(
+	'The user can see the dog checkbox',
+	async () => {
+		const result = await screen.findByRole('checkbox', { name: /dog/i })
+		expect(result).not.toBeChecked()
+		return result
+	},
+)
+
+await testStep('The user can search for a checkbox value', async () => {
+	fireEvent.change(searchBox, { target: { value: 'dog' } })
+})
+
+await testStep('checkbox is checked automatically', async () => {
+	expect(dogCheckbox).toBeChecked()
+})

exercises/01.managing-ui-state/04.solution.init/controlled-search.test.ts

@@ -0,0 +1,43 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+import './index.tsx'
+
+const searchBox = await testStep(
+	'The user can see the search box',
+	async () => {
+		const result = await screen.findByRole('searchbox', { name: /search/i })
+		expect(result).toHaveValue('')
+		return result
+	},
+)
+
+const dogCheckbox = await testStep(
+	'The user can see the dog checkbox',
+	async () => {
+		const result = await screen.findByRole('checkbox', { name: /dog/i })
+		expect(result).not.toBeChecked()
+		return result
+	},
+)
+
+await testStep('The user can select the dog checkbox', async () => {
+	fireEvent.click(dogCheckbox)
+	expect(dogCheckbox).toBeChecked()
+})
+
+await testStep(
+	'Selecting the checkbox updates the search and results',
+	async () => {
+		// Check that the search box value has been updated
+		expect(searchBox).toHaveValue('dog')
+
+		// Check that the results have been filtered
+		await dtl.waitFor(async () => {
+			await screen.findByText(/the joy of owning a dog/i)
+
+			const catResult = screen.queryByText(/caring for your feline friend/i)
+			expect(catResult).not.toBeInTheDocument()
+		})
+	},
+)

exercises/01.managing-ui-state/04.solution.init/filtering.test.ts

@@ -0,0 +1,30 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+import './index.tsx'
+
+const searchBox = await testStep(
+	'The user can see the search box',
+	async () => {
+		const result = await screen.findByRole('searchbox', { name: /search/i })
+		expect(result).toHaveValue('')
+		return result
+	},
+)
+
+const catResult = await testStep('The user can see the results', async () => {
+	const result = screen.getByText(/caring for your feline friend/i)
+	expect(result).toBeInTheDocument()
+	return result
+})
+
+await testStep('The user can search for a term', async () => {
+	fireEvent.change(searchBox, { target: { value: 'dog' } })
+})
+
+await testStep('The results are filtered', async () => {
+	await dtl.waitFor(() => {
+		expect(catResult).not.toBeInTheDocument()
+	})
+	await screen.findByText(/the joy of owning a dog/i)
+})

exercises/01.managing-ui-state/04.solution.init/search-params.test.ts

@@ -0,0 +1,14 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+window.history.pushState({}, '', '?query=dog')
+
+await import('./index.tsx')
+
+await testStep(
+	'The search box is initialized with URL query parameter',
+	async () => {
+		const searchBox = await screen.findByRole('searchbox', { name: /search/i })
+		expect(searchBox).toHaveValue('dog')
+	},
+)

exercises/01.managing-ui-state/05.problem.cb/README.mdx

@@ -43,3 +43,9 @@ const [query, setQuery] = useState(getQueryParam)
 ```
 
 You're going to be making the `getQueryParam` function. Got it? Great, let's go!
+
+<callout-info>
+	🚨 Note, we can't reasonably test whether you're doing this right so the tests
+	are passing from the get-go, but you'll know you didn't break anything if the
+	tests are still working when you're finished.
+</callout-info>

exercises/01.managing-ui-state/05.solution.cb/controlled-checkbox.test.ts

@@ -0,0 +1,30 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen, fireEvent } = dtl
+
+import './index.tsx'
+
+const searchBox = await testStep(
+	'The user can see the search box',
+	async () => {
+		const result = await screen.findByRole('searchbox', { name: /search/i })
+		expect(result).toHaveValue('')
+		return result
+	},
+)
+
+const dogCheckbox = await testStep(
+	'The user can see the dog checkbox',
+	async () => {
+		const result = await screen.findByRole('checkbox', { name: /dog/i })
+		expect(result).not.toBeChecked()
+		return result
+	},
+)
+
+await testStep('The user can search for a checkbox value', async () => {
+	fireEvent.change(searchBox, { target: { value: 'dog' } })
+})
+
+await testStep('checkbox is checked automatically', async () => {
+	expect(dogCheckbox).toBeChecked()
+})