4 files changed, 144 insertions, 0 deletions
diff --git a/spec/frontend/super_sidebar/components/counter_spec.js b/spec/frontend/super_sidebar/components/counter_spec.js
new file mode 100644
index 00000000000..1150b0a3aa8
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/counter_spec.js
@@ -0,0 +1,56 @@
+import { GlIcon } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { __ } from '~/locale';
+import Counter from '~/super_sidebar/components/counter.vue';
+
+describe('Counter component', () => {
+  let wrapper;
+
+  const defaultPropsData = {
+    count: 3,
+    href: '',
+    icon: 'issues',
+    label: __('Issues'),
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findButton = () => wrapper.find('button');
+  const findIcon = () => wrapper.getComponent(GlIcon);
+  const findLink = () => wrapper.find('a');
+
+  const createWrapper = (props = {}) => {
+    wrapper = shallowMountExtended(Counter, {
+      propsData: {
+        ...defaultPropsData,
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  describe('default', () => {
+    it('renders icon', () => {
+      expect(findIcon().props('name')).toBe('issues');
+    });
+
+    it('renders button', () => {
+      expect(findButton().attributes('aria-label')).toBe('Issues 3');
+      expect(findLink().exists()).toBe(false);
+    });
+  });
+
+  describe('link', () => {
+    it('renders link', () => {
+      createWrapper({ href: '/dashboard/todos' });
+      expect(findLink().attributes('aria-label')).toBe('Issues 3');
+      expect(findLink().attributes('href')).toBe('/dashboard/todos');
+      expect(findButton().exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/super_sidebar_spec.js b/spec/frontend/super_sidebar/components/super_sidebar_spec.js
new file mode 100644
index 00000000000..d7d2f67dc8a
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/super_sidebar_spec.js
@@ -0,0 +1,33 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import SuperSidebar from '~/super_sidebar/components/super_sidebar.vue';
+import UserBar from '~/super_sidebar/components/user_bar.vue';
+import { sidebarData } from '../mock_data';
+
+describe('SuperSidebar component', () => {
+  let wrapper;
+
+  const findUserBar = () => wrapper.findComponent(UserBar);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const createWrapper = (props = {}) => {
+    wrapper = shallowMountExtended(SuperSidebar, {
+      propsData: {
+        sidebarData,
+        ...props,
+      },
+    });
+  };
+
+  describe('default', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('renders UserBar with sidebarData', () => {
+      expect(findUserBar().props('sidebarData')).toBe(sidebarData);
+    });
+  });
+});
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'));
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/mock_data.js b/spec/frontend/super_sidebar/mock_data.js
new file mode 100644
index 00000000000..7db0d0ea5cc
--- /dev/null
+++ b/spec/frontend/super_sidebar/mock_data.js
@@ -0,0 +1,9 @@
+export const sidebarData = {
+  name: 'Administrator',
+  username: 'root',
+  avatar_url: 'path/to/img_administrator',
+  assigned_open_issues_count: 1,
+  assigned_open_merge_requests_count: 2,
+  todos_pending_count: 3,
+  issues_dashboard_path: 'path/to/issues',
+};