setup: useApi custom hook

ShMcK · ShMcK · commit 3804516910dd · 2019-12-24T09:58:38.000-08:00
diff --git a/src/components/Feed/index.js b/src/components/Feed/index.js
@@ -5,6 +5,16 @@ import "./styles.css";
 
 import fetchData from "../../services/api";
 
+export const useApi = url => {
+  // TODO: loading, error, data loader from API
+  // TODO: pass the url in so that we call fetchData(url)
+  return {
+    loading,
+    error,
+    data
+  };
+};
+
 export const Feed = () => {
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
diff --git a/src/tests/components/Feed.test.js b/src/tests/components/Feed.test.js
@@ -1,7 +1,8 @@
 import React from "react";
 import { render } from "@testing-library/react";
 import { waitForElementToBeRemoved } from "@testing-library/dom";
-import { Feed } from "../../components/Feed";
+import { renderHook } from "@testing-library/react-hooks";
+import { Feed, useApi } from "../../components/Feed";
 
 const mockData = [
   {
@@ -45,3 +46,36 @@ describe("Feed", () => {
     expect(feed).toBeDefined();
   });
 });
+
+// Hook
+
+describe("useApi", () => {
+  test("should initialize with an error null", async () => {
+    const { result, waitForNextUpdate } = renderHook(() => useApi());
+    await waitForNextUpdate();
+    expect(result.current.error).toBe(null);
+  });
+
+  // generated useEffect async warnings
+  test("should initialize with loading true", async () => {
+    const { result } = renderHook(() => useApi());
+    expect(result.current.loading).toBe(true);
+  });
+
+  test("should change loading to true on update", async () => {
+    const { result, waitForNextUpdate } = renderHook(() => useApi());
+    await waitForNextUpdate();
+    expect(result.current.loading).toBe(false);
+  });
+
+  test("should initialize with data null", () => {
+    const { result } = renderHook(() => useApi());
+    expect(result.current.data).toBe(null);
+  });
+
+  test("should return data once api completes", async () => {
+    const { result, waitForNextUpdate } = renderHook(() => useApi());
+    await waitForNextUpdate();
+    expect(result.current.data.length).toBe(1);
+  });
+});
