fix: add primary-section-changed event

vaadin · Feb 5, 2020 · 5526381 · 5526381
1 parent d1d26d2
commit 5526381
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/src/vaadin-app-layout-mixin.ts b/src/vaadin-app-layout-mixin.ts
@@ -209,6 +209,16 @@ export const AppLayoutMixin = <T extends Constructor<LitElement>>(
           })
         );
       }
+
+      if (props.has('primarySection')) {
+        this.dispatchEvent(
+          new CustomEvent('primary-section-changed', {
+            detail: {
+              value: this.primarySection
+            }
+          })
+        );
+      }
     }
 
     protected _sizeChanged(contentRect: DOMRect) {

diff --git a/test/unit/app-layout.test.ts b/test/unit/app-layout.test.ts
@@ -57,6 +57,28 @@ describe('app-layout', () => {
     });
   });
 
+  describe('primarySection', () => {
+    beforeEach(async () => {
+      layout = await fixture(html`
+        <vaadin-app-layout></vaadin-app-layout>
+      `);
+    });
+
+    it('should fire "primary-section-changed" event when property changes', async () => {
+      const spy = sinon.spy();
+      layout.addEventListener('primary-section-changed', spy);
+      layout.primarySection = 'drawer';
+      await layout.updateComplete;
+      expect(spy).to.be.calledOnce;
+    });
+
+    it('should fallback to navbar if invalid "primarySection" is set', async () => {
+      layout.primarySection = 'foobar';
+      await layout.updateComplete;
+      expect(layout.primarySection).to.be.equal('navbar');
+    });
+  });
+
   describe('drawer', () => {
     let drawer: Element;
 
@@ -93,12 +115,6 @@ describe('app-layout', () => {
       expect(layout.drawerOpened).to.be.not.equal(currentDrawerState);
     });
 
-    it('should fallback to navbar if invalid "primarySection" is set', async () => {
-      layout.primarySection = 'foobar';
-      await layout.updateComplete;
-      expect(layout.primarySection).to.be.equal('navbar');
-    });
-
     it('should fire "drawer-opened-changed" event when opening drawer', async () => {
       layout.drawerOpened = false;
       await layout.updateComplete;