diff --git a/ee/spec/frontend/diffs/components/inline_findings_dropdown_spec.js b/ee/spec/frontend/diffs/components/inline_findings_dropdown_spec.js index f4a03eb0b4b50fbb2f570ed7835af50a1dfe6128..ca2e9fda5c67a8d2df513b79e3d49f4ef6b79fdc 100644 --- a/ee/spec/frontend/diffs/components/inline_findings_dropdown_spec.js +++ b/ee/spec/frontend/diffs/components/inline_findings_dropdown_spec.js @@ -1,5 +1,5 @@ import { GlDisclosureDropdown, GlBadge } from '@gitlab/ui'; -import { mountExtended } from 'helpers/vue_test_utils_helper'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import inlineFindingsDropdown from 'ee/diffs/components/inline_findings_dropdown.vue'; import { @@ -15,42 +15,45 @@ const findIcon = () => wrapper.findByTestId('toggle-icon'); const findGlDisclosureDropdown = () => wrapper.findComponent(GlDisclosureDropdown); const findDismissedBadge = () => wrapper.findComponent(GlBadge); +const MOCKED_ITEMS = [ + { + name: '1 Code Quality finding detected', + items: singularCodeQualityFinding, + }, + { + name: '1 SAST finding detected', + items: singularSastFinding, + }, +]; + const payload = { - propsData: { - items: [ - { - name: '1 Code Quality finding detected', - items: singularCodeQualityFinding, - }, - { - name: '1 SAST finding detected', - items: singularSastFinding, - }, - ], + items: MOCKED_ITEMS, - iconId: dropdownIcon.id, - iconKey: dropdownIcon.key, - iconName: dropdownIcon.name, - iconClass: dropdownIcon.class, - }, + iconId: dropdownIcon.id, + iconKey: dropdownIcon.key, + iconName: dropdownIcon.name, + iconClass: dropdownIcon.class, }; -const createComponent = (props = payload) => { - wrapper = mountExtended(inlineFindingsDropdown, props); +const createComponent = ({ propsData = payload, stubs = {} } = {}) => { + wrapper = shallowMountExtended(inlineFindingsDropdown, { + propsData, + stubs, + }); }; describe('inlineFindingsDropdown', () => { it('renders gl-disclosure-dropdown with correct props', () => { createComponent(); expect(wrapper.exists()).toBe(true); - expect(findGlDisclosureDropdown().props('items')).toEqual(wrapper.vm.items); + expect(findGlDisclosureDropdown().props('items')).toEqual(MOCKED_ITEMS); }); it('emits mouseenter and mouseleave events on toggle hover', () => { createComponent(); - findIcon().trigger('mouseenter'); - findIcon().trigger('mouseleave'); + findIcon().vm.$emit('mouseenter'); + findIcon().vm.$emit('mouseleave'); expect(wrapper.emitted('mouseenter')).toHaveLength(1); expect(wrapper.emitted('mouseleave')).toHaveLength(1); @@ -70,7 +73,11 @@ describe('inlineFindingsDropdown', () => { iconName: dropdownIcon.name, iconClass: dropdownIcon.class, }, + stubs: { + GlDisclosureDropdown, + }, }); + expect(findDismissedBadge().exists()).toBe(true); });