diff options
Diffstat (limited to 'spec/frontend/organizations/users/components/app_spec.js')
-rw-r--r-- | spec/frontend/organizations/users/components/app_spec.js | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/spec/frontend/organizations/users/components/app_spec.js b/spec/frontend/organizations/users/components/app_spec.js new file mode 100644 index 00000000000..b30fd984099 --- /dev/null +++ b/spec/frontend/organizations/users/components/app_spec.js @@ -0,0 +1,81 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import waitForPromises from 'helpers/wait_for_promises'; +import { createAlert } from '~/alert'; +import organizationUsersQuery from '~/organizations/users/graphql/organization_users.query.graphql'; +import OrganizationsUsersApp from '~/organizations/users/components/app.vue'; +import { MOCK_ORGANIZATION_GID, MOCK_USERS } from '../mock_data'; + +jest.mock('~/alert'); + +Vue.use(VueApollo); + +const mockError = new Error(); + +const loadingResolver = jest.fn().mockReturnValue(new Promise(() => {})); +const successfulResolver = (nodes) => + jest.fn().mockResolvedValue({ + data: { organization: { id: 1, organizationUsers: { nodes } } }, + }); +const errorResolver = jest.fn().mockRejectedValueOnce(mockError); + +describe('OrganizationsUsersApp', () => { + let wrapper; + let mockApollo; + + const createComponent = (mockResolvers = successfulResolver(MOCK_USERS)) => { + mockApollo = createMockApollo([[organizationUsersQuery, mockResolvers]]); + + wrapper = shallowMountExtended(OrganizationsUsersApp, { + apolloProvider: mockApollo, + provide: { + organizationGid: MOCK_ORGANIZATION_GID, + }, + }); + }; + + afterEach(() => { + mockApollo = null; + }); + + const findOrganizationUsersLoading = () => wrapper.findByText('Loading'); + const findOrganizationUsers = () => wrapper.findByTestId('organization-users'); + + describe.each` + description | mockResolver | loading | userData | error + ${'when API call is loading'} | ${loadingResolver} | ${true} | ${[]} | ${false} + ${'when API returns successful with results'} | ${successfulResolver(MOCK_USERS)} | ${false} | ${MOCK_USERS} | ${false} + ${'when API returns successful without results'} | ${successfulResolver([])} | ${false} | ${[]} | ${false} + ${'when API returns error'} | ${errorResolver} | ${false} | ${[]} | ${true} + `('$description', ({ mockResolver, loading, userData, error }) => { + beforeEach(async () => { + createComponent(mockResolver); + await waitForPromises(); + }); + + it(`does ${ + loading ? '' : 'not ' + }render the organization users view with loading placeholder`, () => { + expect(findOrganizationUsersLoading().exists()).toBe(loading); + }); + + it(`renders the organization users view with ${ + userData.length ? 'correct' : 'empty' + } users array raw data`, () => { + expect(JSON.parse(findOrganizationUsers().text())).toStrictEqual(userData); + }); + + it(`does ${error ? '' : 'not '}render an error message`, () => { + return error + ? expect(createAlert).toHaveBeenCalledWith({ + message: + 'An error occurred loading the organization users. Please refresh the page to try again.', + error: mockError, + captureError: true, + }) + : expect(createAlert).not.toHaveBeenCalled(); + }); + }); +}); |