gitlab-org--gitlab-foss/spec/javascripts/shared/popover_spec.js

167 lines
4.5 KiB
JavaScript
Raw Normal View History

2018-04-02 19:20:29 -04:00
import $ from 'jquery';
2018-10-17 03:13:26 -04:00
import { togglePopover, mouseleave, mouseenter } from '~/shared/popover';
2018-03-28 13:12:30 -04:00
describe('popover', () => {
describe('togglePopover', () => {
describe('togglePopover(true)', () => {
it('returns true when popover is shown', () => {
const context = {
hasClass: () => false,
popover: () => {},
toggleClass: () => {},
};
2018-04-02 19:20:05 -04:00
2018-03-28 13:12:30 -04:00
expect(togglePopover.call(context, true)).toEqual(true);
});
2018-04-02 19:20:05 -04:00
2018-03-28 13:12:30 -04:00
it('returns false when popover is already shown', () => {
const context = {
hasClass: () => true,
};
2018-04-02 19:20:05 -04:00
2018-03-28 13:12:30 -04:00
expect(togglePopover.call(context, true)).toEqual(false);
});
2018-04-02 19:20:05 -04:00
2018-10-17 03:13:26 -04:00
it('shows popover', done => {
2018-03-28 13:12:30 -04:00
const context = {
hasClass: () => false,
popover: () => {},
toggleClass: () => {},
};
2018-04-02 19:20:05 -04:00
2018-10-17 03:13:26 -04:00
spyOn(context, 'popover').and.callFake(method => {
2018-03-28 13:12:30 -04:00
expect(method).toEqual('show');
done();
});
2018-04-02 19:20:05 -04:00
2018-03-28 13:12:30 -04:00
togglePopover.call(context, true);
});
2018-04-02 19:20:05 -04:00
2018-10-17 03:13:26 -04:00
it('adds disable-animation and js-popover-show class', done => {
2018-03-28 13:12:30 -04:00
const context = {
hasClass: () => false,
popover: () => {},
toggleClass: () => {},
};
2018-04-02 19:20:05 -04:00
2018-03-28 13:12:30 -04:00
spyOn(context, 'toggleClass').and.callFake((classNames, show) => {
expect(classNames).toEqual('disable-animation js-popover-show');
expect(show).toEqual(true);
done();
});
2018-04-02 19:20:05 -04:00
2018-03-28 13:12:30 -04:00
togglePopover.call(context, true);
});
});
2018-04-02 19:20:05 -04:00
2018-03-28 13:12:30 -04:00
describe('togglePopover(false)', () => {
it('returns true when popover is hidden', () => {
const context = {
hasClass: () => true,
popover: () => {},
toggleClass: () => {},
};
2018-04-02 19:20:05 -04:00
2018-03-28 13:12:30 -04:00
expect(togglePopover.call(context, false)).toEqual(true);
});
2018-04-02 19:20:05 -04:00
2018-03-28 13:12:30 -04:00
it('returns false when popover is already hidden', () => {
const context = {
hasClass: () => false,
};
2018-04-02 19:20:05 -04:00
2018-03-28 13:12:30 -04:00
expect(togglePopover.call(context, false)).toEqual(false);
});
2018-04-02 19:20:05 -04:00
2018-10-17 03:13:26 -04:00
it('hides popover', done => {
2018-03-28 13:12:30 -04:00
const context = {
hasClass: () => true,
popover: () => {},
toggleClass: () => {},
};
2018-04-02 19:20:05 -04:00
2018-10-17 03:13:26 -04:00
spyOn(context, 'popover').and.callFake(method => {
2018-03-28 13:12:30 -04:00
expect(method).toEqual('hide');
done();
});
2018-04-02 19:20:05 -04:00
2018-03-28 13:12:30 -04:00
togglePopover.call(context, false);
});
2018-04-02 19:20:05 -04:00
2018-10-17 03:13:26 -04:00
it('removes disable-animation and js-popover-show class', done => {
2018-03-28 13:12:30 -04:00
const context = {
hasClass: () => true,
popover: () => {},
toggleClass: () => {},
};
2018-04-02 19:20:05 -04:00
2018-03-28 13:12:30 -04:00
spyOn(context, 'toggleClass').and.callFake((classNames, show) => {
expect(classNames).toEqual('disable-animation js-popover-show');
expect(show).toEqual(false);
done();
});
2018-04-02 19:20:05 -04:00
2018-03-28 13:12:30 -04:00
togglePopover.call(context, false);
});
});
});
describe('mouseleave', () => {
it('calls hide popover if .popover:hover is false', () => {
const fakeJquery = {
length: 0,
};
2018-11-16 15:07:38 -05:00
spyOn($.fn, 'init').and.callFake(selector =>
selector === '.popover:hover' ? fakeJquery : $.fn,
2018-10-17 03:13:26 -04:00
);
2018-03-28 13:12:30 -04:00
spyOn(togglePopover, 'call');
mouseleave();
2018-10-09 14:03:09 -04:00
2018-03-28 13:12:30 -04:00
expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), false);
});
it('does not call hide popover if .popover:hover is true', () => {
const fakeJquery = {
length: 1,
};
2018-11-16 15:07:38 -05:00
spyOn($.fn, 'init').and.callFake(selector =>
selector === '.popover:hover' ? fakeJquery : $.fn,
2018-10-17 03:13:26 -04:00
);
2018-03-28 13:12:30 -04:00
spyOn(togglePopover, 'call');
mouseleave();
2018-10-09 14:03:09 -04:00
2018-03-28 13:12:30 -04:00
expect(togglePopover.call).not.toHaveBeenCalledWith(false);
});
});
describe('mouseenter', () => {
const context = {};
it('shows popover', () => {
spyOn(togglePopover, 'call').and.returnValue(false);
mouseenter.call(context);
2018-10-09 14:03:09 -04:00
2018-03-28 13:12:30 -04:00
expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), true);
});
2018-10-17 03:13:26 -04:00
it('registers mouseleave event if popover is showed', done => {
2018-03-28 13:12:30 -04:00
spyOn(togglePopover, 'call').and.returnValue(true);
2018-10-17 03:13:26 -04:00
spyOn($.fn, 'on').and.callFake(eventName => {
2018-03-28 13:12:30 -04:00
expect(eventName).toEqual('mouseleave');
done();
});
mouseenter.call(context);
});
it('does not register mouseleave event if popover is not showed', () => {
spyOn(togglePopover, 'call').and.returnValue(false);
const spy = spyOn($.fn, 'on').and.callFake(() => {});
mouseenter.call(context);
2018-10-09 14:03:09 -04:00
2018-03-28 13:12:30 -04:00
expect(spy).not.toHaveBeenCalled();
});
});
2018-04-02 19:20:05 -04:00
});