add some tests

epicshop/.diffignore

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

exercises/01.typescript/01.solution.props/calculator.test.ts

@@ -0,0 +1,32 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+
+import './index.tsx'
+
+await testStep('Calculator h1 is rendered', () =>
+	screen.findByText('Calculator'),
+)
+
+const calculators = await testStep('Code elements are rendered', async () => {
+	const elements = await screen.findAllByRole('code')
+	expect(elements).toHaveLength(4)
+	return elements
+})
+
+const [add, subtract, multiply, divide] = calculators
+
+await testStep('Addition calculation is rendered correctly', async () => {
+	expect(add).toHaveTextContent('1 + 2 = 3')
+})
+
+await testStep('Subtraction calculation is rendered correctly', async () => {
+	expect(subtract).toHaveTextContent('1 - 2 = -1')
+})
+
+await testStep('Multiplication calculation is rendered correctly', async () => {
+	expect(multiply).toHaveTextContent('1 * 2 = 2')
+})
+
+await testStep('Division calculation is rendered correctly', async () => {
+	expect(divide).toHaveTextContent('1 / 2 = 0.5')
+})

exercises/01.typescript/02.solution.narrow/calculator.test.ts

@@ -0,0 +1,32 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+
+import './index.tsx'
+
+await testStep('Calculator h1 is rendered', () =>
+	screen.findByText('Calculator'),
+)
+
+const calculators = await testStep('Code elements are rendered', async () => {
+	const elements = await screen.findAllByRole('code')
+	expect(elements).toHaveLength(4)
+	return elements
+})
+
+const [add, subtract, multiply, divide] = calculators
+
+await testStep('Addition calculation is rendered correctly', async () => {
+	expect(add).toHaveTextContent('1 + 2 = 3')
+})
+
+await testStep('Subtraction calculation is rendered correctly', async () => {
+	expect(subtract).toHaveTextContent('1 - 2 = -1')
+})
+
+await testStep('Multiplication calculation is rendered correctly', async () => {
+	expect(multiply).toHaveTextContent('1 * 2 = 2')
+})
+
+await testStep('Division calculation is rendered correctly', async () => {
+	expect(divide).toHaveTextContent('1 / 2 = 0.5')
+})

exercises/01.typescript/03.solution.derive/calculator.test.ts

@@ -0,0 +1,32 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+
+import './index.tsx'
+
+await testStep('Calculator h1 is rendered', () =>
+	screen.findByText('Calculator'),
+)
+
+const calculators = await testStep('Code elements are rendered', async () => {
+	const elements = await screen.findAllByRole('code')
+	expect(elements).toHaveLength(4)
+	return elements
+})
+
+const [add, subtract, multiply, divide] = calculators
+
+await testStep('Addition calculation is rendered correctly', async () => {
+	expect(add).toHaveTextContent('1 + 2 = 3')
+})
+
+await testStep('Subtraction calculation is rendered correctly', async () => {
+	expect(subtract).toHaveTextContent('1 - 2 = -1')
+})
+
+await testStep('Multiplication calculation is rendered correctly', async () => {
+	expect(multiply).toHaveTextContent('1 * 2 = 2')
+})
+
+await testStep('Division calculation is rendered correctly', async () => {
+	expect(divide).toHaveTextContent('1 / 2 = 0.5')
+})

exercises/01.typescript/04.solution.default-props/calculator.test.ts

@@ -0,0 +1,32 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+
+import './index.tsx'
+
+await testStep('Calculator h1 is rendered', () =>
+	screen.findByText('Calculator'),
+)
+
+const calculators = await testStep('Code elements are rendered', async () => {
+	const elements = await screen.findAllByRole('code')
+	expect(elements).toHaveLength(4)
+	return elements
+})
+
+const [add, subtract, multiply, divide] = calculators
+
+await testStep('Addition calculation is rendered correctly', async () => {
+	expect(add).toHaveTextContent('1 + 2 = 3')
+})
+
+await testStep('Subtraction calculation is rendered correctly', async () => {
+	expect(subtract).toHaveTextContent('0 - 0 = 0')
+})
+
+await testStep('Multiplication calculation is rendered correctly', async () => {
+	expect(multiply).toHaveTextContent('1 * 0 = 0')
+})
+
+await testStep('Division calculation is rendered correctly', async () => {
+	expect(divide).toHaveTextContent('0 / 2 = 0')
+})

