diff options
Diffstat (limited to 'spec/frontend/notes/components/timeline_toggle_spec.js')
-rw-r--r-- | spec/frontend/notes/components/timeline_toggle_spec.js | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/spec/frontend/notes/components/timeline_toggle_spec.js b/spec/frontend/notes/components/timeline_toggle_spec.js new file mode 100644 index 00000000000..b8df6fc7996 --- /dev/null +++ b/spec/frontend/notes/components/timeline_toggle_spec.js @@ -0,0 +1,117 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; +import Vuex from 'vuex'; +import TimelineToggle, { + timelineEnabledTooltip, + timelineDisabledTooltip, +} from '~/notes/components/timeline_toggle.vue'; +import createStore from '~/notes/stores'; +import { ASC, DESC } from '~/notes/constants'; +import { trackToggleTimelineView } from '~/notes/utils'; +import Tracking from '~/tracking'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('Timeline toggle', () => { + let wrapper; + let store; + const mockEvent = { currentTarget: { blur: jest.fn() } }; + + const createComponent = () => { + jest.spyOn(store, 'dispatch').mockImplementation(); + jest.spyOn(Tracking, 'event').mockImplementation(); + + wrapper = shallowMount(TimelineToggle, { + localVue, + store, + }); + }; + + const findGlButton = () => wrapper.find(GlButton); + + beforeEach(() => { + store = createStore(); + createComponent(); + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + store.dispatch.mockReset(); + mockEvent.currentTarget.blur.mockReset(); + Tracking.event.mockReset(); + }); + + describe('ON state', () => { + it('should update timeline flag in the store', () => { + store.state.isTimelineEnabled = false; + findGlButton().vm.$emit('click', mockEvent); + expect(store.dispatch).toHaveBeenCalledWith('setTimelineView', true); + }); + + it('should set sort direction to DESC if not set', () => { + store.state.isTimelineEnabled = true; + store.state.sortDirection = ASC; + findGlButton().vm.$emit('click', mockEvent); + expect(store.dispatch).toHaveBeenCalledWith('setDiscussionSortDirection', { + direction: DESC, + persist: false, + }); + }); + + it('should set correct UI state', async () => { + store.state.isTimelineEnabled = true; + findGlButton().vm.$emit('click', mockEvent); + await wrapper.vm.$nextTick(); + expect(findGlButton().attributes('title')).toBe(timelineEnabledTooltip); + expect(findGlButton().attributes('selected')).toBe('true'); + expect(mockEvent.currentTarget.blur).toHaveBeenCalled(); + }); + + it('should track Snowplow event', async () => { + store.state.isTimelineEnabled = true; + await wrapper.vm.$nextTick(); + + findGlButton().trigger('click'); + + const { category, action, label, property, value } = trackToggleTimelineView(true); + expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property, value }); + }); + }); + + describe('OFF state', () => { + it('should update timeline flag in the store', () => { + store.state.isTimelineEnabled = true; + findGlButton().vm.$emit('click', mockEvent); + expect(store.dispatch).toHaveBeenCalledWith('setTimelineView', false); + }); + + it('should NOT update sort direction', () => { + store.state.isTimelineEnabled = false; + findGlButton().vm.$emit('click', mockEvent); + expect(store.dispatch).not.toHaveBeenCalledWith(); + }); + + it('should set correct UI state', async () => { + store.state.isTimelineEnabled = false; + findGlButton().vm.$emit('click', mockEvent); + await wrapper.vm.$nextTick(); + expect(findGlButton().attributes('title')).toBe(timelineDisabledTooltip); + expect(findGlButton().attributes('selected')).toBe(undefined); + expect(mockEvent.currentTarget.blur).toHaveBeenCalled(); + }); + + it('should track Snowplow event', async () => { + store.state.isTimelineEnabled = false; + await wrapper.vm.$nextTick(); + + findGlButton().trigger('click'); + + const { category, action, label, property, value } = trackToggleTimelineView(false); + expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property, value }); + }); + }); +}); |