✨amp-story-shopping Set active product in store service for product t…

…ag. (#37103) * backup - do not merge yet * wokring buttons * added onlick even that changes the store service for the shopping tag product * added in unit test for shopping product * added back in laodfonts to earlier part of the code * removed some unessesary varaibles * added in correct params for shoppingconfigdata * compactified unit test for circleci * cleanup files nad unit tests * updated unit tests even further * added active product * added reference so that element is only rendred once. * added simulation of onclick event * added lcick simulation * added type * removed call to store service * fixed some small nits with types and calls to private methods
ampproject · Dec 22, 2021 · 5d28265 · 5d28265
1 parent 18c57b2
commit 5d28265
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 8 deletions.
diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js
@@ -5,6 +5,8 @@ import {Services} from '#service';
 
 import {CSS as shoppingTagCSS} from '../../../build/amp-story-shopping-tag-0.1.css';
 import {
+  Action,
+  ShoppingConfigDataDef,
   ShoppingDataDef,
   StateProperty,
 } from '../../amp-story/1.0/amp-story-store-service';
@@ -24,8 +26,17 @@ const FONTS_TO_LOAD = [
   },
 ];
 
-const renderShoppingTagTemplate = (tagData) => (
-  <div class="amp-story-shopping-tag-inner">
+/**
+ * @param {!ShoppingConfigDataDef} tagData
+ * @param {function(!ShoppingConfigDataDef): undefined} onClick
+ * @return {!Element}
+ */
+const renderShoppingTagTemplate = (tagData, onClick) => (
+  <div
+    class="amp-story-shopping-tag-inner"
+    role="button"
+    onClick={() => onClick(tagData)}
+  >
     <span class="amp-story-shopping-tag-dot"></span>
     <span class="amp-story-shopping-tag-pill">
       <span
@@ -50,6 +61,9 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
     super(element);
     /** @private @const {?../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */
     this.storeService_ = null;
+
+    /** @param {boolean} element */
+    this.hasAppendedInnerShoppingTagEl_ = false;
   }
 
   /** @override */
@@ -70,6 +84,16 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
     );
   }
 
+  /**
+   * @param {!ShoppingConfigDataDef} tagData
+   * @private
+   */
+  onClick_(tagData) {
+    this.storeService_.dispatch(Action.ADD_SHOPPING_DATA, {
+      'activeProductData': tagData,
+    });
+  }
+
   /** @override */
   isLayoutSupported(layout) {
     return layout === Layout_Enum.CONTAINER;
@@ -81,15 +105,16 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
    */
   createAndAppendInnerShoppingTagEl_(shoppingData) {
     const tagData = shoppingData[this.element.getAttribute('data-tag-id')];
-    if (!tagData) {
+    if (this.hasAppendedInnerShoppingTagEl_ || !tagData) {
       return;
     }
     this.mutateElement(() => {
       createShadowRootWithStyle(
         this.element,
-        renderShoppingTagTemplate(tagData),
+        renderShoppingTagTemplate(tagData, (tagData) => this.onClick_(tagData)),
         shoppingTagCSS
       );
+      this.hasAppendedInnerShoppingTagEl_ = true;
     });
   }
 

diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js
@@ -5,6 +5,7 @@ import '../amp-story-shopping';
 import {registerServiceBuilder} from '../../../../src/service-helpers';
 import {
   Action,
+  StateProperty,
   getStoreService,
 } from '../../../amp-story/1.0/amp-story-store-service';
 
@@ -24,12 +25,10 @@ describes.realWin(
 
     beforeEach(async () => {
       win = env.win;
-
       storeService = getStoreService(win);
       registerServiceBuilder(win, 'story-store', function () {
         return storeService;
       });
-
       await createAmpStoryShoppingTag();
     });
 
@@ -41,10 +40,8 @@ describes.realWin(
         'amp-story-shopping-tag',
         {'layout': 'container'}
       );
-
       pageEl.appendChild(element);
       win.document.body.appendChild(pageEl);
-
       shoppingTag = await element.getImpl();
     }
 
@@ -75,5 +72,23 @@ describes.realWin(
       expect(shoppingTag.element.textContent).to.be.empty;
       expect(shoppingTag.isLayoutSupported(Layout_Enum.CONTAINER)).to.be.true;
     });
+
+    it('should set active product in store service when shopping tag is clicked', async () => {
+      const tagData = {
+        'product-tag-id': 'sunglasses',
+        'product-title': 'Spectacular Spectacles',
+        'product-price': '400',
+        'product-icon':
+          '/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png',
+      };
+
+      await shoppingTag.element.click();
+
+      env.sandbox.stub(shoppingTag, 'mutateElement').callsFake(() => {
+        expect(
+          storeService.get(StateProperty.SHOPPING_DATA['activeProductData'])
+        ).to.deep.equal(tagData);
+      });
+    });
   }
 );
diff --git a/extensions/amp-story/1.0/amp-story-store-service.js b/extensions/amp-story/1.0/amp-story-store-service.js
@@ -81,6 +81,7 @@ export let ShoppingConfigDataDef;
 
 /**
  * @typedef {{
+ *  activeProductData: ShoppingConfigDataDef,
  *  items: !Map<string, !ShoppingConfigDataDef>,
  * }}
  */