@jetshop/core/hooks/ProductList/product-list-reducer.test.js

import { act, renderHook } from '@testing-library/react-hooks';
import { useReducer } from 'react';
import { reducer, init } from './product-list-reducer';
import { LocalStorageMock } from '@react-mock/localstorage';
import { render } from '@testing-library/react';
import React from 'react';

const MOCK_LIST = {
  '6952315': {
    options: { quantity: 1 },
    variants: {
      '6952315-170-white': {
        options: {
          quantity: 1
        },
        parentArticleNumber: '6952315'
      }
    }
  },
  '502935480': {
    variants: null,
    options: {
      quantity: 1
    }
  },
  '441922-Classic-16': {
    variants: null,
    options: {
      quantity: 1
    }
  },
  'without-base': {
    options: null,
    variants: {
      'with-variant': {
        options: {
          quantity: 1
        },
        parentArticleNumber: 'without-base'
      }
    }
  }
};

describe('reducer init method', () => {
  it('defaults the list to localStorage', () => {
    const obj = {
      key: 'value'
    };

    function Parent({ children }) {
      const mockList = JSON.stringify(obj);
      return (
        <LocalStorageMock items={{ productList: mockList }}>
          {children}
        </LocalStorageMock>
      );
    }
    function Child() {
      const initialState = { loggedIn: false, list: {} };
      const state = init(initialState);

      return (
        <div>
          <span>{state.list.key}</span>
          <span>{state.loggedIn ? 'logged in' : 'not logged in'}</span>
        </div>
      );
    }

    const { getByText } = render(
      <Parent>
        <Child />
      </Parent>
    );

    expect(getByText('not logged in'));
    expect(getByText('value'));
  });
});

