From a62e9b3a9aeb51b71c441ea1560eea6431704ee7 Mon Sep 17 00:00:00 2001
From: Zach Plata <plata.zach@gmail.com>
Date: Wed, 14 Sep 2022 09:12:32 -0500
Subject: [PATCH] add tests

---
 test/useRive.test.tsx | 48 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/test/useRive.test.tsx b/test/useRive.test.tsx
index 94194a7..678d7e1 100644
--- a/test/useRive.test.tsx
+++ b/test/useRive.test.tsx
@@ -376,4 +376,52 @@ describe('useRive', () => {
     );
     expect(container.firstChild).not.toHaveStyle('width: 50%');
   });
+
+  it('has a canvas size of 0 by default', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
+
+    const canvasSpy = document.createElement('canvas');
+    const { result } = renderHook(() => useRive(params));
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      controlledRiveloadCb();
+    });
+
+    const { RiveComponent: RiveTestComponent } = result.current;
+    const { container } = render(<RiveTestComponent />);
+    expect(container.querySelector('canvas')).toHaveStyle('width: 0');
+  });
+
+  it('sets the canvas width and height after calculating the container size', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    global.devicePixelRatio = 2;
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
+
+    const canvasSpy = document.createElement('canvas');
+    const containerSpy = document.createElement('div');
+    jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
+    jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
+
+    const { result } = renderHook(() => useRive(params));
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      result.current.setContainerRef(containerSpy);
+      controlledRiveloadCb();
+    });
+
+    expect(canvasSpy).toHaveStyle('height: 100px');
+    expect(canvasSpy).toHaveStyle('width: 100px');
+  });
 });