test: 💍 fix tagview

jaskaransarkaria · Jan 22, 2022 · c25411a · c25411a
1 parent 9a02101
commit c25411a
Show file tree

Hide file tree

Showing 16 changed files with 101 additions and 48 deletions.
diff --git a/.routify/config.js b/.routify/config.js
@@ -8,5 +8,5 @@ module.exports = {
   noHashScroll: false,
   distDir: 'dist',
   extensions: ['svelte', 'html', 'svx', 'md'],
-  started: '2022-01-15T16:52:26.406Z',
+  started: '2022-01-22T09:29:54.854Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Sat Jan 15 2022 16:52:28 GMT+0000 (Greenwich Mean Time)
+ * File generated Sat Jan 22 2022 09:29:57 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2022-01-15T16:52:28.988Z';
+export const __timestamp = '2022-01-22T09:29:57.819Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

diff --git a/public/index.html b/public/index.html
@@ -1,18 +1,19 @@
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width, initial-scale=1'>
-    <meta name="description" content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK"
+    />
     <title>Enki</title>
-    
-    <link rel='icon' type='image/png' href='/favicon.png'>
-    <link rel='stylesheet' href='/global.css'>
-    <link rel='stylesheet' href='/build/bundle-1642260969493.css'>
-    
-    <script defer src='/build/bundle-1642260969493.js'></script>
+
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="/build/bundle-1642843794852.css" />
+
+    <script defer src="/build/bundle-1642843794852.js"></script>
   </head>
-  <body>
-  </body>
-</html>
+  <body></body>
+</html>
diff --git a/src/components/Breadcrumbs/Breadcrumbs.svelte b/src/components/Breadcrumbs/Breadcrumbs.svelte
@@ -22,6 +22,7 @@
     Name: 'Shop',
     ParentId: 0,
     Children: [],
+    NominalCode: '',
   };
 
   onMount(async () => {

diff --git a/src/components/Breadcrumbs/Breadcrumbs.test.ts b/src/components/Breadcrumbs/Breadcrumbs.test.ts
@@ -32,12 +32,14 @@ describe('GIVEN Breadcrumbs', () => {
           Id: 123,
           ParentId: null,
           Name: 'Clothes',
+          NominalCode: '',
           Children: [
             {
               Id: 456,
               ParentId: 123,
               Name: 'Adult Clothes',
               Chlidren: [],
+              NominalCode: '',
             },
           ],
         },
@@ -65,11 +67,13 @@ describe('GIVEN Breadcrumbs', () => {
           Id: 123,
           ParentId: null,
           Name: 'Clothes',
+          NominalCode: '',
           Children: [
             {
               Id: 456,
               ParentId: 123,
               Name: 'Adult Clothes',
+              NominalCode: '',
               Children: [],
             },
           ],

diff --git a/src/components/CategoryView/CategoryView.svelte b/src/components/CategoryView/CategoryView.svelte
@@ -55,6 +55,9 @@
     }
   };
 
+  const removeVariantCategories = (categories: Category[]) =>
+    categories.filter((cat) => cat.NominalCode === 'TRUE');
+
   onMount(async () => {
     categoryToShow = isValidCategoryStore
       ? showCategory(categoryId, Object.assign({}, $categories))
@@ -70,21 +73,27 @@
   });
 
   $: categoryToShow = showCategory(categoryId, Object.assign({}, $categories));
+  $: variantCategories = categoryToShow?.Children.filter(
+    (cat) => cat.NominalCode === null
+  );
 </script>
 
 {#if categoryToShow}
   <Breadcrumbs selectedCategoryId={categoryToShow.Id} />
-  {#if categoryToShow.Children.length}
+  {#if removeVariantCategories(categoryToShow.Children).length}
     {#if categoryToShow.Id === 1875997 || categoryToShow.Id === 1875998}
       <TagView
-        data={categoryToShow.Children}
+        data={removeVariantCategories(categoryToShow.Children)}
         {categoryFn}
         categoryId={categoryToShow.Id}
       />
     {:else}
-      <HexGrid data={categoryToShow.Children} {categoryFn} />
+      <HexGrid
+        data={removeVariantCategories(categoryToShow.Children)}
+        {categoryFn}
+      />
     {/if}
   {/if}
-  <ProductsInCategory bind:categoryId />
+  <ProductsInCategory bind:categoryId bind:variantCategories />
 {/if}
 <h1>{categoryToShow?.Id || 'no "categoryToShow" from CategoryView'}</h1>
diff --git a/src/components/CategoryView/CategoryView.test.ts b/src/components/CategoryView/CategoryView.test.ts
@@ -13,21 +13,25 @@ const nestedCategories = {
   Id: -1,
   ParentId: null,
   Name: '',
+  NominalCode: 'TRUE',
   Children: [
     {
       Id: 123,
       ParentId: null,
       Name: 'Clothes',
+      NominalCode: 'TRUE',
       Children: [
         {
           Id: 456,
           ParentId: null,
           Name: 'Shoes',
+          NominalCode: 'TRUE',
           Children: [
             {
               Id: 789,
               ParentId: null,
               Name: 'Hats',
+              NominalCode: 'TRUE',
               Children: [],
             },
           ],
@@ -59,6 +63,7 @@ describe('GIVEN CategoryView', () => {
         ParentId: null,
         Name: '',
         Children: [],
+        NominalCode: '',
       });
     });
   });
@@ -70,6 +75,7 @@ describe('GIVEN CategoryView', () => {
         ParentId: null,
         Name: 'Clothes',
         Children: [],
+        NominalCode: 'TRUE',
       });
 
       render(CategoryView, {
@@ -82,6 +88,7 @@ describe('GIVEN CategoryView', () => {
         ParentId: null,
         Name: 'Clothes',
         Children: [],
+        NominalCode: 'TRUE',
       });
       expect(refreshCategory).toHaveBeenCalledTimes(0);
       expect(screen.getByRole('heading')).toHaveTextContent('123');
@@ -95,6 +102,7 @@ describe('GIVEN CategoryView', () => {
           ParentId: null,
           Name: 'Shoes',
           Children: [],
+          NominalCode: 'TRUE',
         },
       ]);
 
@@ -108,6 +116,7 @@ describe('GIVEN CategoryView', () => {
         ParentId: null,
         Name: '',
         Children: [],
+        NominalCode: '',
       });
       expect(refreshCategory).toHaveBeenCalledTimes(1);
       await tick(); // using tick helps to flush any state changes in the component
@@ -118,6 +127,7 @@ describe('GIVEN CategoryView', () => {
         Name: 'Shoes',
         ParentId: null,
         Children: [],
+        NominalCode: 'TRUE',
       });
       expect(screen.getByRole('heading')).toHaveTextContent('456');
       cleanup();

diff --git a/src/components/HexGrid/HexGrid.test.ts b/src/components/HexGrid/HexGrid.test.ts
@@ -11,6 +11,7 @@ const mockData: Category[] = [
     Name: 'Elephant',
     ParentId: null,
     Children: [],
+    NominalCode: '',
   },
 ];
 

diff --git a/src/components/ProductView/ProductView.svelte b/src/components/ProductView/ProductView.svelte
@@ -2,10 +2,13 @@
   import { groupBy } from 'lodash-es';
   import { fade } from 'svelte/transition';
   import { calcShowGrid } from '@/libs/gridCalc';
+  import VariantCategory from '../VariantCategory/VariantCategory.svelte';
   import SingleProduct from '@/components/SingleProduct/SingleProduct.svelte';
+  import type { Category } from '@/types/category';
   import type { Product } from '@/types/product';
 
   export let productArr: readonly Product[] = [];
+  export let variantCategories: readonly Category[] = [];
   export let showDetailedView = false;
 
   let variantArr: readonly Product[] = [];
@@ -16,6 +19,8 @@
     groupBy(variantArr, 'VariantGroupId')
   );
 
+  $: variantCategoryIds = variantCategories.map((cat) => cat.Id);
+
   $: if (productArr.length) {
     variantArr = productArr.filter(({ VariantGroupId }) => !!VariantGroupId);
     nonVariantArr = productArr.filter(({ VariantGroupId }) => !VariantGroupId);
@@ -30,10 +35,17 @@
       ? 'detailed-products-container'
       : 'products-container'}
   >
+    {#if variantCategories.length}
+      {#each variantCategories as variantCategory (variantCategory.Id)}
+        <SingleProduct {variantCategory} product={null} />
+      {/each}
+    {/if}
     {#if variantArr.length}
       {#each groupedVariantProducts as variants (variants)}
         {#each variants as variant (variant)}
-          <SingleProduct product={variant} />
+          {#if !variantCategoryIds.includes(variant.CategoryId)}
+            <SingleProduct product={variant} />
+          {/if}
         {/each}
       {/each}
     {/if}

diff --git a/src/components/ProductsInCategory/ProductsInCategory.svelte b/src/components/ProductsInCategory/ProductsInCategory.svelte
@@ -3,11 +3,13 @@
   import { refreshProducts } from '@/libs/requests';
 
   import type { Product } from '@/types/product';
+  import type { Category } from '@/types/category';
 
   export let categoryId: number;
-  export let productArr: readonly Product[] = [];
+  export let variantCategories: readonly Category[] = [];
   export let showDetailedView = false;
 
+  let productArr: readonly Product[] = [];
   const productObj: { [key: string]: { isEmpty: boolean } } = {};
 
   const refreshProductsArr = async (
@@ -46,6 +48,6 @@
   $: refreshProductView(productArr, categoryId);
 </script>
 
-{#if categoryId && productArr.length && !productObj?.[categoryId]?.isEmpty}
-  <ProductView {productArr} {showDetailedView} />
+{#if categoryId && ((productArr.length && !productObj?.[categoryId]?.isEmpty) || variantCategories.length)}
+  <ProductView {productArr} {showDetailedView} {variantCategories} />
 {/if}
diff --git a/src/components/ProductsInCategory/ProductsInCategory.test.ts b/src/components/ProductsInCategory/ProductsInCategory.test.ts
@@ -45,29 +45,6 @@ describe('GIVEN ProductsInCategory', () => {
         ).toBeInTheDocument();
         cleanup();
       });
-
-      it("THEN display the products which are passed in as a prop AND don't call the api", async () => {
-        render(ProductsInCategory, {
-          categoryId: 2,
-          productArr: [
-            {
-              Name: 'Silver ring',
-              Id: 456,
-              CategoryId: 2,
-              Description: '',
-              SalePrice: '2000',
-              ProductImages: [],
-              ProductTags: [],
-              VariantGroupId: 0,
-              CurrentStock: 0,
-            },
-          ],
-        });
-        expect(refreshProducts).toHaveBeenCalledTimes(0);
-        expect(
-          await screen.findByRole('heading', { level: 3, name: /silver ring/i })
-        ).toBeInTheDocument();
-      });
     });
   });
 });
diff --git a/src/components/SingleProduct/SingleProduct.svelte b/src/components/SingleProduct/SingleProduct.svelte
@@ -5,11 +5,25 @@
   import ImageLoader from '@/components/Image/ImageLoader.svelte';
 
   import type { Product } from '@/types/product';
+  import type { Category } from '@/types/category';
 
-  export let product: Product;
+  export let variantCategory: Category | null = null;
+  export let product: Product | null;
   export let showDetailedView = false;
 </script>
 
+{#if variantCategory}
+  <button class="simple-container" on:click={$goto(`./${variantCategory.Id}`)}>
+    <div class="position-img">
+      <ImageLoader
+        src={`https://enki.imgix.net/${variantCategory.Id}?auto=format`}
+        alt={`${variantCategory.Name}`}
+      />
+    </div>
+    <h3 class="basic-header">{`${variantCategory.Name}`}</h3>
+  </button>
+{/if}
+
 {#if product}
   {#if showDetailedView}
     <div

diff --git a/src/components/TagView/TagView.test.ts b/src/components/TagView/TagView.test.ts
@@ -15,6 +15,7 @@ const mockData: Category[] = [
     Name: 'Elephant',
     ParentId: null,
     Children: [],
+    NominalCode: '',
   },
 ];
 

diff --git a/src/components/VariantCategory/VariantCategory.svelte b/src/components/VariantCategory/VariantCategory.svelte
@@ -0,0 +1,19 @@
+<script lang="typescript">
+  import { goto } from '@roxi/routify';
+  import ImageLoader from '@/components/Image/ImageLoader.svelte';
+  import type { Category } from '@/types/category';
+
+  export let variantCategory: Category;
+</script>
+
+<p>{JSON.stringify(variantCategory)}</p>
+
+<button class="simple-container" on:click={$goto(`./${variantCategory.Id}`)}>
+  <div class="position-img">
+    <ImageLoader
+      src={`https://enki.imgix.net/${variantCategory.Id}?auto=format`}
+      alt={`${variantCategory.Name}`}
+    />
+  </div>
+  <h3 class="basic-header">{`${variantCategory.Name}`}</h3>
+</button>
diff --git a/src/stores/categories.ts b/src/stores/categories.ts
@@ -6,6 +6,7 @@ const initialValue = {
   ParentId: null,
   Name: '',
   Children: [],
+  NominalCode: '',
 };
 
 export const categories = writable<Category>(initialValue);

diff --git a/src/types/category.d.ts b/src/types/category.d.ts
@@ -3,4 +3,5 @@ import type { Base } from '@/types/base';
 export interface Category extends Base {
   ParentId: number | null;
   Children: Category[];
+  NominalCode: string;
 }