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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
import { createWrapper } from '@vue/test-utils';
import { GlToggle } from '@gitlab/ui';
import { initToggle } from '~/toggles';
// Selectors
const TOGGLE_WRAPPER_CLASS = '.gl-toggle-wrapper';
const TOGGLE_LABEL_CLASS = '.gl-toggle-label';
const CHECKED_CLASS = '.is-checked';
const DISABLED_CLASS = '.is-disabled';
const LOADING_CLASS = '.toggle-loading';
const HELP_TEXT_SELECTOR = '[data-testid="toggle-help"]';
// Toggle settings
const toggleClassName = 'js-custom-toggle-class';
const toggleLabel = 'Toggle label';
describe('toggles/index.js', () => {
let instance;
let toggleWrapper;
const createRootEl = (dataAttrs) => {
const dataset = {
label: toggleLabel,
...dataAttrs,
};
const el = document.createElement('span');
el.classList.add(toggleClassName);
Object.entries(dataset).forEach(([key, value]) => {
el.dataset[key] = value;
});
document.body.appendChild(el);
return el;
};
const initToggleWithOptions = (options = {}) => {
const el = createRootEl(options);
instance = initToggle(el);
toggleWrapper = document.querySelector(TOGGLE_WRAPPER_CLASS);
};
afterEach(() => {
document.body.innerHTML = '';
instance = null;
});
describe('initToggle', () => {
describe('default state', () => {
beforeEach(() => {
initToggleWithOptions();
});
it('attaches a GlToggle to the element', () => {
expect(toggleWrapper).not.toBe(null);
expect(toggleWrapper.querySelector(TOGGLE_LABEL_CLASS).textContent).toBe(toggleLabel);
});
it('passes CSS classes down to GlToggle', () => {
expect(toggleWrapper.className).toContain(toggleClassName);
});
it('is not checked', () => {
expect(toggleWrapper.querySelector(CHECKED_CLASS)).toBe(null);
});
it('is enabled', () => {
expect(toggleWrapper.querySelector(DISABLED_CLASS)).toBe(null);
});
it('is not loading', () => {
expect(toggleWrapper.querySelector(LOADING_CLASS)).toBe(null);
});
it('emits "change" event when value changes', () => {
const wrapper = createWrapper(instance);
const event = 'change';
const listener = jest.fn();
instance.$on(event, listener);
expect(listener).toHaveBeenCalledTimes(0);
wrapper.findComponent(GlToggle).vm.$emit(event, true);
expect(listener).toHaveBeenCalledTimes(1);
expect(listener).toHaveBeenLastCalledWith(true);
wrapper.findComponent(GlToggle).vm.$emit(event, false);
expect(listener).toHaveBeenCalledTimes(2);
expect(listener).toHaveBeenLastCalledWith(false);
});
});
describe('with custom options', () => {
const name = 'toggle-name';
const help = 'Help text';
const foo = 'bar';
const id = 'an-id';
beforeEach(() => {
initToggleWithOptions({
name,
id,
isChecked: true,
disabled: true,
isLoading: true,
help,
labelPosition: 'hidden',
foo,
});
toggleWrapper = document.querySelector(TOGGLE_WRAPPER_CLASS);
});
it('sets the custom name', () => {
const input = toggleWrapper.querySelector('input[type="hidden"]');
expect(input.name).toBe(name);
});
it('is checked', () => {
expect(toggleWrapper.querySelector(CHECKED_CLASS)).not.toBe(null);
});
it('is disabled', () => {
expect(toggleWrapper.querySelector(DISABLED_CLASS)).not.toBe(null);
});
it('is loading', () => {
expect(toggleWrapper.querySelector(LOADING_CLASS)).not.toBe(null);
});
it('sets the custom help text', () => {
expect(toggleWrapper.querySelector(HELP_TEXT_SELECTOR).textContent).toBe(help);
});
it('hides the label', () => {
expect(
toggleWrapper.querySelector(TOGGLE_LABEL_CLASS).classList.contains('gl-sr-only'),
).toBe(true);
});
it('passes custom dataset to the wrapper', () => {
expect(toggleWrapper.dataset.foo).toBe('bar');
});
it('passes an id to the wrapper', () => {
expect(toggleWrapper.id).toBe(id);
});
});
});
});
|
