gitlab-org--gitlab-foss/spec/javascripts/boards/board_list_spec.js

/* global BoardService */
/* global List */
/* global ListIssue */
import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
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 { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';

window.Sortable = Sortable;

describe('Board list component', () => {
  let mock;
  let component;

  beforeEach((done) => {
    const el = document.createElement('div');

    document.body.appendChild(el);
    mock = new MockAdapter(axios);
    mock.onAny().reply(boardsMockInterceptor);
    gl.boardService = mockBoardService();
    gl.issueBoards.BoardsStore.create();
    gl.IssueBoardsApp = new Vue();

    const BoardListComp = Vue.extend(BoardList);
    const list = new List(listObj);
    const issue = new ListIssue({
      title: 'Testing',
      id: 1,
      iid: 1,
      confidential: false,
      labels: [],
      assignees: [],
    });
    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(() => {
    mock.reset();
  });

  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('sets data attribute with invalid id', (done) => {
    component.showCount = true;

    Vue.nextTick(() => {
      expect(
        component.$el.querySelector('.board-list-count').getAttribute('data-issue-id'),
      ).toBe('-1');

      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();
    });
  });
});