describe('reducer', () => {
  it('sets logged in and payload when LOGIN is called', () => {
    const { result, dispatch } = setup();
    const payload = { test: 'one' };

    act(() => dispatch({ type: 'LOGIN', payload }));

    const [state] = result.current;

    expect(state.loggedIn).toBe(true);
    expect(state.list).toBe(payload);
  });
  it('sets loggedIn and resets list on LOGOUT', () => {
    const initialState = {
      loggedIn: true,
      list: { '234523423': { options: { quantity: 1, description: '' } } }
    };

    const { result, dispatch } = setup(initialState);

    {
      const [state] = result.current;
      expect(state).toBe(initialState);
    }

    act(() => dispatch({ type: 'LOGOUT' }));

    const [state] = result.current;

    expect(state.loggedIn).toBe(false);
    expect(state.list).toMatchObject({});
  });
  describe('UPDATE action', () => {
    it('can replace a base product with one of its variants', () => {
      const initialState = {
        loggedIn: false,
        list: MOCK_LIST
      };

      const { result, dispatch } = setup(initialState);

      act(() =>
        dispatch({
          type: 'UPDATE',
          payload: {
            articleNumber: '502935480',
            variantArticleNumber: '502935480-sparkles',
            options: {
              quantity: 1
            }
          }
        })
      );

      const [state] = result.current;

      const baseProduct = state.list['502935480'];

      expect(baseProduct.variants['502935480-sparkles'].options.quantity).toBe(
        1
      );
      // Removing the base product options effectively removes it from the list
      expect(baseProduct.options).toBe(null);
    });
    it('can replace a variant with another variant', () => {
      const initialState = {
        loggedIn: false,
        list: MOCK_LIST
      };

      const { result, dispatch } = setup(initialState);

      act(() =>
        dispatch({
          type: 'UPDATE',
          payload: {
            articleNumber: '6952315',
            variantArticleNumber: '6952315-170-pink',
            options: {
              quantity: 1
            },
            variantToReplace: '6952315-170-white'
          }
        })
      );

      const [state] = result.current;

      expect(
        state.list['6952315'].variants['6952315-170-pink'].options.quantity
      ).toBe(1);
      expect(
        state.list['6952315'].variants['6952315-170-white']
      ).not.toBeDefined();
    });
  });
  describe('ADD action', () => {
    it('can add a base product to the list', () => {
      const initialState = {
        loggedIn: false,
        list: MOCK_LIST
      };

      const { result, dispatch } = setup(initialState);

      act(() =>
        dispatch({
          type: 'ADD',
          payload: {
            articleNumber: 'boogie',
            options: {
              quantity: 1
            }
          }
        })
      );

      const [state] = result.current;

      expect(state.list['boogie'].options.quantity).toBe(1);
    });
    it('can add a variant to the list when there is no existing base product', () => {
      const initialState = {
        loggedIn: false,
        list: MOCK_LIST
      };

      const { result, dispatch } = setup(initialState);

      act(() =>
        dispatch({
          type: 'ADD',
          payload: {
            articleNumber: 'boogie',
            variantArticleNumber: 'boogie-woogie',
            options: {
              quantity: 1
            }
          }
        })
      );

      const [state] = result.current;

      expect(state.list['boogie'].options).toBe(null);
      expect(
        state.list['boogie'].variants['boogie-woogie'].options.quantity
      ).toBe(1);
    });
    it('can add a variant to the list when there is an existing base product', () => {
      const initialState = {
        loggedIn: false,
        list: MOCK_LIST
      };

      const { result, dispatch } = setup(initialState);

      act(() =>
        dispatch({
          type: 'ADD',
          payload: {
            articleNumber: '502935480',
            variantArticleNumber: 'boogie-woogie',
            options: {
              quantity: 1
            }
          }
        })
      );

      const [state] = result.current;

      expect(state.list['502935480'].options).not.toBe(null);
      expect(
        state.list['502935480'].variants['boogie-woogie'].options.quantity
      ).toBe(1);
    });
    it('can add a variant to the list when there is a base product with variants', () => {
      const initialState = {
        loggedIn: false,
        list: MOCK_LIST
      };

      const { result, dispatch } = setup(initialState);

      act(() =>
        dispatch({
          type: 'ADD',
          payload: {
            articleNumber: '6952315',
            variantArticleNumber: 'boogie-woogie',
            options: {
              quantity: 1
            }
          }
        })
      );

      const [state] = result.current;

      expect(state.list['6952315'].options).not.toBe(null);
      expect(
        state.list['6952315'].variants['boogie-woogie'].options.quantity
      ).toBe(1);
      expect(state.list['6952315'].variants['6952315-170-white']).toMatchObject(
        MOCK_LIST['6952315'].variants['6952315-170-white']
      );
    });
  });
  describe('REMOVE action', () => {
    it('will entirely remove a base product with no variants', () => {
      const initialState = {
        loggedIn: false,
        list: MOCK_LIST
      };

      const { result, dispatch } = setup(initialState);

      act(() =>
        dispatch({
          type: 'REMOVE',
          payload: {
            articleNumber: '502935480'
          }
        })
      );

      const [state] = result.current;

      expect(state.list['502935480']).not.toBeDefined();
    });
    it('will entirely remove an item if the variant is removed and there is no base product', () => {
      const initialState = {
        loggedIn: false,
        list: MOCK_LIST
      };

      const { result, dispatch } = setup(initialState);

      act(() =>
        dispatch({
          type: 'REMOVE',
          payload: {
            articleNumber: 'without-base',
            variantArticleNumber: 'with-variant'
          }
        })
      );

      const [state] = result.current;

      expect(state.list['without-base']).not.toBeDefined();
    });
    it('will keep the variant if one exists', () => {
      const initialState = {
        loggedIn: false,
        list: MOCK_LIST
      };

      const { result, dispatch } = setup(initialState);
      const articleToRemove = '6952315';

      act(() =>
        dispatch({
          type: 'REMOVE',
          payload: {
            articleNumber: articleToRemove
          }
        })
      );

      const [state] = result.current;

      expect(state.list[articleToRemove].options).toBe(null);
      expect(state.list[articleToRemove].variants).toBeDefined();
    });
    it('will remove the variant but keep the base product', () => {
      const initialState = {
        loggedIn: false,
        list: MOCK_LIST
      };

      const { result, dispatch } = setup(initialState);

      const parent = '6952315';
      const articleToRemove = '6952315-170-white';

      act(() =>
        dispatch({
          type: 'REMOVE',
          payload: {
            articleNumber: parent,
            variantArticleNumber: articleToRemove
          }
        })
      );

      const [state] = result.current;

      expect(state.list[parent].variants[articleToRemove]).not.toBeDefined();
      expect(state.list[parent].options).toBeDefined();
    });
  });
});

function setup(initialState) {
  const { result } = renderHook(() => useProductListReducer({ initialState }));

  const [, dispatch] = result.current;

  return { result, dispatch };
}

function useProductListReducer({ initialState }) {
  const [state, dispatch] = useReducer(
    reducer,
    initialState || { loggedIn: false, list: {} }
  );

  return [state, dispatch];
}