Skip to content

Commit c4c2e06

Browse files
netlify-botnetlify-bot
committed
test: expand navigation tests to test if effects are applied and not just if tags are inserted/updated/removed
1 parent b2e83e8 commit c4c2e06

File tree

15 files changed

+138
-29
lines changed

15 files changed

+138
-29
lines changed

‎e2e-tests/development-runtime/cypress/integration/head-function-export/navigation.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,14 @@ describe(`Head function export behavior during CSR navigation (Gatsby Link)`, ()
4444
.should(`equal`, data.static.link)
4545
cy.getTestElement(`jsonLD`).should(`have.text`, data.static.jsonLD)
4646

47+
// ensure that effects are applied
48+
cy.title().should(`eq`, data.static.title)
49+
cy.getTestElement(`linked-css-paragraph`).should(
50+
"have.css",
51+
"color",
52+
"rgb(102, 51, 153)"
53+
)
54+
4755
cy.getTestElement(`navigate-to-page-without-head-export`)
4856
.click()
4957
.waitForRouteChange()
@@ -55,6 +63,14 @@ describe(`Head function export behavior during CSR navigation (Gatsby Link)`, ()
5563
cy.getTestElement(`style`).should(`not.exist`)
5664
cy.getTestElement(`link`).should(`not.exist`)
5765
cy.getTestElement(`jsonLD`).should(`not.exist`)
66+
67+
// ensure that effects are applied
68+
cy.title().should(`eq`, ``)
69+
cy.getTestElement(`linked-css-paragraph`).should(
70+
"have.css",
71+
"color",
72+
"rgba(0, 0, 0, 0.8)"
73+
)
5874
})
5975

6076
/**
@@ -79,6 +95,14 @@ describe(`Head function export behavior during CSR navigation (Gatsby Link)`, ()
7995
.invoke(`attr`, `href`)
8096
.should(`equal`, data.static.link)
8197

98+
// ensure that effects are applied
99+
cy.title().should(`eq`, data.static.title)
100+
cy.getTestElement(`linked-css-paragraph`).should(
101+
"have.css",
102+
"color",
103+
"rgb(102, 51, 153)"
104+
)
105+
82106
// Navigate to a different page via Gatsby Link
83107
cy.getTestElement(`gatsby-link`).click()
84108

@@ -96,6 +120,14 @@ describe(`Head function export behavior during CSR navigation (Gatsby Link)`, ()
96120
.invoke(`attr`, `href`)
97121
.should(`equal`, data.queried.link)
98122

123+
// ensure that effects are applied
124+
cy.title().should(`eq`, data.queried.title)
125+
cy.getTestElement(`linked-css-paragraph`).should(
126+
"have.css",
127+
"color",
128+
"rgb(0, 0, 255)"
129+
)
130+
99131
// Navigate back to original page via Gatsby Link
100132
cy.getTestElement(`gatsby-link`).click().waitForRouteChange()
101133

@@ -112,5 +144,13 @@ describe(`Head function export behavior during CSR navigation (Gatsby Link)`, ()
112144
cy.getTestElement(`link`)
113145
.invoke(`attr`, `href`)
114146
.should(`equal`, data.static.link)
147+
148+
// ensure that effects are applied
149+
cy.title().should(`eq`, data.static.title)
150+
cy.getTestElement(`linked-css-paragraph`).should(
151+
"have.css",
152+
"color",
153+
"rgb(102, 51, 153)"
154+
)
115155
})
116156
})

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/head-export.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ describe(`hot reloading Head export`, () => {
77
cy.visit(`/head-function-export/basic`).waitForRouteChange()
88
})
99

10+
after(() => {
11+
cy.exec(
12+
`npm run update -- --file src/pages/head-function-export/basic.js --restore`
13+
)
14+
})
15+
1016
it(`displays placeholder content on launch`, () => {
1117
cy.getTestElement(TEST_ID)
1218
.invoke(`attr`, `content`)

‎e2e-tests/development-runtime/src/components/layout.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ html {
197197
box-sizing: inherit;
198198
}
199199
body {
200-
color: hsla(0, 0%, 0%, 0.8);
200+
color: rgba(0, 0, 0, 0.8);
201201
font-family: georgia, serif;
202202
font-weight: normal;
203203
word-wrap: break-word;

‎e2e-tests/development-runtime/src/pages/head-function-export/basic.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,16 @@ export default function HeadFunctionExportBasic() {
1818
>
1919
Navigate to without head export
2020
</Link>
21+
<p data-testid="linked-css-paragraph">
22+
Just some paragraph to test if linked css properly applies
23+
</p>
2124
</>
2225
)
2326
}
2427

2528
export function Head() {
26-
const {
27-
base,
28-
title,
29-
meta,
30-
noscript,
31-
style,
32-
link,
33-
extraMeta,
34-
jsonLD,
35-
} = data.static
29+
const { base, title, meta, noscript, style, link, extraMeta, jsonLD } =
30+
data.static
3631

3732
return (
3833
<>

‎e2e-tests/development-runtime/src/pages/head-function-export/page-query.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ export default function HeadFunctionExportPageQuery() {
77
<>
88
<h1>I test usage for the Head function export with a page query</h1>
99
<p>Some other words</p>
10+
<p data-testid="linked-css-paragraph">
11+
Just some paragraph to test if linked css properly applies
12+
</p>
1013
<Link data-testid="gatsby-link" to="/head-function-export/basic">
1114
Navigate to basic via Gatsby Link
1215
</Link>

‎e2e-tests/development-runtime/src/pages/head-function-export/without-head.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@ import * as React from "react"
33
export default function WithoutHead() {
44
return (
55
<>
6-
<h1>I am used to test cases where we navigae to a page without Head export</h1>
6+
<h1>
7+
I am used to test cases where we navigate to a page without Head export
8+
</h1>
9+
<p data-testid="linked-css-paragraph">
10+
Just some paragraph to test if linked css properly applies
11+
</p>
712
</>
813
)
914
}

‎e2e-tests/development-runtime/static/used-by-head-function-export-basic.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
p {
2-
color: rebeccapurple;
2+
color: rgb(102, 51, 153); /* rebeccapurple */
33
}

