Merge pull request #821 from shopgate/PWA-2230-variant-options

Reset selected options of product context, when changing a product on Product details page
shopgate · Sep 2, 2019 · ad88b7f · ad88b7f
2 parents 92ed72d + 441e089
commit ad88b7f
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 11 deletions.
diff --git a/themes/theme-gmd/pages/Product/components/Content/index.jsx b/themes/theme-gmd/pages/Product/components/Content/index.jsx
@@ -80,6 +80,10 @@ class ProductContent extends PureComponent {
       variantId,
       currency: nextProps.currency,
       quantity: 1,
+      ...productIdChanged && {
+        options: {},
+        optionsPrices: {},
+      },
     });
   }
 

diff --git a/themes/theme-gmd/pages/Product/components/Content/spec.jsx b/themes/theme-gmd/pages/Product/components/Content/spec.jsx
@@ -2,8 +2,13 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Content from './index';
 
+jest.mock('@shopgate/engage/a11y', () => ({
+  Section: () => null,
+}));
+
 jest.mock('@shopgate/engage/product', () => ({
   ProductProperties: () => null,
+  RelationsSlider: () => null,
 }));
 
 jest.mock('@shopgate/pwa-core', () => ({
@@ -22,14 +27,32 @@ jest.mock('Components/Reviews', () => () => null);
 jest.mock('./connector', () => Component => Component);
 
 describe('Product / Content', () => {
+  const expectedContext = {
+    productId: 'SG100',
+    quantity: 1,
+    options: {},
+    optionsPrices: {},
+  };
+
   it('should provide correct context value', () => {
     const wrapper = shallow(<Content productId="SG100" />);
+    expect(wrapper.find('ContextProvider').prop('value')).toEqual(expect.objectContaining(expectedContext));
+  });
+
+  it('should reset options on product update', () => {
+    const wrapper = shallow(<Content productId="SG100" />);
 
-    const expected = expect.objectContaining({
-      productId: 'SG100',
-      quantity: 1,
-    });
+    wrapper.update(wrapper.instance().setOption('op1', 'OP_V', 0));
+    expect(wrapper.find('ContextProvider').prop('value')).toEqual(expect.objectContaining({
+      ...expectedContext,
+      options: { op1: 'OP_V' },
+      optionsPrices: { op1: 0 },
+    }));
 
-    expect(wrapper.find('ContextProvider').prop('value')).toEqual(expected);
+    wrapper.update(wrapper.setProps({ productId: 'SG200' }));
+    expect(wrapper.find('ContextProvider').prop('value')).toEqual(expect.objectContaining({
+      ...expectedContext,
+      productId: 'SG200',
+    }));
   });
 });
diff --git a/themes/theme-ios11/pages/Product/components/Content/index.jsx b/themes/theme-ios11/pages/Product/components/Content/index.jsx
@@ -81,6 +81,10 @@ class ProductContent extends PureComponent {
       variantId,
       currency: nextProps.currency,
       quantity: 1,
+      ...productIdChanged && {
+        options: {},
+        optionsPrices: {},
+      },
     });
   }
 

diff --git a/themes/theme-ios11/pages/Product/components/Content/spec.jsx b/themes/theme-ios11/pages/Product/components/Content/spec.jsx
@@ -2,8 +2,12 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Content from './index';
 
+jest.mock('@shopgate/engage/a11y', () => ({
+  Section: () => null,
+}));
 jest.mock('@shopgate/engage/product', () => ({
   ProductProperties: () => null,
+  RelationsSlider: () => null,
 }));
 
 jest.mock('@shopgate/pwa-core', () => ({
@@ -23,14 +27,30 @@ jest.mock('Components/Reviews', () => () => null);
 jest.mock('./connector', () => Component => Component);
 
 describe('Product / Content', () => {
+  const expectedContext = {
+    productId: 'SG100',
+    quantity: 1,
+    options: {},
+    optionsPrices: {},
+  };
+
   it('should provide correct context value', () => {
     const wrapper = shallow(<Content productId="SG100" />);
+    expect(wrapper.find('ContextProvider').prop('value')).toEqual(expect.objectContaining(expectedContext));
+  });
 
-    const expected = expect.objectContaining({
-      productId: 'SG100',
-      quantity: 1,
-    });
-
-    expect(wrapper.find('ContextProvider').prop('value')).toEqual(expected);
+  it('should reset options on product update', () => {
+    const wrapper = shallow(<Content productId="SG100" />);
+    wrapper.update(wrapper.instance().setOption('op1', 'OP_V', 0));
+    expect(wrapper.find('ContextProvider').prop('value')).toEqual(expect.objectContaining({
+      ...expectedContext,
+      options: { op1: 'OP_V' },
+      optionsPrices: { op1: 0 },
+    }));
+    wrapper.update(wrapper.setProps({ productId: 'SG200' }));
+    expect(wrapper.find('ContextProvider').prop('value')).toEqual(expect.objectContaining({
+      ...expectedContext,
+      productId: 'SG200',
+    }));
   });
 });