fix: tests

Author: jscottsmith

package.json

@@ -125,6 +125,7 @@
     "@storybook/react": "^6.4.20",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^27.0.3",
     "@types/react": "^17.0.35",
     "@types/react-dom": "^17.0.11",

pnpm-lock.yaml

@@ -108,7 +108,7 @@ describe('given the <Parallax> component', () => {
         wrapper: Wrapper,
       });
       expect(asFragment()).toMatchSnapshot();
-      expect(controller.createElement).toBeCalledWith({
+      expect(controller.createElement).toHaveBeenCalledWith({
         el: expect.any(HTMLElement),
         props,
       });
@@ -126,7 +126,7 @@ describe('given the <Parallax> component', () => {
           <Parallax translateY={[-100, 100]} />
         </MockProvider>
       );
-      expect(controller.createElement).toBeCalledWith({
+      expect(controller.createElement).toHaveBeenCalledWith({
         el: expect.any(HTMLElement),
         props: { translateY: [-100, 100] },
       });
@@ -147,7 +147,7 @@ describe('given the <Parallax> component', () => {
       );
       const element = controller.getElements()[0];
       unmount();
-      expect(controller.removeElementById).toBeCalledWith(element.id);
+      expect(controller.removeElementById).toHaveBeenCalledWith(element.id);
     });
 
     it('then it updates an element in the controller when receiving relevant new props', () => {
@@ -178,11 +178,14 @@ describe('given the <Parallax> component', () => {
 
       const element = controller.getElements()[0];
 
-      expect(controller.updateElementPropsById).toBeCalledWith(element.id, {
-        disabled: false,
-        translateX: [100, -100],
-        translateY: [-100, 100],
-      });
+      expect(controller.updateElementPropsById).toHaveBeenCalledWith(
+        element.id,
+        {
+          disabled: false,
+          translateX: [100, -100],
+          translateY: [-100, 100],
+        }
+      );
 
       const newProps = {
         disabled: false,
@@ -198,11 +201,14 @@ describe('given the <Parallax> component', () => {
         />
       );
 
-      expect(controller.updateElementPropsById).toBeCalledWith(element.id, {
-        disabled: false,
-        translateX: [-40, -60],
-        translateY: [10, 80],
-      });
+      expect(controller.updateElementPropsById).toHaveBeenCalledWith(
+        element.id,
+        {
+          disabled: false,
+          translateX: [-40, -60],
+          translateY: [10, 80],
+        }
+      );
 
       // only update with valid props
       rerender(
@@ -254,12 +260,15 @@ describe('given the <Parallax> component', () => {
 
       const element = controller.getElements()[0];
 
-      expect(controller.resetElementStyles).toBeCalledWith(element);
-      expect(controller.updateElementPropsById).toBeCalledWith(element.id, {
-        disabled: true,
-        translateX: [100, -100],
-        translateY: [-100, 100],
-      });
+      expect(controller.resetElementStyles).toHaveBeenCalledWith(element);
+      expect(controller.updateElementPropsById).toHaveBeenCalledWith(
+        element.id,
+        {
+          disabled: true,
+          translateX: [100, -100],
+          translateY: [-100, 100],
+        }
+      );
     });
 
     it('then it resets styles on an element if the disabled prop is true', () => {
@@ -290,7 +299,7 @@ describe('given the <Parallax> component', () => {
         <Parallax disabled={true} translateX={offX} translateY={offY} />
       );
 
-      expect(controller.resetElementStyles).toBeCalled();
+      expect(controller.resetElementStyles).toHaveBeenCalled();
     });
   });
 });

src/components/Parallax/index.test.tsx

@@ -47,7 +47,7 @@ describe('given a <ParallaxBanner> component', () => {
         }
       );
       expect(asFragment()).toMatchSnapshot();
-      expect(controller.createElement).toBeCalledWith({
+      expect(controller.createElement).toHaveBeenCalledWith({
         el: expect.any(HTMLElement),
         props: {
           ...props,
@@ -74,7 +74,7 @@ describe('given a <ParallaxBanner> component', () => {
       render(<ParallaxBanner layers={[{ children: <div /> }]} />, {
         wrapper: Wrapper,
       });
-      expect(controller.createElement).toBeCalledWith({
+      expect(controller.createElement).toHaveBeenCalledWith({
         el: expect.any(HTMLElement),
         props: {
           shouldDisableScalingTranslations: true,

src/components/ParallaxBanner/index.test.tsx

@@ -29,7 +29,7 @@ describe('A <ParallaxProvider>', () => {
 
     render();
 
-    expect(child).toBeCalled();
+    expect(child).toHaveBeenCalled();
   });
 
   it('to pass the controller context', () => {
@@ -90,7 +90,7 @@ describe('A <ParallaxProvider>', () => {
     expect(
       // @ts-expect-error
       parallaxController.enableParallaxController
-    ).toBeCalled();
+    ).toHaveBeenCalled();
   });
 
   it('to destroy the controller when unmounting', () => {
@@ -112,8 +112,8 @@ describe('A <ParallaxProvider>', () => {
     screen.unmount();
 
     expect(
-      ((parallaxController as unknown) as ParallaxController)?.destroy
-    ).toBeCalled();
+      (parallaxController as unknown as ParallaxController)?.destroy
+    ).toHaveBeenCalled();
   });
 
   it('to update the scroll container when receiving a new container el', () => {
@@ -142,7 +142,7 @@ describe('A <ParallaxProvider>', () => {
 
     screen.unmount();
     // @ts-expect-error
-    expect(parallaxController?.updateScrollContainer).toBeCalledWith(el);
+    expect(parallaxController?.updateScrollContainer).toHaveBeenCalledWith(el);
   });
 
   // NOTE: I think this test can be removed

src/components/ParallaxProvider/index.test.tsx

@@ -11,9 +11,9 @@ const Wrapper = (props: PropsWithChildren<{}>) => (
 );
 
 describe('given useParallaxController hook', () => {
-  const { window } = global;
+  const { window } = (global as any);
   afterEach(() => {
-    global.window = window;
+    (global as any).window = window;
   });
   describe.skip('when the window is undefined', () => {
     test('then it should return null', () => {