fix skipped tests

Author: jscottsmith

__tests__/Parallax.test.tsx

@@ -58,10 +58,9 @@ describe('Expect the <Parallax> component', () => {
     );
   });
 
-  // fix this
-  it.skip('to create an element in the controller on mount', () => {
+  it('to create an element in the controller on mount', () => {
     const controller = ParallaxController.init({ scrollAxis: VERTICAL });
-    controller.createElement = jest.fn();
+    controller.createElement = jest.fn(controller.createElement);
 
     render(
       <MockProvider controllerMock={controller}>
@@ -72,18 +71,8 @@ describe('Expect the <Parallax> component', () => {
     );
 
     expect(controller.createElement).toBeCalledWith({
-      elInner: (
-        <div className="parallax-inner">
-          <div />
-        </div>
-      ),
-      elOuter: (
-        <div className="parallax-outer">
-          <div className="parallax-inner">
-            <div />
-          </div>
-        </div>
-      ),
+      elInner: expect.any(HTMLElement),
+      elOuter: expect.any(HTMLElement),
       props: { disabled: false, x0: 0, x1: 0, y0: -100, y1: 100 },
     });
   });
@@ -104,72 +93,85 @@ describe('Expect the <Parallax> component', () => {
     expect(controller.removeElementById).toBeCalledWith(element.id);
   });
 
-  // fix this
-  it.skip('to update an element in the controller when receiving relevant new props', () => {
+  it('to update an element in the controller when receiving relevant new props', () => {
     const controller = ParallaxController.init({ scrollAxis: VERTICAL });
     controller.updateElementPropsById = jest.fn();
 
-    class StateChanger extends React.Component {
-      state = { disabled: false };
-      render() {
-        return <Parallax {...this.state} />;
-      }
+    function Wrapper(props) {
+      return (
+        <MockProvider controllerMock={controller}>
+          {props.children}
+        </MockProvider>
+      );
     }
 
-    let stateInstance;
-    render(
-      <MockProvider controllerMock={controller}>
-        <StateChanger ref={(ref) => (stateInstance = ref)} />
-      </MockProvider>
-    );
+    const { rerender } = render(<Parallax disabled={true} />, {
+      wrapper: Wrapper,
+    });
 
-    const testProps = {
-      disabled: true,
-      x: [100, -100],
-      y: [-100, 100],
-    };
+    rerender(<Parallax disabled={false} x={[100, -100]} y={[-100, 100]} />);
 
-    // trigger an update
-    stateInstance.setState(testProps);
     const element = controller.getElements()[0];
 
     expect(controller.updateElementPropsById).toBeCalledWith(element.id, {
-      disabled: true,
+      disabled: false,
       x0: 100,
       x1: -100,
       y0: -100,
       y1: 100,
     });
 
-    // should not be called again
-    stateInstance.setState({
-      ...testProps,
-      foo: false,
-      bar: true,
+    const newProps = { disabled: false, x: [-40, -60], y: [10, 80] };
+
+    rerender(
+      <Parallax disabled={newProps.disabled} x={newProps.x} y={newProps.y} />
+    );
+
+    expect(controller.updateElementPropsById).toBeCalledWith(element.id, {
+      disabled: false,
+      x0: -40,
+      x1: -60,
+      y0: 10,
+      y1: 80,
     });
 
-    expect(controller.updateElementPropsById).toHaveBeenCalledTimes(1);
+    // only update with valid props
+    rerender(
+      <Parallax
+        disabled={newProps.disabled}
+        x={newProps.x}
+        y={newProps.y}
+        // @ts-expect-error
+        nope="bad"
+      />
+    );
+
+    expect(controller.updateElementPropsById).toHaveBeenCalledTimes(2);
   });
-  // fix this
-  it.skip('to reset styles on an element if the disabled prop is true', () => {
+
+  it('to reset styles on an element if the disabled prop is true', () => {
     const controller = ParallaxController.init({ scrollAxis: VERTICAL });
     controller.resetElementStyles = jest.fn();
 
-    class StateChanger extends React.Component {
-      state = { disabled: false };
-      render() {
-        return <Parallax {...this.state} />;
-      }
+    function Wrapper(props) {
+      return (
+        <MockProvider controllerMock={controller}>
+          {props.children}
+        </MockProvider>
+      );
     }
 
-    let stateInstance;
-    render(
-      <MockProvider controllerMock={controller}>
-        <StateChanger ref={(ref) => (stateInstance = ref)} />
-      </MockProvider>
+    const offX = [100, -100];
+    const offY = [100, -100];
+
+    const { rerender } = render(
+      <Parallax disabled={false} x={offX} y={offY} />,
+      {
+        wrapper: Wrapper,
+      }
     );
 
-    stateInstance.setState({ disabled: true });
+    rerender(<Parallax disabled={true} x={offX} y={offY} />);
 
     expect(controller.resetElementStyles).toBeCalled();
   });

__tests__/ParallaxProvider.test.tsx

@@ -3,8 +3,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import { render } from '@testing-library/react';
 import { ParallaxProvider } from '../src/components/ParallaxProvider';
 import { ParallaxController } from '../src/classes/ParallaxController';
+import { useController } from '../src/hooks/useController';
 
 describe('A <ParallaxProvider>', () => {
   it('to render children', () => {
@@ -29,21 +31,21 @@ describe('A <ParallaxProvider>', () => {
     expect(child).toBeCalled();
   });
 
-  it.skip('to pass the controller context', () => {
-    // const node = document.createElement('div');
-    // let parallaxController;
-    // const ContextChecker = withController((props) => {
-    //   parallaxController = props.parallaxController;
-    //   return null;
-    // });
-    // ReactDOM.render(
-    //   <ParallaxProvider>
-    //     <ContextChecker />
-    //   </ParallaxProvider>,
-    //   node
-    // );
-    // // Expected methods and state
-    // expect(parallaxController).toBeInstanceOf(ParallaxController);
+  it('to pass the controller context', () => {
+    let parallaxController;
+
+    const ContextChecker = () => {
+      parallaxController = useController();
+      return null;
+    };
+
+    render(
+      <ParallaxProvider>
+        <ContextChecker />
+      </ParallaxProvider>
+    );
+    // Expected methods and state
+    expect(parallaxController).toBeInstanceOf(ParallaxController);
   });
 
   it('to destroy the controller when unmounting', () => {
@@ -98,8 +100,9 @@ describe('A <ParallaxProvider>', () => {
     expect(spy).toBeCalledWith(el);
   });
 
+  // NOTE: I think this test can be removed
   it('to always create a new instance when re-mounting', () => {
-    // the provider isn't gauranteed to be destroyed before re-instantiated
+    // the provider isn't guaranteed to be destroyed before re-instantiated
     // in a route change.
 
     // this test asserts the controller on the provider will still be