PWA-989: Real Data Wishlists and Wishlist Create

packages/extensions/venia-sample-language-packs/i18n/fr_FR.json

@@ -350,8 +350,6 @@
     "validation.mustBeChecked": "Doit être vérifié.",
     "validation.validatePassword": "Un mot de passe doit contenir au moins 3 des éléments suivants: minuscules, majuscules, chiffres, caractères spéciaux.",
     "wishlist.emptyListText": "Il n'y a actuellement aucun élément dans cette liste",
-    "wishlist.privateText": "Privée",
-    "wishlist.publicText": "Publique",
     "wishlistItem.addToCart": "Ajouter au panier",
     "wishlistItem.addToCartError": "Un problème est survenu. Veuillez actualiser et réessayer.",
     "wishlistPage.disabledMessage": "Désolé, cette fonctionnalité a été désactivée.",

packages/peregrine/lib/Apollo/__tests__/clearWishlistDataFromCache.spec.js

@@ -0,0 +1,72 @@
+import React, { useEffect } from 'react';
+import TestRenderer, { act } from 'react-test-renderer';
+import { MockedProvider } from '@apollo/client/testing';
+import { useApolloClient, InMemoryCache } from '@apollo/client';
+
+import typePolicies from '../policies';
+
+import { clearWishlistDataFromCache } from '../clearWishlistDataFromCache';
+
+const log = jest.fn();
+
+const Component = () => {
+    const client = useApolloClient();
+
+    const initialCacheData = Object.assign({}, client.cache.data.data);
+    log(initialCacheData);
+
+    const clear = async () => {
+        await clearWishlistDataFromCache(client);
+        const finalCacheData = Object.assign({}, client.cache.data.data);
+        log(finalCacheData);
+    };
+
+    useEffect(() => {
+        clear();
+    });
+    return <i />;
+};
+
+test('clears customer data from cache', async () => {
+    expect.assertions(3);
+    const cache = new InMemoryCache({
+        typePolicies
+    });
+
+    cache.restore({
+        Wishlist: {
+            id: '42',
+            name: 'Test'
+        },
+        ConfigurableWishlistItem: {
+            id: '42'
+        },
+        SimpleWishlistItem: {
+            id: '42'
+        },
+        AnotherCacheEntry: {
+            value: 'This entry should not get deleted'
+        }
+    });
+
+    await act(async () => {
+        TestRenderer.create(
+            <MockedProvider cache={cache}>
+                <Component />
+            </MockedProvider>
+        );
+    });
+
+    expect(log).toHaveBeenCalledTimes(2);
+
+    const initialCacheDataKeys = Object.keys(log.mock.calls[0][0]);
+    expect(initialCacheDataKeys).toEqual([
+        'Wishlist',
+        'ConfigurableWishlistItem',
+        'SimpleWishlistItem',
+        'AnotherCacheEntry'
+    ]);
+
+    const finalCacheDataKeys = Object.keys(log.mock.calls[1][0]);
+    expect(finalCacheDataKeys).toEqual(['AnotherCacheEntry']);
+});

packages/peregrine/lib/Apollo/clearWishlistDataFromCache.js

@@ -0,0 +1,13 @@
+import { deleteCacheEntry } from './deleteCacheEntry';
+
+/**
+ * Deletes references to Customer Wishlists from the apollo cache including *WishlistItem entries
+ *
+ * @param {ApolloClient} client
+ */
+export const clearWishlistDataFromCache = async client => {
+    await deleteCacheEntry(client, key =>
+        key.match(/^\$?[a-zA-Z]+WishlistItem/)
+    );
+    await deleteCacheEntry(client, key => key.match(/^\$?Wishlist/));
+};

packages/peregrine/lib/store/actions/user/asyncActions.js

@@ -1,5 +1,6 @@
 import BrowserPersistence from '../../../util/simplePersistence';
 import { clearCartDataFromCache } from '../../../Apollo/clearCartDataFromCache';
+import { clearWishlistDataFromCache } from '../../../Apollo/clearWishlistDataFromCache';
 import { clearCustomerDataFromCache } from '../../../Apollo/clearCustomerDataFromCache';
 import { removeCart } from '../cart';
 import { clearCheckoutDataFromStorage } from '../checkout';
@@ -26,6 +27,7 @@ export const signOut = (payload = {}) =>
         await dispatch(actions.reset());
         await clearCheckoutDataFromStorage();
         await clearCartDataFromCache(apolloClient);
+        await clearWishlistDataFromCache(apolloClient);
         await clearCustomerDataFromCache(apolloClient);
 
         // Now that we're signed out, forget the old (customer) cart.

