diff --git a/CHANGELOG.md b/CHANGELOG.md index 6d4ce0478..e00f40e0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Changed + +- Default selection logic in `SKU Selector` component to prioritize available SKUs. + ## [3.175.1] - 2024-09-11 ### Fixed diff --git a/react/__mocks__/vtex.render-runtime.js b/react/__mocks__/vtex.render-runtime.js index 7646d6f43..632b22456 100644 --- 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 index 96899bf69..db29415b9 100644 --- a/react/__tests__/components/SKUSelector.test.tsx +++ b/react/__tests__/components/SKUSelector.test.tsx @@ -4,6 +4,7 @@ import { useProduct, ProductContext } from 'vtex.product-context' import { getSKU } from 'sku-helper' import SKUSelector from '../../components/SKUSelector/Wrapper' +import { orderItemsByAvailability } from '../../components/SKUSelector/components/SKUSelector' describe('', () => { const renderComponent = (customProps = {}) => { @@ -33,7 +34,10 @@ describe('', () => { }) 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', @@ -108,8 +112,48 @@ describe('', () => { expect(getByText('41')).toBeDefined() }) + it('should be able to order by availability', async () => { + const defaultSeller1 = { + sellerDefault: true, + commertialOffer: { Price: 15, AvailableQuantity: 0, ListPrice: 200 }, + } + + const defaultSeller2 = { + sellerDefault: true, + commertialOffer: { Price: 15, AvailableQuantity: 1, ListPrice: 200 }, + } + + const skuItems = [ + { + itemId: '1', + name: 'Gray Shoe', + variations: ['Size', 'Color'], + variationValues: { Size: '41', Color: 'Gray' }, + sellers: [defaultSeller1], + images: [], + }, + { + itemId: '2', + name: 'Gray Shoe', + variations: ['Size', 'Color'], + variationValues: { Size: '41', Color: 'Gray' }, + sellers: [defaultSeller2], + images: [], + }, + ] + + const possibleItemsOrderedByAvailability = skuItems.sort( + orderItemsByAvailability + ) + + expect(possibleItemsOrderedByAvailability[0].itemId).toEqual('2') + }) + 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 +217,10 @@ describe('', () => { }) 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 +684,10 @@ describe('', () => { }) 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 +1460,10 @@ describe('', () => { }) 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 +1473,7 @@ describe('', () => { { name: 'Color', values: ['Gray'] }, ], images: [], + sellers: [defaultSeller], }, { itemId: '4', @@ -1431,6 +1486,7 @@ describe('', () => { { name: 'Color', values: ['Gray'] }, ], images: [], + sellers: [defaultSeller], }, { itemId: '4', @@ -1443,6 +1499,7 @@ describe('', () => { { 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 index 99c5f4fb2..bcd6a7a24 100644 --- a/react/__tests__/components/__snapshots__/InfoCard.test.js.snap +++ b/react/__tests__/components/__snapshots__/InfoCard.test.js.snap @@ -236,6 +236,7 @@ exports[` 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[` 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 index c6aa3133a..08efc53c0 100644 --- a/react/__tests__/components/__snapshots__/SKUSelector.test.tsx.snap +++ b/react/__tests__/components/__snapshots__/SKUSelector.test.tsx.snap @@ -24,7 +24,7 @@ exports[` should consider order from skuSpecifications 1`] = ` class="skuSelectorOptionsList w-100 inline-flex flex-wrap ml2 items-center" >
@@ -45,7 +45,7 @@ exports[` should consider order from skuSpecifications 1`] = `
@@ -66,7 +66,7 @@ exports[` should consider order from skuSpecifications 1`] = `
@@ -108,7 +108,7 @@ exports[` should consider order from skuSpecifications 1`] = ` class="skuSelectorOptionsList w-100 inline-flex flex-wrap ml2 items-center" >
@@ -129,7 +129,7 @@ exports[` should consider order from skuSpecifications 1`] = `
diff --git a/react/__tests__/components/__snapshots__/SearchBar.test.js.snap b/react/__tests__/components/__snapshots__/SearchBar.test.js.snap index 67348110f..ce83af81e 100644 --- a/react/__tests__/components/__snapshots__/SearchBar.test.js.snap +++ b/react/__tests__/components/__snapshots__/SearchBar.test.js.snap @@ -35,6 +35,7 @@ exports[` should match snapshot 1`] = ` class="suffixWrapper flex h-100" >