progress on tests

Author: kentcdodds

exercises/01.js-hello-world/01.solution.hello/index.test.ts

@@ -0,0 +1,13 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+
+await testStep('Hello is rendered to the DOM', () => {
+	const rootElement = document.getElementById('root')
+	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
+
+	const element = rootElement!.querySelector('.container')
+	expect(element, 'element not found').to.be.instanceOf(HTMLElement)
+
+	expect(element!.textContent, 'element text is not correct').to.equal(
+		'Hello World',
+	)
+})

exercises/01.js-hello-world/02.solution.root/index.test.ts

@@ -0,0 +1,24 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+
+await testStep('Hello is rendered to the DOM', () => {
+	const rootElement = document.getElementById('root')
+	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
+
+	const element = rootElement!.querySelector('.container')
+	expect(element, 'element not found').to.be.instanceOf(HTMLElement)
+
+	expect(element!.textContent, 'element text is not correct').to.equal(
+		'Hello World',
+	)
+})
+
+await testStep('root element is not in the HTML', async () => {
+	const response = await fetch(location.href)
+	const text = await response.text()
+	const node = document.createElement('div')
+	node.innerHTML = text
+	expect(
+		node.querySelector('#root'),
+		'root element found in the HTML when it should not be',
+	).to.be.null
+})

exercises/02.raw-react/01.solution.elements/index.test.ts

@@ -0,0 +1,27 @@
+import { expect, testStep } from '@epic-web/workshop-utils/test'
+
+await testStep('Hello is rendered to the DOM', () => {
+	const rootElement = document.getElementById('root')
+	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
+
+	const element = rootElement!.querySelector('.container')
+	expect(element, 'element not found').to.be.instanceOf(HTMLElement)
+
+	expect(element!.textContent, 'element text is not correct').to.equal(
+		'Hello World',
+	)
+})
+
+await testStep('The DOM element is created by React', () => {
+	const element = document.querySelector('#root .container')
+	expect(element, 'element not found').to.be.instanceOf(HTMLElement)
+	if (!element) return
+
+	const reactKeys = Object.keys(element).filter(key =>
+		key.startsWith('__react'),
+	)
+	expect(
+		reactKeys.length,
+		'element was not created by React',
+	).to.be.greaterThan(0)
+})