packages/peregrine/lib/talons/WishlistPage/__tests__/__snapshots__/useCreateWishlist.spec.js.snap

@@ -2,9 +2,12 @@
 
 exports[`should return properly 1`] = `
 Object {
+  "formErrors": Map {},
   "handleCreateList": [Function],
   "handleHideModal": [Function],
   "handleShowModal": [Function],
   "isModalOpen": false,
+  "loading": false,
+  "shouldRender": true,
 }
 `;

packages/peregrine/lib/talons/WishlistPage/__tests__/__snapshots__/useWishlistPage.spec.js.snap

@@ -5,6 +5,7 @@ Object {
   "errors": Map {
     "getCustomerWishlistQuery" => undefined,
   },
+  "loading": undefined,
   "wishlists": Array [],
 }
 `;

packages/peregrine/lib/talons/WishlistPage/__tests__/useCreateWishlist.spec.js

@@ -1,57 +1,164 @@
 import React from 'react';
 
-import createTestInstance from '../../../util/createTestInstance';
+import { MockedProvider } from '@apollo/client/testing';
+import { renderHook, act } from '@testing-library/react-hooks';
+
 import { useCreateWishlist } from '../useCreateWishlist';
+import defaultOperations from '../createWishlist.gql';
+import wishlistPageOperations from '../wishlistPage.gql';
 
-const Component = props => {
-    const talonProps = useCreateWishlist(props);
+jest.mock('@magento/peregrine/lib/context/app', () => {
+    const state = {};
+    const api = { actions: { setPageLoading: jest.fn() } };
+    const useAppContext = jest.fn(() => [state, api]);
 
-    return <i talonProps={talonProps} />;
-};
+    return { useAppContext };
+});
 
-const getTalonProps = props => {
-    const tree = createTestInstance(<Component {...props} />);
-    const { root } = tree;
-    const { talonProps } = root.findByType('i').props;
+const createWishlistVariables = {
+    name: 'Test WishList',
+    visibility: 'PUBLIC'
+};
 
-    const update = newProps => {
-        tree.update(<Component {...{ ...props, ...newProps }} />);
+let createWishlistMutationCalled = false;
+let getCustomerWishlistsQueryCalled = false;
+let getMultipleWishlistsEnabledQueryCalled = false;
+
+const getCustomerWishlistsMock = {
+    request: {
+        query: wishlistPageOperations.getCustomerWishlistQuery
+    },
+    loading: false,
+    result: () => {
+        getCustomerWishlistsQueryCalled = true;
+        return {
+            data: {
+                customer: {
+                    id: 'customerId',
+                    wishlists: [
+                        {
+                            id: 42,
+                            items_count: 0,
+                            name: 'Test WishList',
+                            visibility: 'PUBLIC',
+                            sharing_code: 'code'
+                        }
+                    ]
+                }
+            }
+        };
+    }
+};
 
-        return root.findByType('i').props.talonProps;
-    };
+const getMultipleWishlistsEnabledQueryMock = {
+    request: {
+        query: defaultOperations.getMultipleWishlistsEnabledQuery
+    },
+    loading: false,
+    result: () => {
+        getMultipleWishlistsEnabledQueryCalled = true;
+        return {
+            data: {
+                storeConfig: {
+                    id: '42',
+                    enable_multiple_wishlists: '1'
+                }
+            }
+        };
+    }
+};
 
-    return { talonProps, tree, update };
+const createWishlistMock = {
+    request: {
+        query: defaultOperations.createWishlistMutation,
+        variables: { input: createWishlistVariables }
+    },
+    result: () => {
+        createWishlistMutationCalled = true;
+        return {
+            data: {
+                createWishlist: {
+                    wishlist: {
+                        id: '42'
+                    }
+                }
+            }
+        };
+    }
 };
 
-test('should return properly', () => {
-    const { talonProps } = getTalonProps();
+const renderHookWithProviders = ({
+    renderHookOptions = {},
+    mocks = [
+        createWishlistMock,
+        getCustomerWishlistsMock,
+        getMultipleWishlistsEnabledQueryMock
+    ]
+} = {}) => {
+    const wrapper = ({ children }) => (
+        <MockedProvider mocks={mocks} addTypename={false}>
+            {children}
+        </MockedProvider>
+    );
+
+    return renderHook(useCreateWishlist, { wrapper, ...renderHookOptions });
+};
 
-    expect(talonProps).toMatchSnapshot();
+test('should return properly', async () => {
+    const { result } = renderHookWithProviders();
+    await new Promise(resolve => setTimeout(resolve, 0));
+    expect(getMultipleWishlistsEnabledQueryCalled).toBe(true);
+    expect(result.current).toMatchSnapshot();
 });
 
-test('handleShowModal should set isModalOpen to true', () => {
-    const { talonProps, update } = getTalonProps();
-
-    talonProps.handleShowModal();
-    const { isModalOpen } = update();
-
-    expect(isModalOpen).toBeTruthy();
+test('shouldRender is false when multiple wishlists disabled', async () => {
+    const multipleWishlistsDisabledMock = {
+        request: getMultipleWishlistsEnabledQueryMock.request,
+        result: {
+            data: { storeConfig: { id: '42', enable_multiple_wishlists: '0' } }
+        }
+    };
+    const { result } = renderHookWithProviders({
+        mocks: [
+            createWishlistMock,
+            getCustomerWishlistsMock,
+            multipleWishlistsDisabledMock
+        ]
+    });
+    await new Promise(resolve => setTimeout(resolve, 0));
+    expect(result.current.shouldRender).toBe(false);
 });
 
-test('handleHideModal should set isModalOpen to false', () => {
-    const { talonProps, update } = getTalonProps();
-
-    talonProps.handleHideModal();
-    const { isModalOpen } = update();
-
-    expect(isModalOpen).toBeFalsy();
+test('should return error', async () => {
+    const createWishlistErrorMock = {
+        request: createWishlistMock.request,
+        error: new Error('Only 5 wish list(s) can be created.')
+    };
+    const { result } = renderHookWithProviders({
+        mocks: [createWishlistErrorMock, getMultipleWishlistsEnabledQueryMock]
+    });
+    await act(() => result.current.handleCreateList(createWishlistVariables));
+    expect(
+        result.current.formErrors.get('createWishlistMutation')
+    ).toMatchInlineSnapshot(`[Error: Only 5 wish list(s) can be created.]`);
 });
 
-test('handleCreateList should set isModalOpen to false', () => {
-    const { talonProps, update } = getTalonProps();
+test('handleShowModal should set isModalOpen to true', async () => {
+    const { result } = renderHookWithProviders();
+    await act(() => result.current.handleShowModal());
+    expect(result.current.isModalOpen).toBe(true);
+});
 
-    talonProps.handleCreateList();
-    const { isModalOpen } = update();
+test('handleHideModal should set isModalOpen to false', async () => {
+    const { result } = renderHookWithProviders();
+    await act(() => result.current.handleHideModal());
+    expect(result.current.isModalOpen).toBe(false);
+});
 
-    expect(isModalOpen).toBeFalsy();
+test('handleCreateList should update cache and set isModalOpen to false', async () => {
+    const { result } = renderHookWithProviders();
+    await act(() => result.current.handleCreateList(createWishlistVariables));
+    expect(createWishlistMutationCalled).toBe(true);
+    expect(getCustomerWishlistsQueryCalled).toBe(true);
+    expect(result.current.isModalOpen).toBe(false);
 });

packages/peregrine/lib/talons/WishlistPage/__tests__/useWishlistPage.spec.js

@@ -9,9 +9,13 @@ import { useQuery } from '@apollo/client';
 jest.mock('react-router-dom', () => ({
     useHistory: jest.fn()
 }));
-jest.mock('@apollo/client', () => ({
-    useQuery: jest.fn().mockReturnValue({})
-}));
+jest.mock('@apollo/client', () => {
+    const ApolloClient = jest.requireActual('@apollo/client');
+    return {
+        ...ApolloClient,
+        useQuery: jest.fn().mockReturnValue({})
+    };
+});
 jest.mock('../../../context/user', () => ({
     useUserContext: jest.fn().mockReturnValue([{ isSignedIn: true }])
 }));
@@ -26,7 +30,9 @@ const Component = props => {
 };
 
 const props = {
-    queries: {}
+    queries: {
+        getCustomerWishlistQuery: {}
+    }
 };
 
 test('return correct shape', () => {

packages/peregrine/lib/talons/WishlistPage/createWishlist.gql.js

@@ -0,0 +1,25 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_WISHLIST = gql`
+    mutation createWishlist($input: CreateWishlistInput!) {
+        createWishlist(input: $input) {
+            wishlist {
+                id
+            }
+        }
+    }
+`;
+
+export const GET_MULTIPLE_WISHLISTS_ENABLED = gql`
+    query getMultipleWishlistsEnabled {
+        storeConfig {
+            id
+            enable_multiple_wishlists
+        }
+    }
+`;
+
+export default {
+    createWishlistMutation: CREATE_WISHLIST,
+    getMultipleWishlistsEnabledQuery: GET_MULTIPLE_WISHLISTS_ENABLED
+};