From 89bd6c81e9afae9face860442f5c15ace08c7cee Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Mon, 23 Mar 2020 23:20:26 -0300
Subject: [PATCH 01/14] feat(b-navbar-toggle): make default slot scoped

---
 src/components/navbar/navbar-toggle.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js
index 74282149d29..0955b5e0bb7 100644
--- a/src/components/navbar/navbar-toggle.js
+++ b/src/components/navbar/navbar-toggle.js
@@ -5,7 +5,10 @@ import { getComponentConfig } from '../../utils/config'
 
 const NAME = 'BNavbarToggle'
 
-// TODO: Switch to using VBToggle directive, will reduce code footprint
+// TODO:
+//  Switch to using VBToggle directive, will reduce code footprint
+//  Although the click event will no longer be cancellable
+//  Instead add `disabled` prop
 
 // Events we emit on $root
 const EVENT_TOGGLE = 'bv::toggle::collapse'
@@ -52,6 +55,7 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
+    const expanded = this.toggleState
     return h(
       'button',
       {
@@ -60,11 +64,11 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({
           type: 'button',
           'aria-label': this.label,
           'aria-controls': this.target,
-          'aria-expanded': this.toggleState ? 'true' : 'false'
+          'aria-expanded': expanded ? 'true' : 'false'
         },
         on: { click: this.onClick }
       },
-      [this.normalizeSlot('default') || h('span', { class: ['navbar-toggler-icon'] })]
+      [this.normalizeSlot('default', { expanded }) || h('span', { class: ['navbar-toggler-icon'] })]
     )
   }
 })

From 56d3f625a7e1b97eda04685c352acfd3c7b72911 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Mon, 23 Mar 2020 23:28:26 -0300
Subject: [PATCH 02/14] Update package.json

---
 src/components/navbar/package.json | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/navbar/package.json b/src/components/navbar/package.json
index dbb8b881b18..563ba0a9398 100644
--- a/src/components/navbar/package.json
+++ b/src/components/navbar/package.json
@@ -86,6 +86,20 @@
               }
             ]
           }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Alternate content to replace the default Bootstrap hamburger",
+            "scope": [
+              {
+                "prop": "expanded",
+                "version": "2.9.0",
+                "type": "Boolean",
+                "description": "`true` if the collapse is expanded, `false` otherwise."
+              }
+            ]
+          }
         ]
       }
     ]

From 03728b15df57e144133b84409460ecb763aa363a Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Mon, 23 Mar 2020 23:31:36 -0300
Subject: [PATCH 03/14] Update toggle.js

---
 src/directives/toggle/toggle.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/directives/toggle/toggle.js b/src/directives/toggle/toggle.js
index 32ae2a35713..d5377911476 100644
--- a/src/directives/toggle/toggle.js
+++ b/src/directives/toggle/toggle.js
@@ -13,17 +13,17 @@ const BV_TOGGLE_CONTROLS = '__BV_toggle_CONTROLS__'
 const BV_TOGGLE_TARGETS = '__BV_toggle_TARGETS__'
 
 // Emitted control event for collapse (emitted to collapse)
-const EVENT_TOGGLE = 'bv::toggle::collapse'
+export const EVENT_TOGGLE = 'bv::toggle::collapse'
 
 // Listen to event for toggle state update (emitted by collapse)
-const EVENT_STATE = 'bv::collapse::state'
+export const EVENT_STATE = 'bv::collapse::state'
 
 // Private event emitted on $root to ensure the toggle state is always synced.
 // Gets emitted even if the state of b-collapse has not changed.
 // This event is NOT to be documented as people should not be using it.
-const EVENT_STATE_SYNC = 'bv::collapse::sync::state'
+export const EVENT_STATE_SYNC = 'bv::collapse::sync::state'
 // Private event we send to collapse to request state update sync event
