4 files changed, 149 insertions, 1 deletions
diff --git a/spec/factories/lists.rb b/spec/factories/lists.rb
index 8785d3f0468..eb6f0f27917 100644
--- a/spec/factories/lists.rb
+++ b/spec/factories/lists.rb
@@ -5,6 +5,7 @@ FactoryBot.define do
     board
     label
     list_type { :label }
+    max_issue_count { 0 }
     sequence(:position)
   end
 
diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb
index e26582d3444..c740e4e26d9 100644
--- a/spec/features/boards/boards_spec.rb
+++ b/spec/features/boards/boards_spec.rb
@@ -72,7 +72,6 @@ describe 'Issue Boards', :js do
     let!(:closed)       { create(:label, project: project, name: 'Closed') }
     let!(:accepting) { create(:label, project: project, name: 'Accepting Merge Requests') }
     let!(:a_plus) { create(:label, project: project, name: 'A+') }
-
     let!(:list1) { create(:list, board: board, label: planning, position: 0) }
     let!(:list2) { create(:list, board: board, label: development, position: 1) }
 
@@ -289,6 +288,17 @@ describe 'Issue Boards', :js do
             expect(page).to have_selector('.avatar', count: 1)
           end
         end
+
+        context 'list header' do
+          let(:total_planning_issues) { "8" }
+
+          it 'shows issue count on the list' do
+            page.within(find(".board:nth-child(2)")) do
+              expect(page.find('.js-issue-size')).to have_text(total_planning_issues)
+              expect(page).not_to have_selector('.js-max-issue-size')
+            end
+          end
+        end
       end
 
       context 'new list' do
diff --git a/spec/frontend/boards/components/issue_count_spec.js b/spec/frontend/boards/components/issue_count_spec.js
new file mode 100644
index 00000000000..819d878f4e2
--- /dev/null
+++ b/spec/frontend/boards/components/issue_count_spec.js
@@ -0,0 +1,85 @@
+import { shallowMount } from '@vue/test-utils';
+import IssueCount from '~/boards/components/issue_count.vue';
+
+describe('IssueCount', () => {
+  let vm;
+  let maxIssueCount;
+  let issuesSize;
+
+  const createComponent = props => {
+    vm = shallowMount(IssueCount, { propsData: props });
+  };
+
+  afterEach(() => {
+    maxIssueCount = 0;
+    issuesSize = 0;
+
+    if (vm) vm.destroy();
+  });
+
+  describe('when maxIssueCount is zero', () => {
+    beforeEach(() => {
+      issuesSize = 3;
+
+      createComponent({ maxIssueCount: 0, issuesSize });
+    });
+
+    it('contains issueSize in the template', () => {
+      expect(vm.find('.js-issue-size').text()).toEqual(String(issuesSize));
+    });
+
+    it('does not contains maxIssueCount in the template', () => {
+      expect(vm.contains('.js-max-issue-size')).toBe(false);
+    });
+  });
+
+  describe('when maxIssueCount is greater than zero', () => {
+    beforeEach(() => {
+      maxIssueCount = 2;
+      issuesSize = 1;
+
+      createComponent({ maxIssueCount, issuesSize });
+    });
+
+    afterEach(() => {
+      vm.destroy();
+    });
+
+    it('contains issueSize in the template', () => {
+      expect(vm.find('.js-issue-size').text()).toEqual(String(issuesSize));
+    });
+
+    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(() => {
+      issuesSize = 3;
+      maxIssueCount = 2;
+
+      createComponent({ maxIssueCount, issuesSize });
+    });
+
+    afterEach(() => {
+      vm.destroy();
+    });
+
+    it('contains issueSize in the template', () => {
+      expect(vm.find('.js-issue-size').text()).toEqual(String(issuesSize));
+    });
+
+    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(issuesSize));
+    });
+  });
+});
diff --git a/spec/javascripts/boards/board_list_spec.js b/spec/javascripts/boards/board_list_spec.js
index 37e96e97279..b4e1d3b97b1 100644
--- a/spec/javascripts/boards/board_list_spec.js
+++ b/spec/javascripts/boards/board_list_spec.js
@@ -207,4 +207,56 @@ describe('Board list component', () => {
         .catch(done.fail);
     });
   });
+
+  describe('max issue count warning', () => {
+    beforeEach(done => {
+      ({ mock, component } = createComponent({
+        done,
+        listProps: { type: 'closed', collapsed: true, issuesSize: 50 },
+      }));
+    });
+
+    afterEach(() => {
+      mock.restore();
+      component.$destroy();
+    });
+
+    describe('when issue count exceeds max issue count', () => {
+      it('sets background to bg-danger-100', done => {
+        component.list.issuesSize = 4;
+        component.list.maxIssueCount = 3;
+
+        Vue.nextTick(() => {
+          expect(component.$el.querySelector('.bg-danger-100')).not.toBeNull();
+
+          done();
+        });
+      });
+    });
+
+    describe('when list issue count does NOT exceed list max issue count', () => {
+      it('does not sets background to bg-danger-100', done => {
+        component.list.issuesSize = 2;
+        component.list.maxIssueCount = 3;
+
+        Vue.nextTick(() => {
+          expect(component.$el.querySelector('.bg-danger-100')).toBeNull();
+
+          done();
+        });
+      });
+    });
+
+    describe('when list max issue count is 0', () => {
+      it('does not sets background to bg-danger-100', done => {
+        component.list.maxIssueCount = 0;
+
+        Vue.nextTick(() => {
+          expect(component.$el.querySelector('.bg-danger-100')).toBeNull();
+
+          done();
+        });
+      });
+    });
+  });
 });