Merge pull request #317 from chrismayer/force-sidebar-open-state

Extend 'sidebar-toggle' event to force open state

app-starter/components/AppSidebar.vue

@@ -16,16 +16,16 @@
           absolute
           top
           color="secondary"
-          @click="sidebarOpen = !sidebarOpen"> 
-          <v-icon color="onsecondary" v-if="sidebarOpen">chevron_left</v-icon> 
-          <v-icon color="onsecondary" v-else>chevron_right</v-icon> 
+          @click="sidebarOpen = !sidebarOpen">
+          <v-icon color="onsecondary" v-if="sidebarOpen">chevron_left</v-icon>
+          <v-icon color="onsecondary" v-else>chevron_right</v-icon>
         </v-btn>
       </template>
       <!-- Invisible sidebar resizer -->
       <div v-if="resizable"
         class="wgu-app-sidebar-resizer"
         @mousedown.prevent="onResize"
-      /> 
+      />
   </v-navigation-drawer>
 </template>
 
@@ -57,8 +57,13 @@ export default {
     WguEventBus.$on('sidebar-scroll', comp => {
       this.scrollTo(comp);
     });
-    WguEventBus.$on('sidebar-toggle', () => {
-      this.sidebarOpen = !this.sidebarOpen;
+    WguEventBus.$on('sidebar-toggle', (open) => {
+      // toggle or force a opening state of the sidebar
+      if (typeof open === 'boolean') {
+        this.sidebarOpen = open;
+      } else {
+        this.sidebarOpen = !this.sidebarOpen;
+      }
     });
   },
   methods: {

test/unit/specs/components/AppSidebar.spec.js

@@ -0,0 +1,36 @@
+import AppSidebar from 'APP/components/AppSidebar';
+import { WguEventBus } from '@/WguEventBus';
+import { shallowMount } from '@vue/test-utils';
+
+describe('AppSidebar.vue', () => {
+  describe('data', () => {
+    let comp;
+    let vm;
+    beforeEach(() => {
+      comp = shallowMount(AppSidebar);
+      vm = comp.vm;
+    });
+
+    it('has correct default data', () => {
+      expect(vm.sidebarOpen).to.equal(true);
+    });
+  });
+
+  describe('events', () => {
+    let comp;
+    let vm;
+    beforeEach(() => {
+      comp = shallowMount(AppSidebar);
+      vm = comp.vm;
+    });
+
+    it('event "sidebar-toggle" forces correct open state', () => {
+      // force closing sidebar by adding 'false' parameter
+      WguEventBus.$emit('sidebar-toggle', false);
+      expect(vm.sidebarOpen).to.equal(false);
+      // toggle sidebar open state by skipping parameter
+      WguEventBus.$emit('sidebar-toggle');
+      expect(vm.sidebarOpen).to.equal(true);
+    });
+  });
+});