fix(gatsby-image): When art-directing images, default the padding aspect ratio to first image without a media query when no media query matches (#21431)

* Default to image without a media query when no media queries match
window.

* update snapshots and change aspect ratio so padding is rational

Author: mjmaurer

packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap

@@ -176,7 +176,7 @@ exports[`<Image /> should render multiple fixed image variants 1`] = `
         aria-hidden="true"
         class="placeholder"
         itemprop="item-prop-for-the-image"
-        src="other_string_of_base64"
+        src="string_of_base64"
         style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 500ms; color: red;"
         title="Title for the image"
       />
@@ -204,15 +204,15 @@ exports[`<Image /> should render multiple fixed image variants 1`] = `
         height="100"
         itemprop="item-prop-for-the-image"
         loading="lazy"
-        src="test_image_2.jpg"
-        srcset="some other srcSet"
+        src="test_image.jpg"
+        srcset="some srcSet"
         style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 500ms;"
         title="Title for the image"
         width="100"
       />
     </picture>
     <noscript>
-      &lt;picture&gt;&lt;source type='image/webp' media="only screen and (min-width: 768px)" srcset="some other srcSetWebp" /&gt;&lt;source media="only screen and (min-width: 768px)" srcset="some other srcSet" /&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;source srcset="some srcSet" /&gt;&lt;img loading="lazy" width="100" height="100" srcset="some other srcSet" src="test_image_2.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;
+      &lt;picture&gt;&lt;source type='image/webp' media="only screen and (min-width: 768px)" srcset="some other srcSetWebp" /&gt;&lt;source media="only screen and (min-width: 768px)" srcset="some other srcSet" /&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;source srcset="some srcSet" /&gt;&lt;img loading="lazy" 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>
@@ -278,14 +278,14 @@ exports[`<Image /> should render multiple fluid image variants 1`] = `
         itemprop="item-prop-for-the-image"
         loading="lazy"
         sizes="(max-width: 600px) 100vw, 600px"
-        src="test_image_2.jpg"
-        srcset="some other srcSet"
+        src="test_image.jpg"
+        srcset="some srcSet"
         style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 500ms;"
         title="Title for the image"
       />
     </picture>
     <noscript>
-      &lt;picture&gt;&lt;source type='image/webp' media="only screen and (min-width: 768px)" srcset="some other srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source media="only screen and (min-width: 768px)" srcset="some other srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source srcset="some srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img loading="lazy" sizes="(max-width: 600px) 100vw, 600px" srcset="some other srcSet" src="test_image_2.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;
+      &lt;picture&gt;&lt;source type='image/webp' media="only screen and (min-width: 768px)" srcset="some other srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source media="only screen and (min-width: 768px)" srcset="some other srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source srcset="some srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img loading="lazy" 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>

packages/gatsby-image/src/__tests__/index.js

@@ -33,8 +33,8 @@ const fixedImagesShapeMock = [
     base64: `string_of_base64`,
   },
   {
-    width: 100,
-    height: 100,
+    width: 300,
+    height: 300,
     src: `test_image_2.jpg`,
     srcSet: `some other srcSet`,
     srcSetWebp: `some other srcSetWebp`,
@@ -45,15 +45,15 @@ const fixedImagesShapeMock = [
 
 const fluidImagesShapeMock = [
   {
-    aspectRatio: 1.5,
+    aspectRatio: 2,
     src: `test_image.jpg`,
     srcSet: `some srcSet`,
     srcSetWebp: `some srcSetWebp`,
     sizes: `(max-width: 600px) 100vw, 600px`,
     base64: `string_of_base64`,
   },
   {
-    aspectRatio: 2,
+    aspectRatio: 3,
     src: `test_image_2.jpg`,
     srcSet: `some other srcSet`,
     srcSetWebp: `some other srcSetWebp`,
@@ -121,6 +121,7 @@ const setupImages = (
 describe(`<Image />`, () => {
   const OLD_MATCH_MEDIA = window.matchMedia
   beforeEach(() => {
+    // None of the media conditions above match.
     window.matchMedia = jest.fn(media =>
       media === `only screen and (min-width: 1024px)`
         ? {
@@ -280,6 +281,48 @@ describe(`<Image />`, () => {
     )
   })
 
+  it(`should select the image with no media query as mocked image of fluid variants provided.`, () => {
+    const { container } = render(
+      <Image
+        backgroundColor
+        className={`fluidArtDirectedImage`}
+        style={{ display: `inline` }}
+        title={`Title for the image`}
+        alt={`Alt text for the image`}
+        crossOrigin={`anonymous`}
+        fluid={fluidImagesShapeMock.slice().reverse()}
+        itemProp={`item-prop-for-the-image`}
+        placeholderStyle={{ color: `red` }}
+        placeholderClassName={`placeholder`}
+      />
+    )
+    const aspectPreserver = container.querySelector(`div div div`)
+    expect(aspectPreserver.getAttribute(`style`)).toEqual(
+      expect.stringMatching(/padding-bottom: 50%/)
+    )
+  })
+
+  it(`should select the image with no media query as mocked image of fixed variants provided.`, () => {
+    const { container } = render(
+      <Image
+        backgroundColor
+        className={`fixedArtDirectedImage`}
+        style={{ display: `inline` }}
+        title={`Title for the image`}
+        alt={`Alt text for the image`}
+        crossOrigin={`anonymous`}
+        fixed={fixedImagesShapeMock.slice().reverse()}
+        itemProp={`item-prop-for-the-image`}
+        placeholderStyle={{ color: `red` }}
+        placeholderClassName={`placeholder`}
+      />
+    )
+    const aspectPreserver = container.querySelector(`div div`)
+    expect(aspectPreserver.getAttribute(`style`)).toEqual(
+      expect.stringMatching(/width: 100px; height: 100px;/)
+    )
+  })
+
   it(`should call onLoad and onError image events`, () => {
     const onLoadMock = jest.fn()
     const onErrorMock = jest.fn()

packages/gatsby-image/src/index.js

@@ -91,6 +91,14 @@ const getCurrentSrcData = currentData => {
     if (foundMedia !== -1) {
       return currentData[foundMedia]
     }
+
+    // No media matches, select first element without a media condition
+    const noMedia = currentData.findIndex(
+      image => typeof image.media === `undefined`
+    )
+    if (noMedia !== -1) {
+      return currentData[noMedia]
+    }
   }
   // Else return the first image.
   return currentData[0]