diff options
Diffstat (limited to 'spec/frontend/work_items/pages/work_item_detail_spec.js')
| -rw-r--r-- | spec/frontend/work_items/pages/work_item_detail_spec.js | 105 |
1 files changed, 94 insertions, 11 deletions
diff --git a/spec/frontend/work_items/pages/work_item_detail_spec.js b/spec/frontend/work_items/pages/work_item_detail_spec.js index 9f87655175c..b9724034cb4 100644 --- a/spec/frontend/work_items/pages/work_item_detail_spec.js +++ b/spec/frontend/work_items/pages/work_item_detail_spec.js @@ -5,11 +5,15 @@ import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; import WorkItemDetail from '~/work_items/components/work_item_detail.vue'; +import WorkItemDescription from '~/work_items/components/work_item_description.vue'; import WorkItemState from '~/work_items/components/work_item_state.vue'; import WorkItemTitle from '~/work_items/components/work_item_title.vue'; +import WorkItemAssignees from '~/work_items/components/work_item_assignees.vue'; +import WorkItemWeight from '~/work_items/components/work_item_weight.vue'; import { i18n } from '~/work_items/constants'; import workItemQuery from '~/work_items/graphql/work_item.query.graphql'; import workItemTitleSubscription from '~/work_items/graphql/work_item_title.subscription.graphql'; +import { temporaryConfig } from '~/work_items/graphql/provider'; import { workItemTitleSubscriptionResponse, workItemQueryResponse } from '../mock_data'; describe('WorkItemDetail component', () => { @@ -24,18 +28,34 @@ describe('WorkItemDetail component', () => { const findSkeleton = () => wrapper.findComponent(GlSkeletonLoader); const findWorkItemTitle = () => wrapper.findComponent(WorkItemTitle); const findWorkItemState = () => wrapper.findComponent(WorkItemState); + const findWorkItemDescription = () => wrapper.findComponent(WorkItemDescription); + const findWorkItemAssignees = () => wrapper.findComponent(WorkItemAssignees); + const findWorkItemWeight = () => wrapper.findComponent(WorkItemWeight); const createComponent = ({ workItemId = workItemQueryResponse.data.workItem.id, handler = successHandler, subscriptionHandler = initialSubscriptionHandler, + workItemsMvc2Enabled = false, + includeWidgets = false, } = {}) => { wrapper = shallowMount(WorkItemDetail, { - apolloProvider: createMockApollo([ - [workItemQuery, handler], - [workItemTitleSubscription, subscriptionHandler], - ]), + apolloProvider: createMockApollo( + [ + [workItemQuery, handler], + [workItemTitleSubscription, subscriptionHandler], + ], + {}, + { + typePolicies: includeWidgets ? temporaryConfig.cacheConfig.typePolicies : {}, + }, + ), propsData: { workItemId }, + provide: { + glFeatures: { + workItemsMvc2: workItemsMvc2Enabled, + }, + }, }); }; @@ -78,6 +98,22 @@ describe('WorkItemDetail component', () => { }); }); + describe('description', () => { + it('does not show description widget if loading description fails', () => { + createComponent(); + + expect(findWorkItemDescription().exists()).toBe(false); + }); + + it('shows description widget if description loads', async () => { + createComponent(); + + await waitForPromises(); + + expect(findWorkItemDescription().exists()).toBe(true); + }); + }); + it('shows an error message when the work item query was unsuccessful', async () => { const errorHandler = jest.fn().mockRejectedValue('Oops'); createComponent({ handler: errorHandler }); @@ -105,17 +141,64 @@ describe('WorkItemDetail component', () => { }); }); - it('emits workItemUpdated event when fields updated', async () => { - createComponent(); + describe('when work_items_mvc_2 feature flag is enabled', () => { + it('renders assignees component when assignees widget is returned from the API', async () => { + createComponent({ + workItemsMvc2Enabled: true, + includeWidgets: true, + }); + await waitForPromises(); - await waitForPromises(); + expect(findWorkItemAssignees().exists()).toBe(true); + }); - findWorkItemState().vm.$emit('updated'); + it('does not render assignees component when assignees widget is not returned from the API', async () => { + createComponent({ + workItemsMvc2Enabled: true, + includeWidgets: false, + }); + await waitForPromises(); - expect(wrapper.emitted('workItemUpdated')).toEqual([[]]); + expect(findWorkItemAssignees().exists()).toBe(false); + }); + }); - findWorkItemTitle().vm.$emit('updated'); + it('does not render assignees component when assignees feature flag is disabled', async () => { + createComponent(); + await waitForPromises(); - expect(wrapper.emitted('workItemUpdated')).toEqual([[], []]); + expect(findWorkItemAssignees().exists()).toBe(false); + }); + + describe('weight widget', () => { + describe('when work_items_mvc_2 feature flag is enabled', () => { + describe.each` + description | includeWidgets | exists + ${'when widget is returned from API'} | ${true} | ${true} + ${'when widget is not returned from API'} | ${false} | ${false} + `('$description', ({ includeWidgets, exists }) => { + it(`${includeWidgets ? 'renders' : 'does not render'} weight component`, async () => { + createComponent({ includeWidgets, workItemsMvc2Enabled: true }); + await waitForPromises(); + + expect(findWorkItemWeight().exists()).toBe(exists); + }); + }); + }); + + describe('when work_items_mvc_2 feature flag is disabled', () => { + describe.each` + description | includeWidgets | exists + ${'when widget is returned from API'} | ${true} | ${false} + ${'when widget is not returned from API'} | ${false} | ${false} + `('$description', ({ includeWidgets, exists }) => { + it(`${includeWidgets ? 'renders' : 'does not render'} weight component`, async () => { + createComponent({ includeWidgets, workItemsMvc2Enabled: false }); + await waitForPromises(); + + expect(findWorkItemWeight().exists()).toBe(exists); + }); + }); + }); }); }); |