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('');
+    });
+  });
+});