add ParallaxBanner tests

Author: jscottsmith

__tests__/ParallaxBanner.test.js

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
+import ParallaxBanner from 'components/ParallaxBanner';
+import ParallaxProvider from 'components/ParallaxProvider';
+import ParallaxController from 'libs/ParallaxController';
+
+describe('Expect the <ParallaxBanner> component', () => {
+    afterEach(() => {});
+
+    it('to render correctly', () => {
+        // Workaround for refs
+        // See https://github.com/facebook/react/issues/7740
+        const div = document.createElement('div');
+        function createNodeMock() {
+            return {
+                getBoundingClientRect: () => div.getBoundingClientRect(),
+            };
+        }
+
+        const tree = renderer
+            .create(
+                <ParallaxProvider>
+                    <ParallaxBanner
+                        className="test-class"
+                        disabled={false}
+                        layers={[
+                            {
+                                image: 'https://foo.com/bar.jpg',
+                                amount: 0.2,
+                                slowerScrollRate: false,
+                            },
+                        ]}
+                        style={{
+                            backgroundColor: 'blue',
+                            border: '1px solid red',
+                        }}
+                    >
+                        <div>
+                            <h1>Foo Bar</h1>
+                        </div>
+                    </ParallaxBanner>
+                </ParallaxProvider>,
+                {
+                    createNodeMock,
+                }
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('to render children', () => {
+        const node = document.createElement('div');
+
+        let child = jest.fn();
+        const Child = () => {
+            child();
+            return <div />;
+        };
+
+        ReactDOM.render(
+            <ParallaxProvider>
+                <ParallaxBanner layers={[]}>
+                    <Child />
+                </ParallaxBanner>
+            </ParallaxProvider>,
+            node
+        );
+
+        expect(child).toBeCalled();
+    });
+});

__tests__/__snapshots__/ParallaxBanner.test.js.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Expect the <ParallaxBanner> component to render correctly 1`] = `
+<div
+  className="parallax-banner test-class"
+  style={
+    Object {
+      "backgroundColor": "blue",
+      "border": "1px solid red",
+      "height": "50vh",
+      "overflow": "hidden",
+      "position": "relative",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    className="parallax-outer"
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <div
+      className="parallax-inner"
+      style={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <div
+        className="parallax-banner-layer-0"
+        style={
+          Object {
+            "backgroundImage": "url(https://foo.com/bar.jpg)",
+            "backgroundPosition": "center",
+            "backgroundSize": "cover",
+            "bottom": "-20%",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": "-20%",
+          }
+        }
+      />
+    </div>
+  </div>
+  <div>
+    <h1>
+      Foo Bar
+    </h1>
+  </div>
+</div>
+`;