Skip to content

Commit f227e85

Browse files
piehpieh
authoredOct 16, 2020
fix(gatsby): refresh browser when receiving update and runtime errored (#27467)
* fix(gatsby): refresh browser when receiving update and runtime errored * add query validation error test * add test cases for changing content causing and fixing runtime errors * adjust test names
·
v0.0.0-6babel-plugin-remove-graphql-queries@2.10.0-next.0
1 parent 26667be commit f227e85

19 files changed

+449
-5
lines changed
 

‎e2e-tests/development-runtime/content/error-recovery/page-query.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"selector": "page-query",
3+
"hasError": false
4+
}

‎e2e-tests/development-runtime/content/error-recovery/static-query.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"selector": "static-query",
3+
"hasError": false
4+
}

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/error-handling/compile-error.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
before(() => {
2+
cy.exec(
3+
`npm run update -- --file src/pages/error-handling/compile-error.js --restore`
4+
)
5+
})
6+
7+
after(() => {
8+
cy.exec(
9+
`npm run update -- --file src/pages/error-handling/compile-error.js --restore`
10+
)
11+
})
12+
13+
const errorPlaceholder = `// compile-error`
14+
const errorReplacement = `a b`
15+
16+
describe(`testing error overlay and ability to automatically recover from webpack compile errors`, () => {
17+
it(`displays content initially (no errors yet)`, () => {
18+
cy.visit(`/error-handling/compile-error/`).waitForRouteChange()
19+
cy.getTestElement(`hot`).invoke(`text`).should(`contain`, `Working`)
20+
})
21+
22+
it(`displays error with overlay on compilation errors`, () => {
23+
cy.exec(
24+
`npm run update -- --file src/pages/error-handling/compile-error.js --replacements "${errorPlaceholder}:${errorReplacement}" --exact`
25+
)
26+
27+
cy.getOverlayIframe().contains(`Failed to compile`)
28+
cy.getOverlayIframe().contains(`Parsing error: Unexpected token`)
29+
cy.screenshot()
30+
})
31+
32+
it(`can recover without need to refresh manually`, () => {
33+
cy.exec(
34+
`npm run update -- --file src/pages/error-handling/compile-error.js --replacements "Working:Updated" --replacements "${errorReplacement}:${errorPlaceholder}" --exact`
35+
)
36+
37+
cy.getTestElement(`hot`).invoke(`text`).should(`contain`, `Updated`)
38+
cy.assertNoOverlayIframe()
39+
cy.screenshot()
40+
})
41+
})

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/error-handling/page-query-result-runtime-error.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
Cypress.on("uncaught:exception", (err, runnable) => {
2+
// returning false here prevents Cypress from
3+
// failing the test
4+
return false
5+
})
6+
7+
before(() => {
8+
cy.exec(
9+
`npm run update -- --file content/error-recovery/page-query.json --restore`
10+
)
11+
cy.exec(
12+
`npm run update -- --file src/pages/error-handling/page-query-result-runtime-error.js --restore`
13+
)
14+
})
15+
16+
after(() => {
17+
cy.exec(
18+
`npm run update -- --file content/error-recovery/page-query.json --restore`
19+
)
20+
cy.exec(
21+
`npm run update -- --file src/pages/error-handling/page-query-result-runtime-error.js --restore`
22+
)
23+
})
24+
25+
const errorPlaceholder = `false`
26+
const errorReplacement = `true`
27+
28+
describe(`testing error overlay and ability to automatically recover runtime errors cause by content changes (page queries variant)`, () => {
29+
it(`displays content initially (no errors yet)`, () => {
30+
cy.visit(
31+
`/error-handling/page-query-result-runtime-error/`
32+
).waitForRouteChange()
33+
cy.getTestElement(`hot`).invoke(`text`).should(`contain`, `Working`)
34+
cy.getTestElement(`results`)
35+
.invoke(`text`)
36+
.should(`contain`, `"hasError": false`)
37+
})
38+
39+
it(`displays error with overlay on runtime errors`, () => {
40+
cy.exec(
41+
`npm run update -- --file content/error-recovery/page-query.json --replacements "${errorPlaceholder}:${errorReplacement}" --exact`
42+
)
43+
44+
// that's the exact error we throw and we expect to see that
45+
cy.getOverlayIframe().contains(`Page query results caused runtime error`)
46+
// contains details
47+
cy.getOverlayIframe().contains(
48+
`src/pages/error-handling/page-query-result-runtime-error.js`
49+
)
50+
cy.screenshot()
51+
})
52+
53+
it(`can recover without need to refresh manually`, () => {
54+
cy.exec(
55+
`npm run update -- --file content/error-recovery/page-query.json --replacements "${errorReplacement}:${errorPlaceholder}" --exact`
56+
)
57+
cy.exec(
58+
`npm run update -- --file src/pages/error-handling/page-query-result-runtime-error.js --replacements "Working:Updated" --exact`
59+
)
60+
61+
cy.getTestElement(`hot`).invoke(`text`).should(`contain`, `Updated`)
62+
cy.getTestElement(`results`)
63+
.invoke(`text`)
64+
.should(`contain`, `"hasError": false`)
65+
66+
cy.assertNoOverlayIframe()
67+
cy.screenshot()
68+
})
69+
})

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/error-handling/query-validation-error.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
before(() => {
2+
cy.exec(
3+
`npm run update -- --file src/pages/error-handling/query-validation-error.js --restore`
4+
)
5+
})
6+
7+
after(() => {
8+
cy.exec(
9+
`npm run update -- --file src/pages/error-handling/query-validation-error.js --restore`
10+
)
11+
})
12+
13+
const errorPlaceholder = `# query-validation-error`
14+
const errorReplacement = `fieldThatDoesNotExistOnSiteMapType`
15+
16+
describe(`testing error overlay and ability to automatically recover from query extraction validation errors`, () => {
17+
it(`displays content initially (no errors yet)`, () => {
18+
cy.visit(`/error-handling/query-validation-error/`).waitForRouteChange()
19+
cy.getTestElement(`hot`).invoke(`text`).should(`contain`, `Working`)
20+
})
21+
22+
it(`displays error with overlay on compilation errors`, () => {
23+
cy.exec(
24+
`npm run update -- --file src/pages/error-handling/query-validation-error.js --replacements "${errorPlaceholder}:${errorReplacement}" --exact`
25+
)
26+
27+
cy.getOverlayIframe().contains(`Failed to compile`)
28+
cy.getOverlayIframe().contains(`There was an error in your GraphQL query`)
29+
// make sure we mark location
30+
cy.getOverlayIframe().contains(
31+
`src/pages/error-handling/query-validation-error.js`
32+
)
33+
cy.screenshot()
34+
})
35+
36+
it(`can recover without need to refresh manually`, () => {
37+
cy.exec(
38+
`npm run update -- --file src/pages/error-handling/query-validation-error.js --replacements "Working:Updated" --replacements "${errorReplacement}:${errorPlaceholder}" --exact`
39+
)
40+
41+
cy.getTestElement(`hot`).invoke(`text`).should(`contain`, `Updated`)
42+
cy.assertNoOverlayIframe()
43+
cy.screenshot()
44+
})
45+
})

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/error-handling/runtime-error.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
Cypress.on("uncaught:exception", (err, runnable) => {
2+
// returning false here prevents Cypress from
3+
// failing the test
4+
return false
5+
})
6+
7+
before(() => {
8+
cy.exec(
9+
`npm run update -- --file src/pages/error-handling/runtime-error.js --restore`
10+
)
11+
})
12+
13+
after(() => {
14+
cy.exec(
15+
`npm run update -- --file src/pages/error-handling/runtime-error.js --restore`
16+
)
17+
})
18+
19+
const errorPlaceholder = `// runtime-error`
20+
const errorReplacement = `window.a.b.c.d.e.f.g()`
21+
22+
describe(`testing error overlay and ability to automatically recover from runtime errors`, () => {
23+
it(`displays content initially (no errors yet)`, () => {
24+
cy.visit(`/error-handling/runtime-error/`).waitForRouteChange()
25+
cy.getTestElement(`hot`).invoke(`text`).should(`contain`, `Working`)
26+
})
27+
28+
it(`displays error with overlay on runtime errors`, () => {
29+
cy.exec(
30+
`npm run update -- --file src/pages/error-handling/runtime-error.js --replacements "${errorPlaceholder}:${errorReplacement}" --exact`
31+
)
32+
33+
cy.getOverlayIframe().contains(`Cannot read property`)
34+
// contains details
35+
cy.getOverlayIframe().contains(`src/pages/error-handling/runtime-error.js`)
36+
cy.screenshot()
37+
})
38+
39+
it(`can recover without need to refresh manually`, () => {
40+
cy.exec(
41+
`npm run update -- --file src/pages/error-handling/runtime-error.js --replacements "Working:Updated" --replacements "${errorReplacement}:${errorPlaceholder}" --exact`
42+
)
43+
44+
cy.getTestElement(`hot`).invoke(`text`).should(`contain`, `Updated`)
45+
cy.assertNoOverlayIframe()
46+
cy.screenshot()
47+
})
48+
})

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/error-handling/static-query-result-runtime-error.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
Cypress.on("uncaught:exception", (err, runnable) => {
2+
// returning false here prevents Cypress from
3+
// failing the test
4+
return false
5+
})
6+
7+
before(() => {
8+
cy.exec(
9+
`npm run update -- --file content/error-recovery/static-query.json --restore`
10+
)
11+
cy.exec(
12+
`npm run update -- --file src/pages/error-handling/static-query-result-runtime-error.js --restore`
13+
)
14+
})
15+
16+
after(() => {
17+
cy.exec(
18+
`npm run update -- --file content/error-recovery/static-query.json --restore`
19+
)
20+
cy.exec(
21+
`npm run update -- --file src/pages/error-handling/static-query-result-runtime-error.js --restore`
22+
)
23+
})
24+
25+
const errorPlaceholder = `false`
26+
const errorReplacement = `true`
27+
28+
describe(`testing error overlay and ability to automatically recover from runtime errors (static queries variant)`, () => {
29+
it(`displays content initially (no errors yet)`, () => {
30+
cy.visit(
31+
`/error-handling/static-query-result-runtime-error/`
32+
).waitForRouteChange()
33+
cy.getTestElement(`hot`).invoke(`text`).should(`contain`, `Working`)
34+
cy.getTestElement(`results`)
35+
.invoke(`text`)
36+
.should(`contain`, `"hasError": false`)
37+
})
38+
39+
it(`displays error with overlay on runtime errors`, () => {
40+
cy.exec(
41+
`npm run update -- --file content/error-recovery/static-query.json --replacements "${errorPlaceholder}:${errorReplacement}" --exact`
42+
)
43+
44+
// that's the exact error we throw and we expect to see that
45+
cy.getOverlayIframe().contains(`Static query results caused runtime error`)
46+
// contains details
47+
cy.getOverlayIframe().contains(
48+
`src/pages/error-handling/static-query-result-runtime-error.js`
49+
)
50+
cy.screenshot()
51+
})
52+
53+
it(`can recover without need to refresh manually`, () => {
54+
cy.exec(
55+
`npm run update -- --file content/error-recovery/static-query.json --replacements "${errorReplacement}:${errorPlaceholder}" --exact`
56+
)
57+
cy.exec(
58+
`npm run update -- --file src/pages/error-handling/static-query-result-runtime-error.js --replacements "Working:Updated" --exact`
59+
)
60+
61+
cy.getTestElement(`hot`).invoke(`text`).should(`contain`, `Updated`)
62+
cy.getTestElement(`results`)
63+
.invoke(`text`)
64+
.should(`contain`, `"hasError": false`)
65+
66+
cy.assertNoOverlayIframe()
67+
cy.screenshot()
68+
})
69+
})

