diff options
Diffstat (limited to 'spec/frontend/notes')
3 files changed, 34 insertions, 26 deletions
diff --git a/spec/frontend/notes/components/discussion_counter_spec.js b/spec/frontend/notes/components/discussion_counter_spec.js index affd6c1d1d2..d82590c7e9e 100644 --- a/spec/frontend/notes/components/discussion_counter_spec.js +++ b/spec/frontend/notes/components/discussion_counter_spec.js @@ -1,6 +1,6 @@ import Vuex from 'vuex'; import { shallowMount, createLocalVue } from '@vue/test-utils'; -import { GlIcon } from '@gitlab/ui'; +import { GlButton } from '@gitlab/ui'; import notesModule from '~/notes/stores/modules'; import DiscussionCounter from '~/notes/components/discussion_counter.vue'; import { noteableDataMock, discussionMock, notesDataMock, userDataMock } from '../mock_data'; @@ -9,6 +9,7 @@ import * as types from '~/notes/stores/mutation_types'; describe('DiscussionCounter component', () => { let store; let wrapper; + let setExpandDiscussionsFn; const localVue = createLocalVue(); localVue.use(Vuex); @@ -16,6 +17,7 @@ describe('DiscussionCounter component', () => { beforeEach(() => { window.mrTabs = {}; const { state, getters, mutations, actions } = notesModule(); + setExpandDiscussionsFn = jest.fn().mockImplementation(actions.setExpandDiscussions); store = new Vuex.Store({ state: { @@ -24,7 +26,10 @@ describe('DiscussionCounter component', () => { }, getters, mutations, - actions, + actions: { + ...actions, + setExpandDiscussions: setExpandDiscussionsFn, + }, }); store.dispatch('setNoteableData', { ...noteableDataMock, @@ -84,7 +89,7 @@ describe('DiscussionCounter component', () => { wrapper = shallowMount(DiscussionCounter, { store, localVue }); expect(wrapper.find(`.is-active`).exists()).toBe(isActive); - expect(wrapper.findAll('[role="group"').length).toBe(groupLength); + expect(wrapper.findAll(GlButton)).toHaveLength(groupLength); }); }); @@ -103,23 +108,22 @@ describe('DiscussionCounter component', () => { it('calls button handler when clicked', () => { updateStoreWithExpanded(true); - wrapper.setMethods({ handleExpandDiscussions: jest.fn() }); - toggleAllButton.trigger('click'); + toggleAllButton.vm.$emit('click'); - expect(wrapper.vm.handleExpandDiscussions).toHaveBeenCalledTimes(1); + expect(setExpandDiscussionsFn).toHaveBeenCalledTimes(1); }); it('collapses all discussions if expanded', () => { updateStoreWithExpanded(true); expect(wrapper.vm.allExpanded).toBe(true); - expect(toggleAllButton.find(GlIcon).props().name).toBe('angle-up'); + expect(toggleAllButton.props('icon')).toBe('angle-up'); - toggleAllButton.trigger('click'); + toggleAllButton.vm.$emit('click'); return wrapper.vm.$nextTick().then(() => { expect(wrapper.vm.allExpanded).toBe(false); - expect(toggleAllButton.find(GlIcon).props().name).toBe('angle-down'); + expect(toggleAllButton.props('icon')).toBe('angle-down'); }); }); @@ -127,13 +131,13 @@ describe('DiscussionCounter component', () => { updateStoreWithExpanded(false); expect(wrapper.vm.allExpanded).toBe(false); - expect(toggleAllButton.find(GlIcon).props().name).toBe('angle-down'); + expect(toggleAllButton.props('icon')).toBe('angle-down'); - toggleAllButton.trigger('click'); + toggleAllButton.vm.$emit('click'); return wrapper.vm.$nextTick().then(() => { expect(wrapper.vm.allExpanded).toBe(true); - expect(toggleAllButton.find(GlIcon).props().name).toBe('angle-up'); + expect(toggleAllButton.props('icon')).toBe('angle-up'); }); }); }); diff --git a/spec/frontend/notes/components/discussion_filter_spec.js b/spec/frontend/notes/components/discussion_filter_spec.js index 91ff796b9de..e3e3518fd31 100644 --- a/spec/frontend/notes/components/discussion_filter_spec.js +++ b/spec/frontend/notes/components/discussion_filter_spec.js @@ -74,13 +74,15 @@ describe('DiscussionFilter component', () => { }); it('renders the all filters', () => { - expect(wrapper.findAll('.dropdown-menu li').length).toBe(discussionFiltersMock.length); + expect(wrapper.findAll('.discussion-filter-container .dropdown-item').length).toBe( + discussionFiltersMock.length, + ); }); it('renders the default selected item', () => { expect( wrapper - .find('#discussion-filter-dropdown') + .find('#discussion-filter-dropdown .dropdown-item') .text() .trim(), ).toBe(discussionFiltersMock[0].title); @@ -88,7 +90,7 @@ describe('DiscussionFilter component', () => { it('updates to the selected item', () => { const filterItem = wrapper.find( - `.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.HISTORY}"] button`, + `.discussion-filter-container .dropdown-item[data-filter-type="${DISCUSSION_FILTER_TYPES.HISTORY}"]`, ); filterItem.trigger('click'); @@ -98,7 +100,9 @@ describe('DiscussionFilter component', () => { it('only updates when selected filter changes', () => { wrapper - .find(`.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.ALL}"] button`) + .find( + `.discussion-filter-container .dropdown-item[data-filter-type="${DISCUSSION_FILTER_TYPES.ALL}"]`, + ) .trigger('click'); expect(filterDiscussion).not.toHaveBeenCalled(); @@ -106,7 +110,7 @@ describe('DiscussionFilter component', () => { it('disables commenting when "Show history only" filter is applied', () => { const filterItem = wrapper.find( - `.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.HISTORY}"] button`, + `.discussion-filter-container .dropdown-item[data-filter-type="${DISCUSSION_FILTER_TYPES.HISTORY}"]`, ); filterItem.trigger('click'); @@ -115,7 +119,7 @@ describe('DiscussionFilter component', () => { it('enables commenting when "Show history only" filter is not applied', () => { const filterItem = wrapper.find( - `.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.ALL}"] button`, + `.discussion-filter-container .dropdown-item[data-filter-type="${DISCUSSION_FILTER_TYPES.ALL}"]`, ); filterItem.trigger('click'); @@ -124,10 +128,10 @@ describe('DiscussionFilter component', () => { it('renders a dropdown divider for the default filter', () => { const defaultFilter = wrapper.findAll( - `.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.ALL}"] > *`, + `.discussion-filter-container .dropdown-item-wrapper > *`, ); - expect(defaultFilter.at(defaultFilter.length - 1).classes('dropdown-divider')).toBe(true); + expect(defaultFilter.at(1).classes('gl-new-dropdown-divider')).toBe(true); }); describe('Merge request tabs', () => { diff --git a/spec/frontend/notes/components/sort_discussion_spec.js b/spec/frontend/notes/components/sort_discussion_spec.js index 575f1057db2..49b85d60a27 100644 --- a/spec/frontend/notes/components/sort_discussion_spec.js +++ b/spec/frontend/notes/components/sort_discussion_spec.js @@ -55,7 +55,7 @@ describe('Sort Discussion component', () => { it('calls the right actions', () => { createComponent(); - wrapper.find('.js-newest-first').trigger('click'); + wrapper.find('.js-newest-first').vm.$emit('click'); expect(store.dispatch).toHaveBeenCalledWith('setDiscussionSortDirection', DESC); expect(Tracking.event).toHaveBeenCalledWith(undefined, 'change_discussion_sort_direction', { @@ -67,7 +67,7 @@ describe('Sort Discussion component', () => { it('shows the "Oldest First" as the dropdown', () => { createComponent(); - expect(wrapper.find('.js-dropdown-text').text()).toBe('Oldest first'); + expect(wrapper.find('.js-dropdown-text').props('text')).toBe('Oldest first'); }); }); @@ -79,7 +79,7 @@ describe('Sort Discussion component', () => { describe('when the dropdown item is clicked', () => { it('calls the right actions', () => { - wrapper.find('.js-oldest-first').trigger('click'); + wrapper.find('.js-oldest-first').vm.$emit('click'); expect(store.dispatch).toHaveBeenCalledWith('setDiscussionSortDirection', ASC); expect(Tracking.event).toHaveBeenCalledWith(undefined, 'change_discussion_sort_direction', { @@ -87,13 +87,13 @@ describe('Sort Discussion component', () => { }); }); - it('applies the active class to the correct button in the dropdown', () => { - expect(wrapper.find('.js-newest-first').classes()).toContain('is-active'); + it('sets is-checked to true on the active button in the dropdown', () => { + expect(wrapper.find('.js-newest-first').props('isChecked')).toBe(true); }); }); it('shows the "Newest First" as the dropdown', () => { - expect(wrapper.find('.js-dropdown-text').text()).toBe('Newest first'); + expect(wrapper.find('.js-dropdown-text').props('text')).toBe('Newest first'); }); }); }); |