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
|
import Cookies from 'js-cookie';
import * as featureHighlightHelper from '~/feature_highlight/feature_highlight_helper';
import * as featureHighlight from '~/feature_highlight/feature_highlight';
describe('feature highlight', () => {
describe('setupFeatureHighlightPopover', () => {
const selector = '.js-feature-highlight[data-highlight=test]';
beforeEach(() => {
setFixtures(`
<div>
<div class="js-feature-highlight" data-highlight="test" disabled>
Trigger
</div>
</div>
<div class="feature-highlight-popover-content">
Content
<div class="dismiss-feature-highlight">
Dismiss
</div>
</div>
`);
spyOn(window, 'addEventListener');
spyOn(window, 'removeEventListener');
featureHighlight.setupFeatureHighlightPopover('test', 0);
});
it('setups popover content', () => {
const $popoverContent = $('.feature-highlight-popover-content');
const outerHTML = $popoverContent.prop('outerHTML');
expect($(selector).data('content')).toEqual(outerHTML);
});
it('setups mouseenter', () => {
const showSpy = spyOn(featureHighlightHelper.showPopover, 'call');
$(selector).trigger('mouseenter');
expect(showSpy).toHaveBeenCalled();
});
it('setups debounced mouseleave', (done) => {
const hideSpy = spyOn(featureHighlightHelper.hidePopover, 'call');
$(selector).trigger('mouseleave');
// Even though we've set the debounce to 0ms, setTimeout is needed for the debounce
setTimeout(() => {
expect(hideSpy).toHaveBeenCalled();
done();
}, 0);
});
it('setups inserted.bs.popover', () => {
$(selector).trigger('mouseenter');
const popoverId = $(selector).attr('aria-describedby');
const spyEvent = spyOnEvent(`#${popoverId} .dismiss-feature-highlight`, 'click');
$(`#${popoverId} .dismiss-feature-highlight`).click();
expect(spyEvent).toHaveBeenTriggered();
});
it('setups show.bs.popover', () => {
$(selector).trigger('show.bs.popover');
expect(window.addEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function));
});
it('setups hide.bs.popover', () => {
$(selector).trigger('hide.bs.popover');
expect(window.removeEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function));
});
it('removes disabled attribute', () => {
expect($('.js-feature-highlight').is(':disabled')).toEqual(false);
});
it('displays popover', () => {
expect($(selector).attr('aria-describedby')).toBeFalsy();
$(selector).trigger('mouseenter');
expect($(selector).attr('aria-describedby')).toBeTruthy();
});
});
describe('shouldHighlightFeature', () => {
it('should return false if element is not found', () => {
spyOn(document, 'querySelector').and.returnValue(null);
spyOn(Cookies, 'get').and.returnValue(null);
expect(featureHighlight.shouldHighlightFeature()).toBeFalsy();
});
it('should return false if previouslyDismissed', () => {
spyOn(document, 'querySelector').and.returnValue(document.createElement('div'));
spyOn(Cookies, 'get').and.returnValue('true');
expect(featureHighlight.shouldHighlightFeature()).toBeFalsy();
});
it('should return true if element is found and not previouslyDismissed', () => {
spyOn(document, 'querySelector').and.returnValue(document.createElement('div'));
spyOn(Cookies, 'get').and.returnValue(null);
expect(featureHighlight.shouldHighlightFeature()).toBeTruthy();
});
});
describe('highlightFeatures', () => {
it('calls setupFeatureHighlightPopover if shouldHighlightFeature returns true', () => {
// Mimic shouldHighlightFeature set to true
const highlightOrder = ['issue-boards'];
spyOn(highlightOrder, 'find').and.returnValue(highlightOrder[0]);
expect(featureHighlight.highlightFeatures(highlightOrder)).toEqual(true);
});
it('does not call setupFeatureHighlightPopover if shouldHighlightFeature returns false', () => {
// Mimic shouldHighlightFeature set to false
const highlightOrder = ['issue-boards'];
spyOn(highlightOrder, 'find').and.returnValue(null);
expect(featureHighlight.highlightFeatures(highlightOrder)).toEqual(false);
});
});
});
|
