Skip to content

Commit 8950c4f

Browse files
piehpieh
authored
test(e2e): add base babelrc support tests for dev and prod (#30644)
* test(e2e): add base babelrc support tests for dev and prod * test(e2e): add editing .babelrc case * test(e2e): add adding .babelrc case * test(e2e): add removing .babelrc case * maybe this command will work in circle?
1 parent 538964f commit 8950c4f

File tree

15 files changed

+297
-13
lines changed

15 files changed

+297
-13
lines changed

‎e2e-tests/development-runtime/cypress/integration/functionality/babelrc.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
const TEST_ELEMENT = `test-element`
2+
3+
before(() => {
4+
cy.exec(`npm run reset`)
5+
})
6+
7+
after(() => {
8+
cy.exec(`npm run reset`)
9+
})
10+
11+
describe(`babelrc`, () => {
12+
it(`Applies .babelrc`, () => {
13+
cy.visit(`/babelrc/base/`).waitForRouteChange()
14+
15+
cy.getTestElement(TEST_ELEMENT)
16+
.invoke(`text`)
17+
.should(`eq`, `babel-rc-is-used`)
18+
})
19+
20+
describe(`hot reload`, () => {
21+
it(`editing .babelrc`, () => {
22+
cy.visit(`/babelrc/edit/`).waitForRouteChange()
23+
24+
cy.getTestElement(TEST_ELEMENT)
25+
.invoke(`text`)
26+
.should(`eq`, `babel-rc-initial`)
27+
28+
cy.exec(
29+
`npm run update -- --file src/pages/babelrc/edit/.babelrc --replacements "babel-rc-initial:babel-rc-edited" --exact`
30+
)
31+
32+
cy.waitForHmr()
33+
34+
cy.getTestElement(TEST_ELEMENT)
35+
.invoke(`text`)
36+
.should(`eq`, `babel-rc-edited`)
37+
})
38+
39+
it(`adding .babelrc`, () => {
40+
cy.visit(`/babelrc/add/`).waitForRouteChange()
41+
42+
cy.getTestElement(TEST_ELEMENT)
43+
.invoke(`text`)
44+
.should(`eq`, `babel-rc-test`)
45+
46+
cy.exec(
47+
`npm run update -- --file src/pages/babelrc/add/.babelrc --file-source src/pages/babelrc/add/.babelrc-fixture`
48+
)
49+
50+
// babel-loader doesn't actually hot reloads itself when new .babelrc file is added
51+
// this is because it registers dependency only if file already exists
52+
// ( https://github.com/babel/babel-loader/blob/1669ac07ee1eed28a8e6fcacbf1c07ceb06fe053/src/index.js#L214-L216 )
53+
// so to test hot-reloading here we actually have to invalidate js file, which would recompile it and discover
54+
// new babelrc file
55+
cy.exec(
56+
`npm run update -- --file src/pages/babelrc/add/index.js --replacements "foo-bar:foo-bar" --exact`
57+
)
58+
59+
cy.waitForHmr()
60+
61+
cy.getTestElement(TEST_ELEMENT)
62+
.invoke(`text`)
63+
.should(`eq`, `babel-rc-added`)
64+
})
65+
66+
it(`removing .babelrc`, () => {
67+
cy.visit(`/babelrc/remove/`).waitForRouteChange()
68+
69+
cy.getTestElement(TEST_ELEMENT)
70+
.invoke(`text`)
71+
.should(`eq`, `babel-rc-will-be-deleted`)
72+
73+
cy.exec(
74+
`npm run update -- --file src/pages/babelrc/remove/.babelrc --delete`
75+
)
76+
77+
// babel-loader doesn't actually hot reloads itself when .babelrc file is deleted
78+
// so to test hot-reloading here we actually have to invalidate js file, which would recompile it and discover
79+
// new babelrc file
80+
cy.exec(
81+
`npm run update -- --file src/pages/babelrc/remove/index.js --replacements "foo-bar:foo-bar" --exact`
82+
)
83+
84+
cy.waitForHmr()
85+
86+
cy.getTestElement(TEST_ELEMENT)
87+
.invoke(`text`)
88+
.should(`eq`, `babel-rc-test`)
89+
})
90+
})
91+
})

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"version": "1.0.0",
55
"author": "Dustin Schau <[email protected]>",
66
"dependencies": {
7+
"babel-plugin-search-and-replace": "^1.1.0",
78
"gatsby": "^3.0.0-next.6",
89
"gatsby-image": "^3.0.0-next.0",
910
"gatsby-plugin-image": "^1.0.0-next.5",

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

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ const args = yargs
1717
default: false,
1818
type: `boolean`,
1919
})
20+
.option(`delete`, {
21+
default: false,
22+
type: `boolean`,
23+
})
2024
.option(`fileContent`, {
2125
default: JSON.stringify(
2226
`
@@ -35,6 +39,9 @@ const args = yargs
3539
).trim(),
3640
type: `string`,
3741
})
42+
.option(`fileSource`, {
43+
type: `string`,
44+
})
3845
.option(`restore`, {
3946
default: false,
4047
type: `boolean`,
@@ -60,27 +67,35 @@ async function update() {
6067
let exists = true
6168
if (!fs.existsSync(filePath)) {
6269
exists = false
63-
await fs.writeFile(
64-
filePath,
65-
JSON.parse(args.fileContent).replace(/\+n/g, `\n`),
66-
`utf8`
67-
)
70+
let fileContent
71+
if (args.fileSource) {
72+
fileContent = await fs.readFile(args.fileSource, `utf8`)
73+
} else if (args.fileContent) {
74+
fileContent = JSON.parse(args.fileContent).replace(/\+n/g, `\n`)
75+
}
76+
await fs.writeFile(filePath, fileContent, `utf8`)
6877
}
6978
const file = await fs.readFile(filePath, `utf8`)
7079

7180
if (!history.has(filePath)) {
7281
history.set(filePath, exists ? file : false)
7382
}
7483

75-
const contents = replacements.reduce((replaced, pair) => {
76-
const [key, value] = pair.split(`:`)
77-
return replaced.replace(
78-
args.exact ? key : new RegExp(`%${key}%`, `g`),
79-
value
80-
)
81-
}, file)
84+
if (args.delete) {
85+
if (exists) {
86+
await fs.remove(filePath)
87+
}
88+
} else {
89+
const contents = replacements.reduce((replaced, pair) => {
90+
const [key, value] = pair.split(`:`)
91+
return replaced.replace(
92+
args.exact ? key : new RegExp(`%${key}%`, `g`),
93+
value
94+
)
95+
}, file)
8296

83-
await fs.writeFile(filePath, contents, `utf8`)
97+
await fs.writeFile(filePath, contents, `utf8`)
98+
}
8499

85100
await writeHistory(history)
86101
}

‎e2e-tests/development-runtime/src/pages/babelrc/add/.babelrc-fixture‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"plugins": [
3+
[
4+
"babel-plugin-search-and-replace",
5+
{
6+
"rules": [
7+
{
8+
"search": "babel-rc-test",
9+
"replace": "babel-rc-added",
10+
"searchTemplateStrings": true
11+
}
12+
13+
]
14+
}
15+
]
16+
],
17+
"presets": [
18+
"babel-preset-gatsby"
19+
]
20+
}

‎e2e-tests/development-runtime/src/pages/babelrc/add/index.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react"
2+
3+
export default function BabelrcAdd() {
4+
return (
5+
<>
6+
<p>
7+
Code block below should contain <code>babel-rc-test</code> first and
8+
after .babelrc addition it should contain <code>babel-rc-added</code>
9+
</p>
10+
<pre data-testid="test-element">babel-rc-test</pre>
11+
</>
12+
)
13+
}

‎e2e-tests/development-runtime/src/pages/babelrc/base/.babelrc‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"plugins": [
3+
[
4+
"babel-plugin-search-and-replace",
5+
{
6+
"rules": [
7+
{
8+
"search": "babel-rc-test",
9+
"replace": "babel-rc-is-used",
10+
"searchTemplateStrings": true
11+
}
12+
13+
]
14+
}
15+
]
16+
],
17+
"presets": [
18+
"babel-preset-gatsby"
19+
]
20+
}

‎e2e-tests/development-runtime/src/pages/babelrc/base/index.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react"
2+
3+
export default function BabelrcBase() {
4+
return (
5+
<>
6+
<p>
7+
Code block below should contain <code>babel-rc-is-used</code> when
8+
compiled
9+
</p>
10+
<pre data-testid="test-element">babel-rc-test</pre>
11+
</>
12+
)
13+
}

‎e2e-tests/development-runtime/src/pages/babelrc/edit/.babelrc‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"plugins": [
3+
[
4+
"babel-plugin-search-and-replace",
5+
{
6+
"rules": [
7+
{
8+
"search": "babel-rc-test",
9+
"replace": "babel-rc-initial",
10+
"searchTemplateStrings": true
11+
}
12+
13+
]
14+
}
15+
]
16+
],
17+
"presets": [
18+
"babel-preset-gatsby"
19+
]
20+
}

‎e2e-tests/development-runtime/src/pages/babelrc/edit/index.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react"
2+
3+
export default function BabelrcEdit() {
4+
return (
5+
<>
6+
<p>
7+
Code block below should contain <code>babel-rc-initial</code> first and
8+
after edit it should contain <code>babel-rc-edited</code>
9+
</p>
10+
<pre data-testid="test-element">babel-rc-test</pre>
11+
</>
12+
)
13+
}

‎e2e-tests/development-runtime/src/pages/babelrc/remove/.babelrc‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"plugins": [
3+
[
4+
"babel-plugin-search-and-replace",
5+
{
6+
"rules": [
7+
{
8+
"search": "babel-rc-test",
9+
"replace": "babel-rc-will-be-deleted",
10+
"searchTemplateStrings": true
11+
}
12+
13+
]
14+
}
15+
]
16+
],
17+
"presets": [
18+
"babel-preset-gatsby"
19+
]
20+
}

0 commit comments

Comments
 (0)