From 55263817c628fb659065548b68a9e764c0fec344 Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Tue, 4 Feb 2020 18:32:23 +0200
Subject: [PATCH] fix: add primary-section-changed event

---
 src/vaadin-app-layout-mixin.ts | 10 ++++++++++
 test/unit/app-layout.test.ts   | 28 ++++++++++++++++++++++------
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/vaadin-app-layout-mixin.ts b/src/vaadin-app-layout-mixin.ts
index cd6e446..1b92114 100644
--- 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
index 2226611..5fe53fd 100644
--- 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;