@magento/pagebuilder 7.1.0-alpha.3 → 7.2.0-alpha.1

package/lib/ContentTypes/DynamicBlock/dynamicBlock.ee.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import { arrayOf, bool, oneOf, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import CmsDynamicBlockGroup, {
+    DISPLAY_MODE_FIXED_TYPE,
+    DISPLAY_MODE_SALES_RULE_TYPE,
+    DISPLAY_MODE_CATALOG_RULE_TYPE
+} from '@magento/venia-ui/lib/components/CmsDynamicBlock';
+import defaultClasses from './dynamicBlock.module.css';
+
+/**
+ * Page Builder Dynamic Block component.
+ *
+ * This component is part of the Page Builder / PWA integration. It can be consumed without Page Builder.
+ *
+ * @typedef DynamicBlock
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a Dynamic Block.
+ */
+const DynamicBlock = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const {
+        displayInline,
+        displayMode,
+        uids = '',
+        textAlign,
+        border,
+        borderColor,
+        borderWidth,
+        borderRadius,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        minHeight,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
+        cssClasses = []
+    } = props;
+
+    const dynamicStyles = {
+        textAlign,
+        border,
+        borderColor,
+        borderWidth,
+        borderRadius,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        minHeight,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft
+    };
+
+    const RootTag = displayInline ? 'span' : 'div';
+
+    // If no uids are found, do not render
+    if (!uids || (uids && uids.length === 0)) {
+        return null;
+    }
+
+    return (
+        <RootTag
+            style={dynamicStyles}
+            className={[classes.root, ...cssClasses].join(' ')}
+            aria-live="polite"
+            aria-busy="false"
+        >
+            <CmsDynamicBlockGroup displayMode={displayMode} uids={uids} />
+        </RootTag>
+    );
+};
+
+/**
+ * Props for {@link DynamicBlock}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the component
+ * @property {String} classes.root CSS class for the component root element
+ * @property {Boolean} displayInline Select display inline or display block
+ * @property {String} displayMode Display mode of the dynamic block
+ * @property {String} uids ID of the dynamic block
+ * @property {String} textAlign Alignment of the component within the parent container
+ * @property {String} border CSS border property
+ * @property {String} borderColor CSS border color property
+ * @property {String} borderWidth CSS border width property
+ * @property {String} borderRadius CSS border radius property
+ * @property {String} marginTop CSS margin top property
+ * @property {String} marginRight CSS margin right property
+ * @property {String} marginBottom CSS margin bottom property
+ * @property {String} marginLeft CSS margin left property
+ * @property {String} paddingTop CSS padding top property
+ * @property {String} paddingRight CSS padding right property
+ * @property {String} paddingBottom CSS padding bottom property
+ * @property {String} paddingLeft CSS padding left property
+ * @property {Array} cssClasses List of CSS classes to be applied to the component
+ */
+DynamicBlock.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    displayInline: bool,
+    displayMode: oneOf([
+        DISPLAY_MODE_FIXED_TYPE,
+        DISPLAY_MODE_SALES_RULE_TYPE,
+        DISPLAY_MODE_CATALOG_RULE_TYPE
+    ]),
+    uids: string,
+    textAlign: string,
+    border: string,
+    borderColor: string,
+    borderWidth: string,
+    borderRadius: string,
+    marginTop: string,
+    marginRight: string,
+    marginBottom: string,
+    marginLeft: string,
+    paddingTop: string,
+    paddingRight: string,
+    paddingBottom: string,
+    cssClasses: arrayOf(string)
+};
+
+export default DynamicBlock;

package/lib/ContentTypes/DynamicBlock/dynamicBlock.module.css

@@ -0,0 +1,8 @@
+.root:empty {
+    display: none;
+}
+
+.root_inline {
+    composes: root;
+    display: inline-block;
+}

