1 files changed, 46 insertions, 0 deletions
diff --git a/spec/frontend/super_sidebar/components/user_bar_spec.js b/spec/frontend/super_sidebar/components/user_bar_spec.js
new file mode 100644
index 00000000000..6d0186a2749
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/user_bar_spec.js
@@ -0,0 +1,46 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { __ } from '~/locale';
+import Counter from '~/super_sidebar/components/counter.vue';
+import UserBar from '~/super_sidebar/components/user_bar.vue';
+import { sidebarData } from '../mock_data';
+
+describe('UserBar component', () => {
+  let wrapper;
+
+  const findCounter = (at) => wrapper.findAllComponents(Counter).at(at);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const createWrapper = (props = {}) => {
+    wrapper = shallowMountExtended(UserBar, {
+      propsData: {
+        sidebarData,
+        ...props,
+      },
+      provide: {
+        rootPath: '/',
+        toggleNewNavEndpoint: '/-/profile/preferences',
+      },
+    });
+  };
+
+  describe('default', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('renders issues counter', () => {
+      expect(findCounter(0).props('count')).toBe(sidebarData.assigned_open_issues_count);
+      expect(findCounter(0).props('href')).toBe(sidebarData.issues_dashboard_path);
+      expect(findCounter(0).props('label')).toBe(__('Issues'));
+    });
+
+    it('renders todos counter', () => {
+      expect(findCounter(2).props('count')).toBe(sidebarData.todos_pending_count);
+      expect(findCounter(2).props('href')).toBe('/dashboard/todos');
+      expect(findCounter(2).props('label')).toBe(__('To-Do list'));
+    });
+  });
+});