Skip to content

Commit 3f12544

Browse files
verysprywardpeet
veryspry
and
wardpeet
authored
fix(gatsby-plugin-utils): path pieces too long and url safe base64 encoding (#35160)
Co-authored-by: Ward Peeters <[email protected]>
1 parent dc4600d commit 3f12544

File tree

25 files changed

+812
-475
lines changed

25 files changed

+812
-475
lines changed

‎e2e-tests/contentful/cypress/integration/gatsby-image-cdn.js

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,28 +15,20 @@ describe(`gatsby-image-cdn urls`, () => {
1515
it(`creates a proper gatsby image cdn url`, testConfig, () => {
1616
const type = "gatsby-image-cdn"
1717

18-
cy.get(`[data-cy="${type}"]`)
19-
.find(".gatsby-image-wrapper > picture > img")
20-
.each(($el, i) => {
21-
cy.wrap($el).should("be.visible")
22-
cy.wrap($el)
23-
.should("have.attr", "srcset")
24-
.and(srcset => {
25-
expect(srcset).to.match(/_gatsby\/image/)
18+
cy.get(`[data-cy="${type}"] .gatsby-image-wrapper > picture > img`).then(
19+
async $imgs => {
20+
let i = 0
21+
for (const $img of $imgs) {
22+
cy.wrap($img).should("be.visible")
2623

27-
parseSrcset(srcset).forEach(({ url }) => {
28-
const [, , , sourceUrl64, _args64, filename] = url.split(`/`)
29-
const sourceUrl = window.atob(sourceUrl64)
30-
expect(sourceUrl).to.equal(
31-
"https://images.ctfassets.net/k8iqpp6u0ior/3BSI9CgDdAn1JchXmY5IJi/f97a2185b3395591b98008647ad6fd3c/camylla-battani-AoqgGAqrLpU-unsplash.jpg"
32-
)
33-
expect(filename).to.equal(
34-
"camylla-battani-AoqgGAqrLpU-unsplash.jpg"
35-
)
36-
})
24+
const res = await fetch($img.currentSrc, {
25+
method: "HEAD",
3726
})
27+
expect(res.ok).to.be.true
3828

39-
cy.wrap($el).matchImageSnapshot(`${type}-${i}`)
40-
})
29+
cy.wrap($img).matchImageSnapshot(`${type}-${i++}`)
30+
}
31+
}
32+
)
4133
})
4234
})

‎e2e-tests/development-runtime/cypress/integration/remote-file/gatsby-plugin-image.js

Lines changed: 92 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,115 @@
1-
before(() => {
2-
cy.exec(`npm run reset`)
3-
})
4-
51
describe(`remote-file`, () => {
2+
before(() => {
3+
cy.exec(`npm run reset`)
4+
})
5+
66
beforeEach(() => {
77
cy.visit(`/remote-file/`).waitForRouteChange()
88

99
// trigger intersection observer
1010
cy.scrollTo("top")
1111
cy.wait(100)
12-
cy.scrollTo("bottom")
12+
cy.scrollTo("bottom", {
13+
duration: 500,
14+
})
1315
})
1416

17+
async function testImages(images, expectations) {
18+
for (let i = 0; i < images.length; i++) {
19+
const expectation = expectations[i]
20+
21+
const res = await fetch(images[i].currentSrc, {
22+
method: "HEAD",
23+
})
24+
expect(res.ok).to.be.true
25+
if (expectation.width) {
26+
expect(Math.ceil(images[i].getBoundingClientRect().width)).to.be.equal(
27+
expectation.width
28+
)
29+
}
30+
if (expectation.height) {
31+
expect(Math.ceil(images[i].getBoundingClientRect().height)).to.be.equal(
32+
expectation.height
33+
)
34+
}
35+
}
36+
}
37+
1538
it(`should render correct dimensions`, () => {
16-
cy.get('[data-testid="public"]').then($urls => {
39+
cy.get('[data-testid="public"]').then(async $urls => {
1740
const urls = Array.from($urls.map((_, $url) => $url.getAttribute("href")))
1841

19-
expect(urls[0].endsWith(".jpg")).to.be.true
20-
expect(urls[1].endsWith(".jpg")).to.be.true
21-
expect(urls[2].endsWith(".jpg")).to.be.true
42+
for (const url of urls) {
43+
const res = await fetch(url, {
44+
method: "HEAD",
45+
})
46+
expect(res.ok).to.be.true
47+
}
2248
})
2349

24-
cy.get(".resize").then($imgs => {
25-
const imgDimensions = $imgs.map((_, $img) => $img.getBoundingClientRect())
26-
27-
expect(imgDimensions[0].width).to.be.equal(100)
28-
expect(imgDimensions[0].height).to.be.equal(133)
29-
expect(imgDimensions[1].width).to.be.equal(100)
30-
expect(imgDimensions[1].height).to.be.equal(160)
31-
expect(imgDimensions[2].width).to.be.equal(100)
32-
expect(imgDimensions[2].height).to.be.equal(67)
50+
cy.get(".resize").then(async $imgs => {
51+
await testImages(Array.from($imgs), [
52+
{
53+
width: 100,
54+
height: 133,
55+
},
56+
{
57+
width: 100,
58+
height: 160,
59+
},
60+
{
61+
width: 100,
62+
height: 67,
63+
},
64+
])
3365
})
3466

35-
cy.get(".fixed").then($imgs => {
36-
const imgDimensions = $imgs.map((_, $img) => $img.getBoundingClientRect())
37-
38-
expect(imgDimensions[0].width).to.be.equal(100)
39-
expect(imgDimensions[0].height).to.be.equal(133)
40-
expect(imgDimensions[1].width).to.be.equal(100)
41-
expect(imgDimensions[1].height).to.be.equal(160)
42-
expect(imgDimensions[2].width).to.be.equal(100)
43-
expect(imgDimensions[2].height).to.be.equal(67)
67+
cy.get(".fixed").then(async $imgs => {
68+
await testImages(Array.from($imgs), [
69+
{
70+
width: 100,
71+
height: 133,
72+
},
73+
{
74+
width: 100,
75+
height: 160,
76+
},
77+
{
78+
width: 100,
79+
height: 67,
80+
},
81+
])
4482
})
4583

46-
cy.get(".constrained").then($imgs => {
47-
const imgDimensions = $imgs.map((_, $img) => $img.getBoundingClientRect())
48-
49-
expect(imgDimensions[0].width).to.be.equal(300)
50-
expect(imgDimensions[0].height).to.be.equal(400)
51-
expect(imgDimensions[1].width).to.be.equal(300)
52-
expect(imgDimensions[1].height).to.be.equal(481)
53-
expect(imgDimensions[2].width).to.be.equal(300)
54-
expect(imgDimensions[2].height).to.be.equal(200)
84+
cy.get(".constrained").then(async $imgs => {
85+
await testImages(Array.from($imgs), [
86+
{
87+
width: 300,
88+
height: 400,
89+
},
90+
{
91+
width: 300,
92+
height: 481,
93+
},
94+
{
95+
width: 300,
96+
height: 200,
97+
},
98+
])
5599
})
56100

57-
cy.get(".full").then($imgs => {
58-
const parentWidth = $imgs[0].parentElement.getBoundingClientRect().width
59-
const imgDimensions = $imgs.map((_, $img) => $img.getBoundingClientRect())
60-
61-
expect(imgDimensions[0].width).to.be.equal(parentWidth)
62-
expect(Math.ceil(imgDimensions[0].height)).to.be.equal(1229)
63-
expect(imgDimensions[1].width).to.be.equal(parentWidth)
64-
expect(Math.ceil(imgDimensions[1].height)).to.be.equal(1478)
65-
expect(imgDimensions[2].width).to.be.equal(parentWidth)
66-
expect(Math.ceil(imgDimensions[2].height)).to.be.equal(614)
101+
cy.get(".full").then(async $imgs => {
102+
await testImages(Array.from($imgs), [
103+
{
104+
height: 1229,
105+
},
106+
{
107+
height: 1478,
108+
},
109+
{
110+
height: 614,
111+
},
112+
])
67113
})
68114
})
69115

‎e2e-tests/production-runtime/cypress/integration/remote-file.js

Lines changed: 86 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,63 +4,108 @@ describe(`remote-file`, () => {
44

55
// trigger intersection observer
66
cy.scrollTo("top")
7+
cy.wait(100)
78
cy.scrollTo("bottom", {
89
duration: 500,
910
})
1011
})
1112

13+
async function testImages(images, expectations) {
14+
for (let i = 0; i < images.length; i++) {
15+
const expectation = expectations[i]
16+
17+
const res = await fetch(images[i].currentSrc, {
18+
method: "HEAD",
19+
})
20+
expect(res.ok).to.be.true
21+
if (expectation.width) {
22+
expect(Math.ceil(images[i].getBoundingClientRect().width)).to.be.equal(
23+
expectation.width
24+
)
25+
}
26+
if (expectation.height) {
27+
expect(Math.ceil(images[i].getBoundingClientRect().height)).to.be.equal(
28+
expectation.height
29+
)
30+
}
31+
}
32+
}
33+
1234
it(`should render correct dimensions`, () => {
13-
cy.get('[data-testid="public"]').then($urls => {
35+
cy.get('[data-testid="public"]').then(async $urls => {
1436
const urls = Array.from($urls.map((_, $url) => $url.getAttribute("href")))
1537

16-
expect(urls[0].endsWith(".jpg")).to.be.true
17-
expect(urls[1].endsWith(".jpg")).to.be.true
18-
expect(urls[2].endsWith(".jpg")).to.be.true
38+
for (const url of urls) {
39+
const res = await fetch(url, {
40+
method: "HEAD",
41+
})
42+
expect(res.ok).to.be.true
43+
}
1944
})
2045

21-
cy.get(".resize").then($imgs => {
22-
const imgDimensions = $imgs.map((_, $img) => $img.getBoundingClientRect())
23-
24-
expect(imgDimensions[0].width).to.be.equal(100)
25-
expect(imgDimensions[0].height).to.be.equal(133)
26-
expect(imgDimensions[1].width).to.be.equal(100)
27-
expect(imgDimensions[1].height).to.be.equal(160)
28-
expect(imgDimensions[2].width).to.be.equal(100)
29-
expect(imgDimensions[2].height).to.be.equal(67)
46+
cy.get(".resize").then(async $imgs => {
47+
await testImages(Array.from($imgs), [
48+
{
49+
width: 100,
50+
height: 133,
51+
},
52+
{
53+
width: 100,
54+
height: 160,
55+
},
56+
{
57+
width: 100,
58+
height: 67,
59+
},
60+
])
3061
})
3162

32-
cy.get(".fixed").then($imgs => {
33-
const imgDimensions = $imgs.map((_, $img) => $img.getBoundingClientRect())
34-
35-
expect(imgDimensions[0].width).to.be.equal(100)
36-
expect(imgDimensions[0].height).to.be.equal(133)
37-
expect(imgDimensions[1].width).to.be.equal(100)
38-
expect(imgDimensions[1].height).to.be.equal(160)
39-
expect(imgDimensions[2].width).to.be.equal(100)
40-
expect(imgDimensions[2].height).to.be.equal(67)
63+
cy.get(".fixed").then(async $imgs => {
64+
await testImages(Array.from($imgs), [
65+
{
66+
width: 100,
67+
height: 133,
68+
},
69+
{
70+
width: 100,
71+
height: 160,
72+
},
73+
{
74+
width: 100,
75+
height: 67,
76+
},
77+
])
4178
})
4279

43-
cy.get(".constrained").then($imgs => {
44-
const imgDimensions = $imgs.map((_, $img) => $img.getBoundingClientRect())
45-
46-
expect(imgDimensions[0].width).to.be.equal(300)
47-
expect(imgDimensions[0].height).to.be.equal(400)
48-
expect(imgDimensions[1].width).to.be.equal(300)
49-
expect(imgDimensions[1].height).to.be.equal(481)
50-
expect(imgDimensions[2].width).to.be.equal(300)
51-
expect(imgDimensions[2].height).to.be.equal(200)
80+
cy.get(".constrained").then(async $imgs => {
81+
await testImages(Array.from($imgs), [
82+
{
83+
width: 300,
84+
height: 400,
85+
},
86+
{
87+
width: 300,
88+
height: 481,
89+
},
90+
{
91+
width: 300,
92+
height: 200,
93+
},
94+
])
5295
})
5396

54-
cy.get(".full").then($imgs => {
55-
const parentWidth = $imgs[0].parentElement.getBoundingClientRect().width
56-
const imgDimensions = $imgs.map((_, $img) => $img.getBoundingClientRect())
57-
58-
expect(imgDimensions[0].width).to.be.equal(parentWidth)
59-
expect(Math.ceil(imgDimensions[0].height)).to.be.equal(1229)
60-
expect(imgDimensions[1].width).to.be.equal(parentWidth)
61-
expect(Math.ceil(imgDimensions[1].height)).to.be.equal(1478)
62-
expect(imgDimensions[2].width).to.be.equal(parentWidth)
63-
expect(Math.ceil(imgDimensions[2].height)).to.be.equal(614)
97+
cy.get(".full").then(async $imgs => {
98+
await testImages(Array.from($imgs), [
99+
{
100+
height: 1229,
101+
},
102+
{
103+
height: 1478,
104+
},
105+
{
106+
height: 614,
107+
},
108+
])
64109
})
65110
})
66111

‎integration-tests/gatsby-source-wordpress/test-fns/data-resolution.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
const {
66
default: fetchGraphql,
77
} = require("gatsby-source-wordpress/dist/utils/fetch-graphql")
8+
const { URL } = require("url")
89

910
const gatsbyConfig = require("../gatsby-config")
1011

@@ -541,6 +542,7 @@ describe(`data resolution`, () => {
541542
nodes {
542543
featuredImage {
543544
node {
545+
filename
544546
mediaItemUrl
545547
resize(width: 100, height: 100, quality: 100) {
546548
width
@@ -560,13 +562,15 @@ describe(`data resolution`, () => {
560562
return
561563
}
562564

563-
const { resize } = node.featuredImage.node
564-
const [, , , sourceUrl64, _args64, filename] = resize.src.split(`/`)
565+
const { resize, mediaItemUrl } = node.featuredImage.node
566+
const parsedUrl = new URL(resize.src, "https://www.gatsbyjs.com")
565567

566-
const sourceUrl = Buffer.from(sourceUrl64, `base64`).toString(`ascii`)
568+
const sourceUrl = parsedUrl.searchParams.get("u")
567569

568-
expect(node.featuredImage.node.mediaItemUrl).toEqual(sourceUrl)
569-
expect(node.featuredImage.node.mediaItemUrl).toContain(filename)
570+
expect(mediaItemUrl).toEqual(sourceUrl)
571+
expect(
572+
parsedUrl.pathname.endsWith(node.featuredImage.node.filename)
573+
).toBe(true)
570574
})
571575
})
572576
})

0 commit comments

Comments
 (0)