Skip to content

Commit 024d9a5

Browse files
kentcdoddskentcdodds
committed
make tests more reliable
1 parent 5fe3a17 commit 024d9a5

File tree

14 files changed

+171
-84
lines changed

14 files changed

+171
-84
lines changed

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1-
import { expect, testStep } from '@epic-web/workshop-utils/test'
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
22

3-
await testStep('"Hello World" is rendered to the DOM', () => {
3+
await testStep('"Hello World" is rendered to the DOM', async () => {
44
const rootElement = document.getElementById('root')
55
expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
66

7-
const element = rootElement!.querySelector('.container')
8-
expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
7+
const element = await dtl.waitFor(
8+
async () => {
9+
const element = rootElement!.querySelector('.container')
10+
expect(element, 'container element not found').to.be.instanceOf(
11+
HTMLElement,
12+
)
13+
return element
14+
},
15+
{ timeout: 5000 },
16+
)
917

1018
expect(element!.textContent, 'element text is not correct').to.equal(
1119
'Hello World',

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1-
import { expect, testStep } from '@epic-web/workshop-utils/test'
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
22

3-
await testStep('"Hello World" is rendered to the DOM', () => {
3+
await testStep('"Hello World" is rendered to the DOM', async () => {
44
const rootElement = document.getElementById('root')
55
expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
66

7-
const element = rootElement!.querySelector('.container')
8-
expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
7+
const element = await dtl.waitFor(
8+
async () => {
9+
const element = rootElement!.querySelector('.container')
10+
expect(element, 'container element not found').to.be.instanceOf(
11+
HTMLElement,
12+
)
13+
return element
14+
},
15+
{ timeout: 5000 },
16+
)
917

1018
expect(element!.textContent, 'element text is not correct').to.equal(
1119
'Hello World',

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1-
import { expect, testStep } from '@epic-web/workshop-utils/test'
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
22

3-
await testStep('"Hello World" is rendered to the DOM', () => {
3+
await testStep('"Hello World" is rendered to the DOM', async () => {
44
const rootElement = document.getElementById('root')
55
expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
66

7-
const element = rootElement!.querySelector('.container')
8-
expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
7+
const element = await dtl.waitFor(
8+
async () => {
9+
const element = rootElement!.querySelector('.container')
10+
expect(element, 'container element not found').to.be.instanceOf(
11+
HTMLElement,
12+
)
13+
return element
14+
},
15+
{ timeout: 5000 },
16+
)
917

1018
expect(element!.textContent, 'element text is not correct').to.equal(
1119
'Hello World',

‎exercises/02.raw-react/02.solution.nesting/index.test.ts‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
1-
import { expect, testStep } from '@epic-web/workshop-utils/test'
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
22

3-
await testStep('"Hello World" is rendered to the DOM', () => {
3+
await testStep('"Hello World" is rendered to the DOM', async () => {
44
const rootElement = document.getElementById('root')
55
expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
66
if (!rootElement) return
77

8-
const element = rootElement.querySelector('.container')
9-
expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
8+
const element = await dtl.waitFor(
9+
() => {
10+
const element = rootElement!.querySelector('.container')
11+
expect(element, 'container element not found').to.be.instanceOf(
12+
HTMLElement,
13+
)
14+
return element
15+
},
16+
{ timeout: 5000 },
17+
)
18+
1019
if (!element) return
1120

1221
if (element.textContent === 'HelloWorld') {

‎exercises/02.raw-react/03.solution.deep-nesting/index.test.ts‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
1-
import { expect, testStep } from '@epic-web/workshop-utils/test'
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
22

3-
await testStep('Proper elements are rendered to the DOM', () => {
3+
await testStep('Proper elements are rendered to the DOM', async () => {
44
const rootElement = document.getElementById('root')
55
expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
66
if (!rootElement) return
77

8-
const element = rootElement.querySelector('.container')
9-
expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
8+
const element = await dtl.waitFor(
9+
() => {
10+
const element = rootElement!.querySelector('.container')
11+
expect(element, 'container element not found').to.be.instanceOf(
12+
HTMLElement,
13+
)
14+
return element
15+
},
16+
{ timeout: 5000 },
17+
)
18+
1019
if (!element) return
1120

1221
const p = element.querySelector('p')

‎exercises/03.using-jsx/01.solution.compiler/content.test.ts‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
import { expect, testStep } from '@epic-web/workshop-utils/test'
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
22

3-
// wait for babel to compile and evaluate the JSX
4-
await new Promise(resolve => setTimeout(resolve, 100))
5-
6-
await testStep('"Hello World" is rendered to the DOM', () => {
3+
await testStep('"Hello World" is rendered to the DOM', async () => {
74
const rootElement = document.getElementById('root')
85
expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
96

10-
const element = rootElement!.querySelector('.container')
11-
expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
7+
const element = await dtl.waitFor(
8+
async () => {
9+
const element = rootElement!.querySelector('.container')
10+
expect(element, 'container element not found').to.be.instanceOf(
11+
HTMLElement,
12+
)
13+
return element
14+
},
15+
{ timeout: 5000 },
16+
)
1217

1318
expect(element!.textContent, 'element text is not correct').to.equal(
1419
'Hello World',

‎exercises/03.using-jsx/02.solution.interpolation/content.test.ts‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
import { expect, testStep } from '@epic-web/workshop-utils/test'
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
22

3-
// wait for babel to compile and evaluate the JSX
4-
await new Promise(resolve => setTimeout(resolve, 100))
5-
6-
await testStep('"Hello World" is rendered to the DOM', () => {
3+
await testStep('"Hello World" is rendered to the DOM', async () => {
74
const rootElement = document.getElementById('root')
85
expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
96

10-
const element = rootElement!.querySelector('.container')
11-
expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
7+
const element = await dtl.waitFor(
8+
async () => {
9+
const element = rootElement!.querySelector('.container')
10+
expect(element, 'container element not found').to.be.instanceOf(
11+
HTMLElement,
12+
)
13+
return element
14+
},
15+
{ timeout: 5000 },
16+
)
1217

1318
expect(element!.textContent, 'element text is not correct').to.equal(
1419
'Hello World',

‎exercises/03.using-jsx/03.solution.spread/content.test.ts‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
import { expect, testStep } from '@epic-web/workshop-utils/test'
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
22

3-
// wait for babel to compile and evaluate the JSX
4-
await new Promise(resolve => setTimeout(resolve, 100))
5-
6-
await testStep('"Hello World" is rendered to the DOM', () => {
3+
await testStep('"Hello World" is rendered to the DOM', async () => {
74
const rootElement = document.getElementById('root')
85
expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
96

10-
const element = rootElement!.querySelector('.container')
11-
expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
7+
const element = await dtl.waitFor(
8+
async () => {
9+
const element = rootElement!.querySelector('.container')
10+
expect(element, 'container element not found').to.be.instanceOf(
11+
HTMLElement,
12+
)
13+
return element
14+
},
15+
{ timeout: 5000 },
16+
)
1217

1318
expect(element!.textContent, 'element text is not correct').to.equal(
1419
'Hello World',

‎exercises/03.using-jsx/04.solution.nesting/content.test.ts‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
1-
import { expect, testStep } from '@epic-web/workshop-utils/test'
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
22

3-
// wait for babel to compile and evaluate the JSX
4-
await new Promise(resolve => setTimeout(resolve, 100))
5-
6-
await testStep('Proper elements are rendered to the DOM', () => {
3+
await testStep('Proper elements are rendered to the DOM', async () => {
74
const rootElement = document.getElementById('root')
85
expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
96
if (!rootElement) return
107

11-
const element = rootElement.querySelector('.container')
12-
expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
8+
const element = await dtl.waitFor(
9+
() => {
10+
const element = rootElement!.querySelector('.container')
11+
expect(element, 'container element not found').to.be.instanceOf(
12+
HTMLElement,
13+
)
14+
return element
15+
},
16+
{ timeout: 5000 },
17+
)
18+
1319
if (!element) return
1420

1521
const p = element.querySelector('p')

‎exercises/03.using-jsx/05.solution.fragments/content.test.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
import { expect, testStep } from '@epic-web/workshop-utils/test'
1+
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
22

3-
// wait for babel to compile and evaluate the JSX
4-
await new Promise(resolve => setTimeout(resolve, 100))
5-
6-
await testStep('Proper elements are rendered to the DOM', () => {
3+
await testStep('Proper elements are rendered to the DOM', async () => {
74
const rootElement = document.getElementById('root')
85
expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
96
if (!rootElement) return
107

118
const element = rootElement
129

13-
const p = element.querySelector('p')
14-
expect(p, '<p> not found').to.be.instanceOf(HTMLElement)
10+
const p = await dtl.waitFor(
11+
async () => {
12+
const p = element.querySelector('p')
13+
expect(p, '<p> not found').to.be.instanceOf(HTMLElement)
14+
return p
15+
},
16+
{ timeout: 5000 },
17+
)
18+
1519
const ul = element.querySelector('ul')
1620
expect(ul, '<ul> not found').to.be.instanceOf(HTMLElement)
1721
expect(ul).to.have.class('sams-food')

0 commit comments

Comments
 (0)