Merge branch 'feature/fetch-jsonp' into develop

package.json

@@ -35,7 +35,7 @@
     "react": ">= 16.8.0"
   },
   "dependencies": {
-    "jsonp": "^0.2.1",
+    "fetch-jsonp": "1.2.1",
     "query-string": "^7.0.0"
   },
   "devDependencies": {
@@ -47,6 +47,7 @@
     "@commitlint/prompt": "16.1.0",
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/git": "10.0.1",
+    "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
     "@types/jest": "27.4.0",
     "@types/jsonp": "0.2.1",

src/errors.ts

@@ -0,0 +1,24 @@
+export type ErrorWithMessage = {
+  message: string;
+};
+
+export const isErrorWithMessage = (error: unknown): error is ErrorWithMessage =>
+  typeof error === "object" &&
+  error !== null &&
+  "message" in error &&
+  typeof (error as Record<string, unknown>).message === "string";
+
+export const toErrorWithMessage = (maybeError: unknown): ErrorWithMessage => {
+  if (isErrorWithMessage(maybeError)) return maybeError;
+
+  try {
+    return new Error(JSON.parse(JSON.stringify(maybeError)));
+  } catch {
+    // fallback in case there's an error stringifying the maybeError
+    // like with circular references for example.
+    return new Error(String(maybeError));
+  }
+};
+
+export const getErrorMessage = (error: unknown) =>
+  toErrorWithMessage(error).message;

src/index.ts

@@ -1,8 +1,9 @@
-import jsonp from "jsonp";
+import fetchJsonp from "fetch-jsonp";
 import queryString from "query-string";
 import { ChangeEvent, useState } from "react";
+import { getErrorMessage } from "./errors";
 
-interface Params {
+export interface Params {
   [key: string]: unknown;
 }
 
@@ -36,24 +37,27 @@ export const useMailChimpForm: (url: string) => {
   const [status, setStatus] = useState(initStatusState);
   const [message, setMessage] = useState("");
 
-  const handleSubmit = (params: Params): void => {
+  const handleSubmit = async (params: Params): Promise<void> => {
     const query = queryString.stringify(params);
     const endpoint = url.replace("/post?", "/post-json?") + "&" + query;
     setStatus({ ...status, loading: true });
     setMessage("");
-    jsonp(endpoint, { param: "c" }, (error, data) => {
-      if (error) {
-        setStatus({ ...initStatusState, error: true });
-        setMessage(error.message);
+    try {
+      const response: fetchJsonp.Response = await fetchJsonp(endpoint, {
+        jsonpCallback: "c",
+      });
+
+      if (response.ok) {
+        setStatus({ ...initStatusState, success: true });
       } else {
-        if (data.result !== "success") {
-          setStatus({ ...initStatusState, error: true });
-        } else {
-          setStatus({ ...initStatusState, success: true });
-        }
-        setMessage(data.msg);
+        setStatus({ ...initStatusState, error: true });
       }
-    });
+      const data = await response.json();
+      setMessage(data.msg);
+    } catch (error) {
+      setStatus({ ...initStatusState, error: true });
+      setMessage(getErrorMessage(error));
+    }
   };
 
   const reset: () => void = () => {
@@ -62,6 +66,7 @@ export const useMailChimpForm: (url: string) => {
   };
 
   return {
+    status: status,
     loading: status.loading,
     success: status.success,
     error: status.error,

tests/const.ts

@@ -0,0 +1,6 @@
+export const TEST_MAILCHIMP_URL =
+  "https://example.us20.list-manage.com/subscribe/post?u=example&id=example";
+
+export const TEST_EMAIL = "[email protected]";
+
+export const TEST_MESSAGE = "TESTING Message";

tests/errors.test.ts

@@ -0,0 +1,27 @@
+import { getErrorMessage } from "../src/errors";
+
+describe("Error messages", () => {
+  test("should get error message from error object", () => {
+    const error = new Error("Test error");
+    expect(getErrorMessage(error)).toEqual(error.message);
+  });
+
+  test("should get error message from error json object", () => {
+    const errorJson = { message: "Test Error" };
+    expect(getErrorMessage(errorJson)).toEqual(errorJson.message);
+  });
+
+  test("should return error message from error string", () => {
+    const errorString = "Test Error";
+    expect(getErrorMessage(errorString)).toEqual(errorString);
+  });
+
+  test("should return error message if error message has cyclic object value", () => {
+    const jsonMock = jest.spyOn(JSON, "stringify");
+    jsonMock.mockImplementation(() => {
+      throw new TypeError("cyclic object value");
+    });
+    const errorString = "Test Error";
+    expect(getErrorMessage(errorString)).toEqual("Test Error");
+  });
+});

tests/useMailChimpForm/handleSubmitFail.test.ts

@@ -0,0 +1,34 @@
+import { act, renderHook } from "@testing-library/react-hooks";
+import fetchJsonp from "fetch-jsonp";
+import { useMailChimpForm } from "../../src";
+import { TEST_EMAIL, TEST_MAILCHIMP_URL, TEST_MESSAGE } from "../const";
+
+jest.mock("fetch-jsonp", () =>
+  jest.fn().mockImplementation(() =>
+    Promise.resolve({
+      ok: false,
+      json: () => Promise.resolve({ msg: "TESTING Message" }),
+    })
+  )
+);
+
+describe("handleSubmit mailchimp response shows not ok", () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  test("should receive failure status and message", async () => {
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useMailChimpForm(TEST_MAILCHIMP_URL)
+    );
+    act(() => {
+      result.current.handleSubmit({ email: TEST_EMAIL });
+    });
+    await waitForNextUpdate();
+    expect(fetchJsonp).toHaveBeenCalled();
+    expect(result.current.loading).toBe(false);
+    expect(result.current.success).toBe(false);
+    expect(result.current.error).toBe(true);
+    expect(result.current.message).toEqual(TEST_MESSAGE);
+  });
+});

tests/useMailChimpForm/handleSubmitFetchJsonpException.test.ts

@@ -0,0 +1,31 @@
+import { act, renderHook } from "@testing-library/react-hooks";
+import fetchJsonp from "fetch-jsonp";
+import { useMailChimpForm } from "../../src";
+import { TEST_EMAIL, TEST_MAILCHIMP_URL, TEST_MESSAGE } from "../const";
+
+jest.mock("fetch-jsonp", () =>
+  jest
+    .fn()
+    .mockImplementation(() => Promise.reject(new Error("TESTING Message")))
+);
+
+describe("handleSubmit fetchJsonp throw errors", () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  test("should receive failure status and message", async () => {
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useMailChimpForm(TEST_MAILCHIMP_URL)
+    );
+    act(() => {
+      result.current.handleSubmit({ email: TEST_EMAIL });
+    });
+    await waitForNextUpdate();
+    expect(fetchJsonp).toHaveBeenCalled();
+    expect(result.current.loading).toBe(false);
+    expect(result.current.success).toBe(false);
+    expect(result.current.error).toBe(true);
+    expect(result.current.message).toEqual(TEST_MESSAGE);
+  });
+});

tests/useMailChimpForm/handleSubmitSuccess.test.ts

@@ -0,0 +1,41 @@
+import { act, renderHook } from "@testing-library/react-hooks";
+import fetchJsonp from "fetch-jsonp";
+import { useMailChimpForm } from "../../src";
+import { TEST_EMAIL, TEST_MAILCHIMP_URL, TEST_MESSAGE } from "../const";
+
+jest.mock("fetch-jsonp", () =>
+  jest.fn().mockImplementation(() =>
+    Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve({ msg: "TESTING Message" }),
+    })
+  )
+);
+
+describe("handleSubmit user subscribes successfully", () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  test("should receive success status and message", async () => {
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useMailChimpForm(TEST_MAILCHIMP_URL)
+    );
+    act(() => {
+      result.current.handleSubmit({ email: TEST_EMAIL });
+    });
+    await waitForNextUpdate();
+    expect(fetchJsonp).toHaveBeenCalled();
+    expect(result.current.loading).toBe(false);
+    expect(result.current.success).toBe(true);
+    expect(result.current.error).toBe(false);
+    expect(result.current.message).toEqual(TEST_MESSAGE);
+    act(() => {
+      result.current.reset();
+    });
+    expect(result.current.loading).toBe(false);
+    expect(result.current.success).toBe(false);
+    expect(result.current.error).toBe(false);
+    expect(result.current.message).toEqual("");
+  });
+});

tests/useMailChimpForm/renderHooks.test.ts

@@ -0,0 +1,28 @@
+import { act, renderHook } from "@testing-library/react-hooks";
+import { useFormFields, useMailChimpForm } from "../../src";
+import { TEST_EMAIL, TEST_MAILCHIMP_URL } from "../const";
+
+test("should return initial mailchimp form state", () => {
+  const { result } = renderHook(() => useFormFields({ email: "" }));
+  expect(result.current.fields).toEqual({ email: "" });
+});
+
+test("should return initial mailchimp form status", () => {
+  const { result } = renderHook(() => useMailChimpForm(TEST_MAILCHIMP_URL));
+  expect(result.current.success).toBe(false);
+  expect(result.current.error).toBe(false);
+  expect(result.current.loading).toBe(false);
+  expect(result.current.message).toBe("");
+});
+
+test("should return initial mailchimp form state", () => {
+  const { result } = renderHook(() => useFormFields({ email: "" }));
+  act(() => {
+    result.current.handleFieldChange({
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      target: { id: "email", value: TEST_EMAIL },
+    });
+  });
+  expect(result.current.fields).toEqual({ email: TEST_EMAIL });
+});