fix: trigger onItemUpdate (#39)

* fix: trigger onItemUPdate when item updated

* test: add more test coverage

* chore: set default array for items arg

Author: notrab

package.json

@@ -21,7 +21,8 @@
   "scripts": {
     "build": "rollup -c",
     "start": "rollup -c -w",
-    "test": "jest"
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "devDependencies": {
     "@babel/core": "7.10.2",

src/index.js

@@ -57,11 +57,12 @@ function reducer(state, action) {
   }
 }
 
-const generateCartState = (state, items) => {
+const generateCartState = (state = initialState, items = []) => {
   const totalUniqueItems = calculateUniqueItems(items);
   const isEmpty = totalUniqueItems === 0;
 
   return {
+    ...initialState,
     ...state,
     items: calculateItemTotals(items),
     totalItems: calculateTotalItems(items),
@@ -71,19 +72,19 @@ const generateCartState = (state, items) => {
   };
 };
 
-const calculateItemTotals = (items) =>
+const calculateItemTotals = (items = []) =>
   items.map((item) => ({
     itemTotal: item.price * item.quantity,
     ...item,
   }));
 
-const calculateCartTotal = (items) =>
+const calculateCartTotal = (items = []) =>
   items.reduce((total, item) => total + item.quantity * item.price, 0);
 
-const calculateTotalItems = (items) =>
+const calculateTotalItems = (items = []) =>
   items.reduce((sum, item) => sum + item.quantity, 0);
 
-const calculateUniqueItems = (items) => items.length;
+const calculateUniqueItems = (items = []) => items.length;
 
 export function CartProvider({
   children,
@@ -116,7 +117,7 @@ export function CartProvider({
   const setItems = (items) => {
     dispatch({
       type: SET_ITEMS,
-      payload,
+      payload: items,
     });
 
     onSetItems && onSetItems(items);
@@ -148,8 +149,10 @@ export function CartProvider({
     onItemUpdate && onItemUpdate(payload);
   };
 
-  const updateItem = (id, payload) =>
+  const updateItem = (id, payload) => {
     dispatch({ type: UPDATE_ITEM, id, payload });
+    onItemUpdate && onItemUpdate(payload);
+  };
 
   const updateItemQuantity = (id, quantity) => {
     if (quantity <= 0) {

src/index.test.js

@@ -3,6 +3,8 @@ import { renderHook, act } from "@testing-library/react-hooks";
 
 import { CartProvider, useCart, initialState } from "./";
 
+afterEach(() => window.localStorage.clear());
+
 describe("CartProvider", () => {
   test("initial cart meta state is set", () => {
     const wrapper = ({ children }) => (
@@ -43,6 +45,54 @@ describe("addItem", () => {
     expect(result.current.totalUniqueItems).toBe(1);
     expect(result.current.isEmpty).toBe(false);
   });
+
+  test("triggers onItemAdd when cart empty", () => {
+    let called = false;
+
+    const wrapper = ({ children }) => (
+      <CartProvider id="test" onItemAdd={() => (called = true)}>
+        {children}
+      </CartProvider>
+    );
+
+    const { result } = renderHook(() => useCart(), {
+      wrapper,
+    });
+
+    const item = { id: "test", price: 1000 };
+
+    act(() => {
+      result.current.addItem(item);
+    });
+
+    expect(called).toBe(true);
+  });
+
+  test("triggers onItemUpdate when cart has existing item", () => {
+    let called = false;
+
+    const item = { id: "test", price: 1000 };
+
+    const wrapper = ({ children }) => (
+      <CartProvider
+        id="test"
+        defaultItems={[item]}
+        onItemUpdate={() => (called = true)}
+      >
+        {children}
+      </CartProvider>
+    );
+
+    const { result } = renderHook(() => useCart(), {
+      wrapper,
+    });
+
+    act(() => {
+      result.current.updateItem(item);
+    });
+
+    expect(called).toBe(true);
+  });
 });
 
 describe("updateItem", () => {
@@ -69,6 +119,33 @@ describe("updateItem", () => {
     expect(result.current.items).toHaveLength(1);
     expect(result.current.totalItems).toBe(2);
     expect(result.current.totalUniqueItems).toBe(1);
+    expect(result.current.isEmpty).toBe(false);
+  });
+
+  test("triggers onItemUpdate when updating existing item", () => {
+    let called = false;
+
+    const item = { id: "test", price: 1000 };
+
+    const wrapper = ({ children }) => (
+      <CartProvider
+        id="test"
+        defaultItems={[item]}
+        onItemUpdate={() => (called = true)}
+      >
+        {children}
+      </CartProvider>
+    );
+
+    const { result } = renderHook(() => useCart(), {
+      wrapper,
+    });
+
+    act(() => {
+      result.current.addItem(item);
+    });
+
+    expect(called).toBe(true);
   });
 });
 
@@ -94,6 +171,59 @@ describe("updateItemQuantity", () => {
     expect(result.current.items).toHaveLength(1);
     expect(result.current.totalItems).toBe(3);
     expect(result.current.totalUniqueItems).toBe(1);
+    expect(result.current.isEmpty).toBe(false);
+  });
+
+  test("triggers onItemUpdate when setting quantity above 0", () => {
+    let called = false;
+
+    const item = { id: "test", price: 1000 };
+
+    const wrapper = ({ children }) => (
+      <CartProvider
+        id="test"
+        defaultItems={[item]}
+        onItemUpdate={() => (called = true)}
+      >
+        {children}
+      </CartProvider>
+    );
+
+    const { result } = renderHook(() => useCart(), {
+      wrapper,
+    });
+
+    act(() => {
+      result.current.updateItemQuantity(item.id, 2);
+    });
+
+    expect(called).toBe(true);
+  });
+
+  test("triggers onItemRemove when setting quantity to 0", () => {
+    let called = false;
+
+    const item = { id: "test", price: 1000 };
+
+    const wrapper = ({ children }) => (
+      <CartProvider
+        id="test"
+        defaultItems={[item]}
+        onItemRemove={() => (called = true)}
+      >
+        {children}
+      </CartProvider>
+    );
+
+    const { result } = renderHook(() => useCart(), {
+      wrapper,
+    });
+
+    act(() => {
+      result.current.updateItemQuantity(item.id, 0);
+    });
+
+    expect(called).toBe(true);
   });
 });
 
@@ -119,6 +249,33 @@ describe("removeItem", () => {
     expect(result.current.items).toEqual([]);
     expect(result.current.totalItems).toBe(0);
     expect(result.current.totalUniqueItems).toBe(0);
+    expect(result.current.isEmpty).toBe(true);
+  });
+
+  test("triggers onItemRemove when removing item", () => {
+    let called = false;
+
+    const item = { id: "test", price: 1000 };
+
+    const wrapper = ({ children }) => (
+      <CartProvider
+        id="test"
+        defaultItems={[item]}
+        onItemRemove={() => (called = true)}
+      >
+        {children}
+      </CartProvider>
+    );
+
+    const { result } = renderHook(() => useCart(), {
+      wrapper,
+    });
+
+    act(() => {
+      result.current.updateItemQuantity(item.id, 0);
+    });
+
+    expect(called).toBe(true);
   });
 });
 
@@ -143,5 +300,6 @@ describe("emptyCart", () => {
     expect(result.current.items).toEqual([]);
     expect(result.current.totalItems).toBe(0);
     expect(result.current.totalUniqueItems).toBe(0);
+    expect(result.current.isEmpty).toBe(true);
   });
 });