From f64a639bcfa1fc2bc89ca7db268f594306edfd7c Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Tue, 16 Mar 2021 18:18:33 +0000 Subject: Add latest changes from gitlab-org/gitlab@13-10-stable-ee --- .../releases/components/tag_field_new_spec.js | 115 ++++++++++++++------- 1 file changed, 78 insertions(+), 37 deletions(-) (limited to 'spec/frontend/releases') diff --git a/spec/frontend/releases/components/tag_field_new_spec.js b/spec/frontend/releases/components/tag_field_new_spec.js index d87718138b8..387217c2a8e 100644 --- a/spec/frontend/releases/components/tag_field_new_spec.js +++ b/spec/frontend/releases/components/tag_field_new_spec.js @@ -1,6 +1,6 @@ -import { GlFormInput } from '@gitlab/ui'; +import { GlDropdownItem } from '@gitlab/ui'; import { mount, shallowMount } from '@vue/test-utils'; -import RefSelector from '~/ref/components/ref_selector.vue'; +import Vue from 'vue'; import TagFieldNew from '~/releases/components/tag_field_new.vue'; import createStore from '~/releases/stores'; import createDetailModule from '~/releases/stores/modules/detail'; @@ -8,6 +8,25 @@ import createDetailModule from '~/releases/stores/modules/detail'; const TEST_TAG_NAME = 'test-tag-name'; const TEST_PROJECT_ID = '1234'; const TEST_CREATE_FROM = 'test-create-from'; +const NONEXISTENT_TAG_NAME = 'nonexistent-tag'; + +// A mock version of the RefSelector component that simulates +// a scenario where the users has searched for "nonexistent-tag" +// and the component has found no tags that match. +const RefSelectorStub = Vue.component('RefSelectorStub', { + data() { + return { + footerSlotProps: { + isLoading: false, + matches: { + tags: { totalCount: 0 }, + }, + query: NONEXISTENT_TAG_NAME, + }, + }; + }, + template: '
', +}); describe('releases/components/tag_field_new', () => { let store; @@ -17,7 +36,7 @@ describe('releases/components/tag_field_new', () => { wrapper = mountFn(TagFieldNew, { store, stubs: { - RefSelector: true, + RefSelector: RefSelectorStub, }, }); }; @@ -47,11 +66,12 @@ describe('releases/components/tag_field_new', () => { }); const findTagNameFormGroup = () => wrapper.find('[data-testid="tag-name-field"]'); - const findTagNameGlInput = () => findTagNameFormGroup().find(GlFormInput); - const findTagNameInput = () => findTagNameFormGroup().find('input'); + const findTagNameDropdown = () => findTagNameFormGroup().find(RefSelectorStub); const findCreateFromFormGroup = () => wrapper.find('[data-testid="create-from-field"]'); - const findCreateFromDropdown = () => findCreateFromFormGroup().find(RefSelector); + const findCreateFromDropdown = () => findCreateFromFormGroup().find(RefSelectorStub); + + const findCreateNewTagOption = () => wrapper.find(GlDropdownItem); describe('"Tag name" field', () => { describe('rendering and behavior', () => { @@ -61,14 +81,37 @@ describe('releases/components/tag_field_new', () => { expect(findTagNameFormGroup().attributes().label).toBe('Tag name'); }); - describe('when the user updates the field', () => { + describe('when the user selects a new tag name', () => { + beforeEach(async () => { + findCreateNewTagOption().vm.$emit('click'); + + await wrapper.vm.$nextTick(); + }); + + it("updates the store's release.tagName property", () => { + expect(store.state.detail.release.tagName).toBe(NONEXISTENT_TAG_NAME); + }); + + it('hides the "Create from" field', () => { + expect(findCreateFromFormGroup().exists()).toBe(true); + }); + }); + + describe('when the user selects an existing tag name', () => { + const updatedTagName = 'updated-tag-name'; + + beforeEach(async () => { + findTagNameDropdown().vm.$emit('input', updatedTagName); + + await wrapper.vm.$nextTick(); + }); + it("updates the store's release.tagName property", () => { - const updatedTagName = 'updated-tag-name'; - findTagNameGlInput().vm.$emit('input', updatedTagName); + expect(store.state.detail.release.tagName).toBe(updatedTagName); + }); - return wrapper.vm.$nextTick().then(() => { - expect(store.state.detail.release.tagName).toBe(updatedTagName); - }); + it('shows the "Create from" field', () => { + expect(findCreateFromFormGroup().exists()).toBe(false); }); }); }); @@ -83,41 +126,39 @@ describe('releases/components/tag_field_new', () => { * @param {'shown' | 'hidden'} state The expected state of the validation message. * Should be passed either 'shown' or 'hidden' */ - const expectValidationMessageToBe = (state) => { - return wrapper.vm.$nextTick().then(() => { - expect(findTagNameFormGroup().element).toHaveClass( - state === 'shown' ? 'is-invalid' : 'is-valid', - ); - expect(findTagNameFormGroup().element).not.toHaveClass( - state === 'shown' ? 'is-valid' : 'is-invalid', - ); - }); + const expectValidationMessageToBe = async (state) => { + await wrapper.vm.$nextTick(); + + expect(findTagNameFormGroup().element).toHaveClass( + state === 'shown' ? 'is-invalid' : 'is-valid', + ); + expect(findTagNameFormGroup().element).not.toHaveClass( + state === 'shown' ? 'is-valid' : 'is-invalid', + ); }; describe('when the user has not yet interacted with the component', () => { - it('does not display a validation error', () => { - findTagNameInput().setValue(''); + it('does not display a validation error', async () => { + findTagNameDropdown().vm.$emit('input', ''); - return expectValidationMessageToBe('hidden'); + await expectValidationMessageToBe('hidden'); }); }); describe('when the user has interacted with the component and the value is not empty', () => { - it('does not display validation error', () => { - findTagNameInput().trigger('blur'); + it('does not display validation error', async () => { + findTagNameDropdown().vm.$emit('hide'); - return expectValidationMessageToBe('hidden'); + await expectValidationMessageToBe('hidden'); }); }); describe('when the user has interacted with the component and the value is empty', () => { - it('displays a validation error', () => { - const tagNameInput = findTagNameInput(); - - tagNameInput.setValue(''); - tagNameInput.trigger('blur'); + it('displays a validation error', async () => { + findTagNameDropdown().vm.$emit('input', ''); + findTagNameDropdown().vm.$emit('hide'); - return expectValidationMessageToBe('shown'); + await expectValidationMessageToBe('shown'); }); }); }); @@ -131,13 +172,13 @@ describe('releases/components/tag_field_new', () => { }); describe('when the user selects a git ref', () => { - it("updates the store's createFrom property", () => { + it("updates the store's createFrom property", async () => { const updatedCreateFrom = 'update-create-from'; findCreateFromDropdown().vm.$emit('input', updatedCreateFrom); - return wrapper.vm.$nextTick().then(() => { - expect(store.state.detail.createFrom).toBe(updatedCreateFrom); - }); + await wrapper.vm.$nextTick(); + + expect(store.state.detail.createFrom).toBe(updatedCreateFrom); }); }); }); -- cgit v1.2.1