Skip to content

Commit

Permalink
fix(gatsby-plugin-image): Handle immediate unmount (#35878)
Browse files Browse the repository at this point in the history
  • Loading branch information
tyhopp committed Jun 8, 2022
1 parent b653c7b commit fbdec7e
Show file tree
Hide file tree
Showing 51 changed files with 487 additions and 940 deletions.
13 changes: 0 additions & 13 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -437,17 +437,6 @@ jobs:
test_path: e2e-tests/mdx-less-babel
test_command: CYPRESS_PROJECT_ID=xo139a CYPRESS_RECORD_KEY=74d485b5-3ba6-40e1-a7d4-e63c0a8d2a4d yarn test

e2e_tests_gatsby-static-image:
<<: *e2e-executor
environment:
<<: *e2e-executor-env
CYPRESS_PROJECT_ID: zstawi
CYPRESS_RECORD_KEY: 389326a6-c0d2-4215-bc5e-3be29483ed13
steps:
- e2e-test:
test_path: e2e-tests/gatsby-static-image
test_command: yarn test

e2e_tests_visual-regression:
<<: *e2e-executor
environment:
Expand Down Expand Up @@ -644,8 +633,6 @@ workflows:
<<: *e2e-test-workflow
- e2e_tests_path-prefix:
<<: *e2e-test-workflow
- e2e_tests_gatsby-static-image:
<<: *e2e-test-workflow
- e2e_tests_visual-regression:
<<: *e2e-test-workflow
- e2e_tests_contentful:
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
describe(`constrained`, () => {
beforeEach(() => {
cy.visit(`/constrained`).waitForRouteChange()
cy.visit(`/static-image/constrained`).waitForRouteChange()
})

it(`renders a spacer svg`, () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const fixedTestId = `image-fixed`

describe(`fixed`, () => {
beforeEach(() => {
cy.visit(`/fixed`).waitForRouteChange()
cy.visit(`/static-image/fixed`).waitForRouteChange()
})

it(`applies height and width to wrapper`, () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
const fluidTestId = `image-fluid`

describe(`fullWidth`, () => {
describe(`full-width`, () => {
beforeEach(() => {
cy.visit(`/fullWidth`).waitForRouteChange()
cy.visit(`/static-image/full-width`).waitForRouteChange()
})

it(`works on png files`, () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const fluidTestId = `image-fluid`

describe(`Production gatsby-image`, () => {
beforeEach(() => {
cy.visit(`/fullWidth`).waitForRouteChange()
cy.visit(`/static-image/full-width`).waitForRouteChange()
})

describe(`wrapping elements`, () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
describe(`immediately unmounted`, () => {
beforeEach(() => {
cy.visit(`/static-image/immediately-unmounted`)
})

it(`should not error`, () => {
cy.assertNoFastRefreshOverlay()
})
})
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
describe(`gatsby-plugin-image / intersection observer`, () => {
beforeEach(() => {
cy.visit(`/lazy-loading`)
cy.visit(`/static-image/lazy-loading`)
cy.window().then(win => {
// Removing the native lazy loading capabilities
delete win.HTMLImageElement.prototype.loading
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
describe(`gatsby-plugin-image / native lazy loading`, () => {
beforeEach(() => {
cy.visit(`/static-image/lazy-loading`)
})

it(`lazy loads an image when scrolling`, () => {
// We need to wait for a decent amount of time so that the image
// can resolve. This is necessary because the assertion
// is done outside the Cypress scheduler and so, Cypress is not able
// to ping for the specific assertion to be truthy.
cy.wait(500)
cy.get(`[data-cy=already-loaded]`)
.should(`be.visible`)
.then($img => {
expect($img[0].complete).to.equal(true)
})

cy.get(`[data-cy=lazy-loaded]`)
.should(`exist`)
.then($img => {
expect($img[0].complete).to.equal(false)
})

cy.scrollTo(`bottom`)

cy.wait(500)
cy.get(`[data-cy=lazy-loaded]`)
.should(`exist`)
.then($img => {
expect($img[0].complete).to.equal(true)
})
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const tracedTestId = `image-traced`

describe(`fixed`, () => {
beforeEach(() => {
cy.visit(`/traced`).waitForRouteChange()
cy.visit(`/static-image/traced`).waitForRouteChange()
})

it(`renders a traced svg`, () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,19 @@ describe(`collection-routing`, () => {
})

it(`can create simplest collection route that also has a number as an identifier`, () => {
cy.visit(`/collection-routing/1/`)
.waitForRouteChange()
cy.findByTestId(`slug`)
.should(`have.text`, `/preview/1`)
cy.findByTestId(`pagecontext`)
.should(`have.text`, `1`)
cy.visit(`/collection-routing/1/`).waitForRouteChange()
cy.findByTestId(`slug`).should(`have.text`, `/preview/1`)
cy.findByTestId(`pagecontext`).should(`have.text`, `1`)
})

it(`can navigate to a collection route and see its content rendered`, () => {
// this test depends on the alphabetical sorting of markdown files
cy.findByTestId(`collection-routing-blog-0`)
.should(`have.attr`, `data-testslug`, `/2018-12-14-hello-world/`)
.click()
cy.waitForRouteChange()
.assertRoute(`/collection-routing/2018-12-14-hello-world/`)
cy.waitForRouteChange().assertRoute(
`/collection-routing/2018-12-14-hello-world/`
)
cy.findByTestId(`slug`)
cy.should(`have.text`, `/2018-12-14-hello-world/`)
cy.findByTestId(`pagecontext`)
Expand All @@ -28,41 +26,31 @@ describe(`collection-routing`, () => {
it(`can navigate to a collection route that uses unions and see its content rendered`, () => {
// this test depends on the alphabetical sorting of image files
cy.findByTestId(`collection-routing-image-0`)
.should(`have.attr`, `data-testimagename`, `gatsby-astronaut`)
.should(`have.attr`, `data-testimagename`, `citrus-fruits`)
.click()
cy.waitForRouteChange()
.assertRoute(`/collection-routing/gatsby-astronaut/`)
cy.waitForRouteChange().assertRoute(`/collection-routing/citrus-fruits/`)
cy.findByTestId(`name`)
cy.should(`have.text`, `gatsby-astronaut`)
cy.should(`have.text`, `citrus-fruits`)
cy.findByTestId(`pagecontext`)
cy.should(`have.text`, `gatsby-astronaut`)
cy.should(`have.text`, `citrus-fruits`)
})

it(`should allow normal folder`, () => {
cy.visit(`/collection-routing/hogwarts/1/`)
.waitForRouteChange()
cy.findByTestId(`custom-text`)
.should(`have.text`, `static-folder`)
cy.findByTestId(`pagecontext`)
.should(`have.text`, `1`)
cy.visit(`/collection-routing/hogwarts/1/`).waitForRouteChange()
cy.findByTestId(`custom-text`).should(`have.text`, `static-folder`)
cy.findByTestId(`pagecontext`).should(`have.text`, `1`)
})

it(`should allow static template`, () => {
cy.visit(`/collection-routing/westworld/1/template`)
.waitForRouteChange()
cy.findByTestId(`custom-text`)
.should(`have.text`, `Static Template`)
cy.findByTestId(`pagecontext`)
.should(`have.text`, `1`)
cy.visit(`/collection-routing/westworld/1/template`).waitForRouteChange()
cy.findByTestId(`custom-text`).should(`have.text`, `Static Template`)
cy.findByTestId(`pagecontext`).should(`have.text`, `1`)
})

it(`should allow nested collections`, () => {
cy.visit(`/collection-routing/hello-world-1/1`)
.waitForRouteChange()
cy.findByTestId(`slug`)
.should(`have.text`, `/preview/1 + test`)
cy.findByTestId(`pagecontext`)
.should(`have.text`, `1`)
cy.visit(`/collection-routing/hello-world-1/1`).waitForRouteChange()
cy.findByTestId(`slug`).should(`have.text`, `/preview/1 + test`)
cy.findByTestId(`pagecontext`).should(`have.text`, `1`)
})

it(`supports nested collection + client-only route`, () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Layout from "../../components/layout"

const ConstrainedPage = () => (
<Layout>
<div data-testid="image-constrained">
<StaticImage src="../images/citrus-fruits.jpg" alt="Citrus fruits" />
<StaticImage src="../../images/citrus-fruits.jpg" alt="Citrus fruits" />
</div>
<div data-testid="image-constrained-limit">
<StaticImage
src="../images/citrus-fruits.jpg"
src="../../images/citrus-fruits.jpg"
width={500}
alt="Citrus fruits"
/>
</div>
<div data-testid="image-constrained-override">
<StaticImage
src="../images/citrus-fruits.jpg"
src="../../images/citrus-fruits.jpg"
width={500}
sizes="100vw"
alt="Citrus fruits"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,29 +1,28 @@
import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Layout from "../../components/layout"

const FluidPage = () => (
<Layout>
<div data-testid="image-fixed">
<StaticImage
src="../images/citrus-fruits.jpg"
src="../../images/citrus-fruits.jpg"
width={500}
layout="fixed"
alt="Citrus fruits"
/>
</div>
<div data-testid="image-fixed-png">
<StaticImage
src="../images/gatsby-icon.png"
src="../../images/gatsby-icon.png"
width={500}
layout="fixed"
alt="Gatsby Icon"
/>
</div>
<div data-testid="image-fixed-relative">
<StaticImage
src="../../content/relative.jpg"
src="../../../citrus-fruits-outside-src.jpg"
height={500}
layout="fixed"
alt="Citrus fruits"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,27 @@
import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Layout from "../../components/layout"

const FluidPage = () => (
<Layout>
<div data-testid="image-fluid">
<StaticImage
src="../images/citrus-fruits.jpg"
src="../../images/citrus-fruits.jpg"
layout="fullWidth"
width={700}
alt="Citrus fruits"
/>
</div>
<div data-testid="image-fluid-png">
<StaticImage
src="../images/gatsby-icon.png"
src="../../images/gatsby-icon.png"
layout="fullWidth"
alt="Gatsby icon"
/>
</div>
<div data-testid="image-fluid-relative">
<StaticImage
src="../../content/relative.jpg"
src="../../../citrus-fruits-outside-src.jpg"
layout="fullWidth"
alt="Citrus fruits"
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React, { useState, useEffect } from "react"
import { StaticImage } from "gatsby-plugin-image"

const ImmediatelyUnmounted = () => {
const [show, setShow] = useState(true)

useEffect(() => {
setTimeout(() => {
setShow(false)
}, 1)
}, [])

return (
<>
{show && (
<StaticImage src="../../images/citrus-fruits.jpg" alt="Citrus fruits" />
)}
</>
)
}

export default ImmediatelyUnmounted
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Layout from "../../components/layout"

const IndexPage = () => (
<Layout>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default function NativeLazyLoadingPage() {
<div>
<StaticImage
data-cy="already-loaded"
src="../images/citrus-fruits.jpg"
src="../../images/citrus-fruits.jpg"
width={124}
height={59}
alt="Citrus fruits"
Expand All @@ -18,7 +18,7 @@ export default function NativeLazyLoadingPage() {

<StaticImage
data-cy="lazy-loaded"
src="../images/cornwall.jpg"
src="../../images/cornwall.jpg"
width={126}
height={59}
alt="Citrus fruits"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,27 +1,26 @@
import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Layout from "../../components/layout"

const FluidPage = () => (
<Layout>
<div data-testid="image-traced">
<StaticImage
src="../images/citrus-fruits.jpg"
src="../../images/citrus-fruits.jpg"
placeholder="tracedSVG"
alt="Citrus fruits"
/>
</div>
<div data-testid="image-traced-png">
<StaticImage
src="../images/gatsby-icon.png"
src="../../images/gatsby-icon.png"
placeholder="tracedSVG"
alt="Gatsby icon"
/>
</div>
<div data-testid="image-traced-relative">
<StaticImage
src="../../content/relative.jpg"
src="../../../citrus-fruits-outside-src.jpg"
placeholder="tracedSVG"
alt="Citrus fruits"
/>
Expand Down
11 changes: 0 additions & 11 deletions e2e-tests/gatsby-static-image/.gitignore

This file was deleted.

0 comments on commit fbdec7e

Please sign in to comment.