From 95e18e32833de71b46d73ead66c8f13e261af3f4 Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Tue, 28 Apr 2020 18:09:35 +0000 Subject: Add latest changes from gitlab-org/gitlab@master --- .../feature_highlight_helper_spec.js | 62 +++++++++++ .../feature_highlight_options_spec.js | 44 +++----- .../feature_highlight/feature_highlight_spec.js | 120 +++++++++++++++++++++ 3 files changed, 197 insertions(+), 29 deletions(-) create mode 100644 spec/frontend/feature_highlight/feature_highlight_helper_spec.js create mode 100644 spec/frontend/feature_highlight/feature_highlight_spec.js (limited to 'spec/frontend/feature_highlight') diff --git a/spec/frontend/feature_highlight/feature_highlight_helper_spec.js b/spec/frontend/feature_highlight/feature_highlight_helper_spec.js new file mode 100644 index 00000000000..2c3c3e3267a --- /dev/null +++ b/spec/frontend/feature_highlight/feature_highlight_helper_spec.js @@ -0,0 +1,62 @@ +import $ from 'jquery'; +import axios from '~/lib/utils/axios_utils'; +import { getSelector, dismiss, inserted } from '~/feature_highlight/feature_highlight_helper'; +import { togglePopover } from '~/shared/popover'; + +describe('feature highlight helper', () => { + describe('getSelector', () => { + it('returns js-feature-highlight selector', () => { + const highlightId = 'highlightId'; + + expect(getSelector(highlightId)).toEqual( + `.js-feature-highlight[data-highlight=${highlightId}]`, + ); + }); + }); + + describe('dismiss', () => { + const context = { + hide: () => {}, + attr: () => '/-/callouts/dismiss', + }; + + beforeEach(() => { + jest.spyOn(axios, 'post').mockResolvedValue(); + jest.spyOn(togglePopover, 'call').mockImplementation(() => {}); + jest.spyOn(context, 'hide').mockImplementation(() => {}); + dismiss.call(context); + }); + + it('calls persistent dismissal endpoint', () => { + expect(axios.post).toHaveBeenCalledWith( + '/-/callouts/dismiss', + expect.objectContaining({ feature_name: undefined }), + ); + }); + + it('calls hide popover', () => { + expect(togglePopover.call).toHaveBeenCalledWith(context, false); + }); + + it('calls hide', () => { + expect(context.hide).toHaveBeenCalled(); + }); + }); + + describe('inserted', () => { + it('registers click event callback', done => { + const context = { + getAttribute: () => 'popoverId', + dataset: { + highlight: 'some-feature', + }, + }; + + jest.spyOn($.fn, 'on').mockImplementation(event => { + expect(event).toEqual('click'); + done(); + }); + inserted.call(context); + }); + }); +}); diff --git a/spec/frontend/feature_highlight/feature_highlight_options_spec.js b/spec/frontend/feature_highlight/feature_highlight_options_spec.js index 8b75c46fd4c..f82f984cb7f 100644 --- a/spec/frontend/feature_highlight/feature_highlight_options_spec.js +++ b/spec/frontend/feature_highlight/feature_highlight_options_spec.js @@ -3,34 +3,20 @@ import domContentLoaded from '~/feature_highlight/feature_highlight_options'; describe('feature highlight options', () => { describe('domContentLoaded', () => { - it('should not call highlightFeatures when breakpoint is xs', () => { - jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('xs'); - - expect(domContentLoaded()).toBe(false); - }); - - it('should not call highlightFeatures when breakpoint is sm', () => { - jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('sm'); - - expect(domContentLoaded()).toBe(false); - }); - - it('should not call highlightFeatures when breakpoint is md', () => { - jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('md'); - - expect(domContentLoaded()).toBe(false); - }); - - it('should not call highlightFeatures when breakpoint is not xl', () => { - jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('lg'); - - expect(domContentLoaded()).toBe(false); - }); - - it('should call highlightFeatures when breakpoint is xl', () => { - jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('xl'); - - expect(domContentLoaded()).toBe(true); - }); + it.each` + breakPoint | shouldCall + ${'xs'} | ${false} + ${'sm'} | ${false} + ${'md'} | ${false} + ${'lg'} | ${false} + ${'xl'} | ${true} + `( + 'when breakpoint is $breakPoint should call highlightFeatures is $shouldCall', + ({ breakPoint, shouldCall }) => { + jest.spyOn(bp, 'getBreakpointSize').mockReturnValue(breakPoint); + + expect(domContentLoaded()).toBe(shouldCall); + }, + ); }); }); diff --git a/spec/frontend/feature_highlight/feature_highlight_spec.js b/spec/frontend/feature_highlight/feature_highlight_spec.js new file mode 100644 index 00000000000..79c4050c8c4 --- /dev/null +++ b/spec/frontend/feature_highlight/feature_highlight_spec.js @@ -0,0 +1,120 @@ +import $ from 'jquery'; +import MockAdapter from 'axios-mock-adapter'; +import * as featureHighlight from '~/feature_highlight/feature_highlight'; +import * as popover from '~/shared/popover'; +import axios from '~/lib/utils/axios_utils'; + +jest.mock('~/shared/popover'); + +describe('feature highlight', () => { + beforeEach(() => { + setFixtures(` +
+
+ Trigger +
+
+
+ Content +
+ Dismiss +
+
+ `); + }); + + describe('setupFeatureHighlightPopover', () => { + let mock; + const selector = '.js-feature-highlight[data-highlight=test]'; + + beforeEach(() => { + mock = new MockAdapter(axios); + mock.onGet('/test').reply(200); + jest.spyOn(window, 'addEventListener').mockImplementation(() => {}); + featureHighlight.setupFeatureHighlightPopover('test', 0); + }); + + afterEach(() => { + mock.restore(); + }); + + it('setup popover content', () => { + const $popoverContent = $('.feature-highlight-popover-content'); + const outerHTML = $popoverContent.prop('outerHTML'); + + expect($(selector).data('content')).toEqual(outerHTML); + }); + + it('setup mouseenter', () => { + $(selector).trigger('mouseenter'); + + expect(popover.mouseenter).toHaveBeenCalledWith(expect.any(Object)); + }); + + it('setup debounced mouseleave', () => { + $(selector).trigger('mouseleave'); + + expect(popover.debouncedMouseleave).toHaveBeenCalled(); + }); + + it('setup show.bs.popover', () => { + $(selector).trigger('show.bs.popover'); + + expect(window.addEventListener).toHaveBeenCalledWith('scroll', expect.any(Function), { + once: true, + }); + }); + + it('removes disabled attribute', () => { + expect($('.js-feature-highlight').is(':disabled')).toEqual(false); + }); + }); + + describe('findHighestPriorityFeature', () => { + beforeEach(() => { + setFixtures(` +
+
+
+ `); + }); + + it('should pick the highest priority feature highlight', () => { + setFixtures(` +
+
+
+ `); + + expect($('.js-feature-highlight').length).toBeGreaterThan(1); + expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority'); + }); + + it('should work when no priority is set', () => { + setFixtures(` +
+ `); + + expect(featureHighlight.findHighestPriorityFeature()).toEqual('test'); + }); + + it('should pick the highest priority feature highlight when some have no priority set', () => { + setFixtures(` +
+
+
+
+
+ `); + + expect($('.js-feature-highlight').length).toBeGreaterThan(1); + expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority'); + }); + }); + + describe('highlightFeatures', () => { + it('calls setupFeatureHighlightPopover', () => { + expect(featureHighlight.highlightFeatures()).toEqual('test'); + }); + }); +}); -- cgit v1.2.3