package/lib/ContentTypes/DynamicBlock/dynamicBlock.shimmer.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import { arrayOf, shape, string, object } from 'prop-types';
+import defaultClasses from './dynamicBlock.shimmer.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+
+/**
+ * Page Builder Dynamic Block Shimmer component.
+ *
+ * @typedef DynamicBlockShimmer
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a Dynamic Block Shimmer.
+ */
+const DynamicBlockShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const {
+        border,
+        borderWidth,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        minHeight,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
+        cssClasses = []
+    } = props;
+
+    const rootStyles = {
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        minHeight
+    };
+
+    const wrapperStyles = {
+        border,
+        borderWidth,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft
+    };
+
+    // Only render shimmer if min-height specified
+    return minHeight ? (
+        <div
+            className={classes.parent}
+            style={rootStyles}
+            aria-live="polite"
+            aria-busy="true"
+        >
+            <Shimmer
+                classes={{
+                    root_rectangle: [
+                        classes.root,
+                        classes.shimmerRoot,
+                        ...cssClasses
+                    ].join(' ')
+                }}
+            >
+                <div className={classes.wrapper} style={wrapperStyles}>
+                    <div className={classes.overlay}>
+                        <div className={classes.content} />
+                    </div>
+                </div>
+            </Shimmer>
+        </div>
+    ) : null;
+};
+
+/**
+ * Props for {@link DynamicBlockShimmer}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the dynamic block
+ * @property {String} classes.root CSS class for the dynamic block root element
+ * @property {String} classes.shimmerRoot CSS class for the dynamic block
+ * shimmer root_rectangle element
+ * @property {String} classes.wrapper CSS class for the dynamic block wrapper element
+ * @property {String} classes.overlay CSS class for the dynamic block overlay element
+ * @property {String} classes.content CSS class for the dynamic block content element
+ * @property {String} minHeight CSS minimum height property
+ * @property {String} border CSS border property
+ * @property {String} borderWidth CSS border width property
+ * @property {String} marginTop CSS margin top property
+ * @property {String} marginRight CSS margin right property
+ * @property {String} marginBottom CSS margin bottom property
+ * @property {String} marginLeft CSS margin left property
+ * @property {Array} mediaQueries List of media query rules to be applied to the component
+ * @property {String} paddingTop CSS padding top property
+ * @property {String} paddingRight CSS padding right property
+ * @property {String} paddingBottom CSS padding bottom property
+ * @property {String} paddingLeft CSS padding left property
+ * @property {Array} cssClasses List of CSS classes to be applied to
+ * the component
+ */
+DynamicBlockShimmer.propTypes = {
+    classes: shape({
+        root: string,
+        shimmerRoot: string,
+        parent: string,
+        wrapper: string,
+        overlay: string,
+        content: string
+    }),
+    minHeight: string,
+    border: string,
+    borderWidth: string,
+    marginTop: string,
+    marginRight: string,
+    marginBottom: string,
+    marginLeft: string,
+    mediaQueries: arrayOf(
+        shape({
+            media: string,
+            style: object
+        })
+    ),
+    paddingTop: string,
+    paddingRight: string,
+    paddingBottom: string,
+    paddingLeft: string,
+    cssClasses: arrayOf(string)
+};
+
+export default DynamicBlockShimmer;

package/lib/ContentTypes/DynamicBlock/dynamicBlock.shimmer.module.css

@@ -0,0 +1,26 @@
+.parent {
+    display: flex;
+}
+
+/* Only show one shimmer when multiple dynamic blocks */
+.parent + .parent {
+    display: none;
+}
+
+.shimmerRoot {
+    composes: root_rectangle from '~@magento/venia-ui/lib/components/Shimmer/shimmer.module.css';
+    composes: root from './dynamicBlock.module.css';
+    flex: 1;
+}
+
+.wrapper {
+    composes: wrapper from './dynamicBlock.module.css';
+}
+
+.overlay {
+    composes: overlay from './dynamicBlock.module.css';
+}
+
+.content {
+    composes: content from './dynamicBlock.module.css';
+}

package/lib/ContentTypes/DynamicBlock/index.js

@@ -0,0 +1,2 @@
+export { default } from './dynamicBlock';
+export { default as DynamicBlockShimmer } from './dynamicBlock.shimmer';

