Merge 73ca1b1 into 4990a19

vtex-apps · Mar 21, 2019 · bb17513 · bb17513
2 parents 4990a19 + 73ca1b1
commit bb17513
Show file tree

Hide file tree

Showing 4 changed files with 201 additions and 94 deletions.
diff --git a/react/__mocks__/productMock.js b/react/__mocks__/productMock.js
@@ -1,82 +1,86 @@
+import { map, range } from 'ramda'
+
 export const productMock = itemNumber => {
-  const itemMock = {
-    benefitProduct: {
-      linkText: 'linkText',
-      productName: 'productName',
-      brand: 'brand',
-      items: [
-        {
-          productName: 'productName',
-          itemId: 'itemId',
-          name: 'name',
-          image: [
-            {
-              imageId: 'imageId',
-              imageUrl: '',
-              imageText: 'imageText',
-            },
-          ],
-          seller: [
-            {
-              sellerId: 'sellerId',
-              commertialOffer: {
-                Installments: [
+  const itemMock = name => {
+    return {
+      benefitProduct: {
+        linkText: 'linkText',
+        productName: 'productName',
+        brand: 'brand',
+        items: [
+          {
+            productName: 'productName',
+            itemId: 'itemId',
+            name: name,
+            image: [
+              {
+                imageId: 'imageId',
+                imageUrl: '',
+                imageText: 'imageText',
+              },
+            ],
+            seller: [
+              {
+                sellerId: 'sellerId',
+                commertialOffer: {
+                  Installments: [
+                    {
+                      Value: 1,
+                      InterestRate: 1,
+                      NumberOfInstallments: 1,
+                    },
+                  ],
+                  Price: 1,
+                  ListPrice: 1,
+                },
+              },
+            ],
+          },
+        ],
+        skuId: 'skuId',
+        slug: 'slug',
+        productQuery: {
+          product: {
+            productId: 'productId',
+            productName: 'productName',
+            items: [
+              {
+                itemId: 'itemId',
+                name: 'name',
+                images: [
                   {
-                    Value: 1,
-                    InterestRate: 1,
-                    NumberOfInstallments: 1,
+                    imageId: 'imageId',
+                    imageUrl: '',
+                    imageText: 'imageText',
                   },
                 ],
-                Price: 1,
-                ListPrice: 1,
-              },
-            },
-          ],
-        },
-      ],
-      skuId: 'skuId',
-      slug: 'slug',
-      productQuery: {
-        product: {
-          productId: 'productId',
-          productName: 'productName',
-          items: [
-            {
-              itemId: 'itemId',
-              name: 'name',
-              images: [
-                {
-                  imageId: 'imageId',
-                  imageUrl: '',
-                  imageText: 'imageText',
-                },
-              ],
-              sellers: [
-                {
-                  sellerId: 'sellerId',
-                  commertialOffer: {
-                    Installments: [
-                      {
-                        Value: 1,
-                        InterestRate: 1,
-                        NumberOfInstallments: 1,
-                      },
-                    ],
-                    Price: 1,
-                    ListPrice: 1,
+                sellers: [
+                  {
+                    sellerId: 'sellerId',
+                    commertialOffer: {
+                      Installments: [
+                        {
+                          Value: 1,
+                          InterestRate: 1,
+                          NumberOfInstallments: 1,
+                        },
+                      ],
+                      Price: 1,
+                      ListPrice: 1,
+                    },
                   },
-                },
-              ],
-            },
-          ],
+                ],
+              },
+            ],
+          },
+          loading: false,
         },
-        loading: false,
+        share: { social: {} },
       },
-      share: { social: {} },
-    },
-    benefitSKUIds: ['itemId'],
-    discount: 1,
-    minQuantity: 1,
+      benefitSKUIds: ['itemId'],
+      discount: 1,
+      minQuantity: 1,
+    }
   }
 
   const mock = {
@@ -85,19 +89,16 @@ export const productMock = itemNumber => {
       product: {
         benefits: [
           {
-            items: [],
+            items: map(
+              index => itemMock(`name-${index}`),
+              range(1, itemNumber + 1)
+            ),
           },
         ],
         productId: '1',
       },
     },
   }
 
-  while (mock.productQuery.product.benefits[0].items.length < itemNumber) {
-    mock.productQuery.product.benefits[0].items = mock.productQuery.product.benefits[0].items.concat(
-      itemMock
-    )
-  }
-
   return mock
 }
diff --git a/react/__mocks__/vtex.render-runtime.js b/react/__mocks__/vtex.render-runtime.js
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function ExtensionPoint() {
-  return <div className="extension-point-mock" />
+export const ExtensionPoint = ({ id, product }) => {
+  return <div className={`extension-point-${id}`}>{product.sku.name}</div>
 }
diff --git a/react/__tests__/__snapshots__/productKit.test.js.snap b/react/__tests__/__snapshots__/productKit.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ProductSummary /> component should match the snapshot 1`] = `
+exports[`<ProductSummary /> component should match the snapshot with no removal and swap 1`] = `
 <DocumentFragment>
   <section
     class="container-mock"
@@ -31,8 +31,10 @@ exports[`<ProductSummary /> component should match the snapshot 1`] = `
                 class="pl4"
               >
                 <div
-                  class="extension-point-mock"
-                />
+                  class="extension-point-product-summary"
+                >
+                  name-1
+                </div>
               </div>
               <div
                 class="flex flex-column items-center w2"
@@ -116,8 +118,10 @@ exports[`<ProductSummary /> component should match the snapshot with removal and
                 class="pl4"
               >
                 <div
-                  class="extension-point-mock"
-                />
+                  class="extension-point-product-summary"
+                >
+                  name-1
+                </div>
               </div>
               <div
                 class="flex flex-column items-center w2"
@@ -148,8 +152,10 @@ exports[`<ProductSummary /> component should match the snapshot with removal and
                 class="pl4"
               >
                 <div
-                  class="extension-point-mock"
-                />
+                  class="extension-point-product-summary"
+                >
+                  name-2
+                </div>
               </div>
               <div
                 class="flex flex-column items-center w2"
@@ -168,6 +174,83 @@ exports[`<ProductSummary /> component should match the snapshot with removal and
                     />
                   </svg>
                 </div>
+                <div
+                  class="pointer flex items-center mh3 mv3 c-on-base"
+                >
+                  <svg
+                    class="w1 h1 IconSwap"
+                    height="21"
+                    width="21"
+                  >
+                    <rect
+                      height="21"
+                      width="21"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="flex flex-row items-center justify-center c-muted-1"
+        >
+          <svg
+            class="w2 IconPlus"
+            height="45"
+            width="45"
+          >
+            <rect
+              height="45"
+              width="45"
+            />
+          </svg>
+          <div
+            class="item"
+          >
+            <div
+              class="flex flex-row"
+            >
+              <div
+                class="pl4"
+              >
+                <div
+                  class="extension-point-product-summary"
+                >
+                  name-3
+                </div>
+              </div>
+              <div
+                class="flex flex-column items-center w2"
+              >
+                <div
+                  class="pointer flex items-center mh3 mv3 c-on-base"
+                >
+                  <svg
+                    class="w1 h1 IconRemove"
+                    height="21"
+                    width="21"
+                  >
+                    <rect
+                      height="21"
+                      width="21"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="pointer flex items-center mh3 mv3 c-on-base"
+                >
+                  <svg
+                    class="w1 h1 IconSwap"
+                    height="21"
+                    width="21"
+                  >
+                    <rect
+                      height="21"
+                      width="21"
+                    />
+                  </svg>
+                </div>
               </div>
             </div>
           </div>
@@ -193,7 +276,7 @@ exports[`<ProductSummary /> component should match the snapshot with removal and
             class="t-body c-muted-1 mv3"
           >
             <span>
-              Take all 2 products
+              Take all 3 products
             </span>
           </div>
           <div

diff --git a/react/__tests__/productKit.test.js b/react/__tests__/productKit.test.js
@@ -12,7 +12,7 @@ describe('<ProductSummary /> component', () => {
     expect(renderComponent()).toBeDefined()
   })
 
-  it('should match the snapshot', () => {
+  it('should match the snapshot with no removal and swap', () => {
     const { asFragment } = renderComponent({
       allowSwap: false,
       allowRemoval: false,
@@ -26,14 +26,14 @@ describe('<ProductSummary /> component', () => {
         allowSwap: true,
         allowRemoval: true,
       },
-      2
+      5
     )
     expect(asFragment()).toMatchSnapshot()
   })
 
-  it('should render the 2 itens', () => {
-    const { getByText } = renderComponent({}, 2)
-    expect(getByText(/Take all 2 products/)).toBeTruthy()
+  it('should render 3 products', () => {
+    const { getByText } = renderComponent({}, 4)
+    expect(getByText(/Take all 3 products/)).toBeTruthy()
   })
 
   it('should remove an item from the kit', () => {
@@ -46,4 +46,27 @@ describe('<ProductSummary /> component', () => {
 
     expect(getByText(/Take all 1 products/)).toBeTruthy()
   })
+
+  /** It will swap the first swapable (name-2) for the one left over (name-4).
+   * If swapped again, it should retrieve the previous one. */
+  it('should swap an item from the kit', () => {
+    const { getByText, container, queryByText } = renderComponent(
+      { allowSwap: true },
+      4
+    )
+    expect(getByText('name-2')).toBeTruthy()
+
+    act(() => {
+      fireEvent.click(container.querySelector('.IconSwap'))
+    })
+
+    expect(getByText('name-4')).toBeTruthy()
+    expect(queryByText('name-2')).toBeNull()
+
+    act(() => {
+      fireEvent.click(container.querySelector('.IconSwap'))
+    })
+
+    expect(getByText('name-2')).toBeTruthy()
+  })
 })