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/policies/__tests__/__snapshots__/index.spec.js.snap

@@ -23,6 +23,9 @@ Object {
       "category_id",
     ],
   },
+  "BundleWishlistItem": Object {
+    "keyFields": [Function],
+  },
   "Cart": Object {
     "fields": Object {
       "applied_gift_cards": Object {
@@ -50,6 +53,9 @@ Object {
       },
     },
   },
+  "ConfigurableWishlistItem": Object {
+    "keyFields": [Function],
+  },
   "Customer": Object {
     "fields": Object {
       "addresses": Object {
@@ -82,6 +88,15 @@ Object {
     },
     "keyFields": [Function],
   },
+  "DownloadableWishlistItem": Object {
+    "keyFields": [Function],
+  },
+  "GiftCardWishlistItem": Object {
+    "keyFields": [Function],
+  },
+  "GroupedProductWishlistItem": Object {
+    "keyFields": [Function],
+  },
   "ProductImage": Object {
     "keyFields": Array [
       "url",
@@ -130,5 +145,17 @@ Object {
       "street",
     ],
   },
+  "SimpleWishlistItem": Object {
+    "keyFields": [Function],
+  },
+  "VirtualWishlistItem": Object {
+    "keyFields": [Function],
+  },
+  "Wishlist": Object {
+    "keyFields": [Function],
+  },
+  "WishlistItem": Object {
+    "keyFields": [Function],
+  },
 }
 `;

packages/peregrine/lib/Apollo/policies/__tests__/index.spec.js

@@ -357,3 +357,40 @@ describe('CategoryTree type provides the correct values', () => {
         expect(result).toStrictEqual(incoming);
     });
 });
+
+test('wishlist entities have correct keys', () => {
+    const {
+        Wishlist,
+        WishlistItem,
+        SimpleWishlistItem,
+        VirtualWishlistItem,
+        DownloadableWishlistItem,
+        BundleWishlistItem,
+        GroupedProductWishlistItem,
+        ConfigurableWishlistItem,
+        GiftCardWishlistItem
+    } = typePolicies;
+    expect(Wishlist.keyFields({ id: 1 })).toBe('CustomerWishlist:1');
+    expect(WishlistItem.keyFields({ id: 1 })).toBe('CustomerWishlistItem:1');
+    expect(SimpleWishlistItem.keyFields({ id: 1 })).toBe(
+        'CustomerSimpleWishlistItem:1'
+    );
+    expect(VirtualWishlistItem.keyFields({ id: 1 })).toBe(
+        'CustomerVirtualWishlistItem:1'
+    );
+    expect(DownloadableWishlistItem.keyFields({ id: 1 })).toBe(
+        'CustomerDownloadableWishlistItem:1'
+    );
+    expect(BundleWishlistItem.keyFields({ id: 1 })).toBe(
+        'CustomerBundleWishlistItem:1'
+    );
+    expect(GroupedProductWishlistItem.keyFields({ id: 1 })).toBe(
+        'CustomerGroupedProductWishlistItem:1'
+    );
+    expect(ConfigurableWishlistItem.keyFields({ id: 1 })).toBe(
+        'CustomerConfigurableWishlistItem:1'
+    );
+    expect(GiftCardWishlistItem.keyFields({ id: 1 })).toBe(
+        'CustomerGiftCardWishlistItem:1'
+    );
+});

packages/peregrine/lib/Apollo/policies/index.js

@@ -243,6 +243,33 @@ const typePolicies = {
                 }
             }
         }
+    },
+    Wishlist: {
+        keyFields: ({ id }) => `CustomerWishlist:${id}`
+    },
+    WishlistItem: {
+        keyFields: ({ id }) => `CustomerWishlistItem:${id}`
+    },
+    SimpleWishlistItem: {
+        keyFields: ({ id }) => `CustomerSimpleWishlistItem:${id}`
+    },
+    VirtualWishlistItem: {
+        keyFields: ({ id }) => `CustomerVirtualWishlistItem:${id}`
+    },
+    DownloadableWishlistItem: {
+        keyFields: ({ id }) => `CustomerDownloadableWishlistItem:${id}`
+    },
+    BundleWishlistItem: {
+        keyFields: ({ id }) => `CustomerBundleWishlistItem:${id}`
+    },
+    GroupedProductWishlistItem: {
+        keyFields: ({ id }) => `CustomerGroupedProductWishlistItem:${id}`
+    },
+    ConfigurableWishlistItem: {
+        keyFields: ({ id }) => `CustomerConfigurableWishlistItem:${id}`
+    },
+    GiftCardWishlistItem: {
+        keyFields: ({ id }) => `CustomerGiftCardWishlistItem:${id}`
     }
 };
 

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', () => {