Skip to content

Commit bd85555

Browse files
ChristopherBiscardisidharthachatterjee
ChristopherBiscardi
authored and
sidharthachatterjee
committed
feat(gatsby): enable local themes (#15856)
1 parent c2ed766 commit bd85555

File tree

35 files changed

+342
-61
lines changed

35 files changed

+342
-61
lines changed

‎e2e-tests/themes/development-runtime/cypress/integration/components.js

+24-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
11
/* global cy */
22

33
describe(`Components`, () => {
4-
it(`can be added by themes`, () => {
5-
cy.visit(`/shadowed`).waitForRouteChange()
6-
cy.getTestElement(`date`).contains(`6/28/1993`)
4+
describe(`can be added by themes`, () => {
5+
it(`installed theme`, () => {
6+
cy.visit(`/shadowed`).waitForRouteChange()
7+
cy.getTestElement(`date`).contains(`6/28/1993`)
8+
})
9+
it(`local theme`, () => {
10+
cy.visit(`/shadowed-local`).waitForRouteChange()
11+
cy.getTestElement(`header`).contains(
12+
`This is component to test shadowing of local theme`
13+
)
14+
})
715
})
8-
it(`added by themes can be shadowed`, () => {
9-
cy.visit(`/shadowed`).waitForRouteChange()
10-
cy.getTestElement(`time`).contains(`2:39:07 PM`)
16+
describe(`added by themes can be shadowed`, () => {
17+
it(`installed theme`, () => {
18+
cy.visit(`/shadowed`).waitForRouteChange()
19+
cy.getTestElement(`time`).contains(`2:39:07 PM`)
20+
})
21+
it(`local theme`, () => {
22+
cy.visit(`/shadowed-local`).waitForRouteChange()
23+
cy.getTestElement(`pre`).contains(`This is in main site`)
24+
cy.getTestElement(`pre`).should(
25+
`not.contain`,
26+
`This is in gatsby-theme-local`
27+
)
28+
})
1129
})
1230
})

‎e2e-tests/themes/development-runtime/cypress/integration/pages.js

+21-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
11
/* global cy */
22

33
describe(`Pages`, () => {
4-
it(`can be added by themes`, () => {
5-
cy.visit(`/about`).waitForRouteChange()
6-
cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
4+
describe(`can be added by themes`, () => {
5+
it(`installed theme`, () => {
6+
cy.visit(`/about`).waitForRouteChange()
7+
cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
8+
})
9+
it(`local theme`, () => {
10+
cy.visit(`/page-from-local`).waitForRouteChange()
11+
cy.getTestElement(`title`).contains(`Page from local theme`)
12+
})
713
})
8-
it(`added by themes can be shadowed`, () => {
9-
cy.visit(`/contact`).waitForRouteChange()
10-
cy.getTestElement(`title`).contains(
11-
`A title since the theme didn't have one`
12-
)
14+
describe(`added by themes can be shadowed`, () => {
15+
it(`installed theme`, () => {
16+
cy.visit(`/contact`).waitForRouteChange()
17+
cy.getTestElement(`title`).contains(
18+
`A title since the theme didn't have one`
19+
)
20+
})
21+
22+
it(`local theme`, () => {
23+
cy.visit(`/page-from-local-overwrite`).waitForRouteChange()
24+
cy.getTestElement(`title`).contains(`Overwritten page from local theme`)
25+
})
1326
})
1427
})

‎e2e-tests/themes/development-runtime/cypress/integration/site-metadata.js

+18-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,24 @@
11
/* global cy */
22

33
describe(`Site Metadata`, () => {
4-
it(`can be added by themes`, () => {
5-
cy.visit(`/`).waitForRouteChange()
6-
cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
4+
describe(`can be added by themes`, () => {
5+
it(`installed theme`, () => {
6+
cy.visit(`/`).waitForRouteChange()
7+
cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
8+
})
9+
it(`local theme`, () => {
10+
cy.visit(`/`).waitForRouteChange()
11+
cy.getTestElement(`description`).contains(`Description placeholder`)
12+
})
713
})
8-
it(`added by themes can be overridden`, () => {
9-
cy.visit(`/`).waitForRouteChange()
10-
cy.getTestElement(`author`).contains(`Sidhartha Chatterjee`)
14+
describe(`added by themes can be overridden`, () => {
15+
it(`installed theme`, () => {
16+
cy.visit(`/`).waitForRouteChange()
17+
cy.getTestElement(`author`).contains(`Sidhartha Chatterjee`)
18+
})
19+
it(`local theme`, () => {
20+
cy.visit(`/`).waitForRouteChange()
21+
cy.getTestElement(`social_twitter`).contains(`chatsidhartha`)
22+
})
1123
})
1224
})

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
module.exports = {
22
siteMetadata: {
33
author: `Sidhartha Chatterjee`,
4+
social: {
5+
twitter: `chatsidhartha`,
6+
},
47
},
5-
plugins: [`gatsby-theme-about`],
8+
plugins: [`gatsby-theme-about`, `gatsby-theme-local`],
69
}

‎e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/gatsby-config.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = {
2+
siteMetadata: {
3+
description: `Description placeholder`,
4+
social: {
5+
twitter: `twitter placeholder`,
6+
},
7+
},
8+
plugins: [
9+
{
10+
resolve: `gatsby-plugin-page-creator`,
11+
options: {
12+
path: `${__dirname}/src/pages`,
13+
},
14+
},
15+
],
16+
}

‎e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// no-op

‎e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"name": "gatsby-theme-local"
3+
}

‎e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/src/components/shadowing-local.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react"
2+
import ToBeShadowed from "./to-be-shadowed"
3+
4+
export default () => (
5+
<>
6+
<header data-testid="header">
7+
This is component to test shadowing of local theme
8+
</header>
9+
<pre data-testid="pre">
10+
<ToBeShadowed />
11+
</pre>
12+
</>
13+
)

‎e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/src/components/to-be-shadowed.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from "react"
2+
3+
export default () => <>This is in gatsby-theme-local</>

‎e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/src/pages/page-from-local-overwrite.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from "react"
2+
3+
export default () => <h1 data-testid="title">Page from local theme</h1>

‎e2e-tests/themes/development-runtime/plugins/gatsby-theme-local/src/pages/page-from-local.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from "react"
2+
3+
export default () => <h1 data-testid="title">Page from local theme</h1>

‎e2e-tests/themes/development-runtime/src/gatsby-theme-local/components/to-be-shadowed.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from "react"
2+
3+
export default () => <>This is in main site</>

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

+6
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ export default ({ data }) => (
55
<>
66
<p data-testid="title">{data.site.siteMetadata.title}</p>
77
<p data-testid="author">{data.site.siteMetadata.author}</p>
8+
<p data-testid="description">{data.site.siteMetadata.description}</p>
9+
<p data-testid="social_twitter">{data.site.siteMetadata.social.twitter}</p>
810
</>
911
)
1012

@@ -14,6 +16,10 @@ export const pageQuery = graphql`
1416
siteMetadata {
1517
title
1618
author
19+
description
20+
social {
21+
twitter
22+
}
1723
}
1824
}
1925
}

‎e2e-tests/themes/development-runtime/src/pages/page-from-local-overwrite.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from "react"
2+
3+
export default () => (
4+
<h1 data-testid="title">Overwritten page from local theme</h1>
5+
)

‎e2e-tests/themes/development-runtime/src/pages/shadowed-local.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from "react"
2+
3+
import LocalShadowingComponent from "../../plugins/gatsby-theme-local/src/components/shadowing-local"
4+
5+
export default () => <LocalShadowingComponent />

‎e2e-tests/themes/production-runtime/cypress/integration/components.js

+24-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
11
/* global cy */
22

33
describe(`Components`, () => {
4-
it(`can be added by themes`, () => {
5-
cy.visit(`/shadowed`).waitForRouteChange()
6-
cy.getTestElement(`date`).contains(`6/28/1993`)
4+
describe(`can be added by themes`, () => {
5+
it(`installed theme`, () => {
6+
cy.visit(`/shadowed`).waitForRouteChange()
7+
cy.getTestElement(`date`).contains(`6/28/1993`)
8+
})
9+
it(`local theme`, () => {
10+
cy.visit(`/shadowed-local`).waitForRouteChange()
11+
cy.getTestElement(`header`).contains(
12+
`This is component to test shadowing of local theme`
13+
)
14+
})
715
})
8-
it(`added by themes can be shadowed`, () => {
9-
cy.visit(`/shadowed`).waitForRouteChange()
10-
cy.getTestElement(`time`).contains(`2:39:07 PM`)
16+
describe(`added by themes can be shadowed`, () => {
17+
it(`installed theme`, () => {
18+
cy.visit(`/shadowed`).waitForRouteChange()
19+
cy.getTestElement(`time`).contains(`2:39:07 PM`)
20+
})
21+
it(`local theme`, () => {
22+
cy.visit(`/shadowed-local`).waitForRouteChange()
23+
cy.getTestElement(`pre`).contains(`This is in main site`)
24+
cy.getTestElement(`pre`).should(
25+
`not.contain`,
26+
`This is in gatsby-theme-local`
27+
)
28+
})
1129
})
1230
})

‎e2e-tests/themes/production-runtime/cypress/integration/pages.js

+21-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
11
/* global cy */
22

33
describe(`Pages`, () => {
4-
it(`can be added by themes`, () => {
5-
cy.visit(`/about`).waitForRouteChange()
6-
cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
4+
describe(`can be added by themes`, () => {
5+
it(`installed theme`, () => {
6+
cy.visit(`/about`).waitForRouteChange()
7+
cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
8+
})
9+
it(`local theme`, () => {
10+
cy.visit(`/page-from-local`).waitForRouteChange()
11+
cy.getTestElement(`title`).contains(`Page from local theme`)
12+
})
713
})
8-
it(`added by themes can be shadowed`, () => {
9-
cy.visit(`/contact`).waitForRouteChange()
10-
cy.getTestElement(`title`).contains(
11-
`A title since the theme didn't have one`
12-
)
14+
describe(`added by themes can be shadowed`, () => {
15+
it(`installed theme`, () => {
16+
cy.visit(`/contact`).waitForRouteChange()
17+
cy.getTestElement(`title`).contains(
18+
`A title since the theme didn't have one`
19+
)
20+
})
21+
22+
it(`local theme`, () => {
23+
cy.visit(`/page-from-local-overwrite`).waitForRouteChange()
24+
cy.getTestElement(`title`).contains(`Overwritten page from local theme`)
25+
})
1326
})
1427
})

‎e2e-tests/themes/production-runtime/cypress/integration/site-metadata.js

+18-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,24 @@
11
/* global cy */
22

33
describe(`Site Metadata`, () => {
4-
it(`can be added by themes`, () => {
5-
cy.visit(`/`).waitForRouteChange()
6-
cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
4+
describe(`can be added by themes`, () => {
5+
it(`installed theme`, () => {
6+
cy.visit(`/`).waitForRouteChange()
7+
cy.getTestElement(`title`).contains(`Blog Title Placeholder`)
8+
})
9+
it(`local theme`, () => {
10+
cy.visit(`/`).waitForRouteChange()
11+
cy.getTestElement(`description`).contains(`Description placeholder`)
12+
})
713
})
8-
it(`added by themes can be overridden`, () => {
9-
cy.visit(`/`).waitForRouteChange()
10-
cy.getTestElement(`author`).contains(`Sidhartha Chatterjee`)
14+
describe(`added by themes can be overridden`, () => {
15+
it(`installed theme`, () => {
16+
cy.visit(`/`).waitForRouteChange()
17+
cy.getTestElement(`author`).contains(`Sidhartha Chatterjee`)
18+
})
19+
it(`local theme`, () => {
20+
cy.visit(`/`).waitForRouteChange()
21+
cy.getTestElement(`social_twitter`).contains(`chatsidhartha`)
22+
})
1123
})
1224
})

‎e2e-tests/themes/production-runtime/gatsby-config.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
module.exports = {
22
siteMetadata: {
33
author: `Sidhartha Chatterjee`,
4+
social: {
5+
twitter: `chatsidhartha`,
6+
},
47
},
5-
plugins: [`gatsby-theme-about`],
8+
plugins: [`gatsby-theme-about`, `gatsby-theme-local`],
69
}

‎e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/gatsby-config.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = {
2+
siteMetadata: {
3+
description: `Description placeholder`,
4+
social: {
5+
twitter: `twitter placeholder`,
6+
},
7+
},
8+
plugins: [
9+
{
10+
resolve: `gatsby-plugin-page-creator`,
11+
options: {
12+
path: `${__dirname}/src/pages`,
13+
},
14+
},
15+
],
16+
}

‎e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// no-op

‎e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"name": "gatsby-theme-local"
3+
}

‎e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/src/components/shadowing-local.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react"
2+
import ToBeShadowed from "./to-be-shadowed"
3+
4+
export default () => (
5+
<>
6+
<header data-testid="header">
7+
This is component to test shadowing of local theme
8+
</header>
9+
<pre data-testid="pre">
10+
<ToBeShadowed />
11+
</pre>
12+
</>
13+
)

‎e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/src/components/to-be-shadowed.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from "react"
2+
3+
export default () => <>This is in gatsby-theme-local</>

‎e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/src/pages/page-from-local-overwrite.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from "react"
2+
3+
export default () => <h1 data-testid="title">Page from local theme</h1>

‎e2e-tests/themes/production-runtime/plugins/gatsby-theme-local/src/pages/page-from-local.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from "react"
2+
3+
export default () => <h1 data-testid="title">Page from local theme</h1>

‎e2e-tests/themes/production-runtime/src/gatsby-theme-local/components/to-be-shadowed.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from "react"
2+
3+
export default () => <>This is in main site</>

‎e2e-tests/themes/production-runtime/src/pages/index.js

+6
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ export default ({ data }) => (
55
<>
66
<p data-testid="title">{data.site.siteMetadata.title}</p>
77
<p data-testid="author">{data.site.siteMetadata.author}</p>
8+
<p data-testid="description">{data.site.siteMetadata.description}</p>
9+
<p data-testid="social_twitter">{data.site.siteMetadata.social.twitter}</p>
810
</>
911
)
1012

@@ -14,6 +16,10 @@ export const pageQuery = graphql`
1416
siteMetadata {
1517
title
1618
author
19+
description
20+
social {
21+
twitter
22+
}
1723
}
1824
}
1925
}

‎e2e-tests/themes/production-runtime/src/pages/page-from-local-overwrite.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from "react"
2+
3+
export default () => (
4+
<h1 data-testid="title">Overwritten page from local theme</h1>
5+
)

‎e2e-tests/themes/production-runtime/src/pages/shadowed-local.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from "react"
2+
3+
import LocalShadowingComponent from "../../plugins/gatsby-theme-local/src/components/shadowing-local"
4+
5+
export default () => <LocalShadowingComponent />

0 commit comments

Comments
 (0)