diff options
Diffstat (limited to 'spec/frontend/crm')
-rw-r--r-- | spec/frontend/crm/form_spec.js | 5 | ||||
-rw-r--r-- | spec/frontend/crm/mock_data.js | 22 | ||||
-rw-r--r-- | spec/frontend/crm/organizations_root_spec.js | 92 |
3 files changed, 100 insertions, 19 deletions
diff --git a/spec/frontend/crm/form_spec.js b/spec/frontend/crm/form_spec.js index f0e9150cada..57e28b396cf 100644 --- a/spec/frontend/crm/form_spec.js +++ b/spec/frontend/crm/form_spec.js @@ -298,7 +298,7 @@ describe('Reusable form component', () => { `( 'should render the correct component for #$id with the value "$value"', ({ index, id, component, value }) => { - const findFormElement = () => findFormGroup(index).find(component); + const findFormElement = () => findFormGroup(index).findComponent(component); expect(findFormElement().attributes('id')).toBe(id); expect(findFormElement().attributes('value')).toBe(value); @@ -307,7 +307,8 @@ describe('Reusable form component', () => { it('should render a checked GlFormCheckbox for #active', () => { const activeCheckboxIndex = 6; - const findFormElement = () => findFormGroup(activeCheckboxIndex).find(GlFormCheckbox); + const findFormElement = () => + findFormGroup(activeCheckboxIndex).findComponent(GlFormCheckbox); expect(findFormElement().attributes('id')).toBe('active'); expect(findFormElement().attributes('checked')).toBe('true'); diff --git a/spec/frontend/crm/mock_data.js b/spec/frontend/crm/mock_data.js index a2e2e88ac60..a19ee01c2a5 100644 --- a/spec/frontend/crm/mock_data.js +++ b/spec/frontend/crm/mock_data.js @@ -102,6 +102,13 @@ export const getGroupOrganizationsQueryResponse = { active: true, }, ], + pageInfo: { + __typename: 'PageInfo', + hasNextPage: false, + endCursor: 'eyJsYXN0X25hbWUiOiJMZWRuZXIiLCJpZCI6IjE3OSJ9', + hasPreviousPage: false, + startCursor: 'eyJsYXN0X25hbWUiOiJCYXJ0b24iLCJpZCI6IjE5MyJ9', + }, }, }, }, @@ -155,6 +162,21 @@ export const updateContactMutationResponse = { }, }; +export const getGroupOrganizationsCountQueryResponse = { + data: { + group: { + __typename: 'Group', + id: 'gid://gitlab/Group/26', + organizationStateCounts: { + all: 24, + active: 21, + inactive: 3, + __typename: 'OrganizationStateCountsType', + }, + }, + }, +}; + export const updateContactMutationErrorResponse = { data: { customerRelationsContactUpdate: { diff --git a/spec/frontend/crm/organizations_root_spec.js b/spec/frontend/crm/organizations_root_spec.js index 1780a5945a6..a0b56596177 100644 --- a/spec/frontend/crm/organizations_root_spec.js +++ b/spec/frontend/crm/organizations_root_spec.js @@ -1,14 +1,19 @@ -import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon } from '@gitlab/ui'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; import VueRouter from 'vue-router'; -import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; import OrganizationsRoot from '~/crm/organizations/components/organizations_root.vue'; import routes from '~/crm/organizations/routes'; import getGroupOrganizationsQuery from '~/crm/organizations/components/graphql/get_group_organizations.query.graphql'; -import { getGroupOrganizationsQueryResponse } from './mock_data'; +import getGroupOrganizationsCountByStateQuery from '~/crm/organizations/components/graphql/get_group_organizations_count_by_state.query.graphql'; +import PaginatedTableWithSearchAndTabs from '~/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs.vue'; +import { + getGroupOrganizationsQueryResponse, + getGroupOrganizationsCountQueryResponse, +} from './mock_data'; describe('Customer relations organizations root app', () => { Vue.use(VueApollo); @@ -21,23 +26,31 @@ describe('Customer relations organizations root app', () => { const findRowByName = (rowName) => wrapper.findAllByRole('row', { name: rowName }); const findIssuesLinks = () => wrapper.findAllByTestId('issues-link'); const findNewOrganizationButton = () => wrapper.findByTestId('new-organization-button'); - const findError = () => wrapper.findComponent(GlAlert); + const findTable = () => wrapper.findComponent(PaginatedTableWithSearchAndTabs); const successQueryHandler = jest.fn().mockResolvedValue(getGroupOrganizationsQueryResponse); + const successCountQueryHandler = jest + .fn() + .mockResolvedValue(getGroupOrganizationsCountQueryResponse); const basePath = '/groups/flightjs/-/crm/organizations'; const mountComponent = ({ queryHandler = successQueryHandler, - mountFunction = shallowMountExtended, + countQueryHandler = successCountQueryHandler, canAdminCrmOrganization = true, + textQuery = null, } = {}) => { - fakeApollo = createMockApollo([[getGroupOrganizationsQuery, queryHandler]]); - wrapper = mountFunction(OrganizationsRoot, { + fakeApollo = createMockApollo([ + [getGroupOrganizationsQuery, queryHandler], + [getGroupOrganizationsCountByStateQuery, countQueryHandler], + ]); + wrapper = mountExtended(OrganizationsRoot, { router, provide: { canAdminCrmOrganization, groupFullPath: 'flightjs', groupIssuesPath: '/issues', + textQuery, }, apolloProvider: fakeApollo, }); @@ -57,9 +70,33 @@ describe('Customer relations organizations root app', () => { router = null; }); - it('should render loading spinner', () => { + it('should render table with default props and loading spinner', () => { mountComponent(); + expect(findTable().props()).toMatchObject({ + items: [], + itemsCount: {}, + pageInfo: {}, + statusTabs: [ + { title: 'Active', status: 'ACTIVE', filters: 'active' }, + { title: 'Inactive', status: 'INACTIVE', filters: 'inactive' }, + { title: 'All', status: 'ALL', filters: 'all' }, + ], + showItems: true, + showErrorMsg: false, + trackViewsOptions: { category: 'Customer Relations', action: 'view_organizations_list' }, + i18n: { + emptyText: 'No organizations found', + issuesButtonLabel: 'View issues', + editButtonLabel: 'Edit', + title: 'Customer relations organizations', + newOrganization: 'New organization', + errorText: 'Something went wrong. Please try again.', + }, + serverErrorMessage: '', + filterSearchKey: 'organizations', + filterSearchTokens: [], + }); expect(findLoadingIcon().exists()).toBe(true); }); @@ -77,11 +114,25 @@ describe('Customer relations organizations root app', () => { }); }); - it('should render error message on reject', async () => { - mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') }); - await waitForPromises(); + describe('error', () => { + it('should render on reject', async () => { + mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') }); + await waitForPromises(); + + expect(wrapper.text()).toContain('Something went wrong. Please try again.'); + }); + + it('should be removed on error-alert-dismissed event', async () => { + mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') }); + await waitForPromises(); - expect(findError().exists()).toBe(true); + expect(wrapper.text()).toContain('Something went wrong. Please try again.'); + + findTable().vm.$emit('error-alert-dismissed'); + await waitForPromises(); + + expect(wrapper.text()).not.toContain('Something went wrong. Please try again.'); + }); }); describe('on successful load', () => { @@ -89,20 +140,27 @@ describe('Customer relations organizations root app', () => { mountComponent(); await waitForPromises(); - expect(findError().exists()).toBe(false); + expect(wrapper.text()).not.toContain('Something went wrong. Please try again.'); }); it('renders correct results', async () => { - mountComponent({ mountFunction: mountExtended }); + mountComponent(); await waitForPromises(); expect(findRowByName(/Test Inc/i)).toHaveLength(1); expect(findRowByName(/VIP/i)).toHaveLength(1); expect(findRowByName(/120/i)).toHaveLength(1); - const issueLink = findIssuesLinks().at(0); - expect(issueLink.exists()).toBe(true); - expect(issueLink.attributes('href')).toBe('/issues?crm_organization_id=2'); + expect(findIssuesLinks()).toHaveLength(3); + + const links = findIssuesLinks().wrappers.map((w) => w.attributes('href')); + expect(links).toEqual( + expect.arrayContaining([ + '/issues?crm_organization_id=1', + '/issues?crm_organization_id=2', + '/issues?crm_organization_id=3', + ]), + ); }); }); }); |