update sku selector logic + fix tests

vtex-apps · Oct 21, 2024 · f1890de · f1890de
1 parent 1a09940
commit f1890de
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 56 deletions.
diff --git a/react/__mocks__/vtex.render-runtime.js b/react/__mocks__/vtex.render-runtime.js
@@ -10,6 +10,14 @@ const runtime = {
   culture: { currency: 'USD' },
   query: 'foo',
   navigate: jest.fn(),
+  getSettings: () => ({
+    'vtex.store': {
+      storeName: 'Store Theme - VTEX Base Store',
+      titleTag: 'Store Theme - VTEX Base Store',
+      metaTagDescription: 'Store Theme - VTEX Base Store',
+      metaTagKeywords: 'store theme, vtex, store, vtex io, base store, vtex',
+    },
+  }),
 }
 
 export const withRuntimeContext = Comp =>

diff --git a/react/__tests__/components/SKUSelector.test.tsx b/react/__tests__/components/SKUSelector.test.tsx
@@ -33,7 +33,10 @@ describe('<SKUSelector />', () => {
   })
 
   it('should render the options an select one', async () => {
-    const defaultSeller = { commertialOffer: { Price: 15 } }
+    const defaultSeller = {
+      commertialOffer: { Price: 15, AvailableQuantity: 1 },
+    }
+
     const skuItems = [
       {
         itemId: '1',
@@ -109,7 +112,10 @@ describe('<SKUSelector />', () => {
   })
 
   it('should render only three main variations', async () => {
-    const defaultSeller = { commertialOffer: { Price: 15 } }
+    const defaultSeller = {
+      commertialOffer: { Price: 15, AvailableQuantity: 1 },
+    }
+
     const skuItems = [
       {
         itemId: '1',
@@ -173,7 +179,10 @@ describe('<SKUSelector />', () => {
   })
 
   it('should render show 8 items for variation and see more button', async () => {
-    const defaultSeller = { commertialOffer: { Price: 15 } }
+    const defaultSeller = {
+      commertialOffer: { Price: 15, AvailableQuantity: 1 },
+    }
+
     const skuItems = [
       {
         itemId: '1',
@@ -637,7 +646,10 @@ describe('<SKUSelector />', () => {
   })
 
   it('should show all variations when count is inside threshold', async () => {
-    const defaultSeller = { commertialOffer: { Price: 15 } }
+    const defaultSeller = {
+      commertialOffer: { Price: 15, AvailableQuantity: 1 },
+    }
+
     const skuItems = [
       {
         itemId: '1',
@@ -1410,6 +1422,10 @@ describe('<SKUSelector />', () => {
   })
 
   it('must order sku specification to be sorted in alphabetical order', async () => {
+    const defaultSeller = {
+      commertialOffer: { Price: 15, AvailableQuantity: 1 },
+    }
+
     const skuItems = [
       {
         itemId: '1',
@@ -1419,6 +1435,7 @@ describe('<SKUSelector />', () => {
           { name: 'Color', values: ['Gray'] },
         ],
         images: [],
+        sellers: [defaultSeller],
       },
       {
         itemId: '4',
@@ -1431,6 +1448,7 @@ describe('<SKUSelector />', () => {
           { name: 'Color', values: ['Gray'] },
         ],
         images: [],
+        sellers: [defaultSeller],
       },
       {
         itemId: '4',
@@ -1443,6 +1461,7 @@ describe('<SKUSelector />', () => {
           { name: 'Color', values: ['Gray'] },
         ],
         images: [],
+        sellers: [defaultSeller],
       },
     ]
 

diff --git a/react/__tests__/components/__snapshots__/InfoCard.test.js.snap b/react/__tests__/components/__snapshots__/InfoCard.test.js.snap
@@ -236,6 +236,7 @@ exports[`<InfoCard /> should render with image and text side by side 1`] = `
         alt="CLICK HERE"
         class="infoCardImage"
         data-testid="half-image"
+        fetchpriority="auto"
         src="my-image.com/image.png"
         style="object-fit: cover;"
       />
@@ -315,6 +316,7 @@ exports[`<InfoCard /> should wrap half image in a link with imageActionUrl 1`] =
           alt="CLICK HERE"
           class="infoCardImage"
           data-testid="half-image"
+          fetchpriority="auto"
           src="my-image.com/image.png"
           style="object-fit: cover;"
         />

diff --git a/react/__tests__/components/__snapshots__/SKUSelector.test.tsx.snap b/react/__tests__/components/__snapshots__/SKUSelector.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`<SKUSelector /> should consider order from skuSpecifications 1`] = `
           class="skuSelectorOptionsList w-100 inline-flex flex-wrap ml2 items-center"
         >
           <div
-            class="skuSelectorItem skuSelectorItem--black relative di pointer flex items-center outline-0 ma2 skuSelectorItemImage"
+            class="skuSelectorItem skuSelectorItem--black relative di pointer flex items-center outline-0 ma2 skuSelectorItemImage valueWrapper"
             role="button"
             tabindex="0"
           >
@@ -45,7 +45,7 @@ exports[`<SKUSelector /> should consider order from skuSpecifications 1`] = `
             </div>
           </div>
           <div
-            class="skuSelectorItem skuSelectorItem--gray skuSelectorItem--selected relative di pointer flex items-center outline-0 ma2 skuSelectorItemImage"
+            class="skuSelectorItem skuSelectorItem--gray skuSelectorItem--selected relative di pointer flex items-center outline-0 ma2 skuSelectorItemImage valueWrapper"
             role="button"
             tabindex="0"
           >
@@ -66,7 +66,7 @@ exports[`<SKUSelector /> should consider order from skuSpecifications 1`] = `
             </div>
           </div>
           <div
-            class="skuSelectorItem skuSelectorItem--blue relative di pointer flex items-center outline-0 ma2 skuSelectorItemImage"
+            class="skuSelectorItem skuSelectorItem--blue relative di pointer flex items-center outline-0 ma2 skuSelectorItemImage valueWrapper"
             role="button"
             tabindex="0"
           >
@@ -108,7 +108,7 @@ exports[`<SKUSelector /> should consider order from skuSpecifications 1`] = `
           class="skuSelectorOptionsList w-100 inline-flex flex-wrap ml2 items-center"
         >
           <div
-            class="skuSelectorItem skuSelectorItem--42 relative di pointer flex items-center outline-0 ma2"
+            class="skuSelectorItem skuSelectorItem--42 relative di pointer flex items-center outline-0 ma2 valueWrapper"
             role="button"
             tabindex="0"
           >
@@ -129,7 +129,7 @@ exports[`<SKUSelector /> should consider order from skuSpecifications 1`] = `
             </div>
           </div>
           <div
-            class="skuSelectorItem skuSelectorItem--41 skuSelectorItem--selected relative di pointer flex items-center outline-0 ma2"
+            class="skuSelectorItem skuSelectorItem--41 skuSelectorItem--selected relative di pointer flex items-center outline-0 ma2 valueWrapper"
             role="button"
             tabindex="0"
           >

diff --git a/react/__tests__/components/__snapshots__/SearchBar.test.js.snap b/react/__tests__/components/__snapshots__/SearchBar.test.js.snap
@@ -35,6 +35,7 @@ exports[`<SearchBar /> should match snapshot 1`] = `
                 class="suffixWrapper flex h-100"
               >
                 <button
+                  aria-label="Search Products"
                   class=" searchBarIcon searchBarIcon--search flex items-center pointer bn bg-transparent outline-0 pv0 pl0 pr3"
                 >
                   <div

diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx
@@ -161,13 +161,15 @@ const parseOptionNameToDisplayOption =
 
     if (possibleItems.length > 0) {
       // This is a valid combination option
-      const [item] = possibleItems
+      const availableItems = possibleItems.filter(isSkuAvailable)
+      const [item] = availableItems || possibleItems
+
       const callbackFn = onSelectItemMemo({
         name: variationName,
         value: variationValue.name,
         skuId: item.itemId,
         isMainAndImpossible: false,
-        possibleItems,
+        possibleItems: availableItems ?? possibleItems,
       })
 
       return {
@@ -176,7 +178,7 @@ const parseOptionNameToDisplayOption =
         onSelectItem: callbackFn,
         image,
         available: showItemAsAvailable({
-          possibleItems,
+          possibleItems: availableItems ?? possibleItems,
           selectedVariations,
           variationCount,
           isSelected,
@@ -248,13 +250,16 @@ const variationNameToDisplayVariation =
       const allNumbers = options.every(
         (option: any) => !Number.isNaN(option.label)
       )
+
       options.sort((a: any, b: any) => {
         if (allNumbers) {
           return a.label - b.label
         }
+
         return a.label < b.label ? -1 : a.label > b.label ? 1 : 0
       })
     }
+
     return { name, originalName, options }
   }
 

diff --git a/react/package.json b/react/package.json
@@ -47,9 +47,9 @@
     "apollo-cache-inmemory": "^1.4.3",
     "babel-eslint": "^10.1.0",
     "typescript": "3.9.7",
-    "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.22.8/public/@types/vtex.address-form",
-    "vtex.apps-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.15.0/public/@types/vtex.apps-graphql",
-    "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.49.0/public/@types/vtex.checkout-resources",
+    "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.25.5/public/@types/vtex.address-form",
+    "vtex.apps-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.17.4/public/@types/vtex.apps-graphql",
+    "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.50.0/public/@types/vtex.checkout-resources",
     "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.1/public/@types/vtex.css-handles",
     "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.device-detector@0.2.6/public/@types/vtex.device-detector",
     "vtex.format-currency": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.format-currency@0.4.1/public/@types/vtex.format-currency",
@@ -61,17 +61,18 @@
     "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-manager@1.9.0/public/@types/vtex.pixel-manager",
     "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.1/public/@types/vtex.product-context",
     "vtex.react-portal": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-portal@0.4.1/public/@types/vtex.react-portal",
-    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.2/public/@types/vtex.render-runtime",
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.11/public/@types/vtex.render-runtime",
     "vtex.responsive-values": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-values@0.4.2/public/@types/vtex.responsive-values",
     "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.16.0/public/@types/vtex.rich-text",
-    "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.58.0/public/@types/vtex.search-graphql",
-    "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.2.3/public/@types/vtex.shipping-estimate-translator",
-    "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.4/public/@types/vtex.slider-layout",
-    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql",
+    "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.64.0/public/@types/vtex.search-graphql",
+    "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.3.0/public/@types/vtex.shipping-estimate-translator",
+    "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.6/public/@types/vtex.slider-layout",
+    "vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.175.1/public/@types/vtex.store-components",
+    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.172.1/public/@types/vtex.store-graphql",
     "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons",
-    "vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.20.0/public/@types/vtex.store-image",
-    "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.93.0/public/@types/vtex.store-resources",
-    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide"
+    "vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.22.3/public/@types/vtex.store-image",
+    "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.100.0/public/@types/vtex.store-resources",
+    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.13/public/@types/vtex.styleguide"
   },
   "resolutions": {
     "json-schema": "^0.4.0",
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,6 +35,7 @@ exports[`<SearchBar /> should match snapshot 1`] = ` @@
                     class="suffixWrapper flex h-100"
                   >
                     <button
+                      aria-label="Search Products"
                       class=" searchBarIcon searchBarIcon--search flex items-center pointer bn bg-transparent outline-0 pv0 pl0 pr3"
                     >
                       <div
@@ Expand Down @@