note_header_spec.js 5.36 KB
Newer Older
1 2 3
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import NoteHeader from '~/notes/components/note_header.vue';
4
import GitlabTeamMemberBadge from '~/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue';
5 6 7 8 9 10 11 12 13 14 15 16 17 18

const localVue = createLocalVue();
localVue.use(Vuex);

const actions = {
  setTargetNoteHash: jest.fn(),
};

describe('NoteHeader component', () => {
  let wrapper;

  const findActionsWrapper = () => wrapper.find({ ref: 'discussionActions' });
  const findChevronIcon = () => wrapper.find({ ref: 'chevronIcon' });
  const findActionText = () => wrapper.find({ ref: 'actionText' });
19
  const findTimestampLink = () => wrapper.find({ ref: 'noteTimestampLink' });
20
  const findTimestamp = () => wrapper.find({ ref: 'noteTimestamp' });
21
  const findSpinner = () => wrapper.find({ ref: 'spinner' });
22

23 24 25 26 27 28 29 30 31
  const author = {
    avatar_url: null,
    id: 1,
    name: 'Root',
    path: '/root',
    state: 'active',
    username: 'root',
  };

32 33 34 35 36 37
  const createComponent = props => {
    wrapper = shallowMount(NoteHeader, {
      localVue,
      store: new Vuex.Store({
        actions,
      }),
38
      propsData: { ...props },
39 40
    });
  };
41

42
  afterEach(() => {
43 44
    wrapper.destroy();
    wrapper = null;
45 46
  });

47 48 49
  it('does not render discussion actions when includeToggle is false', () => {
    createComponent({
      includeToggle: false,
50 51
    });

52 53 54 55 56 57 58 59 60 61
    expect(findActionsWrapper().exists()).toBe(false);
  });

  describe('when includes a toggle', () => {
    it('renders discussion actions', () => {
      createComponent({
        includeToggle: true,
      });

      expect(findActionsWrapper().exists()).toBe(true);
62
    });
63

64 65 66 67 68 69 70 71
    it('emits toggleHandler event on button click', () => {
      createComponent({
        includeToggle: true,
      });

      wrapper.find('.note-action-button').trigger('click');
      expect(wrapper.emitted('toggleHandler')).toBeDefined();
      expect(wrapper.emitted('toggleHandler')).toHaveLength(1);
72
    });
73

74 75 76 77 78 79 80
    it('has chevron-up icon if expanded prop is true', () => {
      createComponent({
        includeToggle: true,
        expanded: true,
      });

      expect(findChevronIcon().classes()).toContain('fa-chevron-up');
81
    });
82

83 84 85 86 87 88 89
    it('has chevron-down icon if expanded prop is false', () => {
      createComponent({
        includeToggle: true,
        expanded: false,
      });

      expect(findChevronIcon().classes()).toContain('fa-chevron-down');
90
    });
91
  });
92

93
  it('renders an author link if author is passed to props', () => {
94
    createComponent({ author });
95

96 97
    expect(wrapper.find('.js-user-link').exists()).toBe(true);
  });
98

99 100
  it('renders deleted user text if author is not passed as a prop', () => {
    createComponent();
101

102 103 104 105 106
    expect(wrapper.text()).toContain('A deleted user');
  });

  it('does not render created at information if createdAt is not passed as a prop', () => {
    createComponent();
Fatih Acet's avatar
Fatih Acet committed
107

108
    expect(findActionText().exists()).toBe(false);
109
    expect(findTimestampLink().exists()).toBe(false);
110
  });
Fatih Acet's avatar
Fatih Acet committed
111

112 113 114 115
  describe('when createdAt is passed as a prop', () => {
    it('renders action text and a timestamp', () => {
      createComponent({
        createdAt: '2017-08-02T10:51:58.559Z',
116
        noteId: 123,
Fatih Acet's avatar
Fatih Acet committed
117
      });
118 119

      expect(findActionText().exists()).toBe(true);
120
      expect(findTimestampLink().exists()).toBe(true);
Fatih Acet's avatar
Fatih Acet committed
121 122
    });

123 124 125 126 127 128 129 130
    it('renders correct actionText if passed', () => {
      createComponent({
        createdAt: '2017-08-02T10:51:58.559Z',
        actionText: 'Test action text',
      });

      expect(findActionText().text()).toBe('Test action text');
    });
Fatih Acet's avatar
Fatih Acet committed
131

132 133 134
    it('calls an action when timestamp is clicked', () => {
      createComponent({
        createdAt: '2017-08-02T10:51:58.559Z',
135
        noteId: 123,
136
      });
137
      findTimestampLink().trigger('click');
138 139

      expect(actions.setTargetNoteHash).toHaveBeenCalled();
140 141
    });
  });
142 143 144 145 146 147

  test.each`
    props                                                   | expected | message1            | message2
    ${{ author: { ...author, is_gitlab_employee: true } }}  | ${true}  | ${'renders'}        | ${'true'}
    ${{ author: { ...author, is_gitlab_employee: false } }} | ${false} | ${"doesn't render"} | ${'false'}
    ${{ author }}                                           | ${false} | ${"doesn't render"} | ${'undefined'}
148 149 150 151 152
  `(
    '$message1 GitLab team member badge when `is_gitlab_employee` is $message2',
    ({ props, expected }) => {
      createComponent(props);

153
      expect(wrapper.find(GitlabTeamMemberBadge).exists()).toBe(expected);
154 155
    },
  );
156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181

  describe('loading spinner', () => {
    it('shows spinner when showSpinner is true', () => {
      createComponent();
      expect(findSpinner().exists()).toBe(true);
    });

    it('does not show spinner when showSpinner is false', () => {
      createComponent({ showSpinner: false });
      expect(findSpinner().exists()).toBe(false);
    });
  });

  describe('timestamp', () => {
    it('shows timestamp as a link if a noteId was provided', () => {
      createComponent({ createdAt: new Date().toISOString(), noteId: 123 });
      expect(findTimestampLink().exists()).toBe(true);
      expect(findTimestamp().exists()).toBe(false);
    });

    it('shows timestamp as plain text if a noteId was not provided', () => {
      createComponent({ createdAt: new Date().toISOString() });
      expect(findTimestampLink().exists()).toBe(false);
      expect(findTimestamp().exists()).toBe(true);
    });
  });
182
});