diff options
Diffstat (limited to 'spec/frontend/feature_highlight')
3 files changed, 197 insertions, 29 deletions
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(` + <div> + <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" data-dismiss-endpoint="/test" disabled> + Trigger + </div> + </div> + <div class="feature-highlight-popover-content"> + Content + <div class="dismiss-feature-highlight"> + Dismiss + </div> + </div> + `); + }); + + 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(` + <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'); + }); + }); +}); |