Added specs for board list componentissue-boards-list-template-in-js

3 files changed, 210 insertions, 6 deletions

diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index 98d64cd6870..93b8960da2e 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -1,8 +1,7 @@
 /* eslint-disable comma-dangle, space-before-function-paren, one-var */
 /* global Sortable */
-import boardList from './board_list';
-
 import Vue from 'vue';
+import boardList from './board_list';
 import boardBlankState from './board_blank_state';
 
 require('./board_delete');
diff --git a/app/assets/javascripts/boards/components/board_list.js b/app/assets/javascripts/boards/components/board_list.js
index f833cede8e9..1804d91769c 100644
--- a/app/assets/javascripts/boards/components/board_list.js
+++ b/app/assets/javascripts/boards/components/board_list.js
@@ -1,6 +1,4 @@
 /* global Sortable */
-
-import Vue from 'vue';
 import boardNewIssue from './board_new_issue';
 import boardCard from './board_card';
 import eventHub from '../eventhub';
@@ -12,8 +10,12 @@ export default {
     <div class="board-list-component">
       <div
         class="board-list-loading text-center"
+        aria-label="Loading issues"
         v-if="loading">
-        <i class="fa fa-spinner fa-spin"></i>
+        <i
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true">
+        </i>
       </div>
       <board-new-issue
         :list="list"
@@ -40,10 +42,12 @@ export default {
           data-id="-1">
           <i
             class="fa fa-spinner fa-spin"
+            aria-label="Loading more issues"
+            aria-hidden="true"
             v-show="list.loadingMore">
           </i>
           <span v-if="list.issues.length === list.issuesSize">
-            Show all issues
+            Showing all issues
           </span>
           <span v-else>
             Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
diff --git a/spec/javascripts/boards/board_list_spec.js b/spec/javascripts/boards/board_list_spec.js
new file mode 100644
index 00000000000..3f598887603
--- /dev/null
+++ b/spec/javascripts/boards/board_list_spec.js
@@ -0,0 +1,201 @@
+/* global BoardService */
+/* global boardsMockInterceptor */
+/* global List */
+/* global listObj */
+/* global ListIssue */
+import Vue from 'vue';
+import _ from 'underscore';
+import Sortable from 'vendor/Sortable';
+import BoardList from '~/boards/components/board_list';
+import eventHub from '~/boards/eventhub';
+import '~/boards/mixins/sortable_default_options';
+import '~/boards/models/issue';
+import '~/boards/models/list';
+import '~/boards/stores/boards_store';
+import './mock_data';
+
+window.Sortable = Sortable;
+
+describe('Board list component', () => {
+  let component;
+
+  beforeEach((done) => {
+    const el = document.createElement('div');
+
+    document.body.appendChild(el);
+    Vue.http.interceptors.push(boardsMockInterceptor);
+    gl.boardService = new BoardService('/test/issue-boards/board', '', '1');
+    gl.issueBoards.BoardsStore.create();
+    gl.IssueBoardsApp = new Vue();
+
+    const BoardListComp = Vue.extend(BoardList);
+    const list = new List(listObj);
+    const issue = new ListIssue({
+      title: 'Testing',
+      iid: 1,
+      confidential: false,
+      labels: [],
+    });
+    list.issuesSize = 1;
+    list.issues.push(issue);
+
+    component = new BoardListComp({
+      el,
+      propsData: {
+        disabled: false,
+        list,
+        issues: list.issues,
+        loading: false,
+        issueLinkBase: '/issues',
+        rootPath: '/',
+      },
+    }).$mount();
+
+    Vue.nextTick(() => {
+      done();
+    });
+  });
+
+  afterEach(() => {
+    Vue.http.interceptors = _.without(Vue.http.interceptors, boardsMockInterceptor);
+  });
+
+  it('renders component', () => {
+    expect(
+      component.$el.classList.contains('board-list-component'),
+    ).toBe(true);
+  });
+
+  it('renders loading icon', (done) => {
+    component.loading = true;
+
+    Vue.nextTick(() => {
+      expect(
+        component.$el.querySelector('.board-list-loading'),
+      ).not.toBeNull();
+
+      done();
+    });
+  });
+
+  it('renders issues', () => {
+    expect(
+      component.$el.querySelectorAll('.card').length,
+    ).toBe(1);
+  });
+
+  it('sets data attribute with issue id', () => {
+    expect(
+      component.$el.querySelector('.card').getAttribute('data-issue-id'),
+    ).toBe('1');
+  });
+
+  it('shows new issue form', (done) => {
+    component.toggleForm();
+
+    Vue.nextTick(() => {
+      expect(
+        component.$el.querySelector('.board-new-issue-form'),
+      ).not.toBeNull();
+
+      expect(
+        component.$el.querySelector('.is-smaller'),
+      ).not.toBeNull();
+
+      done();
+    });
+  });
+
+  it('shows new issue form after eventhub event', (done) => {
+    eventHub.$emit(`hide-issue-form-${component.list.id}`);
+
+    Vue.nextTick(() => {
+      expect(
+        component.$el.querySelector('.board-new-issue-form'),
+      ).not.toBeNull();
+
+      expect(
+        component.$el.querySelector('.is-smaller'),
+      ).not.toBeNull();
+
+      done();
+    });
+  });
+
+  it('does not show new issue form for closed list', (done) => {
+    component.list.type = 'closed';
+    component.toggleForm();
+
+    Vue.nextTick(() => {
+      expect(
+        component.$el.querySelector('.board-new-issue-form'),
+      ).toBeNull();
+
+      done();
+    });
+  });
+
+  it('shows count list item', (done) => {
+    component.showCount = true;
+
+    Vue.nextTick(() => {
+      expect(
+        component.$el.querySelector('.board-list-count'),
+      ).not.toBeNull();
+
+      expect(
+        component.$el.querySelector('.board-list-count').textContent.trim(),
+      ).toBe('Showing all issues');
+
+      done();
+    });
+  });
+
+  it('shows how many more issues to load', (done) => {
+    component.showCount = true;
+    component.list.issuesSize = 20;
+
+    Vue.nextTick(() => {
+      expect(
+        component.$el.querySelector('.board-list-count').textContent.trim(),
+      ).toBe('Showing 1 of 20 issues');
+
+      done();
+    });
+  });
+
+  it('loads more issues after scrolling', (done) => {
+    spyOn(component.list, 'nextPage');
+    component.$refs.list.style.height = '100px';
+    component.$refs.list.style.overflow = 'scroll';
+
+    for (let i = 0; i < 19; i += 1) {
+      const issue = component.list.issues[0];
+      issue.id += 1;
+      component.list.issues.push(issue);
+    }
+
+    Vue.nextTick(() => {
+      component.$refs.list.scrollTop = 20000;
+
+      setTimeout(() => {
+        expect(component.list.nextPage).toHaveBeenCalled();
+
+        done();
+      });
+    });
+  });
+
+  it('shows loading more spinner', (done) => {
+    component.showCount = true;
+    component.list.loadingMore = true;
+
+    Vue.nextTick(() => {
+      expect(
+        component.$el.querySelector('.board-list-count .fa-spinner'),
+      ).not.toBeNull();
+
+      done();
+    });
+  });
+});