diff options
Diffstat (limited to 'spec/frontend/work_items_hierarchy')
3 files changed, 197 insertions, 0 deletions
diff --git a/spec/frontend/work_items_hierarchy/components/app_spec.js b/spec/frontend/work_items_hierarchy/components/app_spec.js new file mode 100644 index 00000000000..092e9c90553 --- /dev/null +++ b/spec/frontend/work_items_hierarchy/components/app_spec.js @@ -0,0 +1,63 @@ +import { nextTick } from 'vue'; +import { createLocalVue, mount } from '@vue/test-utils'; +import VueApollo from 'vue-apollo'; +import { GlBanner } from '@gitlab/ui'; +import App from '~/work_items_hierarchy/components/app.vue'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; + +const localVue = createLocalVue(); +localVue.use(VueApollo); + +describe('WorkItemsHierarchy App', () => { + let wrapper; + const createComponent = (props = {}, data = {}) => { + wrapper = extendedWrapper( + mount(App, { + localVue, + provide: { + illustrationPath: '/foo.svg', + licensePlan: 'free', + ...props, + }, + data() { + return data; + }, + }), + ); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + describe('survey banner', () => { + it('shows when the banner is visible', () => { + createComponent({}, { bannerVisible: true }); + + expect(wrapper.find(GlBanner).exists()).toBe(true); + }); + + it('hide when close is called', async () => { + createComponent({}, { bannerVisible: true }); + + wrapper.findByTestId('close-icon').trigger('click'); + + await nextTick(); + + expect(wrapper.find(GlBanner).exists()).toBe(false); + }); + }); + + describe('Unavailable structure', () => { + it.each` + licensePlan | visible + ${'free'} | ${true} + ${'premium'} | ${true} + ${'ultimate'} | ${false} + `('visibility is $visible when plan is $licensePlan', ({ licensePlan, visible }) => { + createComponent({ licensePlan }); + + expect(wrapper.findByTestId('unavailable-structure').exists()).toBe(visible); + }); + }); +}); diff --git a/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js b/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js new file mode 100644 index 00000000000..74774e38d6b --- /dev/null +++ b/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js @@ -0,0 +1,118 @@ +import { createLocalVue, mount } from '@vue/test-utils'; +import VueApollo from 'vue-apollo'; +import { GlBadge } from '@gitlab/ui'; +import Hierarchy from '~/work_items_hierarchy/components/hierarchy.vue'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import RESPONSE from '~/work_items_hierarchy/static_response'; +import { workItemTypes } from '~/work_items_hierarchy/constants'; + +const localVue = createLocalVue(); +localVue.use(VueApollo); + +describe('WorkItemsHierarchy Hierarchy', () => { + let wrapper; + + const workItemsFromResponse = (response) => { + return response.reduce( + (itemTypes, item) => { + const key = item.available ? 'available' : 'unavailable'; + itemTypes[key].push({ + ...item, + ...workItemTypes[item.type], + nestedTypes: item.nestedTypes + ? item.nestedTypes.map((type) => workItemTypes[type]) + : null, + }); + return itemTypes; + }, + { available: [], unavailable: [] }, + ); + }; + + const createComponent = (props = {}) => { + wrapper = extendedWrapper( + mount(Hierarchy, { + localVue, + propsData: { + workItemTypes: props.workItemTypes, + ...props, + }, + }), + ); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + describe('available structure', () => { + let items = []; + + beforeEach(() => { + items = workItemsFromResponse(RESPONSE.ultimate).available; + createComponent({ workItemTypes: items }); + }); + + it('renders all work items', () => { + expect(wrapper.findAllByTestId('work-item-wrapper')).toHaveLength(items.length); + }); + + it('does not render badges', () => { + expect(wrapper.find(GlBadge).exists()).toBe(false); + }); + }); + + describe('unavailable structure', () => { + let items = []; + + beforeEach(() => { + items = workItemsFromResponse(RESPONSE.premium).unavailable; + createComponent({ workItemTypes: items }); + }); + + it('renders all work items', () => { + expect(wrapper.findAllByTestId('work-item-wrapper')).toHaveLength(items.length); + }); + + it('renders license badges for all work items', () => { + expect(wrapper.findAll(GlBadge)).toHaveLength(items.length); + }); + + it('does not render svg icon for linking', () => { + expect(wrapper.findByTestId('hierarchy-rounded-arrow-tail').exists()).toBe(false); + expect(wrapper.findByTestId('level-up-icon').exists()).toBe(false); + }); + }); + + describe('nested work items', () => { + describe.each` + licensePlan | arrowTailVisible | levelUpIconVisible | arrowDownIconVisible + ${'ultimate'} | ${true} | ${true} | ${true} + ${'premium'} | ${false} | ${false} | ${true} + ${'free'} | ${false} | ${false} | ${false} + `( + 'when $licensePlan license', + ({ licensePlan, arrowTailVisible, levelUpIconVisible, arrowDownIconVisible }) => { + let items = []; + beforeEach(() => { + items = workItemsFromResponse(RESPONSE[licensePlan]).available; + createComponent({ workItemTypes: items }); + }); + + it(`${arrowTailVisible ? 'render' : 'does not render'} arrow tail svg`, () => { + expect(wrapper.findByTestId('hierarchy-rounded-arrow-tail').exists()).toBe( + arrowTailVisible, + ); + }); + + it(`${levelUpIconVisible ? 'render' : 'does not render'} arrow tail svg`, () => { + expect(wrapper.findByTestId('level-up-icon').exists()).toBe(levelUpIconVisible); + }); + + it(`${arrowDownIconVisible ? 'render' : 'does not render'} arrow tail svg`, () => { + expect(wrapper.findByTestId('arrow-down-icon').exists()).toBe(arrowDownIconVisible); + }); + }, + ); + }); +}); diff --git a/spec/frontend/work_items_hierarchy/hierarchy_util_spec.js b/spec/frontend/work_items_hierarchy/hierarchy_util_spec.js new file mode 100644 index 00000000000..9042fa27d16 --- /dev/null +++ b/spec/frontend/work_items_hierarchy/hierarchy_util_spec.js @@ -0,0 +1,16 @@ +import { inferLicensePlan } from '~/work_items_hierarchy/hierarchy_util'; +import { LICENSE_PLAN } from '~/work_items_hierarchy/constants'; + +describe('inferLicensePlan', () => { + it.each` + epics | subEpics | licensePlan + ${true} | ${true} | ${LICENSE_PLAN.ULTIMATE} + ${true} | ${false} | ${LICENSE_PLAN.PREMIUM} + ${false} | ${false} | ${LICENSE_PLAN.FREE} + `( + 'returns $licensePlan when epic is $epics and sub-epic is $subEpics', + ({ epics, subEpics, licensePlan }) => { + expect(inferLicensePlan({ hasEpics: epics, hasSubEpics: subEpics })).toBe(licensePlan); + }, + ); +}); |