Skip to content

Commit

Permalink
chore: remove tracedSVG (#37093)
Browse files Browse the repository at this point in the history
* init

* gri

* update shopify snapshot

* gatsby-plugin-sharp tests

* update gatsby-remark-images/gatsby-node tests

* update gatsby-plugin-image tests

* update schema print tests

* remove traceSVG unit tests as it was removed

* legacy gatsby-image fields

* update polyfill tests

* update cypress assertion

* update contentful cypress assertions

* drop few more packages from gatsby-plugin-sharp as they are no onger used

* correct IMAGE_CDN fallback for TRACE_SVG

* update generateImageData

* update e2e-prod/assertions

* update unit test

* update snapshot

* update e2e-dev/assertions

* drop more unused

* sync yarn.lock

* a bit more prod warnings

* adjust gatsby-remark-images plugin options warning

* add link to gatsby-remark-images warning

(cherry picked from commit 94c2d73)
  • Loading branch information
pieh committed Dec 6, 2022
1 parent 07c0478 commit 4a7428d
Show file tree
Hide file tree
Showing 36 changed files with 511 additions and 949 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ describe(`gatsby-plugin-image`, () => {
testGatsbyPluginImage(`dominant-color`, hasColorPlaceholder)
)
it(`traced`, testConfig, () =>
testGatsbyPluginImage(`traced`, hasSVGPlaceholder)
testGatsbyPluginImage(`traced`, hasColorPlaceholder)
)
it(`blurred`, testConfig, () =>
testGatsbyPluginImage(`blurred`, hasBase64Placeholder)
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion e2e-tests/contentful/snapshots.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion e2e-tests/contentful/src/pages/gatsby-plugin-image.js
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,9 @@ const GatsbyPluginImagePage = ({ data }) => {
))}
</Grid>

<h2>gatsby-plugin-image: Traced SVG Placeholder</h2>
<h2>
gatsby-plugin-image: Traced SVG Placeholder (fallback to DOMINANT_COLOR)
</h2>
<Grid data-cy="traced">
{data.default.nodes.map(node => (
<div key={node.title}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,9 @@ describe(`remote-file`, () => {
cy.get(".constrained_traced [data-placeholder-image]")
.first()
.should($el => {
expect($el.prop("tagName")).to.be.equal("IMG")
expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")
// traced falls back to DOMINANT_COLOR
expect($el.prop("tagName")).to.be.equal("DIV")
expect($el).to.be.empty
})
cy.get(".full [data-placeholder-image]")
.first()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ describe(`fixed`, () => {
cy.visit(`/static-image/traced`).waitForRouteChange()
})

it(`renders a traced svg`, () => {
it(`traced svg (falls back to DOMINANT_COLOR)`, () => {
cy.getTestElement(tracedTestId)
.find(`.gatsby-image-wrapper > img`)
.should(`have.attr`, `src`)
.and(src => {
;[`data:image/svg+xml`].forEach(part => expect(src).to.include(part))
.find(`.gatsby-image-wrapper > [data-placeholder-image]`)
.first()
.should($el => {
// traced falls
expect($el.prop("tagName")).to.be.equal("DIV")
expect($el).to.be.empty
})
})

Expand Down
246 changes: 125 additions & 121 deletions e2e-tests/production-runtime/cypress/integration/remote-file.js
Original file line number Diff line number Diff line change
@@ -1,143 +1,147 @@
describe(
`remote-file`,
`remote-file`,
{
retries: {
runMode: 4,
},
},
() => {
beforeEach(() => {
cy.visit(`/remote-file/`).waitForRouteChange()
beforeEach(() => {
cy.visit(`/remote-file/`).waitForRouteChange()

// trigger intersection observer
cy.scrollTo("top")
cy.wait(100)
cy.scrollTo("bottom", {
duration: 500,
})
cy.wait(500)
})

async function testImages(images, expectations) {
for (let i = 0; i < images.length; i++) {
const expectation = expectations[i]

const res = await fetch(images[i].currentSrc, {
method: "HEAD",
// trigger intersection observer
cy.scrollTo("top")
cy.wait(100)
cy.scrollTo("bottom", {
duration: 500,
})
expect(res.ok).to.be.true
if (expectation.width) {
expect(Math.ceil(images[i].getBoundingClientRect().width)).to.be.equal(
expectation.width
)
}
if (expectation.height) {
expect(Math.ceil(images[i].getBoundingClientRect().height)).to.be.equal(
expectation.height
)
}
}
}
cy.wait(500)
})

it(`should render correct dimensions`, () => {
cy.get('[data-testid="public"]').then(async $urls => {
const urls = Array.from($urls.map((_, $url) => $url.getAttribute("href")))
async function testImages(images, expectations) {
for (let i = 0; i < images.length; i++) {
const expectation = expectations[i]

for (const url of urls) {
const res = await fetch(url, {
const res = await fetch(images[i].currentSrc, {
method: "HEAD",
})
expect(res.ok).to.be.true
if (expectation.width) {
expect(
Math.ceil(images[i].getBoundingClientRect().width)
).to.be.equal(expectation.width)
}
if (expectation.height) {
expect(
Math.ceil(images[i].getBoundingClientRect().height)
).to.be.equal(expectation.height)
}
}
})

cy.get(".resize").then(async $imgs => {
await testImages(Array.from($imgs), [
{
width: 100,
height: 133,
},
{
width: 100,
height: 160,
},
{
width: 100,
height: 67,
},
])
})
}

cy.get(".fixed").then(async $imgs => {
await testImages(Array.from($imgs), [
{
width: 100,
height: 133,
},
{
width: 100,
height: 160,
},
{
width: 100,
height: 67,
},
])
})
it(`should render correct dimensions`, () => {
cy.get('[data-testid="public"]').then(async $urls => {
const urls = Array.from(
$urls.map((_, $url) => $url.getAttribute("href"))
)

cy.get(".constrained").then(async $imgs => {
await testImages(Array.from($imgs), [
{
width: 300,
height: 400,
},
{
width: 300,
height: 481,
},
{
width: 300,
height: 200,
},
])
})
for (const url of urls) {
const res = await fetch(url, {
method: "HEAD",
})
expect(res.ok).to.be.true
}
})

cy.get(".full").then(async $imgs => {
await testImages(Array.from($imgs), [
{
height: 1229,
},
{
height: 1478,
},
{
height: 614,
},
])
})
})
cy.get(".resize").then(async $imgs => {
await testImages(Array.from($imgs), [
{
width: 100,
height: 133,
},
{
width: 100,
height: 160,
},
{
width: 100,
height: 67,
},
])
})

it(`should render a placeholder`, () => {
cy.get(".fixed [data-placeholder-image]")
.first()
.should("have.css", "background-color", "rgb(232, 184, 8)")
cy.get(".constrained [data-placeholder-image]")
.first()
.should($el => {
expect($el.prop("tagName")).to.be.equal("IMG")
expect($el.prop("src")).to.contain("data:image/jpg;base64")
cy.get(".fixed").then(async $imgs => {
await testImages(Array.from($imgs), [
{
width: 100,
height: 133,
},
{
width: 100,
height: 160,
},
{
width: 100,
height: 67,
},
])
})
cy.get(".constrained_traced [data-placeholder-image]")
.first()
.should($el => {
expect($el.prop("tagName")).to.be.equal("IMG")
expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")

cy.get(".constrained").then(async $imgs => {
await testImages(Array.from($imgs), [
{
width: 300,
height: 400,
},
{
width: 300,
height: 481,
},
{
width: 300,
height: 200,
},
])
})
cy.get(".full [data-placeholder-image]")
.first()
.should($el => {
expect($el.prop("tagName")).to.be.equal("DIV")
expect($el).to.be.empty

cy.get(".full").then(async $imgs => {
await testImages(Array.from($imgs), [
{
height: 1229,
},
{
height: 1478,
},
{
height: 614,
},
])
})
})
})
})

it(`should render a placeholder`, () => {
cy.get(".fixed [data-placeholder-image]")
.first()
.should("have.css", "background-color", "rgb(232, 184, 8)")
cy.get(".constrained [data-placeholder-image]")
.first()
.should($el => {
expect($el.prop("tagName")).to.be.equal("IMG")
expect($el.prop("src")).to.contain("data:image/jpg;base64")
})
cy.get(".constrained_traced [data-placeholder-image]")
.first()
.should($el => {
// traced falls back to DOMINANT_COLOR
expect($el.prop("tagName")).to.be.equal("DIV")
expect($el).to.be.empty
})
cy.get(".full [data-placeholder-image]")
.first()
.should($el => {
expect($el.prop("tagName")).to.be.equal("DIV")
expect($el).to.be.empty
})
})
}
)
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ describe(`fixed`, () => {
cy.visit(`/static-image/traced`).waitForRouteChange()
})

it(`renders a traced svg`, () => {
it(`traced svg (falls back to DOMINANT_COLOR)`, () => {
cy.getTestElement(tracedTestId)
.find(`.gatsby-image-wrapper > img`)
.should(`have.attr`, `src`)
.and(src => {
;[`data:image/svg+xml`].forEach(part => expect(src).to.include(part))
.find(`.gatsby-image-wrapper > [data-placeholder-image]`)
.first()
.should($el => {
// traced falls
expect($el.prop("tagName")).to.be.equal("DIV")
expect($el).to.be.empty
})
})

Expand Down
1 change: 1 addition & 0 deletions examples/using-contentful/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"scripts": {
"develop": "gatsby develop",
"build": "gatsby build",
"clean": "gatsby clean",
"start": "gatsby serve"
}
}
6 changes: 3 additions & 3 deletions packages/gatsby-plugin-image/src/resolver-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -202,9 +202,9 @@ export function getGatsbyImageFieldConfig<TSource, TContext, TArgs>(
type: ImagePlaceholderType.name,
description: stripIndent`
Format of generated placeholder image, displayed while the main image loads.
BLURRED: a blurred, low resolution image, encoded as a base64 data URI (default)
DOMINANT_COLOR: a solid color, calculated from the dominant color of the image.
TRACED_SVG: a low-resolution traced SVG of the image.
BLURRED: a blurred, low resolution image, encoded as a base64 data URI.
DOMINANT_COLOR: a solid color, calculated from the dominant color of the image (default).
TRACED_SVG: deprecated. Will use DOMINANT_COLOR.
NONE: no placeholder. Set the argument "backgroundColor" to use a fixed background color.`,
},
formats: {
Expand Down
5 changes: 1 addition & 4 deletions packages/gatsby-plugin-sharp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
},
"dependencies": {
"@babel/runtime": "^7.15.4",
"@gatsbyjs/potrace": "^2.3.0",
"async": "^3.2.4",
"bluebird": "^3.7.2",
"debug": "^4.3.4",
Expand All @@ -17,11 +16,9 @@
"gatsby-core-utils": "^3.24.0",
"gatsby-plugin-utils": "^3.18.0",
"lodash": "^4.17.21",
"mini-svg-data-uri": "^1.4.4",
"probe-image-size": "^7.2.3",
"semver": "^7.3.7",
"sharp": "^0.30.7",
"svgo": "^2.8.0"
"sharp": "^0.30.7"
},
"devDependencies": {
"@babel/cli": "^7.15.4",
Expand Down
Loading

0 comments on commit 4a7428d

Please sign in to comment.