spec/frontend/boards/components/toggle_focus_spec.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

import { GlButton } from '@gitlab/ui';
import { nextTick } from 'vue';
import ToggleFocus from '~/boards/components/toggle_focus.vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';

describe('ToggleFocus', () => {
  let wrapper;

  const createComponent = () => {
    wrapper = shallowMountExtended(ToggleFocus, {
      directives: {
        GlTooltip: createMockDirective(),
      },
      attachTo: document.body,
    });
  };

  const findButton = () => wrapper.findComponent(GlButton);

  afterEach(() => {
    wrapper.destroy();
  });

  it('renders a button with `maximize` icon', () => {
    createComponent();

    expect(findButton().props('icon')).toBe('maximize');
    expect(findButton().attributes('aria-label')).toBe(ToggleFocus.i18n.toggleFocusMode);
  });

  it('contains a tooltip with title', () => {
    createComponent();
    const tooltip = getBinding(findButton().element, 'gl-tooltip');

    expect(tooltip).toBeDefined();
    expect(findButton().attributes('title')).toBe(ToggleFocus.i18n.toggleFocusMode);
  });

  it('toggles the icon when the button is clicked', async () => {
    createComponent();
    findButton().vm.$emit('click');
    await nextTick();

    expect(findButton().props('icon')).toBe('minimize');
  });
});