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
  • Loading branch information
pieh authored Nov 25, 2022
1 parent 0889d31 commit 94c2d73
Show file tree
Hide file tree
Showing 36 changed files with 460 additions and 907 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
255 changes: 132 additions & 123 deletions e2e-tests/production-runtime/cypress/integration/remote-file.js
Original file line number Diff line number Diff line change
@@ -1,149 +1,158 @@
Cypress.on('uncaught:exception', (err) => {
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`)) {
Cypress.on("uncaught:exception", err => {
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`)
) {
return false
}
})

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
@@ -1,7 +1,12 @@
const tracedTestId = `image-traced`

Cypress.on('uncaught:exception', (err) => {
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`)) {
Cypress.on("uncaught:exception", err => {
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`)
) {
return false
}
})
Expand All @@ -11,12 +16,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
3 changes: 2 additions & 1 deletion 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
Loading

0 comments on commit 94c2d73

Please sign in to comment.