collapsed_sidebar_todo_spec.js 4.8 KB
Newer Older
1 2
/* eslint-disable no-new */
import _ from 'underscore';
3 4
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
5
import Sidebar from '~/right_sidebar';
6
import timeoutPromise from './helpers/set_timeout_promise_helper';
7 8 9 10

describe('Issuable right sidebar collapsed todo toggle', () => {
  const fixtureName = 'issues/open-issue.html.raw';
  const jsonFixtureName = 'todos/todos.json';
11
  let mock;
12 13 14 15 16 17 18 19 20

  preloadFixtures(fixtureName);
  preloadFixtures(jsonFixtureName);

  beforeEach(() => {
    const todoData = getJSONFixture(jsonFixtureName);
    new Sidebar();
    loadFixtures(fixtureName);

Mike Greiling's avatar
Mike Greiling committed
21 22
    document.querySelector('.js-right-sidebar').classList.toggle('right-sidebar-expanded');
    document.querySelector('.js-right-sidebar').classList.toggle('right-sidebar-collapsed');
23

24 25 26
    mock = new MockAdapter(axios);

    mock.onPost(`${gl.TEST_HOST}/frontend-fixtures/issues-project/todos`).reply(() => {
27 28
      const response = _.clone(todoData);

29 30
      return [200, response];
    });
31

32 33 34 35 36
    mock.onDelete(/(.*)\/dashboard\/todos\/\d+$/).reply(() => {
      const response = _.clone(todoData);
      delete response.delete_path;

      return [200, response];
37 38 39
    });
  });

40 41 42 43
  afterEach(() => {
    mock.restore();
  });

44
  it('shows add todo button', () => {
Mike Greiling's avatar
Mike Greiling committed
45
    expect(document.querySelector('.js-issuable-todo.sidebar-collapsed-icon')).not.toBeNull();
46 47

    expect(
48 49 50 51
      document
        .querySelector('.js-issuable-todo.sidebar-collapsed-icon svg use')
        .getAttribute('xlink:href'),
    ).toContain('todo-add');
52 53 54 55 56 57 58 59 60 61 62 63

    expect(
      document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'),
    ).toBeNull();
  });

  it('sets default tooltip title', () => {
    expect(
      document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').getAttribute('title'),
    ).toBe('Add todo');
  });

Mike Greiling's avatar
Mike Greiling committed
64
  it('toggle todo state', done => {
65 66
    document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();

67 68 69 70
    setTimeout(() => {
      expect(
        document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'),
      ).not.toBeNull();
71

72
      expect(
73 74 75 76
        document
          .querySelector('.js-issuable-todo.sidebar-collapsed-icon svg.todo-undone use')
          .getAttribute('xlink:href'),
      ).toContain('todo-done');
77

78 79
      done();
    });
80 81
  });

Mike Greiling's avatar
Mike Greiling committed
82
  it('toggle todo state of expanded todo toggle', done => {
83 84
    document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();

85 86 87
    setTimeout(() => {
      expect(
        document.querySelector('.issuable-sidebar-header .js-issuable-todo').textContent.trim(),
88
      ).toBe('Mark todo as done');
89

90 91 92
      done();
    });
  });
93

Mike Greiling's avatar
Mike Greiling committed
94
  it('toggles todo button tooltip', done => {
95 96
    document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();

97 98
    setTimeout(() => {
      expect(
Mike Greiling's avatar
Mike Greiling committed
99 100 101
        document
          .querySelector('.js-issuable-todo.sidebar-collapsed-icon')
          .getAttribute('data-original-title'),
102
      ).toBe('Mark todo as done');
103

104 105
      done();
    });
106 107
  });

Mike Greiling's avatar
Mike Greiling committed
108
  it('marks todo as done', done => {
109 110
    document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();

111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130
    timeoutPromise()
      .then(() => {
        expect(
          document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'),
        ).not.toBeNull();

        document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
      })
      .then(timeoutPromise)
      .then(() => {
        expect(
          document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'),
        ).toBeNull();

        expect(
          document.querySelector('.issuable-sidebar-header .js-issuable-todo').textContent.trim(),
        ).toBe('Add todo');
      })
      .then(done)
      .catch(done.fail);
131 132
  });

Mike Greiling's avatar
Mike Greiling committed
133
  it('updates aria-label to mark todo as done', done => {
134 135
    document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();

136 137
    setTimeout(() => {
      expect(
Mike Greiling's avatar
Mike Greiling committed
138 139 140
        document
          .querySelector('.js-issuable-todo.sidebar-collapsed-icon')
          .getAttribute('aria-label'),
141
      ).toBe('Mark todo as done');
142

143 144 145 146
      done();
    });
  });

Mike Greiling's avatar
Mike Greiling committed
147
  it('updates aria-label to add todo', done => {
148 149
    document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();

150 151 152
    timeoutPromise()
      .then(() => {
        expect(
Mike Greiling's avatar
Mike Greiling committed
153 154 155
          document
            .querySelector('.js-issuable-todo.sidebar-collapsed-icon')
            .getAttribute('aria-label'),
156
        ).toBe('Mark todo as done');
157 158 159 160 161 162

        document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
      })
      .then(timeoutPromise)
      .then(() => {
        expect(
Mike Greiling's avatar
Mike Greiling committed
163 164 165
          document
            .querySelector('.js-issuable-todo.sidebar-collapsed-icon')
            .getAttribute('aria-label'),
166 167 168 169
        ).toBe('Add todo');
      })
      .then(done)
      .catch(done.fail);
170 171
  });
});