1 files changed, 78 insertions, 37 deletions

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: '<div><slot name="footer" v-bind="footerSlotProps"></slot></div>',
+});
 
 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);
       });
     });
   });