@jetshop/ui 5.13.10-0 → 5.14.0-alpha.49df897e

package/Menu/RecursiveTree.test.js

@@ -1,416 +1,416 @@
-import { render, act, cleanup, wait } from '@testing-library/react';
-import React from 'react';
-import RecursiveTree from './RecursiveTree';
-import getMoreSubcategories from './GetMoreSubcategoriesQuery.gql';
-import { MockedProvider } from '@apollo/react-testing';
-import { StaticRouter } from 'react-router';
-
-afterEach(cleanup);
-
-const MOCK_CATEGORIES = [
-  {
-    id: 159,
-    name: 'News!',
-    level: 1,
-    parentId: null,
-    hasSubcategories: true,
-    primaryRoute: {
-      path: '/news',
-      __typename: 'Route'
-    },
-    subcategories: [
-      {
-        id: 160,
-        name: 'All products',
-        level: 2,
-        parentId: 159,
-        hasSubcategories: false,
-        primaryRoute: {
-          path: '/news/all-products',
-          __typename: 'Route'
-        },
-        subcategories: [],
-        __typename: 'Category'
-      },
-      {
-        id: 161,
-        name: 'Ladies',
-        level: 2,
-        parentId: 159,
-        hasSubcategories: false,
-        primaryRoute: {
-          path: '/news/ladies',
-          __typename: 'Route'
-        },
-        subcategories: [],
-        __typename: 'Category'
-      },
-      {
-        id: 162,
-        name: 'Mens',
-        level: 2,
-        parentId: 159,
-        hasSubcategories: false,
-        primaryRoute: {
-          path: '/news/mens',
-          __typename: 'Route'
-        },
-        subcategories: [],
-        __typename: 'Category'
-      },
-      {
-        id: 164,
-        name: 'Kids',
-        level: 2,
-        parentId: 159,
-        hasSubcategories: true,
-        primaryRoute: {
-          path: '/news/kids',
-          __typename: 'Route'
-        },
-        subcategories: [
-          {
-            id: 302,
-            name: 'Tier 3',
-            level: 3,
-            parentId: 164,
-            primaryRoute: null,
-            __typename: 'Category'
-          }
-        ],
-        __typename: 'Category'
-      }
-    ],
-    __typename: 'Category'
-  },
-  {
-    id: 1159,
-    name: 'News!',
-    level: 1,
-    parentId: null,
-    hasSubcategories: true,
-    primaryRoute: {
-      path: '/news',
-      __typename: 'Route'
-    },
-    subcategories: [
-      {
-        id: 1160,
-        name: 'All products',
-        level: 2,
-        parentId: 1159,
-        hasSubcategories: false,
-        primaryRoute: {
-          path: '/news/all-products',
-          __typename: 'Route'
-        },
-        subcategories: [],
-        __typename: 'Category'
-      },
-      {
-        id: 1161,
-        name: 'Ladies',
-        level: 2,
-        parentId: 1159,
-        hasSubcategories: false,
-        primaryRoute: {
-          path: '/news/ladies',
-          __typename: 'Route'
-        },
-        subcategories: [],
-        __typename: 'Category'
-      },
-      {
-        id: 1162,
-        name: 'Mens',
-        level: 2,
-        parentId: 1159,
-        hasSubcategories: false,
-        primaryRoute: {
-          path: '/news/mens',
-          __typename: 'Route'
-        },
-        subcategories: [],
-        __typename: 'Category'
-      },
-      {
-        id: 1164,
-        name: 'Kids',
-        level: 2,
-        parentId: 1159,
-        hasSubcategories: true,
-        primaryRoute: {
-          path: '/news/kids',
-          __typename: 'Route'
-        },
-        subcategories: [
-          {
-            id: 3102,
-            name: 'Tier 3',
-            level: 3,
-            parentId: 1164,
-            primaryRoute: null,
-            __typename: 'Category'
-          }
-        ],
-        __typename: 'Category'
-      }
-    ],
-    __typename: 'Category'
-  },
-  {
-    id: 159,
-    name: 'News!',
-    level: 1,
-    parentId: null,
-    hasSubcategories: true,
-    primaryRoute: {
-      path: '/news',
-      __typename: 'Route'
-    },
-    subcategories: [
-      {
-        id: 160,
-        name: 'All products',
-        level: 2,
-        parentId: 159,
-        hasSubcategories: true,
-        primaryRoute: {
-          path: '/news/all-products',
-          __typename: 'Route'
-        },
-        subcategories: [
-          {
-            id: 3102,
-            name: 'Tier 3',
-            level: 3,
-            parentId: 1164,
-            primaryRoute: {
-              path: '/news/all-products/tier-3',
-              __typename: 'Route'
-            },
-            hasSubcategories: true,
-            __typename: 'Category'
-          }
-        ],
-        __typename: 'Category'
-      }
-    ],
-    __typename: 'Category'
-  }
-];
-
-const tier4 = {
-  __typename: 'Category',
-  hasSubcategories: false,
-  id: 8000,
-  name: 'Tier 4',
-  level: 4,
-  parentId: 3102,
-  primaryRoute: null,
-  subcategories: []
-};
-
-describe('RecursiveNav', () => {
-  it('renders child as fn with args', () => {
-    const { renderArg } = setup();
-    expect(renderArg).toMatchSnapshot();
-  });
-});
-
-describe('the fetchMore render arg', () => {
-  it('fetches more categories and adds them to the subcategories object', async () => {
-    const { childrenSpy, renderArg } = setup();
-
-    let promise;
-
-    act(() => {
-      promise = renderArg.fetchMore();
-    });
-
-    await promise;
-    expect(childrenSpy).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        subcategories: [expect.objectContaining({ id: 9000 })]
-      })
-    );
-  });
-
-  it('does not fetch more categories when the current category level is an even number', async () => {
-    const { childrenSpy, renderArg } = setup({
-      containerProps: {
-        category: MOCK_CATEGORIES[0].subcategories[0]
-      }
-    });
-
-    let promise;
-
-    act(() => {
-      promise = renderArg.fetchMore();
-    });
-
-    await promise;
-    expect(childrenSpy).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        subcategories: []
-      })
-    );
-  });
-});
-
-describe('the category render arg', () => {
-  it('just passes through the base category', () => {
-    const { renderArg } = setup({
-      containerProps: {
-        category: MOCK_CATEGORIES[0]
-      }
-    });
-
-    expect(renderArg.category).toBe(MOCK_CATEGORIES[0]);
-  });
-});
-
-describe('the renderRecursive render arg', () => {
-  it('renders for each subcategory of the current category', () => {
-    const { queryByText, getByText, renderArg } = setup();
-
-    expect(getByText(/News!/)).toBeInTheDocument();
-    MOCK_CATEGORIES[0].subcategories.forEach(cat =>
-      expect(queryByText(cat.name)).not.toBeInTheDocument()
-    );
-
-    renderArg.menuContainerProps.setActiveCategory(MOCK_CATEGORIES[0]);
-
-    MOCK_CATEGORIES[0].subcategories.forEach(cat =>
-      expect(getByText(cat.name)).toBeInTheDocument()
-    );
-  });
-});
-
-describe('the initialOpenMatchingCategories prop', () => {
-  it('automatically opens categories matching the current path', () => {
-    const renderFn = jest.fn(props => props.renderSubnav);
-    setup({
-      containerProps: {
-        category: MOCK_CATEGORIES[0],
-        initialOpenMatchingCategories: true
-      },
-      path: '/news/all-products',
-      renderFn
-    });
-
-    expect(renderFn).toHaveBeenCalledTimes(5);
-    expect(renderFn).toHaveBeenCalledWith(
-      expect.objectContaining({
-        menuContainerProps: expect.objectContaining({
-          activeCategories: expect.arrayContaining([MOCK_CATEGORIES[0]])
-        })
-      })
-    );
-    expect(renderFn).toHaveBeenCalledWith(
-      expect.objectContaining({
-        menuContainerProps: expect.objectContaining({
-          activeCategories: expect.arrayContaining([
-            MOCK_CATEGORIES[0].subcategories[0]
-          ])
-        })
-      })
-    );
-  });
-
-  it('fetches subcategories from the api if they are not already fetched', async () => {
-    const renderFn = jest.fn(props => props.renderSubnav);
-    setup({
-      containerProps: {
-        category: MOCK_CATEGORIES[2],
-        initialOpenMatchingCategories: true
-      },
-      path: '/news/all-products',
-      renderFn
-    });
-
-    await wait();
-
-    expect(renderFn).toHaveBeenCalledTimes(5);
-    expect(renderFn).toHaveBeenCalledWith(
-      expect.objectContaining({
-        subcategories: expect.arrayContaining([tier4])
-      })
-    );
-  });
-});
-
-function setup({
-  containerProps = { category: MOCK_CATEGORIES[0] },
-  renderFn,
-  path
-} = {}) {
-  let renderArg;
-
-  const childrenSpy = jest.fn(controllerArg => {
-    renderArg = controllerArg;
-
-    if (renderFn) return renderFn(controllerArg);
-    return (
-      <div>
-        <span>{controllerArg.category.name}</span>
-        <nav>{controllerArg.renderSubnav}</nav>
-      </div>
-    );
-  });
-
-  const utils = render(
-    <StaticRouter location={path} context={{}}>
-      <MockedProvider
-        mocks={[
-          {
-            request: {
-              query: getMoreSubcategories,
-              variables: { id: MOCK_CATEGORIES[0].id }
-            },
-            result: {
-              data: {
-                category: {
-                  __typename: 'Category',
-                  hasSubcategories: true,
-                  subcategories: [
-                    {
-                      id: 9000,
-                      name: 'Mock category',
-                      level: 2,
-                      parentId: null,
-                      primaryRoute: null,
-                      hasSubcategories: false,
-                      subcategories: [],
-                      __typename: 'Category'
-                    }
-                  ]
-                }
-              }
-            }
-          },
-          {
-            request: {
-              query: getMoreSubcategories,
-              variables: {
-                id: MOCK_CATEGORIES[2].subcategories[0].subcategories[0].id
-              }
-            },
-            result: {
-              data: {
-                category: {
-                  ...MOCK_CATEGORIES[2].subcategories[0].subcategories[0],
-                  subcategories: [tier4]
-                }
-              }
-            }
-          }
-        ]}
-      >
-        <RecursiveTree {...containerProps}>{childrenSpy}</RecursiveTree>
-      </MockedProvider>
-    </StaticRouter>
-  );
-
-  return { ...utils, childrenSpy, renderArg };
-}
+import { render, act, cleanup, wait } from '@testing-library/react';
+import React from 'react';
+import RecursiveTree from './RecursiveTree';
+import getMoreSubcategories from './GetMoreSubcategoriesQuery.gql';
+import { MockedProvider } from '@apollo/react-testing';
+import { StaticRouter } from 'react-router';
+
+afterEach(cleanup);
+
+const MOCK_CATEGORIES = [
+  {
+    id: 159,
+    name: 'News!',
+    level: 1,
+    parentId: null,
+    hasSubcategories: true,
+    primaryRoute: {
+      path: '/news',
+      __typename: 'Route'
+    },
+    subcategories: [
+      {
+        id: 160,
+        name: 'All products',
+        level: 2,
+        parentId: 159,
+        hasSubcategories: false,
+        primaryRoute: {
+          path: '/news/all-products',
+          __typename: 'Route'
+        },
+        subcategories: [],
+        __typename: 'Category'
+      },
+      {
+        id: 161,
+        name: 'Ladies',
+        level: 2,
+        parentId: 159,
+        hasSubcategories: false,
+        primaryRoute: {
+          path: '/news/ladies',
+          __typename: 'Route'
+        },
+        subcategories: [],
+        __typename: 'Category'
+      },
+      {
+        id: 162,
+        name: 'Mens',
+        level: 2,
+        parentId: 159,
+        hasSubcategories: false,
+        primaryRoute: {
+          path: '/news/mens',
+          __typename: 'Route'
+        },
+        subcategories: [],
+        __typename: 'Category'
+      },
+      {
+        id: 164,
+        name: 'Kids',
+        level: 2,
+        parentId: 159,
+        hasSubcategories: true,
+        primaryRoute: {
+          path: '/news/kids',
+          __typename: 'Route'
+        },
+        subcategories: [
+          {
+            id: 302,
+            name: 'Tier 3',
+            level: 3,
+            parentId: 164,
+            primaryRoute: null,
+            __typename: 'Category'
+          }
+        ],
+        __typename: 'Category'
+      }
+    ],
+    __typename: 'Category'
+  },
+  {
+    id: 1159,
+    name: 'News!',
+    level: 1,
+    parentId: null,
+    hasSubcategories: true,
+    primaryRoute: {
+      path: '/news',
+      __typename: 'Route'
+    },
+    subcategories: [
+      {
+        id: 1160,
+        name: 'All products',
+        level: 2,
+        parentId: 1159,
+        hasSubcategories: false,
+        primaryRoute: {
+          path: '/news/all-products',
+          __typename: 'Route'
+        },
+        subcategories: [],
+        __typename: 'Category'
+      },
+      {
+        id: 1161,
+        name: 'Ladies',
+        level: 2,
+        parentId: 1159,
+        hasSubcategories: false,
+        primaryRoute: {
+          path: '/news/ladies',
+          __typename: 'Route'
+        },
+        subcategories: [],
+        __typename: 'Category'
+      },
+      {
+        id: 1162,
+        name: 'Mens',
+        level: 2,
+        parentId: 1159,
+        hasSubcategories: false,
+        primaryRoute: {
+          path: '/news/mens',
+          __typename: 'Route'
+        },
+        subcategories: [],
+        __typename: 'Category'
+      },
+      {
+        id: 1164,
+        name: 'Kids',
+        level: 2,
+        parentId: 1159,
+        hasSubcategories: true,
+        primaryRoute: {
+          path: '/news/kids',
+          __typename: 'Route'
+        },
+        subcategories: [
+          {
+            id: 3102,
+            name: 'Tier 3',
+            level: 3,
+            parentId: 1164,
+            primaryRoute: null,
+            __typename: 'Category'
+          }
+        ],
+        __typename: 'Category'
+      }
+    ],
+    __typename: 'Category'
+  },
+  {
+    id: 159,
+    name: 'News!',
+    level: 1,
+    parentId: null,
+    hasSubcategories: true,
+    primaryRoute: {
+      path: '/news',
+      __typename: 'Route'
+    },
+    subcategories: [
+      {
+        id: 160,
+        name: 'All products',
+        level: 2,
+        parentId: 159,
+        hasSubcategories: true,
+        primaryRoute: {
+          path: '/news/all-products',
+          __typename: 'Route'
+        },
+        subcategories: [
+          {
+            id: 3102,
+            name: 'Tier 3',
+            level: 3,
+            parentId: 1164,
+            primaryRoute: {
+              path: '/news/all-products/tier-3',
+              __typename: 'Route'
+            },
+            hasSubcategories: true,
+            __typename: 'Category'
+          }
+        ],
+        __typename: 'Category'
+      }
+    ],
+    __typename: 'Category'
+  }
+];
+
+const tier4 = {
+  __typename: 'Category',
+  hasSubcategories: false,
+  id: 8000,
+  name: 'Tier 4',
+  level: 4,
+  parentId: 3102,
+  primaryRoute: null,
+  subcategories: []
+};
+
+describe('RecursiveNav', () => {
+  it('renders child as fn with args', () => {
+    const { renderArg } = setup();
+    expect(renderArg).toMatchSnapshot();
+  });
+});
+
+describe('the fetchMore render arg', () => {
+  it('fetches more categories and adds them to the subcategories object', async () => {
+    const { childrenSpy, renderArg } = setup();
+
+    let promise;
+
+    act(() => {
+      promise = renderArg.fetchMore();
+    });
+
+    await promise;
+    expect(childrenSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        subcategories: [expect.objectContaining({ id: 9000 })]
+      })
+    );
+  });
+
+  it('does not fetch more categories when the current category level is an even number', async () => {
+    const { childrenSpy, renderArg } = setup({
+      containerProps: {
+        category: MOCK_CATEGORIES[0].subcategories[0]
+      }
+    });
+
+    let promise;
+
+    act(() => {
+      promise = renderArg.fetchMore();
+    });
+
+    await promise;
+    expect(childrenSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        subcategories: []
+      })
+    );
+  });
+});
+
+describe('the category render arg', () => {
+  it('just passes through the base category', () => {
+    const { renderArg } = setup({
+      containerProps: {
+        category: MOCK_CATEGORIES[0]
+      }
+    });
+
+    expect(renderArg.category).toBe(MOCK_CATEGORIES[0]);
+  });
+});
+
+describe('the renderRecursive render arg', () => {
+  it('renders for each subcategory of the current category', () => {
+    const { queryByText, getByText, renderArg } = setup();
+
+    expect(getByText(/News!/)).toBeInTheDocument();
+    MOCK_CATEGORIES[0].subcategories.forEach(cat =>
+      expect(queryByText(cat.name)).not.toBeInTheDocument()
+    );
+
+    renderArg.menuContainerProps.setActiveCategory(MOCK_CATEGORIES[0]);
+
+    MOCK_CATEGORIES[0].subcategories.forEach(cat =>
+      expect(getByText(cat.name)).toBeInTheDocument()
+    );
+  });
+});
+
+describe('the initialOpenMatchingCategories prop', () => {
+  it('automatically opens categories matching the current path', () => {
+    const renderFn = jest.fn(props => props.renderSubnav);
+    setup({
+      containerProps: {
+        category: MOCK_CATEGORIES[0],
+        initialOpenMatchingCategories: true
+      },
+      path: '/news/all-products',
+      renderFn
+    });
+
+    expect(renderFn).toHaveBeenCalledTimes(5);
+    expect(renderFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        menuContainerProps: expect.objectContaining({
+          activeCategories: expect.arrayContaining([MOCK_CATEGORIES[0]])
+        })
+      })
+    );
+    expect(renderFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        menuContainerProps: expect.objectContaining({
+          activeCategories: expect.arrayContaining([
+            MOCK_CATEGORIES[0].subcategories[0]
+          ])
+        })
+      })
+    );
+  });
+
+  it('fetches subcategories from the api if they are not already fetched', async () => {
+    const renderFn = jest.fn(props => props.renderSubnav);
+    setup({
+      containerProps: {
+        category: MOCK_CATEGORIES[2],
+        initialOpenMatchingCategories: true
+      },
+      path: '/news/all-products',
+      renderFn
+    });
+
+    await wait();
+
+    expect(renderFn).toHaveBeenCalledTimes(5);
+    expect(renderFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        subcategories: expect.arrayContaining([tier4])
+      })
+    );
+  });
+});
+
+function setup({
+  containerProps = { category: MOCK_CATEGORIES[0] },
+  renderFn,
+  path
+} = {}) {
+  let renderArg;
+
+  const childrenSpy = jest.fn(controllerArg => {
+    renderArg = controllerArg;
+
+    if (renderFn) return renderFn(controllerArg);
+    return (
+      <div>
+        <span>{controllerArg.category.name}</span>
+        <nav>{controllerArg.renderSubnav}</nav>
+      </div>
+    );
+  });
+
+  const utils = render(
+    <StaticRouter location={path} context={{}}>
+      <MockedProvider
+        mocks={[
+          {
+            request: {
+              query: getMoreSubcategories,
+              variables: { id: MOCK_CATEGORIES[0].id }
+            },
+            result: {
+              data: {
+                category: {
+                  __typename: 'Category',
+                  hasSubcategories: true,
+                  subcategories: [
+                    {
+                      id: 9000,
+                      name: 'Mock category',
+                      level: 2,
+                      parentId: null,
+                      primaryRoute: null,
+                      hasSubcategories: false,
+                      subcategories: [],
+                      __typename: 'Category'
+                    }
+                  ]
+                }
+              }
+            }
+          },
+          {
+            request: {
+              query: getMoreSubcategories,
+              variables: {
+                id: MOCK_CATEGORIES[2].subcategories[0].subcategories[0].id
+              }
+            },
+            result: {
+              data: {
+                category: {
+                  ...MOCK_CATEGORIES[2].subcategories[0].subcategories[0],
+                  subcategories: [tier4]
+                }
+              }
+            }
+          }
+        ]}
+      >
+        <RecursiveTree {...containerProps}>{childrenSpy}</RecursiveTree>
+      </MockedProvider>
+    </StaticRouter>
+  );
+
+  return { ...utils, childrenSpy, renderArg };
+}