blob: 3cbaac91f8dc196fdf6aba3a884ad9ffc2b5f5f1 (
plain)
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');
});
});
|