-const EVENT_STATE_REQUEST = 'bv::request::collapse::state'
+export const EVENT_STATE_REQUEST = 'bv::request::collapse::state'
 
 // Reset and remove a property from the provided element
 const resetProp = (el, prop) => {

From e5ec2805f00ca13197070e1c8643a0ed87a4b866 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Mon, 23 Mar 2020 23:34:03 -0300
Subject: [PATCH 04/14] Update navbar-toggle.js

---
 src/components/navbar/navbar-toggle.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js
index 0955b5e0bb7..dd230fe42f6 100644
--- a/src/components/navbar/navbar-toggle.js
+++ b/src/components/navbar/navbar-toggle.js
@@ -2,6 +2,7 @@ import Vue from '../../utils/vue'
 import listenOnRootMixin from '../../mixins/listen-on-root'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { getComponentConfig } from '../../utils/config'
+import { EVENT_TOGGLE, EVENT_STATE, EVENT_STATE_SYNC } from '../../directives/toggle/toggle'
 
 const NAME = 'BNavbarToggle'
 
@@ -10,14 +11,6 @@ const NAME = 'BNavbarToggle'
 //  Although the click event will no longer be cancellable
 //  Instead add `disabled` prop
 
-// Events we emit on $root
-const EVENT_TOGGLE = 'bv::toggle::collapse'
-
-// Events we listen to on $root
-const EVENT_STATE = 'bv::collapse::state'
-// This private event is NOT to be documented as people should not be using it.
-const EVENT_STATE_SYNC = 'bv::collapse::sync::state'
-
 // @vue/component
 export const BNavbarToggle = /*#__PURE__*/ Vue.extend({
   name: NAME,

From ebaa4fcbd376a0647e1d49b1b14ceb28bcef0c73 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Mon, 23 Mar 2020 23:57:39 -0300
Subject: [PATCH 05/14] Update collapse.js

---
 src/components/collapse/collapse.js | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js
index 7ad53694992..7fd3dbbf658 100644
--- a/src/components/collapse/collapse.js
+++ b/src/components/collapse/collapse.js
@@ -6,17 +6,15 @@ import { BVCollapse } from '../../utils/bv-collapse'
 import idMixin from '../../mixins/id'
 import listenOnRootMixin from '../../mixins/listen-on-root'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
+import {
+  EVENT_TOGGLE,
+  EVENT_STATE,
+  EVENT_STATE_REQUEST,
+  EVENT_STATE_SYNC
+} from '../../directives/toggle/toggle'
 
-// Events we emit on $root
-const EVENT_STATE = 'bv::collapse::state'
+// Accordion event name we emit on $root
 const EVENT_ACCORDION = 'bv::collapse::accordion'
-// Private event we emit on `$root` to ensure the toggle state is
-// always synced. It gets emitted even if the state has not changed!
-// This event is NOT to be documented as people should not be using it
-const EVENT_STATE_SYNC = 'bv::collapse::sync::state'
-// Events we listen to on `$root`
-const EVENT_TOGGLE = 'bv::toggle::collapse'
-const EVENT_STATE_REQUEST = 'bv::request::collapse::state'
 
 // @vue/component
 export const BCollapse = /*#__PURE__*/ Vue.extend({

From 2b1a34d6bcd6975e6ab34c8dc766e99ea6d24859 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 00:41:31 -0300
Subject: [PATCH 06/14] Update README.md

---
 src/components/navbar/README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/navbar/README.md b/src/components/navbar/README.md
index 1693244e73d..d087fee7901 100644
--- a/src/components/navbar/README.md
+++ b/src/components/navbar/README.md
@@ -281,6 +281,12 @@ will reverse the placement of the toggler.
 See the first example on this page for reference, and also refer to
 [`<b-collapse>`](/docs/components/collapse) for details on the collapse component.
 
+`<b-navbar-toggle>` renders the default Bootstrap v4 _hamburger_ (which is a background SVG image).
+You can supply your own content (such as an icon) via the optinally scoped `default` slot. The
+default slot scope contains the property `expanded`, which will be `true` when the collapse is
+expanded, or `false` when the collapse is collapsed. You can use this to swap the toggle content
+based on the collaspe state.
+
 ## Printing
 
 Navbars are hidden by default when printing. Force them to be printed by setting the `print` prop.

From b899e11dcdd4ca7a7ee511181c1212fbddad0702 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 01:25:39 -0300
Subject: [PATCH 07/14] Update navbar-toggle.js

---
 src/components/navbar/navbar-toggle.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js
index dd230fe42f6..5794564ee3c 100644
--- a/src/components/navbar/navbar-toggle.js
+++ b/src/components/navbar/navbar-toggle.js
@@ -7,9 +7,10 @@ import { EVENT_TOGGLE, EVENT_STATE, EVENT_STATE_SYNC } from '../../directives/to
 const NAME = 'BNavbarToggle'
 
 // TODO:
-//  Switch to using VBToggle directive, will reduce code footprint
-//  Although the click event will no longer be cancellable
-//  Instead add `disabled` prop
+//  Switch to using `VBToggle` directive, will reduce code footprint
+//  Although the `click` event will no longer be cancellable
+//  Instead add `disabled` prop, and have `VBToggle` check element
+//  disabled state
 
 // @vue/component
 export const BNavbarToggle = /*#__PURE__*/ Vue.extend({

From 3327fb87539fafd81c817ec44136c32ee19cd74c Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 01:28:38 -0300
Subject: [PATCH 08/14] Update README.md

---
 src/components/navbar/README.md | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/navbar/README.md b/src/components/navbar/README.md
index d087fee7901..78e88f03bde 100644
--- a/src/components/navbar/README.md
+++ b/src/components/navbar/README.md
@@ -285,7 +285,32 @@ See the first example on this page for reference, and also refer to
 You can supply your own content (such as an icon) via the optinally scoped `default` slot. The
 default slot scope contains the property `expanded`, which will be `true` when the collapse is
 expanded, or `false` when the collapse is collapsed. You can use this to swap the toggle content
-based on the collaspe state.
+based on the collaspe state:
+
+```html
+<template>
+  <b-navbar toggleable type="dark" variant="dark">
+    <b-navbar-brand href="#">NavBar</b-navbar-brand>
+
+    <b-navbar-toggle target="navbar-toggle-collapse">
+      <template v-slot:default="{ expanded }">
+        <b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>
+        <b-icon v-else icon="chevron-bar-down"></b-icon>
+      </template>
+    </b-navbar-toggle>
+
+    <b-collapse id="navbar-toggle-collapse" is-nav>
+      <b-navbar-nav class="ml-auto">
+        <b-nav-item href="#">Link 1</b-nav-item>
+        <b-nav-item href="#">Link 2</b-nav-item>
+        <b-nav-item href="#" disabled>Disabled</b-nav-item>
+      </b-navbar-nav>
+    </b-collapse>
+  </b-navbar>
+</template>
+
+<!-- b-navbar-toggle-slot.vue -->
+```
 
 ## Printing
 

From 55e02064d8989e62fb8ca9982c5fa835012f5275 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 01:30:07 -0300
Subject: [PATCH 09/14] Update README.md

---
 src/components/navbar/README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/navbar/README.md b/src/components/navbar/README.md
index 78e88f03bde..586bd50286e 100644
--- a/src/components/navbar/README.md
+++ b/src/components/navbar/README.md
@@ -281,6 +281,8 @@ will reverse the placement of the toggler.
 See the first example on this page for reference, and also refer to
 [`<b-collapse>`](/docs/components/collapse) for details on the collapse component.
 
+#### Custom navbar toggle
+
 `<b-navbar-toggle>` renders the default Bootstrap v4 _hamburger_ (which is a background SVG image).
 You can supply your own content (such as an icon) via the optinally scoped `default` slot. The
 default slot scope contains the property `expanded`, which will be `true` when the collapse is

From 027fefe7675bd0a7fa1fa9e86f4e9518a2742ca4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Tue, 24 Mar 2020 08:58:11 +0100
Subject: [PATCH 10/14] Update navbar-toggle.js

---
 src/components/navbar/navbar-toggle.js | 28 +++++++++++++++++---------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js
index 5794564ee3c..94e5bca8e8c 100644
--- a/src/components/navbar/navbar-toggle.js
+++ b/src/components/navbar/navbar-toggle.js
@@ -1,17 +1,22 @@
 import Vue from '../../utils/vue'
+import { getComponentConfig } from '../../utils/config'
+import { toString } from '../../utils/string'
 import listenOnRootMixin from '../../mixins/listen-on-root'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
-import { getComponentConfig } from '../../utils/config'
 import { EVENT_TOGGLE, EVENT_STATE, EVENT_STATE_SYNC } from '../../directives/toggle/toggle'
 
-const NAME = 'BNavbarToggle'
-
 // TODO:
-//  Switch to using `VBToggle` directive, will reduce code footprint
-//  Although the `click` event will no longer be cancellable
-//  Instead add `disabled` prop, and have `VBToggle` check element
-//  disabled state
+//   Switch to using `VBToggle` directive, will reduce code footprint
+//   Although the `click` event will no longer be cancellable
+//   Instead add `disabled` prop, and have `VBToggle` check element
+//   disabled state
+
+// --- Constants ---
+
+const NAME = 'BNavbarToggle'
+const CLASS_NAME = 'navbar-toggler'
 
+// --- Main component ---
 // @vue/component
 export const BNavbarToggle = /*#__PURE__*/ Vue.extend({
   name: NAME,
@@ -53,16 +58,19 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({
     return h(
       'button',
       {
-        class: ['navbar-toggler'],
+        staticClass: CLASS_NAME,
         attrs: {
           type: 'button',
           'aria-label': this.label,
           'aria-controls': this.target,
-          'aria-expanded': expanded ? 'true' : 'false'
+          'aria-expanded': toString(expanded)
         },
         on: { click: this.onClick }
       },
-      [this.normalizeSlot('default', { expanded }) || h('span', { class: ['navbar-toggler-icon'] })]
+      [
+        this.normalizeSlot('default', { expanded }) ||
+          h('span', { staticClass: `${CLASS_NAME}-icon` })
+      ]
     )
   }
 })

From 8206089f2df90050b94287fee1fd3cc12e51f323 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Tue, 24 Mar 2020 08:59:21 +0100
Subject: [PATCH 11/14] Update README.md

---
 src/components/navbar/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/navbar/README.md b/src/components/navbar/README.md
index 586bd50286e..ab3a510e663 100644
--- a/src/components/navbar/README.md
+++ b/src/components/navbar/README.md
@@ -284,10 +284,10 @@ See the first example on this page for reference, and also refer to
 #### Custom navbar toggle
 
 `<b-navbar-toggle>` renders the default Bootstrap v4 _hamburger_ (which is a background SVG image).
-You can supply your own content (such as an icon) via the optinally scoped `default` slot. The
+You can supply your own content (such as an icon) via the optionally scoped `default` slot. The
 default slot scope contains the property `expanded`, which will be `true` when the collapse is
 expanded, or `false` when the collapse is collapsed. You can use this to swap the toggle content
-based on the collaspe state:
+based on the collapse state:
 
 ```html
 <template>

From 832e1c4dafbcf37f74ee233cc0c2ca69b3ae97ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Tue, 24 Mar 2020 09:01:35 +0100
Subject: [PATCH 12/14] Update collapse.js

---
 src/components/collapse/collapse.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js
index 7fd3dbbf658..b71211fb89e 100644
--- a/src/components/collapse/collapse.js
+++ b/src/components/collapse/collapse.js
@@ -1,8 +1,8 @@
 import Vue from '../../utils/vue'
-import { isBrowser } from '../../utils/env'
+import { BVCollapse } from '../../utils/bv-collapse'
 import { addClass, hasClass, removeClass, closest, matches, getCS } from '../../utils/dom'
+import { isBrowser } from '../../utils/env'
 import { EVENT_OPTIONS_NO_CAPTURE, eventOnOff } from '../../utils/events'
-import { BVCollapse } from '../../utils/bv-collapse'
 import idMixin from '../../mixins/id'
 import listenOnRootMixin from '../../mixins/listen-on-root'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
@@ -13,9 +13,12 @@ import {
   EVENT_STATE_SYNC
 } from '../../directives/toggle/toggle'
 
-// Accordion event name we emit on $root
+// --- Constants ---
+
+// Accordion event name we emit on `$root`
 const EVENT_ACCORDION = 'bv::collapse::accordion'
 
+// --- Main component ---
 // @vue/component
 export const BCollapse = /*#__PURE__*/ Vue.extend({
   name: 'BCollapse',

From 65dd8b2c310b2957eb7b2dde0975ef9da86dce4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Tue, 24 Mar 2020 09:01:40 +0100
Subject: [PATCH 13/14] Update toggle.js

---
 src/directives/toggle/toggle.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/directives/toggle/toggle.js b/src/directives/toggle/toggle.js
index d5377911476..490371f369c 100644
--- a/src/directives/toggle/toggle.js
+++ b/src/directives/toggle/toggle.js
@@ -18,9 +18,9 @@ export const EVENT_TOGGLE = 'bv::toggle::collapse'
 // Listen to event for toggle state update (emitted by collapse)
 export const EVENT_STATE = 'bv::collapse::state'
 
-// Private event emitted on $root to ensure the toggle state is always synced.
-// Gets emitted even if the state of b-collapse has not changed.
-// This event is NOT to be documented as people should not be using it.
+// Private event emitted on `$root` to ensure the toggle state is always synced
+// Gets emitted even if the state of b-collapse has not changed
+// This event is NOT to be documented as people should not be using it
 export const EVENT_STATE_SYNC = 'bv::collapse::sync::state'
 // Private event we send to collapse to request state update sync event
 export const EVENT_STATE_REQUEST = 'bv::request::collapse::state'

From 68753b452ca8966d80f34f0f94deac38c2bcbcdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Tue, 24 Mar 2020 10:46:46 +0100
Subject: [PATCH 14/14] Update navbar-toggle.spec.js

---
 src/components/navbar/navbar-toggle.spec.js | 52 ++++++++++++++++-----
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/components/navbar/navbar-toggle.spec.js b/src/components/navbar/navbar-toggle.spec.js
index a052fe57270..5131a19ff19 100644
--- a/src/components/navbar/navbar-toggle.spec.js
+++ b/src/components/navbar/navbar-toggle.spec.js
@@ -5,7 +5,7 @@ describe('navbar-toggle', () => {
   it('default has tag "button"', async () => {
     const wrapper = mount(BNavbarToggle, {
       propsData: {
-        target: 'target'
+        target: 'target-1'
       }
     })
     expect(wrapper.is('button')).toBe(true)
@@ -14,7 +14,7 @@ describe('navbar-toggle', () => {
   it('default has class "navbar-toggler"', async () => {
     const wrapper = mount(BNavbarToggle, {
       propsData: {
-        target: 'target'
+        target: 'target-2'
       }
     })
     expect(wrapper.classes()).toContain('navbar-toggler')
@@ -24,11 +24,11 @@ describe('navbar-toggle', () => {
   it('default has default attributes', async () => {
     const wrapper = mount(BNavbarToggle, {
       propsData: {
-        target: 'target'
+        target: 'target-3'
       }
     })
     expect(wrapper.attributes('type')).toBe('button')
-    expect(wrapper.attributes('aria-controls')).toBe('target')
+    expect(wrapper.attributes('aria-controls')).toBe('target-3')
     expect(wrapper.attributes('aria-expanded')).toBe('false')
     expect(wrapper.attributes('aria-label')).toBe('Toggle navigation')
   })
@@ -36,7 +36,7 @@ describe('navbar-toggle', () => {
   it('default has inner button-close', async () => {
     const wrapper = mount(BNavbarToggle, {
       propsData: {
-        target: 'target'
+        target: 'target-4'
       }
     })
     expect(wrapper.find('span.navbar-toggler-icon')).toBeDefined()
@@ -45,17 +45,45 @@ describe('navbar-toggle', () => {
   it('accepts custom label when label prop is set', async () => {
     const wrapper = mount(BNavbarToggle, {
       propsData: {
-        target: 'target',
+        target: 'target-5',
         label: 'foobar'
       }
     })
     expect(wrapper.attributes('aria-label')).toBe('foobar')
   })
 
+  it('default slot scope works', async () => {
+    let scope = null
+    const wrapper = mount(BNavbarToggle, {
+      propsData: {
+        target: 'target-6'
+      },
+      scopedSlots: {
+        default(ctx) {
+          scope = ctx
+          return this.$createElement('div', 'foobar')
+        }
+      }
+    })
+
+    expect(scope).not.toBe(null)
+    expect(scope.expanded).toBe(false)
+
+    wrapper.vm.$root.$emit('bv::collapse::state', 'target-6', true)
+
+    expect(scope).not.toBe(null)
+    expect(scope.expanded).toBe(true)
+
+    wrapper.vm.$root.$emit('bv::collapse::state', 'target-6', false)
+
+    expect(scope).not.toBe(null)
+    expect(scope.expanded).toBe(false)
+  })
+
   it('emits click event', async () => {
     const wrapper = mount(BNavbarToggle, {
       propsData: {
-        target: 'target'
+        target: 'target-7'
       }
     })
     let rootClicked = false
@@ -77,22 +105,22 @@ describe('navbar-toggle', () => {
   it('sets aria-expanded when receives root emit for target', async () => {
     const wrapper = mount(BNavbarToggle, {
       propsData: {
-        target: 'target'
+        target: 'target-8'
       }
     })
 
     // Private state event
-    wrapper.vm.$root.$emit('bv::collapse::state', 'target', true)
+    wrapper.vm.$root.$emit('bv::collapse::state', 'target-8', true)
     expect(wrapper.attributes('aria-expanded')).toBe('true')
-    wrapper.vm.$root.$emit('bv::collapse::state', 'target', false)
+    wrapper.vm.$root.$emit('bv::collapse::state', 'target-8', false)
     expect(wrapper.attributes('aria-expanded')).toBe('false')
     wrapper.vm.$root.$emit('bv::collapse::state', 'foo', true)
     expect(wrapper.attributes('aria-expanded')).toBe('false')
 
     // Private sync event
-    wrapper.vm.$root.$emit('bv::collapse::sync::state', 'target', true)
+    wrapper.vm.$root.$emit('bv::collapse::sync::state', 'target-8', true)
     expect(wrapper.attributes('aria-expanded')).toBe('true')
-    wrapper.vm.$root.$emit('bv::collapse::sync::state', 'target', false)
+    wrapper.vm.$root.$emit('bv::collapse::sync::state', 'target-8', false)
     expect(wrapper.attributes('aria-expanded')).toBe('false')
     wrapper.vm.$root.$emit('bv::collapse::sync::state', 'foo', true)
     expect(wrapper.attributes('aria-expanded')).toBe('false')