🐛 [bento][amp-accordion] Update accordion to dispatch event with corr…

…ect name (#32141) * Fix a bug in bento accordion * Add spy functions * Separate tests for listening to events
ampproject · Jan 26, 2021 · 21fb02d · 21fb02d
1 parent f51746b
commit 21fb02d
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 1 deletion.
diff --git a/extensions/amp-accordion/1.0/amp-accordion.js b/extensions/amp-accordion/1.0/amp-accordion.js
@@ -175,7 +175,7 @@ function getExpandStateTrigger(section) {
       dict()
     );
     action.trigger(section, eventName, event, ActionTrust.HIGH);
-    dispatchCustomEvent(section, name);
+    dispatchCustomEvent(section, eventName);
   };
   return triggerEvent;
 }

diff --git a/extensions/amp-accordion/1.0/test/test-amp-accordion.js b/extensions/amp-accordion/1.0/test/test-amp-accordion.js
@@ -495,6 +495,64 @@ describes.realWin(
         expect(section2).to.not.have.attribute('expanded');
         expect(section3).to.have.attribute('expanded');
       });
+
+      it('should capture events in bento mode (w/o "on" attribute)', async () => {
+        const section1 = element.children[0];
+        const section3 = element.children[2];
+
+        // Set up section 1 to trigger expand of section 3 on expand
+        // and collapse of section 3 on collapse
+        const api = await element.getApi();
+        section1.addEventListener('expand', () => api.expand('section3'));
+        section1.addEventListener('collapse', () => api.collapse('section3'));
+
+        // initally both section 1 and 3 are collapsed
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+
+        // expand section 1
+        section1.firstElementChild.click();
+        await waitForExpanded(section1, true);
+
+        // both section 1 and 3 are expanded
+        expect(section1).to.have.attribute('expanded');
+        expect(section3).to.have.attribute('expanded');
+
+        // collapse section 1
+        section1.firstElementChild.click();
+        await waitForExpanded(section1, false);
+
+        // both section 1 and 3 are collapsed
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+      });
+
+      it('should fire and listen for "expand" and "collapse" events', async () => {
+        const section1 = element.children[0];
+
+        // Add spy functions for expand and collapse
+        const spyE = env.sandbox.spy();
+        const spyC = env.sandbox.spy();
+        section1.addEventListener('expand', spyE);
+        section1.addEventListener('collapse', spyC);
+
+        expect(spyE).to.not.be.called;
+        expect(spyC).to.not.be.called;
+
+        // expand section 1
+        section1.firstElementChild.click();
+        await waitForExpanded(section1, true);
+
+        expect(spyE).to.be.calledOnce;
+        expect(spyC).to.not.be.called;
+
+        // collapse section 1
+        section1.firstElementChild.click();
+        await waitForExpanded(section1, false);
+
+        expect(spyE).to.be.calledOnce;
+        expect(spyC).to.be.calledOnce;
+      });
     });
 
     describe('animate', () => {