debian-mirror-gitlab/spec/javascripts/feature_highlight/feature_highlight_spec.js

138 lines
5.1 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2018-03-17 18:26:18 +05:30
import * as featureHighlight from '~/feature_highlight/feature_highlight';
2018-10-15 14:42:47 +05:30
import * as popover from '~/shared/popover';
2018-03-27 19:54:05 +05:30
import axios from '~/lib/utils/axios_utils';
import MockAdapter from 'axios-mock-adapter';
2018-03-17 18:26:18 +05:30
describe('feature highlight', () => {
beforeEach(() => {
setFixtures(`
<div>
2018-03-27 19:54:05 +05:30
<div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" data-dismiss-endpoint="/test" disabled>
2018-03-17 18:26:18 +05:30
Trigger
</div>
</div>
<div class="feature-highlight-popover-content">
Content
<div class="dismiss-feature-highlight">
Dismiss
</div>
</div>
`);
});
describe('setupFeatureHighlightPopover', () => {
2018-03-27 19:54:05 +05:30
let mock;
2018-03-17 18:26:18 +05:30
const selector = '.js-feature-highlight[data-highlight=test]';
2018-03-27 19:54:05 +05:30
2018-03-17 18:26:18 +05:30
beforeEach(() => {
2018-03-27 19:54:05 +05:30
mock = new MockAdapter(axios);
mock.onGet('/test').reply(200);
2018-03-17 18:26:18 +05:30
spyOn(window, 'addEventListener');
featureHighlight.setupFeatureHighlightPopover('test', 0);
});
2018-03-27 19:54:05 +05:30
afterEach(() => {
mock.restore();
});
2018-03-17 18:26:18 +05:30
it('setup popover content', () => {
const $popoverContent = $('.feature-highlight-popover-content');
const outerHTML = $popoverContent.prop('outerHTML');
expect($(selector).data('content')).toEqual(outerHTML);
});
it('setup mouseenter', () => {
2018-10-15 14:42:47 +05:30
const toggleSpy = spyOn(popover.togglePopover, 'call');
2018-03-17 18:26:18 +05:30
$(selector).trigger('mouseenter');
expect(toggleSpy).toHaveBeenCalledWith(jasmine.any(Object), true);
});
it('setup debounced mouseleave', (done) => {
2018-10-15 14:42:47 +05:30
const toggleSpy = spyOn(popover.togglePopover, 'call');
2018-03-17 18:26:18 +05:30
$(selector).trigger('mouseleave');
// Even though we've set the debounce to 0ms, setTimeout is needed for the debounce
setTimeout(() => {
expect(toggleSpy).toHaveBeenCalledWith(jasmine.any(Object), false);
done();
}, 0);
});
it('setup show.bs.popover', () => {
$(selector).trigger('show.bs.popover');
2018-10-15 14:42:47 +05:30
expect(window.addEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function), { once: true });
2018-03-17 18:26:18 +05:30
});
it('removes disabled attribute', () => {
expect($('.js-feature-highlight').is(':disabled')).toEqual(false);
});
it('displays popover', () => {
2018-03-27 19:54:05 +05:30
expect(document.querySelector(selector).getAttribute('aria-describedby')).toBeFalsy();
2018-03-17 18:26:18 +05:30
$(selector).trigger('mouseenter');
2018-03-27 19:54:05 +05:30
expect(document.querySelector(selector).getAttribute('aria-describedby')).toBeTruthy();
});
it('toggles when clicked', () => {
$(selector).trigger('mouseenter');
const popoverId = $(selector).attr('aria-describedby');
2018-10-15 14:42:47 +05:30
const toggleSpy = spyOn(popover.togglePopover, 'call');
2018-03-27 19:54:05 +05:30
$(`#${popoverId} .dismiss-feature-highlight`).click();
expect(toggleSpy).toHaveBeenCalled();
2018-03-17 18:26:18 +05:30
});
});
describe('findHighestPriorityFeature', () => {
beforeEach(() => {
setFixtures(`
<div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
<div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
<div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
`);
});
it('should pick the highest priority feature highlight', () => {
setFixtures(`
<div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
<div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
<div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
`);
expect($('.js-feature-highlight').length).toBeGreaterThan(1);
expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority');
});
it('should work when no priority is set', () => {
setFixtures(`
<div class="js-feature-highlight" data-highlight="test" disabled></div>
`);
expect(featureHighlight.findHighestPriorityFeature()).toEqual('test');
});
it('should pick the highest priority feature highlight when some have no priority set', () => {
setFixtures(`
<div class="js-feature-highlight" data-highlight="test-no-priority1" disabled></div>
<div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
<div class="js-feature-highlight" data-highlight="test-no-priority2" disabled></div>
<div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
<div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
`);
expect($('.js-feature-highlight').length).toBeGreaterThan(1);
expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority');
});
});
describe('highlightFeatures', () => {
it('calls setupFeatureHighlightPopover', () => {
expect(featureHighlight.highlightFeatures()).toEqual('test');
});
});
});