package/lib/ContentTypes/Image/__tests__/__snapshots__/image.shimmer.spec.js.snap

@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ImageShimmer correctly render empty ImageShimmer component 1`] = `null`;
+
+exports[`renders ImageShimmer correctly renders a ImageShimmer using desktop image dimension 1`] = `
+<figure
+  style={
+    Object {
+      "marginBottom": undefined,
+      "marginLeft": undefined,
+      "marginRight": undefined,
+      "marginTop": undefined,
+      "paddingBottom": undefined,
+      "paddingLeft": undefined,
+      "paddingRight": undefined,
+      "paddingTop": undefined,
+      "textAlign": undefined,
+    }
+  }
+>
+  <div
+    aria-busy="true"
+    aria-live="polite"
+    className="root_rectangle"
+    style={
+      Object {
+        "border": undefined,
+        "borderColor": undefined,
+        "borderRadius": undefined,
+        "borderWidth": undefined,
+        "height": "300px",
+        "width": "400px",
+      }
+    }
+  />
+</figure>
+`;
+
+exports[`renders ImageShimmer correctly renders a ImageShimmer using desktop image dimension on mobile device when no mobile image 1`] = `
+<figure
+  style={
+    Object {
+      "marginBottom": undefined,
+      "marginLeft": undefined,
+      "marginRight": undefined,
+      "marginTop": undefined,
+      "paddingBottom": undefined,
+      "paddingLeft": undefined,
+      "paddingRight": undefined,
+      "paddingTop": undefined,
+      "textAlign": undefined,
+    }
+  }
+>
+  <div
+    aria-busy="true"
+    aria-live="polite"
+    className="root_rectangle"
+    style={
+      Object {
+        "border": undefined,
+        "borderColor": undefined,
+        "borderRadius": undefined,
+        "borderWidth": undefined,
+        "height": "300px",
+        "width": "400px",
+      }
+    }
+  />
+</figure>
+`;
+
+exports[`renders ImageShimmer correctly renders a ImageShimmer using mobile image dimension 1`] = `
+<figure
+  style={
+    Object {
+      "marginBottom": undefined,
+      "marginLeft": undefined,
+      "marginRight": undefined,
+      "marginTop": undefined,
+      "paddingBottom": undefined,
+      "paddingLeft": undefined,
+      "paddingRight": undefined,
+      "paddingTop": undefined,
+      "textAlign": undefined,
+    }
+  }
+>
+  <div
+    aria-busy="true"
+    aria-live="polite"
+    className="root_rectangle"
+    style={
+      Object {
+        "border": undefined,
+        "borderColor": undefined,
+        "borderRadius": undefined,
+        "borderWidth": undefined,
+        "height": "250px",
+        "width": "125px",
+      }
+    }
+  />
+</figure>
+`;
+
+exports[`renders ImageShimmer correctly renders a ImageShimmer using mobile image dimension even without desktop image 1`] = `
+<figure
+  style={
+    Object {
+      "marginBottom": undefined,
+      "marginLeft": undefined,
+      "marginRight": undefined,
+      "marginTop": undefined,
+      "paddingBottom": undefined,
+      "paddingLeft": undefined,
+      "paddingRight": undefined,
+      "paddingTop": undefined,
+      "textAlign": undefined,
+    }
+  }
+>
+  <div
+    aria-busy="true"
+    aria-live="polite"
+    className="root_rectangle"
+    style={
+      Object {
+        "border": undefined,
+        "borderColor": undefined,
+        "borderRadius": undefined,
+        "borderWidth": undefined,
+        "height": "250px",
+        "width": "125px",
+      }
+    }
+  />
+</figure>
+`;

package/lib/ContentTypes/Image/__tests__/configAggregator.spec.js

@@ -2,15 +2,21 @@ import configAggregator from '../configAggregator';
 
 test('image config aggregator retrieves image data without anchor', () => {
     const node = document.createElement('div');
-    node.innerHTML = `<figure data-content-type="image" data-appearance="full-width" data-element="main" style="margin: 0px; padding: 0px; border-style: none;"><img class="pagebuilder-mobile-hidden" src="desktop-image.png" alt="Test Alt Text" title="Test Title Text" data-element="desktop_image" style="border-style: none; border-width: 1px; border-radius: 0px; max-width: 100%; height: auto;"><img class="pagebuilder-mobile-only" src="mobile-image.png" alt="Test Alt Text" title="Test Title Text" data-element="mobile_image" style="border-style: none; border-width: 1px; border-radius: 0px; max-width: 100%; height: auto;"></figure>`;
+    node.innerHTML = `<figure data-content-type="image" data-appearance="full-width" data-element="main" style="margin: 0px; padding: 0px; border-style: none;"><img class="pagebuilder-mobile-hidden" src="desktop-image.png" alt="Test Alt Text" title="Test Title Text" data-element="desktop_image" style="border-style: none; border-width: 1px; border-radius: 0px; max-width: 100%; height: auto;" data-image-dimensions="{&quot;height&quot;:300,&quot;width&quot;:460,&quot;ratio&quot;:0.65}"><img class="pagebuilder-mobile-only" src="mobile-image.png" alt="Test Alt Text" title="Test Title Text" data-element="mobile_image" style="border-style: none; border-width: 1px; border-radius: 0px; max-width: 100%; height: auto;" data-image-dimensions="{&quot;height&quot;:200,&quot;width&quot;:100,&quot;ratio&quot;:0.5}"></figure>`;
     expect(
         configAggregator(node.childNodes[0], {
             appearance: 'full-width'
         })
     ).toEqual(
         expect.objectContaining({
-            desktopImage: 'desktop-image.png',
-            mobileImage: 'mobile-image.png',
+            desktopImage: {
+                dimensions: { height: 300, ratio: 0.65, width: 460 },
+                src: 'desktop-image.png'
+            },
+            mobileImage: {
+                dimensions: { height: 200, ratio: 0.5, width: 100 },
+                src: 'mobile-image.png'
+            },
             altText: 'Test Alt Text',
             title: 'Test Title Text'
         })
@@ -19,15 +25,21 @@ test('image config aggregator retrieves image data without anchor', () => {
 
 test('image config aggregator retrieves image data with anchor', () => {
     const node = document.createElement('div');
-    node.innerHTML = `<figure class="another-class-image" data-content-type="image" data-appearance="full-width" data-element="main" style="text-align: center; margin: 1px 2px 3px 4px; padding: 5px 6px 7px 8px; border-style: none;"><a href="/test-link" target="" data-link-type="page" title="Title Text" data-element="link"><img class="pagebuilder-mobile-hidden" src="desktop-image.png" alt="Alt Text" title="Title Text" data-element="desktop_image" style="border-style: solid; border-color: rgb(255, 0, 0); border-width: 5px; border-radius: 10px; max-width: 100%; height: auto;"><img class="pagebuilder-mobile-only" src="mobile-image.png" alt="Alt Text" title="Title Text" data-element="mobile_image" style="border-style: solid; border-color: rgb(255, 0, 0); border-width: 5px; border-radius: 10px; max-width: 100%; height: auto;"></a><figcaption data-element="caption">Test Caption</figcaption></figure>`;
+    node.innerHTML = `<figure class="another-class-image" data-content-type="image" data-appearance="full-width" data-element="main" style="text-align: center; margin: 1px 2px 3px 4px; padding: 5px 6px 7px 8px; border-style: none;"><a href="/test-link" target="" data-link-type="page" title="Title Text" data-element="link"><img class="pagebuilder-mobile-hidden" src="desktop-image.png" alt="Alt Text" title="Title Text" data-element="desktop_image" style="border-style: solid; border-color: rgb(255, 0, 0); border-width: 5px; border-radius: 10px; max-width: 100%; height: auto;" data-image-dimensions="{&quot;height&quot;:300,&quot;width&quot;:460,&quot;ratio&quot;:0.65}"><img class="pagebuilder-mobile-only" src="mobile-image.png" alt="Alt Text" title="Title Text" data-element="mobile_image" style="border-style: solid; border-color: rgb(255, 0, 0); border-width: 5px; border-radius: 10px; max-width: 100%; height: auto;" data-image-dimensions="{&quot;height&quot;:200,&quot;width&quot;:100,&quot;ratio&quot;:0.5}"></a><figcaption data-element="caption">Test Caption</figcaption></figure>`;
     expect(
         configAggregator(node.childNodes[0], {
             appearance: 'full-width'
         })
     ).toEqual(
         expect.objectContaining({
-            desktopImage: 'desktop-image.png',
-            mobileImage: 'mobile-image.png',
+            desktopImage: {
+                dimensions: { height: 300, ratio: 0.65, width: 460 },
+                src: 'desktop-image.png'
+            },
+            mobileImage: {
+                dimensions: { height: 200, ratio: 0.5, width: 100 },
+                src: 'mobile-image.png'
+            },
             altText: 'Alt Text',
             title: 'Title Text',
             link: '/test-link',
@@ -38,27 +50,33 @@ test('image config aggregator retrieves image data with anchor', () => {
 
 test('image config aggregator sets proper mobileImage when desktopImage equals mobilImage', () => {
     const node = document.createElement('div');
-    node.innerHTML = `<figure class="another-class-image" data-content-type="image" data-appearance="full-width" data-element="main" style="text-align: center; margin: 1px 2px 3px 4px; padding: 5px 6px 7px 8px; border-style: none;"><a href="/test-link" target="" data-link-type="page" title="Title Text" data-element="link"><img class="pagebuilder-mobile-hidden" src="same-image.png" alt="Alt Text" title="Title Text" data-element="desktop_image" style="border-style: solid; border-color: rgb(255, 0, 0); border-width: 5px; border-radius: 10px; max-width: 100%; height: auto;"><img class="pagebuilder-mobile-only" src="same-image.png" alt="Alt Text" title="Title Text" data-element="mobile_image" style="border-style: solid; border-color: rgb(255, 0, 0); border-width: 5px; border-radius: 10px; max-width: 100%; height: auto;"></a><figcaption data-element="caption">Test Caption</figcaption></figure>`;
+    node.innerHTML = `<figure class="another-class-image" data-content-type="image" data-appearance="full-width" data-element="main" style="text-align: center; margin: 1px 2px 3px 4px; padding: 5px 6px 7px 8px; border-style: none;"><a href="/test-link" target="" data-link-type="page" title="Title Text" data-element="link"><img class="pagebuilder-mobile-hidden" src="same-image.png" alt="Alt Text" title="Title Text" data-element="desktop_image" style="border-style: solid; border-color: rgb(255, 0, 0); border-width: 5px; border-radius: 10px; max-width: 100%; height: auto;" data-image-dimensions="{&quot;height&quot;:300,&quot;width&quot;:460,&quot;ratio&quot;:0.65}"><img class="pagebuilder-mobile-only" src="same-image.png" alt="Alt Text" title="Title Text" data-element="mobile_image" style="border-style: solid; border-color: rgb(255, 0, 0); border-width: 5px; border-radius: 10px; max-width: 100%; height: auto;" data-image-dimensions="{&quot;height&quot;:300,&quot;width&quot;:460,&quot;ratio&quot;:0.65}"></a><figcaption data-element="caption">Test Caption</figcaption></figure>`;
 
     const config = configAggregator(node.childNodes[0]);
 
     expect(config).toEqual(
         expect.objectContaining({
-            desktopImage: 'same-image.png',
+            desktopImage: {
+                dimensions: { height: 300, ratio: 0.65, width: 460 },
+                src: 'same-image.png'
+            },
             mobileImage: null
         })
     );
 });
 test('image config aggregator sets proper mobileImage only', () => {
     const node = document.createElement('div');
-    node.innerHTML = `<figure data-content-type="image" data-appearance="full-width" data-element="main" style="margin: 0px; padding: 0px; border-style: none;"><img class="pagebuilder-mobile-only" src="mobile-image.png" alt="Test Alt Text" title="Test Title Text" data-element="mobile_image" style="border-style: none; border-width: 1px; border-radius: 0px; max-width: 100%; height: auto;"></figure>`;
+    node.innerHTML = `<figure data-content-type="image" data-appearance="full-width" data-element="main" style="margin: 0px; padding: 0px; border-style: none;"><img class="pagebuilder-mobile-only" src="mobile-image.png" alt="Test Alt Text" title="Test Title Text" data-element="mobile_image" style="border-style: none; border-width: 1px; border-radius: 0px; max-width: 100%; height: auto;" data-image-dimensions="{&quot;height&quot;:200,&quot;width&quot;:100,&quot;ratio&quot;:0.5}"></figure>`;
 
     const config = configAggregator(node.childNodes[0]);
 
     expect(config).toEqual(
         expect.objectContaining({
             desktopImage: null,
-            mobileImage: 'mobile-image.png'
+            mobileImage: {
+                dimensions: { height: 200, ratio: 0.5, width: 100 },
+                src: 'mobile-image.png'
+            }
         })
     );
 });

package/lib/ContentTypes/Image/__tests__/image.shimmer.spec.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import ImageShimmer from '../image.shimmer';
+
+jest.mock('@magento/venia-ui/lib/classify');
+
+describe('renders ImageShimmer correctly', () => {
+    test('render empty ImageShimmer component', () => {
+        const component = createTestInstance(<ImageShimmer />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('renders a ImageShimmer using mobile image dimension', () => {
+        Object.defineProperty(window, 'matchMedia', {
+            value: jest.fn().mockImplementation(() => ({
+                matches: true
+            }))
+        });
+
+        const props = {
+            desktopImage: {
+                url: '/desktop-image.jpg',
+                dimensions: {
+                    height: 300,
+                    width: 400,
+                    ratio: 0.75
+                }
+            },
+            mobileImage: {
+                url: '/mobile-image.png',
+                dimensions: {
+                    height: 250,
+                    width: 125,
+                    ratio: 2
+                }
+            }
+        };
+
+        const component = createTestInstance(<ImageShimmer {...props} />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('renders a ImageShimmer using mobile image dimension even without desktop image', () => {
+        Object.defineProperty(window, 'matchMedia', {
+            value: jest.fn().mockImplementation(() => ({
+                matches: true
+            }))
+        });
+
+        const props = {
+            mobileImage: {
+                url: '/mobile-image.png',
+                dimensions: {
+                    height: 250,
+                    width: 125,
+                    ratio: 2
+                }
+            }
+        };
+
+        const component = createTestInstance(<ImageShimmer {...props} />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('renders a ImageShimmer using desktop image dimension on mobile device when no mobile image', () => {
+        Object.defineProperty(window, 'matchMedia', {
+            value: jest.fn().mockImplementation(() => ({
+                matches: true
+            }))
+        });
+
+        const props = {
+            desktopImage: {
+                url: '/desktop-image.jpg',
+                dimensions: {
+                    height: 300,
+                    width: 400,
+                    ratio: 0.75
+                }
+            },
+            mobileImage: null
+        };
+
+        const component = createTestInstance(<ImageShimmer {...props} />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    test('renders a ImageShimmer using desktop image dimension', () => {
+        Object.defineProperty(window, 'matchMedia', {
+            value: jest.fn().mockImplementation(() => ({
+                matches: false
+            }))
+        });
+
+        const props = {
+            desktopImage: {
+                url: '/desktop-image.jpg',
+                dimensions: {
+                    height: 300,
+                    width: 400,
+                    ratio: 0.75
+                }
+            },
+            mobileImage: {
+                url: '/mobile-image.png',
+                dimensions: {
+                    height: 250,
+                    width: 125,
+                    ratio: 2
+                }
+            }
+        };
+
+        const component = createTestInstance(<ImageShimmer {...props} />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+});