Add usePaginatedRequest tests

Author: ilyalesik

package-lock.json

@@ -67,7 +67,7 @@
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-test-renderer": "^16.8.0",
-    "react-testing-library": "^5.4.0",
+    "react-testing-library": "^6.0.0",
     "rimraf": "^2.6.2"
   }
 }

package.json

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`usePaginatedRequest call loadMore (expect hasMore - false) 1`] = `
+<div>
+  <div>
+    <div>
+      1
+    </div>
+    <div>
+      2
+    </div>
+    <div>
+      3
+    </div>
+    <button
+      data-testid="trigger"
+    />
+  </div>
+</div>
+`;
+
+exports[`usePaginatedRequest call loadMore 1`] = `
+<div>
+  <div>
+    <div>
+      1
+    </div>
+    <div>
+      2
+    </div>
+    <div>
+      3
+    </div>
+    <div>
+      4
+    </div>
+    <div>
+      hasMore
+    </div>
+    <button
+      data-testid="trigger"
+    />
+  </div>
+</div>
+`;
+
+exports[`usePaginatedRequest first load (expect hasMore - false) 1`] = `
+<div>
+  <div>
+    <div>
+      1
+    </div>
+    <button
+      data-testid="trigger"
+    />
+  </div>
+</div>
+`;
+
+exports[`usePaginatedRequest first load 1`] = `
+<div>
+  <div>
+    <div>
+      1
+    </div>
+    <div>
+      2
+    </div>
+    <div>
+      hasMore
+    </div>
+    <button
+      data-testid="trigger"
+    />
+  </div>
+</div>
+`;

src/__tests__/__snapshots__/usePaginatedRequest.test.js.snap

@@ -0,0 +1,113 @@
+import React from "react";
+import { render, wait, fireEvent, cleanup } from "react-testing-library";
+import { usePaginatedRequest } from "../usePaginatedRequest";
+
+const ChildComponent = props => {
+    return (
+        <div>
+            {props.data.map(item => (
+                <div>{item}</div>
+            ))}
+            {props.hasMore && <div>hasMore</div>}
+            <button data-testid="trigger" onClick={props.loadMore} />
+        </div>
+    );
+};
+
+describe("usePaginatedRequest", () => {
+    afterEach(cleanup);
+
+    it("first load", async () => {
+        const request = jest.fn(() => Promise.resolve([1, 2]));
+
+        const Component = () => {
+            const { data, hasMore, loadMore } = usePaginatedRequest(request, 2);
+
+            return <ChildComponent data={data} hasMore={hasMore} loadMore={loadMore} />;
+        };
+
+        const { container, rerender } = render(<Component />);
+
+        await wait(() => {
+            expect(container).toMatchSnapshot();
+        });
+
+        await wait(() => {
+            rerender(<Component />);
+            expect(request.mock.calls.length).toBe(1);
+        });
+    });
+
+    it("first load (expect hasMore - false)", async () => {
+        const request = jest.fn(() => Promise.resolve([1]));
+
+        const Component = () => {
+            const { data, hasMore, loadMore } = usePaginatedRequest(request, 2);
+
+            return <ChildComponent data={data} hasMore={hasMore} loadMore={loadMore} />;
+        };
+
+        const { container, rerender } = render(<Component />);
+
+        await wait(() => {
+            expect(container).toMatchSnapshot();
+        });
+
+        await wait(() => {
+            rerender(<Component />);
+            expect(request.mock.calls.length).toBe(1);
+        });
+    });
+
+    it("call loadMore", async () => {
+        const request = jest.fn();
+        request.mockReturnValueOnce(Promise.resolve([1, 2])).mockReturnValueOnce(Promise.resolve([3, 4]));
+
+        const Component = () => {
+            const { data, hasMore, loadMore } = usePaginatedRequest(request, 2);
+
+            return <ChildComponent data={data} hasMore={hasMore} loadMore={loadMore} />;
+        };
+
+        const { container, rerender, getByTestId } = render(<Component />);
+
+        await wait(() => {
+            fireEvent.click(getByTestId("trigger"));
+        });
+
+        await wait(() => {
+            rerender(<Component />);
+        });
+
+        await wait(() => {
+            expect(container).toMatchSnapshot();
+            expect(request.mock.calls.length).toBe(2);
+        });
+    });
+
+    it("call loadMore (expect hasMore - false)", async () => {
+        const request = jest.fn();
+        request.mockReturnValueOnce(Promise.resolve([1, 2])).mockReturnValueOnce(Promise.resolve([3]));
+
+        const Component = () => {
+            const { data, hasMore, loadMore } = usePaginatedRequest(request, 2);
+
+            return <ChildComponent data={data} hasMore={hasMore} loadMore={loadMore} />;
+        };
+
+        const { container, rerender, getByTestId } = render(<Component />);
+
+        await wait(() => {
+            fireEvent.click(getByTestId("trigger"));
+        });
+
+        await wait(() => {
+            rerender(<Component />);
+        });
+
+        await wait(() => {
+            expect(container).toMatchSnapshot();
+            expect(request.mock.calls.length).toBe(2);
+        });
+    });
+});