exercises/01.typescript/05.solution.function-types/calculator.test.ts

@@ -0,0 +1,32 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+
+import './index.tsx'
+
+await testStep('Calculator h1 is rendered', () =>
+	screen.findByText('Calculator'),
+)
+
+const calculators = await testStep('Code elements are rendered', async () => {
+	const elements = await screen.findAllByRole('code')
+	expect(elements).toHaveLength(4)
+	return elements
+})
+
+const [add, subtract, multiply, divide] = calculators
+
+await testStep('Addition calculation is rendered correctly', async () => {
+	expect(add).toHaveTextContent('1 + 2 = 3')
+})
+
+await testStep('Subtraction calculation is rendered correctly', async () => {
+	expect(subtract).toHaveTextContent('0 - 0 = 0')
+})
+
+await testStep('Multiplication calculation is rendered correctly', async () => {
+	expect(multiply).toHaveTextContent('1 * 0 = 0')
+})
+
+await testStep('Division calculation is rendered correctly', async () => {
+	expect(divide).toHaveTextContent('0 / 2 = 0')
+})

exercises/01.typescript/06.solution.satisfies/calculator.test.ts

@@ -0,0 +1,32 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+
+import './index.tsx'
+
+await testStep('Calculator h1 is rendered', () =>
+	screen.findByText('Calculator'),
+)
+
+const calculators = await testStep('Code elements are rendered', async () => {
+	const elements = await screen.findAllByRole('code')
+	expect(elements).toHaveLength(4)
+	return elements
+})
+
+const [add, subtract, multiply, divide] = calculators
+
+await testStep('Addition calculation is rendered correctly', async () => {
+	expect(add).toHaveTextContent('1 + 2 = 3')
+})
+
+await testStep('Subtraction calculation is rendered correctly', async () => {
+	expect(subtract).toHaveTextContent('0 - 0 = 0')
+})
+
+await testStep('Multiplication calculation is rendered correctly', async () => {
+	expect(multiply).toHaveTextContent('1 * 0 = 0')
+})
+
+await testStep('Division calculation is rendered correctly', async () => {
+	expect(divide).toHaveTextContent('0 / 2 = 0')
+})

exercises/02.styling/01.solution.style/boxes.test.ts

@@ -0,0 +1,34 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+
+import './index.tsx'
+
+await testStep('Small lightblue box is rendered correctly', async () => {
+	const smallBox = await screen.findByText('small lightblue box')
+	expect(smallBox).toHaveClass('box box--small')
+	expect(smallBox.style.backgroundColor).toBe('lightblue')
+	expect(smallBox.style.fontStyle).toBe('italic')
+})
+
+await testStep('Medium pink box is rendered correctly', async () => {
+	const mediumBox = await screen.findByText('medium pink box')
+	expect(mediumBox).toHaveClass('box box--medium')
+	expect(mediumBox.style.backgroundColor).toBe('pink')
+	expect(mediumBox.style.fontStyle).toBe('italic')
+})
+
+await testStep('Large orange box is rendered correctly', async () => {
+	const largeBox = await screen.findByText('large orange box')
+	expect(largeBox).toHaveClass('box box--large')
+	expect(largeBox.style.backgroundColor).toBe('orange')
+	expect(largeBox.style.fontStyle).toBe('italic')
+})
+
+await testStep('Sizeless colorless box is rendered correctly', async () => {
+	const sizelessColorlessBox = await screen.findByText('sizeless colorless box')
+	expect(sizelessColorlessBox).toHaveClass('box')
+	expect(sizelessColorlessBox).not.toHaveClass('box--small')
+	expect(sizelessColorlessBox).not.toHaveClass('box--medium')
+	expect(sizelessColorlessBox).not.toHaveClass('box--large')
+	expect(sizelessColorlessBox.style.fontStyle).toBe('italic')
+})

exercises/02.styling/02.problem.component/index.tsx

@@ -4,6 +4,7 @@ import { createRoot } from 'react-dom/client'
 // 🐨 Make it render a div with the style, className, and children applied.
 // 🐨 Also automatically add the fontStyle: 'italic' style to the style prop so consumers don't have to provide that
 // 🐨 And automatically add the "box" className to the className prop so consumers don't have to provide that as well.
