fix(gatsby-plugin-image): Handle immediate unmount (#35878) (#35883)

(cherry picked from commit fbdec7e)

Co-authored-by: Ty Hopp <[email protected]>

.circleci/config.yml

@@ -438,17 +438,6 @@ jobs:
           test_path: e2e-tests/mdx
           test_command: 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:
@@ -645,8 +634,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:

e2e-tests/gatsby-static-image/cypress/integration/constrained.js → e2e-tests/development-runtime/cypress/integration/static-image/constrained.js

@@ -1,6 +1,6 @@
 describe(`constrained`, () => {
   beforeEach(() => {
-    cy.visit(`/constrained`).waitForRouteChange()
+    cy.visit(`/static-image/constrained`).waitForRouteChange()
   })
 
   it(`renders a spacer svg`, () => {

e2e-tests/gatsby-static-image/cypress/integration/fixed.js → e2e-tests/development-runtime/cypress/integration/static-image/fixed.js

@@ -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`, () => {

e2e-tests/gatsby-static-image/cypress/integration/fullWidth.js → e2e-tests/development-runtime/cypress/integration/static-image/full-width.js

@@ -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`, () => {

e2e-tests/gatsby-static-image/cypress/integration/image.js → e2e-tests/development-runtime/cypress/integration/static-image/image.js

@@ -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`, () => {

e2e-tests/development-runtime/cypress/integration/static-image/immediately-unmounted.js

@@ -0,0 +1,9 @@
+describe(`immediately unmounted`, () => {
+  beforeEach(() => {
+    cy.visit(`/static-image/immediately-unmounted`)
+  })
+
+  it(`should not error`, () => {
+    cy.assertNoFastRefreshOverlay()
+  })
+})

e2e-tests/gatsby-static-image/cypress/integration/intesection-observer.js → e2e-tests/development-runtime/cypress/integration/static-image/intesection-observer.js

@@ -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

e2e-tests/development-runtime/cypress/integration/static-image/native-lazy-loading.js

@@ -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)
+      })
+  })
+})

e2e-tests/gatsby-static-image/cypress/integration/traced.js → e2e-tests/development-runtime/cypress/integration/static-image/traced.js

@@ -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`, () => {

e2e-tests/development-runtime/cypress/integration/unified-routing/collection-routing.js

@@ -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`)
@@ -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`, () => {

e2e-tests/gatsby-static-image/src/pages/constrained.js → e2e-tests/development-runtime/src/pages/static-image/constrained.js

@@ -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"

e2e-tests/gatsby-static-image/src/pages/fixed.js → e2e-tests/development-runtime/src/pages/static-image/fixed.js

@@ -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"

e2e-tests/gatsby-static-image/src/pages/fullWidth.js → e2e-tests/development-runtime/src/pages/static-image/full-width.js

@@ -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"
       />

e2e-tests/development-runtime/src/pages/static-image/immediately-unmounted.js

@@ -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

e2e-tests/gatsby-static-image/src/pages/index.js → e2e-tests/development-runtime/src/pages/static-image/index.js

@@ -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>

e2e-tests/gatsby-static-image/src/pages/lazy-loading.js → e2e-tests/development-runtime/src/pages/static-image/lazy-loading.js

@@ -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"
@@ -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"

e2e-tests/gatsby-static-image/src/pages/traced.js → e2e-tests/development-runtime/src/pages/static-image/traced.js

@@ -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"
       />