1 files changed, 56 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);
+    });
+  });
+});