+// 🚨 make sure to export the Box component so it can be imported in the test file.
 
 // 💯 as a bonus, have this accept any number of additional props (typed as React.ComponentProps<'div'>)
 // and apply those to the rendered div as well.

exercises/02.styling/02.solution.component/box.test.tsx

@@ -0,0 +1,52 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+import { createRoot } from 'react-dom/client'
+const { screen } = dtl
+
+import { Box } from './index.tsx'
+
+await testStep('Box component renders correctly', async () => {
+	document.body.innerHTML = ''
+	const root = document.createElement('div')
+	document.body.appendChild(root)
+	createRoot(root).render(
+		<Box className="box--small" style={{ backgroundColor: 'lightblue' }}>
+			Test Box
+		</Box>,
+	)
+
+	const boxElement = await screen.findByText('Test Box')
+
+	expect(boxElement).toHaveClass('box box--small')
+	expect(boxElement.style.backgroundColor).toBe('lightblue')
+	expect(boxElement.style.fontStyle).toBe('italic')
+	expect(boxElement).toHaveTextContent('Test Box')
+})
+
+await testStep('Box component applies default props correctly', async () => {
+	document.body.innerHTML = ''
+	const root = document.createElement('div')
+	document.body.appendChild(root)
+	createRoot(root).render(<Box>Default Box</Box>)
+
+	const boxElement = await screen.findByText('Default Box')
+
+	expect(boxElement).toHaveClass('box')
+	expect(boxElement.style.fontStyle).toBe('italic')
+	expect(boxElement).toHaveTextContent('Default Box')
+})
+
+await testStep('Box component passes through additional props', async () => {
+	document.body.innerHTML = ''
+	const root = document.createElement('div')
+	document.body.appendChild(root)
+	createRoot(root).render(
+		<Box data-testid="custom-box" aria-label="Custom Box">
+			Custom Props Box
+		</Box>,
+	)
+
+	const boxElement = await screen.findByText('Custom Props Box')
+
+	expect(boxElement).toHaveAttribute('data-testid', 'custom-box')
+	expect(boxElement).toHaveAttribute('aria-label', 'Custom Box')
+})

exercises/02.styling/02.solution.component/boxes.test.ts

@@ -0,0 +1,34 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+
+import './index.tsx'
+
+await testStep('Small lightblue box is rendered correctly', async () => {
+	const smallBox = await screen.findByText('small lightblue box')
+	expect(smallBox).toHaveClass('box box--small')
+	expect(smallBox.style.backgroundColor).toBe('lightblue')
+	expect(smallBox.style.fontStyle).toBe('italic')
+})
+
+await testStep('Medium pink box is rendered correctly', async () => {
+	const mediumBox = await screen.findByText('medium pink box')
+	expect(mediumBox).toHaveClass('box box--medium')
+	expect(mediumBox.style.backgroundColor).toBe('pink')
+	expect(mediumBox.style.fontStyle).toBe('italic')
+})
+
+await testStep('Large orange box is rendered correctly', async () => {
+	const largeBox = await screen.findByText('large orange box')
+	expect(largeBox).toHaveClass('box box--large')
+	expect(largeBox.style.backgroundColor).toBe('orange')
+	expect(largeBox.style.fontStyle).toBe('italic')
+})
+
+await testStep('Sizeless colorless box is rendered correctly', async () => {
+	const sizelessColorlessBox = await screen.findByText('sizeless colorless box')
+	expect(sizelessColorlessBox).toHaveClass('box')
+	expect(sizelessColorlessBox).not.toHaveClass('box--small')
+	expect(sizelessColorlessBox).not.toHaveClass('box--medium')
+	expect(sizelessColorlessBox).not.toHaveClass('box--large')
+	expect(sizelessColorlessBox.style.fontStyle).toBe('italic')
+})

exercises/02.styling/02.solution.component/index.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client'
 
-function Box({
+export function Box({
 	style = {},
 	className = '',
 	...otherProps

exercises/02.styling/03.problem.size-prop/index.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client'
 
-function Box({
+export function Box({
 	// 💯 you can keep the style and className props here, but you can make this
 	// still work if you remove them. Give that a shot if you want.
 	style = {},