1 files changed, 85 insertions, 0 deletions
diff --git a/spec/frontend/boards/components/item_count_spec.js b/spec/frontend/boards/components/item_count_spec.js
new file mode 100644
index 00000000000..45980c36f1c
--- /dev/null
+++ b/spec/frontend/boards/components/item_count_spec.js
@@ -0,0 +1,85 @@
+import { shallowMount } from '@vue/test-utils';
+import IssueCount from '~/boards/components/item_count.vue';
+
+describe('IssueCount', () => {
+  let vm;
+  let maxIssueCount;
+  let itemsSize;
+
+  const createComponent = (props) => {
+    vm = shallowMount(IssueCount, { propsData: props });
+  };
+
+  afterEach(() => {
+    maxIssueCount = 0;
+    itemsSize = 0;
+
+    if (vm) vm.destroy();
+  });
+
+  describe('when maxIssueCount is zero', () => {
+    beforeEach(() => {
+      itemsSize = 3;
+
+      createComponent({ maxIssueCount: 0, itemsSize });
+    });
+
+    it('contains issueSize in the template', () => {
+      expect(vm.find('[data-testid="board-items-count"]').text()).toEqual(String(itemsSize));
+    });
+
+    it('does not contains maxIssueCount in the template', () => {
+      expect(vm.find('.js-max-issue-size').exists()).toBe(false);
+    });
+  });
+
+  describe('when maxIssueCount is greater than zero', () => {
+    beforeEach(() => {
+      maxIssueCount = 2;
+      itemsSize = 1;
+
+      createComponent({ maxIssueCount, itemsSize });
+    });
+
+    afterEach(() => {
+      vm.destroy();
+    });
+
+    it('contains issueSize in the template', () => {
+      expect(vm.find('[data-testid="board-items-count"]').text()).toEqual(String(itemsSize));
+    });
+
+    it('contains maxIssueCount in the template', () => {
+      expect(vm.find('.js-max-issue-size').text()).toEqual(String(maxIssueCount));
+    });
+
+    it('does not have text-danger class when issueSize is less than maxIssueCount', () => {
+      expect(vm.classes('.text-danger')).toBe(false);
+    });
+  });
+
+  describe('when issueSize is greater than maxIssueCount', () => {
+    beforeEach(() => {
+      itemsSize = 3;
+      maxIssueCount = 2;
+
+      createComponent({ maxIssueCount, itemsSize });
+    });
+
+    afterEach(() => {
+      vm.destroy();
+    });
+
+    it('contains issueSize in the template', () => {
+      expect(vm.find('[data-testid="board-items-count"]').text()).toEqual(String(itemsSize));
+    });
+
+    it('contains maxIssueCount in the template', () => {
+      expect(vm.find('.js-max-issue-size').text()).toEqual(String(maxIssueCount));
+    });
+
+    it('has text-danger class', () => {
+      expect(vm.find('.text-danger').text()).toEqual(String(itemsSize));
+    });
+  });
+});