chore(gatsby-image): Update test + snapshot

My changes should not have introduced many of the changes in the new snapshot, although the changes appear to be what should have been here (why weren't they?)
gatsbyjs · Mar 15, 2019 · 0b9cd16 · 0b9cd16
1 parent 68cd5ca
commit 0b9cd16
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap
@@ -7,14 +7,14 @@ exports[`<Img /> should render fixed size images 1`] = `
     style="position: relative; overflow: hidden; display: inline; width: 100px; height: 100px;"
   >
     <div
-      style="width: 100px; opacity: 1; height: 100px;"
+      style="background-color: lightgray; width: 100px; opacity: 1; height: 100px; transition-delay: 0.5s;"
       title="Title for the image"
     />
     <img
       alt=""
       class="placeholder"
       src="string_of_base64"
-      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; color: red;"
+      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 0.5s; color: red;"
       title="Title for the image"
     />
     <picture>
@@ -28,13 +28,13 @@ exports[`<Img /> should render fixed size images 1`] = `
         itemprop="item-prop-for-the-image"
         src="test_image.jpg"
         srcset="some srcSet"
-        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 0.5s;"
         title="Title for the image"
         width="100"
       />
     </picture>
     <noscript>
-      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;img width="100" height="100" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
+      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;img width="100" height="100" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
     </noscript>
   </div>
 </div>
@@ -50,14 +50,14 @@ exports[`<Img /> should render fluid images 1`] = `
       style="width: 100%; padding-bottom: 66.66666666666667%;"
     />
     <div
-      style="position: absolute; top: 0px; bottom: 0px; opacity: 1; right: 0px; left: 0px;"
+      style="background-color: lightgray; position: absolute; top: 0px; bottom: 0px; opacity: 1; right: 0px; left: 0px; transition-delay: 0.5s;"
       title="Title for the image"
     />
     <img
       alt=""
       class="placeholder"
       src="string_of_base64"
-      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; color: red;"
+      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 0.5s; color: red;"
       title="Title for the image"
     />
     <picture>
@@ -72,12 +72,12 @@ exports[`<Img /> should render fluid images 1`] = `
         sizes="(max-width: 600px) 100vw, 600px"
         src="test_image.jpg"
         srcset="some srcSet"
-        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 0.5s;"
         title="Title for the image"
       />
     </picture>
     <noscript>
-      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img sizes="(max-width: 600px) 100vw, 600px" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
+      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img sizes="(max-width: 600px) 100vw, 600px" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
     </noscript>
   </div>
 </div>

diff --git a/packages/gatsby-image/src/__tests__/index.js b/packages/gatsby-image/src/__tests__/index.js
@@ -71,7 +71,7 @@ describe(`<Img />`, () => {
     )
     // No Intersection Observer in JSDOM, so placeholder img will be visible (opacity 1) by default
     expect(placeholderImageTag.getAttribute(`style`)).toEqual(
-      `position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; color: red;`
+      `position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 0.5s; color: red;`
     )
     expect(placeholderImageTag.getAttribute(`class`)).toEqual(`placeholder`)
   })