‎e2e-tests/development-runtime/static/used-by-head-function-export-query.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
p {
2-
color: blue;
2+
color: rgb(0, 0, 255); /* blue */
33
}

‎e2e-tests/production-runtime/cypress/integration/head-function-export/navigation.js‎

Lines changed: 54 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { page, data } from "../../../shared-data/head-function-export.js"
22

3-
Cypress.on('uncaught:exception', (err) => {
4-
if ((err.message.includes('Minified React error #418') || err.message.includes('Minified React error #423') || err.message.includes('Minified React error #425')) && Cypress.env(`TEST_PLUGIN_OFFLINE`)) {
3+
Cypress.on("uncaught:exception", err => {
4+
if (
5+
(err.message.includes("Minified React error #418") ||
6+
err.message.includes("Minified React error #423") ||
7+
err.message.includes("Minified React error #425")) &&
8+
Cypress.env(`TEST_PLUGIN_OFFLINE`)
9+
) {
510
return false
611
}
712
})
@@ -50,17 +55,33 @@ describe(`Head function export behavior during CSR navigation (Gatsby Link)`, ()
5055
.should(`equal`, data.static.link)
5156
cy.getTestElement(`jsonLD`).should(`have.text`, data.static.jsonLD)
5257

58+
// ensure that effects are applied
59+
cy.title().should(`eq`, data.static.title)
60+
cy.getTestElement(`linked-css-paragraph`).should(
61+
"have.css",
62+
"color",
63+
"rgb(102, 51, 153)"
64+
)
65+
5366
cy.getTestElement(`navigate-to-page-without-head-export`)
5467
.click()
5568
.waitForRouteChange()
5669

57-
cy.getTestElement(`base`).should(`not.exist`)
58-
cy.getTestElement(`title`).should(`not.exist`)
59-
cy.getTestElement(`meta`).should(`not.exist`)
60-
cy.getTestElement(`noscript`).should(`not.exist`)
61-
cy.getTestElement(`style`).should(`not.exist`)
62-
cy.getTestElement(`link`).should(`not.exist`)
63-
cy.getTestElement(`jsonLD`).should(`not.exist`)
70+
cy.getTestElement(`base`).should(`not.exist`)
71+
cy.getTestElement(`title`).should(`not.exist`)
72+
cy.getTestElement(`meta`).should(`not.exist`)
73+
cy.getTestElement(`noscript`).should(`not.exist`)
74+
cy.getTestElement(`style`).should(`not.exist`)
75+
cy.getTestElement(`link`).should(`not.exist`)
76+
cy.getTestElement(`jsonLD`).should(`not.exist`)
77+
78+
// ensure that effects are applied
79+
cy.title().should(`eq`, ``)
80+
cy.getTestElement(`linked-css-paragraph`).should(
81+
"have.css",
82+
"color",
83+
"rgba(0, 0, 0, 0.8)"
84+
)
6485
})
6586

6687
/**
@@ -85,6 +106,14 @@ describe(`Head function export behavior during CSR navigation (Gatsby Link)`, ()
85106
.invoke(`attr`, `href`)
86107
.should(`equal`, data.static.link)
87108

109+
// ensure that effects are applied
110+
cy.title().should(`eq`, data.static.title)
111+
cy.getTestElement(`linked-css-paragraph`).should(
112+
"have.css",
113+
"color",
114+
"rgb(102, 51, 153)"
115+
)
116+
88117
// Navigate to a different page via Gatsby Link
89118
cy.getTestElement(`gatsby-link`).click().waitForRouteChange()
90119

@@ -102,6 +131,14 @@ describe(`Head function export behavior during CSR navigation (Gatsby Link)`, ()
102131
.invoke(`attr`, `href`)
103132
.should(`equal`, data.queried.link)
104133

134+
// ensure that effects are applied
135+
cy.title().should(`eq`, data.queried.title)
136+
cy.getTestElement(`linked-css-paragraph`).should(
137+
"have.css",
138+
"color",
139+
"rgb(0, 0, 255)"
140+
)
141+
105142
// Navigate back to original page via Gatsby Link
106143
cy.getTestElement(`gatsby-link`).click().waitForRouteChange()
107144

@@ -118,5 +155,13 @@ describe(`Head function export behavior during CSR navigation (Gatsby Link)`, ()
118155
cy.getTestElement(`link`)
119156
.invoke(`attr`, `href`)
120157
.should(`equal`, data.static.link)
158+
159+
// ensure that effects are applied
160+
cy.title().should(`eq`, data.static.title)
161+
cy.getTestElement(`linked-css-paragraph`).should(
162+
"have.css",
163+
"color",
164+
"rgb(102, 51, 153)"
165+
)
121166
})
122167
})

‎e2e-tests/production-runtime/src/components/layout.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ html {
197197
box-sizing: inherit;
198198
}
199199
body {
200-
color: hsla(0, 0%, 0%, 0.8);
200+
color: rgba(0, 0, 0, 0.8);
201201
font-family: georgia, serif;
202202
font-weight: normal;
203203
word-wrap: break-word;

0 commit comments

Comments
 (0)