1 files changed, 11 insertions, 35 deletions

diff --git a/spec/frontend/crm/contacts_root_spec.js b/spec/frontend/crm/contacts_root_spec.js
index 63b64a6c984..d6092e85917 100644
--- a/spec/frontend/crm/contacts_root_spec.js
+++ b/spec/frontend/crm/contacts_root_spec.js
@@ -1,34 +1,27 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import VueRouter from 'vue-router';
-import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import ContactsRoot from '~/crm/contacts/components/contacts_root.vue';
 import getGroupContactsQuery from '~/crm/contacts/components/graphql/get_group_contacts.query.graphql';
 import getGroupContactsCountByStateQuery from '~/crm/contacts/components/graphql/get_group_contacts_count_by_state.graphql';
-import routes from '~/crm/contacts/routes';
 import PaginatedTableWithSearchAndTabs from '~/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs.vue';
 import { getGroupContactsQueryResponse, getGroupContactsCountQueryResponse } from './mock_data';
 
+Vue.use(VueApollo);
+
 describe('Customer relations contacts root app', () => {
-  Vue.use(VueApollo);
-  Vue.use(VueRouter);
   let wrapper;
   let fakeApollo;
-  let router;
 
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-  const findRowByName = (rowName) => wrapper.findAllByRole('row', { name: rowName });
-  const findIssuesLinks = () => wrapper.findAllByTestId('issues-link');
   const findNewContactButton = () => wrapper.findByTestId('new-contact-button');
   const findTable = () => wrapper.findComponent(PaginatedTableWithSearchAndTabs);
   const successQueryHandler = jest.fn().mockResolvedValue(getGroupContactsQueryResponse);
   const successCountQueryHandler = jest.fn().mockResolvedValue(getGroupContactsCountQueryResponse);
 
-  const basePath = '/groups/flightjs/-/crm/contacts';
-
   const mountComponent = ({
     queryHandler = successQueryHandler,
     countQueryHandler = successCountQueryHandler,
@@ -39,8 +32,7 @@ describe('Customer relations contacts root app', () => {
       [getGroupContactsQuery, queryHandler],
       [getGroupContactsCountByStateQuery, countQueryHandler],
     ]);
-    wrapper = mountExtended(ContactsRoot, {
-      router,
+    wrapper = shallowMountExtended(ContactsRoot, {
       provide: {
         groupFullPath: 'flightjs',
         groupId: 26,
@@ -49,22 +41,10 @@ describe('Customer relations contacts root app', () => {
         textQuery,
       },
       apolloProvider: fakeApollo,
+      stubs: ['router-link', 'router-view'],
     });
   };
 
-  beforeEach(() => {
-    router = new VueRouter({
-      base: basePath,
-      mode: 'history',
-      routes,
-    });
-  });
-
-  afterEach(() => {
-    fakeApollo = null;
-    router = null;
-  });
-
   it('should render table with default props and loading state', () => {
     mountComponent();
 
@@ -114,19 +94,19 @@ describe('Customer relations contacts root app', () => {
       mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
       await waitForPromises();
 
-      expect(wrapper.text()).toContain('Something went wrong. Please try again.');
+      expect(findTable().props('showErrorMsg')).toBe(true);
     });
 
     it('should be removed on error-alert-dismissed event', async () => {
       mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
       await waitForPromises();
 
-      expect(wrapper.text()).toContain('Something went wrong. Please try again.');
+      expect(findTable().props('showErrorMsg')).toBe(true);
 
       findTable().vm.$emit('error-alert-dismissed');
       await waitForPromises();
 
-      expect(wrapper.text()).not.toContain('Something went wrong. Please try again.');
+      expect(findTable().props('showErrorMsg')).toBe(false);
     });
   });
 
@@ -142,13 +122,9 @@ describe('Customer relations contacts root app', () => {
       mountComponent();
       await waitForPromises();
 
-      expect(findRowByName(/Marty/i)).toHaveLength(1);
-      expect(findRowByName(/George/i)).toHaveLength(1);
-      expect(findRowByName(/jd@gitlab.com/i)).toHaveLength(1);
-
-      const issueLink = findIssuesLinks().at(0);
-      expect(issueLink.exists()).toBe(true);
-      expect(issueLink.attributes('href')).toBe('/issues?crm_contact_id=12');
+      expect(findTable().props('items')).toEqual(
+        getGroupContactsQueryResponse.data.group.contacts.nodes,
+      );
     });
   });
 });