diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-20 16:37:47 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-20 16:37:47 +0300 |
commit | aee0a117a889461ce8ced6fcf73207fe017f1d99 (patch) | |
tree | 891d9ef189227a8445d83f35c1b0fc99573f4380 /spec/frontend/work_items/pages | |
parent | 8d46af3258650d305f53b819eabf7ab18d22f59e (diff) |
Add latest changes from gitlab-org/gitlab@14-6-stable-eev14.6.0-rc42
Diffstat (limited to 'spec/frontend/work_items/pages')
-rw-r--r-- | spec/frontend/work_items/pages/create_work_item_spec.js | 94 | ||||
-rw-r--r-- | spec/frontend/work_items/pages/work_item_root_spec.js | 38 |
2 files changed, 125 insertions, 7 deletions
diff --git a/spec/frontend/work_items/pages/create_work_item_spec.js b/spec/frontend/work_items/pages/create_work_item_spec.js new file mode 100644 index 00000000000..71e153d30c3 --- /dev/null +++ b/spec/frontend/work_items/pages/create_work_item_spec.js @@ -0,0 +1,94 @@ +import Vue, { nextTick } from 'vue'; +import VueApollo from 'vue-apollo'; +import { GlAlert } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import waitForPromises from 'helpers/wait_for_promises'; +import CreateWorkItem from '~/work_items/pages/create_work_item.vue'; +import ItemTitle from '~/work_items/components/item_title.vue'; +import { resolvers } from '~/work_items/graphql/resolvers'; + +Vue.use(VueApollo); + +describe('Create work item component', () => { + let wrapper; + let fakeApollo; + + const findAlert = () => wrapper.findComponent(GlAlert); + const findTitleInput = () => wrapper.findComponent(ItemTitle); + const findCreateButton = () => wrapper.find('[data-testid="create-button"]'); + const findCancelButton = () => wrapper.find('[data-testid="cancel-button"]'); + + const createComponent = ({ data = {} } = {}) => { + fakeApollo = createMockApollo([], resolvers); + wrapper = shallowMount(CreateWorkItem, { + apolloProvider: fakeApollo, + data() { + return { + ...data, + }; + }, + mocks: { + $router: { + go: jest.fn(), + push: jest.fn(), + }, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + fakeApollo = null; + }); + + it('does not render error by default', () => { + createComponent(); + + expect(findAlert().exists()).toBe(false); + }); + + it('renders a disabled Create button when title input is empty', () => { + createComponent(); + + expect(findCreateButton().props('disabled')).toBe(true); + }); + + it('redirects to the previous page on Cancel button click', () => { + createComponent(); + findCancelButton().vm.$emit('click'); + + expect(wrapper.vm.$router.go).toHaveBeenCalledWith(-1); + }); + + it('hides the alert on dismissing the error', async () => { + createComponent({ data: { error: true } }); + expect(findAlert().exists()).toBe(true); + + findAlert().vm.$emit('dismiss'); + await nextTick(); + expect(findAlert().exists()).toBe(false); + }); + + describe('when title input field has a text', () => { + beforeEach(async () => { + const mockTitle = 'Test title'; + createComponent(); + await findTitleInput().vm.$emit('title-input', mockTitle); + }); + + it('renders a non-disabled Create button', () => { + expect(findCreateButton().props('disabled')).toBe(false); + }); + + it('redirects to the work item page on successful mutation', async () => { + wrapper.find('form').trigger('submit'); + await waitForPromises(); + + expect(wrapper.vm.$router.push).toHaveBeenCalled(); + }); + + // TODO: write a proper test here when we have a backend implementation + it.todo('shows an alert on mutation error'); + }); +}); diff --git a/spec/frontend/work_items/pages/work_item_root_spec.js b/spec/frontend/work_items/pages/work_item_root_spec.js index 64d02baed36..02795751f33 100644 --- a/spec/frontend/work_items/pages/work_item_root_spec.js +++ b/spec/frontend/work_items/pages/work_item_root_spec.js @@ -1,12 +1,16 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import Vue from 'vue'; +import { shallowMount } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; +import waitForPromises from 'helpers/wait_for_promises'; import workItemQuery from '~/work_items/graphql/work_item.query.graphql'; +import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql'; import WorkItemsRoot from '~/work_items/pages/work_item_root.vue'; +import ItemTitle from '~/work_items/components/item_title.vue'; +import { resolvers } from '~/work_items/graphql/resolvers'; import { workItemQueryResponse } from '../mock_data'; -const localVue = createLocalVue(); -localVue.use(VueApollo); +Vue.use(VueApollo); const WORK_ITEM_ID = '1'; @@ -14,10 +18,10 @@ describe('Work items root component', () => { let wrapper; let fakeApollo; - const findTitle = () => wrapper.find('[data-testid="title"]'); + const findTitle = () => wrapper.findComponent(ItemTitle); const createComponent = ({ queryResponse = workItemQueryResponse } = {}) => { - fakeApollo = createMockApollo(); + fakeApollo = createMockApollo([], resolvers); fakeApollo.clients.defaultClient.cache.writeQuery({ query: workItemQuery, variables: { @@ -30,7 +34,6 @@ describe('Work items root component', () => { propsData: { id: WORK_ITEM_ID, }, - localVue, apolloProvider: fakeApollo, }); }; @@ -44,7 +47,28 @@ describe('Work items root component', () => { createComponent(); expect(findTitle().exists()).toBe(true); - expect(findTitle().text()).toBe('Test'); + expect(findTitle().props('initialTitle')).toBe('Test'); + }); + + it('updates the title when it is edited', async () => { + createComponent(); + jest.spyOn(wrapper.vm.$apollo, 'mutate'); + const mockUpdatedTitle = 'Updated title'; + + await findTitle().vm.$emit('title-changed', mockUpdatedTitle); + + expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({ + mutation: updateWorkItemMutation, + variables: { + input: { + id: WORK_ITEM_ID, + title: mockUpdatedTitle, + }, + }, + }); + + await waitForPromises(); + expect(findTitle().props('initialTitle')).toBe(mockUpdatedTitle); }); it('does not render the title if title is not in the widgets list', () => { |