Merge branch 'expand-backlog-closed-lists-issue-boards' into 'master'

Expand/collapse close & backlog lists in issue boards

Closes #23917

See merge request !11820

1 files changed, 112 insertions, 0 deletions

diff --git a/spec/javascripts/boards/components/board_spec.js b/spec/javascripts/boards/components/board_spec.js
new file mode 100644
index 00000000000..c4e8966ad6c
--- /dev/null
+++ b/spec/javascripts/boards/components/board_spec.js
@@ -0,0 +1,112 @@
+import Vue from 'vue';
+import '~/boards/services/board_service';
+import '~/boards/components/board';
+import '~/boards/models/list';
+
+describe('Board component', () => {
+  let vm;
+  let el;
+
+  beforeEach((done) => {
+    loadFixtures('boards/show.html.raw');
+
+    el = document.createElement('div');
+    document.body.appendChild(el);
+
+    // eslint-disable-next-line no-undef
+    gl.boardService = new BoardService('/', '/', 1);
+
+    vm = new gl.issueBoards.Board({
+      propsData: {
+        boardId: '1',
+        disabled: false,
+        issueLinkBase: '/',
+        rootPath: '/',
+        // eslint-disable-next-line no-undef
+        list: new List({
+          id: 1,
+          position: 0,
+          title: 'test',
+          list_type: 'backlog',
+        }),
+      },
+    }).$mount(el);
+
+    Vue.nextTick(done);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    // remove the component from the DOM
+    document.querySelector('.board').remove();
+
+    localStorage.removeItem(`boards.${vm.boardId}.${vm.list.type}.expanded`);
+  });
+
+  it('board is expandable when list type is backlog', () => {
+    expect(
+      vm.$el.classList.contains('is-expandable'),
+    ).toBe(true);
+  });
+
+  it('board is expandable when list type is closed', (done) => {
+    vm.list.type = 'closed';
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.classList.contains('is-expandable'),
+      ).toBe(true);
+
+      done();
+    });
+  });
+
+  it('board is not expandable when list type is label', (done) => {
+    vm.list.type = 'label';
+    vm.list.isExpandable = false;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.classList.contains('is-expandable'),
+      ).toBe(false);
+
+      done();
+    });
+  });
+
+  it('collapses when clicking header', (done) => {
+    vm.$el.querySelector('.board-header').click();
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.classList.contains('is-collapsed'),
+      ).toBe(true);
+
+      done();
+    });
+  });
+
+  it('created sets isExpanded to true from localStorage', (done) => {
+    vm.$el.querySelector('.board-header').click();
+
+    return Vue.nextTick()
+      .then(() => {
+        expect(
+          vm.$el.classList.contains('is-collapsed'),
+        ).toBe(true);
+
+        // call created manually
+        vm.$options.created[0].call(vm);
+
+        return Vue.nextTick();
+      })
+      .then(() => {
+        expect(
+          vm.$el.classList.contains('is-collapsed'),
+        ).toBe(true);
+
+        done();
+      });
+  });
+});