1 files changed, 20 insertions, 1 deletions
diff --git a/spec/frontend/boards/components/config_toggle_spec.js b/spec/frontend/boards/components/config_toggle_spec.js
index 5330721451e..3d505038331 100644
--- a/spec/frontend/boards/components/config_toggle_spec.js
+++ b/spec/frontend/boards/components/config_toggle_spec.js
@@ -1,7 +1,9 @@
+// eslint-disable-next-line no-restricted-imports
 import Vuex from 'vuex';
 import Vue from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
 import ConfigToggle from '~/boards/components/config_toggle.vue';
 import eventHub from '~/boards/eventhub';
 import store from '~/boards/stores';
@@ -12,13 +14,14 @@ describe('ConfigToggle', () => {
 
   Vue.use(Vuex);
 
-  const createComponent = (provide = {}) =>
+  const createComponent = (provide = {}, props = {}) =>
     shallowMount(ConfigToggle, {
       store,
       provide: {
         canAdminList: true,
         ...provide,
       },
+      propsData: props,
     });
 
   const findButton = () => wrapper.findComponent(GlButton);
@@ -52,4 +55,20 @@ describe('ConfigToggle', () => {
       label: 'edit_board',
     });
   });
+
+  it.each`
+    boardHasScope
+    ${true}
+    ${false}
+  `('renders dot highlight and tooltip depending on boardHasScope prop', ({ boardHasScope }) => {
+    wrapper = createComponent({}, { boardHasScope });
+
+    expect(findButton().classes('dot-highlight')).toBe(boardHasScope);
+
+    if (boardHasScope) {
+      expect(findButton().attributes('title')).toBe(__("This board's scope is reduced"));
+    } else {
+      expect(findButton().attributes('title')).toBe('');
+    }
+  });
 });