Merge pull request #1753 from magento-obsessive-owls/PB-2

[PB] Row component

jest.config.js

@@ -79,7 +79,9 @@ const testVenia = inPackage => ({
     // @magento namespaced packages like Peregrine and Venia UI as well, when
     // it's testing Venia. That way, changes in sibling packages don't require a
     // full compile.
-    transformIgnorePatterns: ['node_modules/(?!@magento/)']
+    transformIgnorePatterns: [
+        'node_modules/(?!@magento|jarallax|video-worker/)'
+    ]
 });
 
 const configureProject = (dir, displayName, cb) =>

packages/venia-concept/package.json

@@ -97,7 +97,6 @@
     "react-apollo": "2.5.5",
     "react-dom": "~16.9.0",
     "react-feather": "~2.0.3",
-    "react-parallax": "~2.2.0",
     "react-redux": "~7.1.1",
     "react-router-dom": "~5.0.0",
     "react-tabs": "~3.0.0",

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Block/__tests__/__snapshots__/block.spec.js.snap

@@ -84,7 +84,7 @@ exports[`renders a Block component with all props configured and Page Builder ri
   }
 >
   <div
-    className="contained"
+    className="root contained"
     style={
       Object {
         "backgroundAttachment": "scroll",

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Row/__tests__/__snapshots__/row.spec.js.snap

@@ -1,13 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders a Row component 1`] = `
+exports[`render row with all props configured 1`] = `
 <div
