diff options
Diffstat (limited to 'spec/frontend/work_items/list/components/work_items_list_app_spec.js')
-rw-r--r-- | spec/frontend/work_items/list/components/work_items_list_app_spec.js | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/spec/frontend/work_items/list/components/work_items_list_app_spec.js b/spec/frontend/work_items/list/components/work_items_list_app_spec.js new file mode 100644 index 00000000000..c92d092eb43 --- /dev/null +++ b/spec/frontend/work_items/list/components/work_items_list_app_spec.js @@ -0,0 +1,85 @@ +import * as Sentry from '@sentry/browser'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; +import VueApollo from 'vue-apollo'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import waitForPromises from 'helpers/wait_for_promises'; +import { STATUS_OPEN } from '~/issues/constants'; +import IssuableList from '~/vue_shared/issuable/list/components/issuable_list_root.vue'; +import WorkItemsListApp from '~/work_items/list/components/work_items_list_app.vue'; +import getWorkItemsQuery from '~/work_items/list/queries/get_work_items.query.graphql'; +import { groupWorkItemsQueryResponse } from '../../mock_data'; + +jest.mock('@sentry/browser'); + +describe('WorkItemsListApp component', () => { + let wrapper; + + Vue.use(VueApollo); + + const defaultQueryHandler = jest.fn().mockResolvedValue(groupWorkItemsQueryResponse); + + const findIssuableList = () => wrapper.findComponent(IssuableList); + + const mountComponent = ({ queryHandler = defaultQueryHandler } = {}) => { + wrapper = shallowMount(WorkItemsListApp, { + apolloProvider: createMockApollo([[getWorkItemsQuery, queryHandler]]), + provide: { + fullPath: 'full/path', + }, + }); + }; + + it('renders IssuableList component', () => { + mountComponent(); + + expect(findIssuableList().props()).toMatchObject({ + currentTab: STATUS_OPEN, + error: '', + issuables: [], + namespace: 'work-items', + recentSearchesStorageKey: 'issues', + searchInputPlaceholder: 'Search or filter results...', + searchTokens: [], + showWorkItemTypeIcon: true, + sortOptions: [], + tabs: WorkItemsListApp.issuableListTabs, + }); + }); + + it('renders work items', async () => { + mountComponent(); + await waitForPromises(); + + expect(findIssuableList().props('issuables')).toEqual( + groupWorkItemsQueryResponse.data.group.workItems.nodes, + ); + }); + + it('fetches work items', () => { + mountComponent(); + + expect(defaultQueryHandler).toHaveBeenCalledWith({ fullPath: 'full/path' }); + }); + + describe('when there is an error fetching work items', () => { + beforeEach(async () => { + mountComponent({ queryHandler: jest.fn().mockRejectedValue(new Error('ERROR')) }); + await waitForPromises(); + }); + + it('renders an error message', () => { + const message = 'Something went wrong when fetching work items. Please try again.'; + + expect(findIssuableList().props('error')).toBe(message); + expect(Sentry.captureException).toHaveBeenCalledWith(new Error('ERROR')); + }); + + it('clears error message when "dismiss-alert" event is emitted from IssuableList', async () => { + findIssuableList().vm.$emit('dismiss-alert'); + await nextTick(); + + expect(findIssuableList().props('error')).toBe(''); + }); + }); +}); |