Do multiple window sizes

gatsbyjs · Oct 24, 2020 · 6660374 · 6660374
1 parent d60385a
commit 6660374
Show file tree

Hide file tree

Showing 17 changed files with 14 additions and 6 deletions.
diff --git a/e2e-tests/visual-regression/cypress/integration/image.js b/e2e-tests/visual-regression/cypress/integration/image.js
@@ -5,13 +5,21 @@ const testCases = [
   ["constrained image", "/images/constrained"],
 ]
 
+const sizes = ["iphone-6", "ipad-2", "macbook-13"]
+
 describe(`GatsbyImage`, () => {
-  testCases.forEach(([title, path]) => {
-    describe(title, () => {
-      it(`renders correctly`, () => {
-        cy.visit(path).waitForRouteChange()
-        cy.get("[data-main-image]").should("have.css", "opacity", "1")
-        cy.get("#test-image").matchImageSnapshot()
+  sizes.forEach(size => {
+    testCases.forEach(([title, path]) => {
+      describe(`${title}`, () => {
+        it(`renders correctly on ${size}`, () => {
+          cy.viewport(size)
+          cy.visit(path)
+          // Wait for main image to load
+          cy.get("[data-main-image]").should("have.css", "opacity", "1")
+          // Wait for blur-up
+          cy.wait(600)
+          cy.get("#test-image").matchImageSnapshot()
+        })
       })
     })
   })

diff --git a/...age.js/GatsbyImage -- constrained image -- renders correctly on ipad-2.snap.png b/...age.js/GatsbyImage -- constrained image -- renders correctly on ipad-2.snap.png
diff --git a/...e.js/GatsbyImage -- constrained image -- renders correctly on iphone-6.snap.png b/...e.js/GatsbyImage -- constrained image -- renders correctly on iphone-6.snap.png
diff --git a/...js/GatsbyImage -- constrained image -- renders correctly on macbook-13.snap.png b/...js/GatsbyImage -- constrained image -- renders correctly on macbook-13.snap.png
diff --git a/...apshots/image.js/GatsbyImage -- constrained image -- renders correctly.snap.png b/...apshots/image.js/GatsbyImage -- constrained image -- renders correctly.snap.png
diff --git a/...ots/image.js/GatsbyImage -- fixed image -- renders correctly on ipad-2.snap.png b/...ots/image.js/GatsbyImage -- fixed image -- renders correctly on ipad-2.snap.png
diff --git a/...s/image.js/GatsbyImage -- fixed image -- renders correctly on iphone-6.snap.png b/...s/image.js/GatsbyImage -- fixed image -- renders correctly on iphone-6.snap.png
diff --git a/...image.js/GatsbyImage -- fixed image -- renders correctly on macbook-13.snap.png b/...image.js/GatsbyImage -- fixed image -- renders correctly on macbook-13.snap.png
diff --git a/...ess/snapshots/image.js/GatsbyImage -- fixed image -- renders correctly.snap.png b/...ess/snapshots/image.js/GatsbyImage -- fixed image -- renders correctly.snap.png
diff --git a/...fixed image smaller than requested size -- renders correctly on ipad-2.snap.png b/...fixed image smaller than requested size -- renders correctly on ipad-2.snap.png
diff --git a/...xed image smaller than requested size -- renders correctly on iphone-6.snap.png b/...xed image smaller than requested size -- renders correctly on iphone-6.snap.png
diff --git a/...d image smaller than requested size -- renders correctly on macbook-13.snap.png b/...d image smaller than requested size -- renders correctly on macbook-13.snap.png
diff --git a/...yImage -- fixed image smaller than requested size -- renders correctly.snap.png b/...yImage -- fixed image smaller than requested size -- renders correctly.snap.png
diff --git a/...ots/image.js/GatsbyImage -- fluid image -- renders correctly on ipad-2.snap.png b/...ots/image.js/GatsbyImage -- fluid image -- renders correctly on ipad-2.snap.png
diff --git a/...s/image.js/GatsbyImage -- fluid image -- renders correctly on iphone-6.snap.png b/...s/image.js/GatsbyImage -- fluid image -- renders correctly on iphone-6.snap.png
diff --git a/...image.js/GatsbyImage -- fluid image -- renders correctly on macbook-13.snap.png b/...image.js/GatsbyImage -- fluid image -- renders correctly on macbook-13.snap.png
diff --git a/...ess/snapshots/image.js/GatsbyImage -- fluid image -- renders correctly.snap.png b/...ess/snapshots/image.js/GatsbyImage -- fluid image -- renders correctly.snap.png