‎e2e-tests/development-runtime/cypress/support/commands.js

+25-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Cypress.Commands.add(`lifecycleCallOrder`, expectedActionCallOrder =>
2424
if (expectedActionCallOrderLength > actionsLength) {
2525
return false
2626
}
27-
27+
2828
let prevActionIndex = -1
2929
for (let i = 0; i < actionsLength; i += 1) {
3030
const nextActionIndex = prevActionIndex + 1
@@ -81,6 +81,29 @@ Cypress.Commands.add(
8181
}
8282
)
8383

84-
Cypress.Commands.add(`assertRoute`, (route) => {
84+
Cypress.Commands.add(`assertRoute`, route => {
8585
cy.url().should(`equal`, `${window.location.origin}${route}`)
8686
})
87+
88+
// react-error-overlay is iframe, so this is just convenience helper
89+
// https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/#custom-command
90+
Cypress.Commands.add(`getOverlayIframe`, () => {
91+
// get the iframe > document > body
92+
// and retry until the body element is not empty
93+
return (
94+
cy
95+
.get(`iframe`, { log: true, timeout: 150000 })
96+
.its(`0.contentDocument.body`)
97+
.should(`not.be.empty`)
98+
// wraps "body" DOM element to allow
99+
// chaining more Cypress commands, like ".find(...)"
100+
// https://on.cypress.io/wrap
101+
.then(cy.wrap, { log: true })
102+
)
103+
})
104+
105+
Cypress.Commands.add(`assertNoOverlayIframe`, () => {
106+
// get the iframe > document > body
107+
// and retry until the body element is not empty
108+
return cy.get(`iframe`, { log: true, timeout: 15000 }).should(`not.exist`)
109+
})

‎e2e-tests/development-runtime/gatsby-config.js

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ module.exports = {
2929
},
3030
`gatsby-source-fake-data`,
3131
`gatsby-transformer-sharp`,
32+
`gatsby-transformer-json`,
3233
{
3334
resolve: `gatsby-transformer-remark`,
3435
options: {

‎e2e-tests/development-runtime/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"gatsby-plugin-sharp": "^2.0.37",
1414
"gatsby-seo": "^0.1.0",
1515
"gatsby-source-filesystem": "^2.0.33",
16+
"gatsby-transformer-json": "^2.4.14",
1617
"gatsby-transformer-remark": "^2.3.12",
1718
"gatsby-transformer-sharp": "^2.1.19",
1819
"isomorphic-fetch": "^2.2.1",

‎e2e-tests/development-runtime/scripts/update.js

+17-1
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,29 @@ const args = yargs
3434
`
3535
).trim(),
3636
type: `string`,
37+
})
38+
.option(`restore`, {
39+
default: false,
40+
type: `boolean`,
3741
}).argv
3842

3943
async function update() {
4044
const history = await getHistory()
4145

42-
const { file: fileArg, replacements } = args
46+
const { file: fileArg, replacements, restore } = args
4347
const filePath = path.resolve(fileArg)
48+
if (restore) {
49+
const original = history.get(filePath)
50+
if (original) {
51+
await fs.writeFile(filePath, original, `utf-8`)
52+
} else if (original === false) {
53+
await fs.remove(filePath)
54+
} else {
55+
console.log(`Didn't make changes to "${fileArg}". Nothing to restore.`)
56+
}
57+
history.delete(filePath)
58+
return
59+
}
4460
let exists = true
4561
if (!fs.existsSync(filePath)) {
4662
exists = false

‎e2e-tests/development-runtime/src/pages/error-handling/compile-error.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react"
2+
3+
function CompileError() {
4+
// compile-error
5+
return <p data-testid="hot">Working</p>
6+
}
7+
8+
export default CompileError

0 commit comments

Comments
 (0)
Please sign in to comment.