Skip to content

Commit dd43a16

Browse files
marvinjudemarvinjude
committed
add e2e-tests
1 parent d6b86dd commit dd43a16

File tree

18 files changed

+274
-85
lines changed

18 files changed

+274
-85
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ it(`Head function export receive correct props`, () => {
1616
pathname: headFunctionExportSharedData.page.correctProps,
1717
}
1818

19-
const pageContext = headFunctionExportSharedData.data.context
19+
const pageContext = headFunctionExportSharedData.data.pageContext
2020

2121
cy.getTestElement(`pageContext`)
2222
.invoke(`attr`, `content`)

‎e2e-tests/development-runtime/cypress/integration/head-function-export/head-with-wrap-root-element.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import headFunctionExportSharedData from "../../../shared-data/head-function-export.js"
2+
import { contextValue } from "../../../src/app-context.js"
3+
4+
describe(`Head with wrapRootElement`, () => {
5+
it(`can pickup deeply nested valid head elements`, () => {
6+
cy.visit(
7+
headFunctionExportSharedData.page.headWithWrapRooElement
8+
).waitForRouteChange()
9+
10+
const {data} = headFunctionExportSharedData;
11+
12+
cy.getTestElement(`base`)
13+
.invoke(`attr`, `href`)
14+
.should(`equal`, data.static.base)
15+
cy.getTestElement(`title`).should(`have.text`, contextValue.posts[0].title)
16+
cy.getTestElement(`meta`)
17+
.invoke(`attr`, `content`)
18+
.should(`equal`, contextValue.posts[1].title)
19+
cy.getTestElement(`noscript`).should(`have.text`, data.static.noscript)
20+
cy.getTestElement(`style`).should(`contain`, data.static.style)
21+
cy.getTestElement(`link`)
22+
.invoke(`attr`, `href`)
23+
.should(`equal`, data.static.link)
24+
cy.getTestElement(`jsonLD`).should(`have.text`, data.static.jsonLD)
25+
})
26+
27+
it(`can use context values provided in wrapRootElement`, () => {
28+
cy.visit(
29+
headFunctionExportSharedData.page.headWithWrapRooElement
30+
).waitForRouteChange()
31+
32+
cy.getTestElement(`title`).should(`have.text`, contextValue.posts[0].title)
33+
cy.getTestElement(`meta`)
34+
.invoke(`attr`, `content`)
35+
.should(`equal`, contextValue.posts[1].title)
36+
})
37+
})

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ exports.createPages = async function createPages({
262262
component: path.resolve(
263263
`src/templates/head-function-export/correct-props.js`
264264
),
265-
context: headFunctionExportSharedData.data.context,
265+
context: headFunctionExportSharedData.data.pageContext,
266266
})
267267

268268
createRedirect({

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

+10-10
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@
55
"author": "Dustin Schau <[email protected]>",
66
"dependencies": {
77
"babel-plugin-search-and-replace": "^1.1.1",
8-
"gatsby": "next",
8+
"gatsby": "5.5.0-next.1-dev-1674130520251",
99
"gatsby-image": "next",
10-
"gatsby-plugin-image": "next",
10+
"gatsby-plugin-image": "3.5.0-next.1-dev-1674130520251",
1111
"gatsby-plugin-less": "next",
12-
"gatsby-plugin-manifest": "next",
13-
"gatsby-plugin-offline": "next",
12+
"gatsby-plugin-manifest": "5.5.0-next.1-dev-1674130520251",
13+
"gatsby-plugin-offline": "6.5.0-next.1-dev-1674130520251",
1414
"gatsby-plugin-sass": "next",
15-
"gatsby-plugin-sharp": "next",
15+
"gatsby-plugin-sharp": "5.5.0-next.1-dev-1674130520251",
1616
"gatsby-plugin-stylus": "next",
17-
"gatsby-remark-images": "next",
18-
"gatsby-source-filesystem": "next",
17+
"gatsby-remark-images": "7.5.0-next.1-dev-1674130520251",
18+
"gatsby-source-filesystem": "5.5.0-next.1-dev-1674130520251",
1919
"gatsby-transformer-json": "next",
20-
"gatsby-transformer-remark": "next",
21-
"gatsby-transformer-sharp": "next",
20+
"gatsby-transformer-remark": "6.5.0-next.1-dev-1674130520251",
21+
"gatsby-transformer-sharp": "5.5.0-next.1-dev-1674130520251",
2222
"node-fetch": "^2.6.7",
2323
"prop-types": "^15.6.2",
2424
"react": "^18.2.0",
@@ -66,7 +66,7 @@
6666
"cypress-image-snapshot": "^4.0.1",
6767
"express": "^4.18.2",
6868
"fs-extra": "^11.1.0",
69-
"gatsby-core-utils": "next",
69+
"gatsby-core-utils": "4.5.0-next.1-dev-1674130520251",
7070
"gatsby-cypress": "next",
7171
"is-ci": "^3.0.1",
7272
"prettier": "^2.8.1",

‎e2e-tests/development-runtime/shared-data/head-function-export.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const page = {
1313
fsRouteApi: `${path}/fs-route-api/`,
1414
deduplication: `${path}/deduplication/`,
1515
htmlAndBodyAttributes: `${path}/html-and-body-attributes/`,
16+
headWithWrapRooElement: `${path}/head-with-wrap-root-element/`,
1617
}
1718

1819
const data = {
@@ -57,7 +58,7 @@ const data = {
5758
fsRouteApi: {
5859
slug: `/fs-route-api`,
5960
},
60-
context: {
61+
pageContext: {
6162
key: "value",
6263
someKey: "someValue",
6364
},

‎e2e-tests/development-runtime/src/app-context.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react"
2+
3+
const AppContext = React.createContext()
4+
const contextValue = {
5+
posts: [
6+
{
7+
title: `My first blog post`,
8+
content: `This is my first blog post`,
9+
},
10+
{
11+
title: `My second blog post`,
12+
content: `This is my second blog post`,
13+
},
14+
],
15+
}
16+
17+
const AppContextProvider = ({ children }) => {
18+
return (
19+
<AppContext.Provider value={contextValue}>
20+
{children}
21+
</AppContext.Provider>
22+
)
23+
}
24+
25+
export { AppContext, AppContextProvider, contextValue }

‎e2e-tests/development-runtime/src/components/footer.js

+14-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import React, { useContext } from "react"
2-
import { ContextForSlices } from "../context-for-slices"
2+
import { AppContext } from "../app-context"
33

44
// Use as a Slice
5-
function Footer({ framework, lang, sliceContext: { framework: frameworkViaContext }}) {
6-
const { posts } = useContext(ContextForSlices)
5+
function Footer({
6+
framework,
7+
lang,
8+
sliceContext: { framework: frameworkViaContext },
9+
}) {
10+
const { posts } = useContext(AppContext)
711

812
return (
913
<footer
@@ -12,10 +16,13 @@ function Footer({ framework, lang, sliceContext: { framework: frameworkViaContex
1216
fontSize: `12px`,
1317
}}
1418
>
15-
<span data-testid="footer-slice-context-value">{frameworkViaContext}</span>
16-
<span data-testid="footer-static-text">Built with {` `}</span>
17-
<span data-testid="footer-props">{`${framework}${lang}`}</span>
18-
{` `}Posts Count: <span data-testid="footer-context-derieved-value">{`${posts.length}`}</span>
19+
<span data-testid="footer-slice-context-value">
20+
{frameworkViaContext}
21+
</span>
22+
<span data-testid="footer-static-text">Built with {` `}</span>
23+
<span data-testid="footer-props">{`${framework}${lang}`}</span>
24+
{` `}Posts Count:{" "}
25+
<span data-testid="footer-context-derieved-value">{`${posts.length}`}</span>
1926
</footer>
2027
)
2128
}

‎e2e-tests/development-runtime/src/context-for-slices.js

-25
This file was deleted.

‎e2e-tests/development-runtime/src/pages/head-function-export/head-with-wrap-root-element.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import * as React from "react"
2+
import { data } from "../../../shared-data/head-function-export"
3+
import { AppContext } from "../../app-context"
4+
5+
export default function HeadWithWrapRootElement() {
6+
return (
7+
<>
8+
<h1>
9+
I test that <code>wrapRootElement</code> + <code>Head</code> work
10+
correctly together
11+
</h1>
12+
<p>Just FYI, Here are few thing that get tested on this page </p>
13+
<ul>
14+
<li>Head can pickup nested head tags wrapped in UI elements</li>
15+
<li>Head can consume context from wrapRootElement</li>
16+
</ul>
17+
</>
18+
)
19+
}
20+
21+
// wrapRootElement introduces further nesting on top of this, making it more deeply nested.
22+
export function Head() {
23+
const { base, noscript, style, link, jsonLD } = data.static
24+
const contextValue = React.useContext(AppContext)
25+
26+
return (
27+
<div>
28+
<base data-testid="base" href={base} />
29+
<title data-testid="title">{contextValue.posts[0].title}</title>
30+
<meta
31+
data-testid="meta"
32+
name="author"
33+
content={contextValue.posts[1].title}
34+
/>
35+
<noscript data-testid="noscript">{noscript}</noscript>
36+
<style data-testid="style">
37+
{`
38+
h1 {
39+
color: ${style};
40+
}
41+
`}
42+
</style>
43+
<div>
44+
<link data-testid="link" href={link} rel="stylesheet" />
45+
<script data-testid="jsonLD" type="application/ld+json">
46+
{jsonLD}
47+
</script>
48+
</div>
49+
</div>
50+
)
51+
}

‎e2e-tests/development-runtime/src/wrap-root-element.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react"
22
import { StaticQuery, graphql, Script } from "gatsby"
33
import { scripts } from "../gatsby-script-scripts"
4-
import { ContextForSlicesProvider } from "./context-for-slices"
4+
import { AppContextProvider } from "./app-context"
55

66
const WrapRootElement = ({ element }) => (
77
<StaticQuery
@@ -19,7 +19,7 @@ const WrapRootElement = ({ element }) => (
1919
siteMetadata: { title },
2020
},
2121
}) => (
22-
<ContextForSlicesProvider>
22+
<AppContextProvider>
2323
{element}
2424
<Script src={scripts.jQuery} strategy="post-hydrate" />
2525
<Script src={scripts.popper} strategy="idle" />
@@ -30,7 +30,7 @@ const WrapRootElement = ({ element }) => (
3030
%TEST_HMR_IN_GATSBY_BROWSER%
3131
</div>
3232
</div>
33-
</ContextForSlicesProvider>
33+
</AppContextProvider>
3434
)}
3535
/>
3636
)

‎e2e-tests/production-runtime/cypress/integration/head-function-export/head-with-wrap-root-element.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import headFunctionExportSharedData from "../../../shared-data/head-function-export.js"
2+
import { contextValue } from "../../../src/app-context.js"
3+
4+
describe(`Head with wrapRootElement`, () => {
5+
it(`can pickup deeply nested valid head elements`, () => {
6+
cy.visit(
7+
headFunctionExportSharedData.page.headWithWrapRooElement
8+
).waitForRouteChange()
9+
10+
console.log(
11+
{headFunctionExportSharedData}
12+
)
13+
14+
const {data} = headFunctionExportSharedData;
15+
16+
cy.getTestElement(`base`)
17+
.invoke(`attr`, `href`)
18+
.should(`equal`, data.static.base)
19+
cy.getTestElement(`title`).should(`have.text`, contextValue.posts[0].title)
20+
cy.getTestElement(`meta`)
21+
.invoke(`attr`, `content`)
22+
.should(`equal`, contextValue.posts[1].title)
23+
cy.getTestElement(`noscript`).should(`have.text`, data.static.noscript)
24+
cy.getTestElement(`style`).should(`contain`, data.static.style)
25+
cy.getTestElement(`link`)
26+
.invoke(`attr`, `href`)
27+
.should(`equal`, data.static.link)
28+
cy.getTestElement(`jsonLD`).should(`have.text`, data.static.jsonLD)
29+
})
30+
31+
it(`can use context values provided in wrapRootElement`, () => {
32+
cy.visit(
33+
headFunctionExportSharedData.page.headWithWrapRooElement
34+
).waitForRouteChange()
35+
36+
cy.getTestElement(`title`).should(`have.text`, contextValue.posts[0].title)
37+
cy.getTestElement(`meta`)
38+
.invoke(`attr`, `content`)
39+
.should(`equal`, contextValue.posts[1].title)
40+
})
41+
})

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@
66
"dependencies": {
77
"babel-plugin-search-and-replace": "^1.1.1",
88
"cypress": "^9.7.0",
9-
"gatsby": "next",
9+
"gatsby": "5.5.0-next.1-dev-1674143992254",
1010
"gatsby-cypress": "next",
11-
"gatsby-plugin-image": "next",
11+
"gatsby-plugin-image": "3.5.0-next.1-dev-1674143992254",
1212
"gatsby-plugin-less": "next",
13-
"gatsby-plugin-manifest": "next",
14-
"gatsby-plugin-offline": "next",
13+
"gatsby-plugin-manifest": "5.5.0-next.1-dev-1674143992254",
14+
"gatsby-plugin-offline": "6.5.0-next.1-dev-1674143992254",
1515
"gatsby-plugin-sass": "next",
16-
"gatsby-plugin-sharp": "next",
16+
"gatsby-plugin-sharp": "5.5.0-next.1-dev-1674143992254",
1717
"gatsby-plugin-stylus": "next",
18-
"gatsby-source-filesystem": "next",
18+
"gatsby-source-filesystem": "5.5.0-next.1-dev-1674143992254",
1919
"glob": "^8.0.3",
2020
"react": "^18.2.0",
2121
"react-dom": "^18.2.0",
@@ -59,7 +59,7 @@
5959
"cross-env": "^7.0.3",
6060
"express": "^4.18.2",
6161
"fs-extra": "^11.1.0",
62-
"gatsby-core-utils": "next",
62+
"gatsby-core-utils": "4.5.0-next.1-dev-1674143992254",
6363
"is-ci": "^3.0.1",
6464
"prettier": "^2.8.1",
6565
"start-server-and-test": "^1.14.0"

‎e2e-tests/production-runtime/shared-data/head-function-export.js

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const page = {
1414
deduplication: `${path}/deduplication/`,
1515
pageWithUseLocation: `${path}/page-with-uselocation/`,
1616
htmlAndBodyAttributes: `${path}/html-and-body-attributes/`,
17+
headWithWrapRooElement: `${path}/head-with-wrap-root-element/`,
1718
}
1819

1920
const data = {

‎e2e-tests/production-runtime/src/app-context.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react"
2+
3+
const AppContext = React.createContext()
4+
const contextValue = {
5+
posts: [
6+
{
7+
title: `My first blog post`,
8+
content: `This is my first blog post`,
9+
},
10+
{
11+
title: `My second blog post`,
12+
content: `This is my second blog post`,
13+
},
14+
],
15+
}
16+
17+
const AppContextProvider = ({ children }) => {
18+
return (
19+
<AppContext.Provider value={contextValue}>
20+
{children}
21+
</AppContext.Provider>
22+
)
23+
}
24+
25+
export { AppContext, AppContextProvider, contextValue }

‎e2e-tests/production-runtime/src/components/footer.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { useContext } from "react"
2-
import { ContextForSlices } from "../context-for-slices"
2+
import { AppContext } from "../app-context"
33

44
// Use as a Slice
55
function Footer({ framework, lang, sliceContext: { framework: frameworkViaContext }}) {
6-
const { posts } = useContext(ContextForSlices)
6+
const { posts } = useContext(AppContext)
77

88
return (
99
<footer

0 commit comments

Comments
 (0)