-  className="contained"
+  className="root test-class"
+  style={
+    Object {
+      "backgroundAttachment": "fixed",
+      "backgroundColor": "red",
+      "backgroundImage": "url(desktop.jpg)",
+      "backgroundPosition": "center center",
+      "backgroundRepeat": "repeat",
+      "backgroundSize": "contain",
+      "border": "solid",
+      "borderColor": "red",
+      "borderRadius": "15px",
+      "borderWidth": "10px",
+      "display": "flex",
+      "flexDirection": "column",
+      "justifyContent": "center",
+      "marginBottom": "10px",
+      "marginLeft": "10px",
+      "marginRight": "10px",
+      "marginTop": "10px",
+      "minHeight": "200px",
+      "paddingBottom": "10px",
+      "paddingLeft": "10px",
+      "paddingRight": "10px",
+      "paddingTop": "10px",
+      "textAlign": "right",
+    }
+  }
+>
+  <div
+    className="contained"
+  />
+</div>
+`;
+
+exports[`render row with mobile image displayed and parallax enabled 1`] = `
+<div
+  className="root contained"
   style={
     Object {
       "backgroundAttachment": undefined,
       "backgroundColor": undefined,
-      "backgroundImage": null,
+      "backgroundImage": "url(mobile.jpg)",
       "backgroundPosition": undefined,
       "backgroundRepeat": "no-repeat",
       "backgroundSize": undefined,
@@ -30,62 +67,32 @@ exports[`renders a Row component 1`] = `
 />
 `;
 
-exports[`renders a Row component with all props configured 1`] = `
+exports[`render row with no props 1`] = `
 <div
-  className="react-parallax test-class"
+  className="root contained"
   style={
     Object {
-      "backgroundColor": "red",
-      "border": "solid",
-      "borderColor": "red",
-      "borderRadius": "15px",
-      "borderWidth": "10px",
-      "display": "flex",
-      "flexDirection": "column",
-      "justifyContent": "center",
-      "marginBottom": "10px",
-      "marginLeft": "10px",
-      "marginRight": "10px",
-      "marginTop": "10px",
-      "minHeight": "200px",
-      "overflow": "hidden",
-      "paddingBottom": "10px",
-      "paddingLeft": "10px",
-      "paddingRight": "10px",
-      "paddingTop": "10px",
-      "position": "relative",
-      "textAlign": "right",
+      "backgroundAttachment": undefined,
+      "backgroundColor": undefined,
+      "backgroundImage": null,
+      "backgroundPosition": undefined,
+      "backgroundRepeat": "no-repeat",
+      "backgroundSize": undefined,
+      "border": undefined,
+      "borderColor": undefined,
+      "borderRadius": undefined,
+      "borderWidth": undefined,
+      "marginBottom": undefined,
+      "marginLeft": undefined,
+      "marginRight": undefined,
+      "marginTop": undefined,
+      "minHeight": undefined,
+      "paddingBottom": undefined,
+      "paddingLeft": undefined,
+      "paddingRight": undefined,
+      "paddingTop": undefined,
+      "textAlign": undefined,
     }
   }
->
-  <img
-    alt=""
-    className="react-parallax-bgimage"
-    src="desktop.jpg"
-    style={
-      Object {
-        "MozBackfaceVisibility": "hidden",
-        "MsBackfaceVisibility": "hidden",
-        "WebkitBackfaceVisibility": "hidden",
-        "WebkitTransform": "translate3d(-50%, 0, 0)",
-        "WebkitTransformStyle": "preserve-3d",
-        "left": "50%",
-        "position": "absolute",
-        "transform": "translate3d(-50%, 0, 0)",
-      }
-    }
-  />
-  <div
-    className="react-parallax-content"
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
-  >
-    <div
-      className="contained"
-    />
-  </div>
-</div>
+/>
 `;

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Row/__tests__/row.spec.js

@@ -2,15 +2,51 @@ import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 import Row from '../row';
 
+jest.mock('jarallax', () => {
+    return {
+        jarallax: jest.fn()
+    };
+});
+import { jarallax } from 'jarallax';
+const mockJarallax = jarallax.mockImplementation(() => {});
+
 jest.mock('../../../../../../classify');
 
-test('renders a Row component', () => {
+test('render row with no props', () => {
     const component = createTestInstance(<Row />);
 
     expect(component.toJSON()).toMatchSnapshot();
 });
 
-test('renders a Row component with all props configured', () => {
+test('render row with parallax initializes Jarallax', () => {
+    const rowProps = {
+        enableParallax: true,
+        parallaxSpeed: 0.75
+    };
+    createTestInstance(<Row {...rowProps} />);
+
+    expect(mockJarallax).toHaveBeenCalledWith(null, { speed: 0.75 });
+});
+
+test('row unmount causes Jarallax to be destroyed', () => {
+    const rowProps = {
+        enableParallax: true,
+        parallaxSpeed: 0.75
+    };
+    const component = createTestInstance(<Row {...rowProps} />, {
+        createNodeMock: () => {
+            return true;
+        }
+    });
+    component.unmount();
+
+    expect(mockJarallax.mock.calls).toEqual([
+        [true, { speed: 0.75 }],
+        [true, 'destroy']
+    ]);
+});
+
+test('render row with all props configured', () => {
     const rowProps = {
         appearance: 'full-width',
         verticalAlignment: 'middle',
@@ -22,7 +58,7 @@ test('renders a Row component with all props configured', () => {
         backgroundPosition: 'center center',
         backgroundAttachment: 'fixed',
         backgroundRepeat: true,
-        enableParallax: true,
+        enableParallax: false,
         parallaxSpeed: 0.5,
         textAlign: 'right',
         border: 'solid',
@@ -43,3 +79,27 @@ test('renders a Row component with all props configured', () => {
 
     expect(component.toJSON()).toMatchSnapshot();
 });
+
+test('render row with mobile image displayed and parallax enabled', () => {
+    const rowProps = {
+        mobileImage: 'mobile.jpg',
+        enableParallax: true
+    };
+
+    window.matchMedia = jest.fn().mockImplementation(query => {
+        return {
+            matches: true,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(), // deprecated
+            removeListener: jest.fn(), // deprecated
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn()
+        };
+    });
+
+    const component = createTestInstance(<Row {...rowProps} />);
+
+    expect(component.toJSON()).toMatchSnapshot();
+});

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Row/row.css

@@ -5,3 +5,9 @@
     max-width: 1280px;
     width: 100%;
 }
+
+@media only screen and (max-width: 768px) {
+    .root {
+        background-attachment: scroll !important;
+    }
+}