update tests for ParallaxBanner to include custom children and expanded states #22

Author: jscottsmith

__tests__/ParallaxBanner.test.js

@@ -6,19 +6,20 @@ import ParallaxBanner from 'components/ParallaxBanner';
 import ParallaxProvider from 'components/ParallaxProvider';
 import ParallaxController from 'libs/ParallaxController';
 
+// Workaround for refs
+// See https://github.com/facebook/react/issues/7740
+function createNodeMock() {
+    const div = document.createElement('div');
+
+    return {
+        getBoundingClientRect: () => div.getBoundingClientRect(),
+    };
+}
+
 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(),
-            };
-        }
-
+    it('to render image banners correctly', () => {
         const tree = renderer
             .create(
                 <ParallaxProvider>
@@ -50,6 +51,56 @@ describe('Expect the <ParallaxBanner> component', () => {
         expect(tree).toMatchSnapshot();
     });
 
+    it('to render custom child banners correctly', () => {
+        const tree = renderer
+            .create(
+                <ParallaxProvider>
+                    <ParallaxBanner
+                        className="test-class"
+                        disabled={false}
+                        layers={[
+                            {
+                                children: <div>test</div>,
+                                amount: 0.2,
+                                slowerScrollRate: false,
+                            },
+                        ]}
+                        style={{
+                            backgroundColor: 'blue',
+                            border: '1px solid red',
+                        }}
+                    />
+                </ParallaxProvider>,
+                {
+                    createNodeMock,
+                }
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('to render without expanded margins', () => {
+        const tree = renderer
+            .create(
+                <ParallaxProvider>
+                    <ParallaxBanner
+                        layers={[
+                            {
+                                children: <div>test</div>,
+                                amount: 0.2,
+                                expanded: false,
+                            },
+                        ]}
+                    />
+                </ParallaxProvider>,
+                {
+                    createNodeMock,
+                }
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
     it('to render children', () => {
         const node = document.createElement('div');
 
@@ -70,4 +121,58 @@ describe('Expect the <ParallaxBanner> component', () => {
 
         expect(child).toBeCalled();
     });
+
+    it('to render layer children', () => {
+        const node = document.createElement('div');
+
+        let child = jest.fn();
+        const Child = () => {
+            child();
+            return <div />;
+        };
+
+        ReactDOM.render(
+            <ParallaxProvider>
+                <ParallaxBanner
+                    layers={[
+                        {
+                            children: <Child />,
+                            amount: 0.2,
+                            slowerScrollRate: false,
+                        },
+                    ]}
+                />
+            </ParallaxProvider>,
+            node
+        );
+
+        expect(child).toBeCalled();
+    });
+
+    it('to render layer children', () => {
+        const node = document.createElement('div');
+
+        let child = jest.fn();
+        const Child = () => {
+            child();
+            return <div />;
+        };
+
+        ReactDOM.render(
+            <ParallaxProvider>
+                <ParallaxBanner
+                    layers={[
+                        {
+                            children: <Child />,
+                            amount: 0.2,
+                            slowerScrollRate: false,
+                        },
+                    ]}
+                />
+            </ParallaxProvider>,
+            node
+        );
+
+        expect(child).toBeCalled();
+    });
 });

__tests__/__snapshots__/ParallaxBanner.test.js.snap

@@ -1,6 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Expect the <ParallaxBanner> component to render correctly 1`] = `
+exports[`Expect the <ParallaxBanner> component to render custom child banners 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 {
+            "bottom": "-20%",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": "-20%",
+          }
+        }
+      >
+        <div>
+          test
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Expect the <ParallaxBanner> component to render image banners correctly 1`] = `
 <div
   className="parallax-banner test-class"
   style={
@@ -62,3 +121,60 @@ exports[`Expect the <ParallaxBanner> component to render correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`Expect the <ParallaxBanner> component to render without expanded margins 1`] = `
+<div
+  className="parallax-banner"
+  style={
+    Object {
+      "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 {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <div>
+          test
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;