Skip to content

Commit 5a93efb

Browse files
kentcdoddskentcdodds
committed
make tests more reliable
1 parent 2846d7d commit 5a93efb

File tree

16 files changed

+199
-84
lines changed

16 files changed

+199
-84
lines changed

‎epicshop/playwright.config.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { defineConfig, devices } from '@playwright/test'
2+
3+
const PORT = process.env.PORT || '5639'
4+
5+
export default defineConfig({
6+
reporter: 'html',
7+
use: {
8+
baseURL: `http://localhost:${PORT}/`,
9+
trace: 'retain-on-failure',
10+
},
11+
12+
projects: [
13+
{
14+
name: 'chromium',
15+
use: { ...devices['Desktop Chrome'] },
16+
},
17+
],
18+
19+
webServer: {
20+
command: 'cd .. && npm start',
21+
port: Number(PORT),
22+
reuseExistingServer: !process.env.CI,
23+
stdout: 'pipe',
24+
stderr: 'pipe',
25+
env: { PORT },
26+
},
27+
})

‎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')

0 commit comments

Comments
 (0)