Add tests for warnings and fix bug when getting normalizedWidth

Author: cartogram

packages/hydrogen-react/src/Image.test.tsx

@@ -1,19 +1,14 @@
 import {render, screen} from '@testing-library/react';
 import {faker} from '@faker-js/faker';
 import {Image} from './Image.js';
+import {Mock} from 'vitest';
 
 const defaultProps = {
+  sizes: '100vw',
   src: 'https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg',
 };
 
 describe('<Image />', () => {
-  beforeAll(() => {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    vi.spyOn(console, 'warn').mockImplementation(() => {});
-  });
-
-  it.todo('warns user if no sizes are provided');
-
   // This test fails because the received src has ?width=100 appended to it
   it.skip('renders an `img` element', () => {
     const src = faker.image.imageUrl();
@@ -61,4 +56,68 @@ describe('<Image />', () => {
     expect(image).toBeInTheDocument();
     expect(image).toHaveAttribute('sizes', '100vw');
   });
+
+  describe('warnings', () => {
+    const consoleMock = {
+      ...console,
+      warn: vi.fn(),
+    };
+
+    vi.stubGlobal('console', consoleMock);
+
+    afterAll(() => {
+      vi.unstubAllGlobals();
+    });
+
+    it('warns user if no sizes are provided', () => {
+      render(<Image {...defaultProps} sizes={undefined} />);
+
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(getWarnings()).toMatchInlineSnapshot(
+        `
+        [
+          "No sizes prop provided to Image component, you may be loading unnecessarily large images. Image used is https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg",
+        ]
+      `,
+      );
+    });
+
+    it('does not warn user if no sizes are provided but width is fixed', () => {
+      render(<Image {...defaultProps} sizes={undefined} width={100} />);
+
+      expect(console.warn).toHaveBeenCalledTimes(0);
+    });
+
+    it('warns user if widths is provided', () => {
+      render(<Image {...defaultProps} widths={[]} />);
+
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(getWarnings()).toMatchInlineSnapshot(
+        `
+        [
+          "Deprecated property from original Image component in use: \`widths\` are now calculated automatically based on the config and width props. Image used is https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg",
+        ]
+      `,
+      );
+    });
+
+    it('warns user if loaderOptions are provided', () => {
+      render(<Image {...defaultProps} loaderOptions={{}} />);
+
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(getWarnings()).toMatchInlineSnapshot(
+        `
+        [
+          "Deprecated property from original Image component in use: Use the \`crop\`, \`width\`, \`height\`, and src props, or the \`data\` prop to achieve the same result. Image used is https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg",
+        ]
+      `,
+      );
+    });
+  });
 });
+
+function getWarnings() {
+  return (console.warn as Mock<[string]>).mock.calls.map(
+    ([message]) => message,
+  );
+}

packages/hydrogen-react/src/Image.tsx

@@ -120,7 +120,7 @@ export function Image({
   if (loaderOptions) {
     console.warn(
       `Deprecated property from original Image component in use: ` +
-        `Use the \`crop\`, \`width\`, \`height\`, and src props, or` +
+        `Use the \`crop\`, \`width\`, \`height\`, and src props, or ` +
         `the \`data\` prop to achieve the same result. Image used is ${
           src || data?.url
         }`,
@@ -154,7 +154,7 @@ export function Image({
 
   const normalizedWidth = `${
     getUnitValueParts(normalizedWidthProp.toString()).number
-  } ${getUnitValueParts(normalizedWidthProp.toString()).unit}`;
+  }${getUnitValueParts(normalizedWidthProp.toString()).unit}`;
 
   const normalizedHeight: string =
     height === undefined