1 files changed, 47 insertions, 25 deletions

diff --git a/spec/frontend/releases/components/tag_field_new_spec.js b/spec/frontend/releases/components/tag_field_new_spec.js
index f1608ca31b4..114e46ce64b 100644
--- a/spec/frontend/releases/components/tag_field_new_spec.js
+++ b/spec/frontend/releases/components/tag_field_new_spec.js
@@ -10,29 +10,35 @@ 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;
   let wrapper;
+  let RefSelectorStub;
+
+  const createComponent = (
+    mountFn = shallowMount,
+    { searchQuery } = { searchQuery: NONEXISTENT_TAG_NAME },
+  ) => {
+    // A mock version of the RefSelector component that just renders the
+    // #footer slot, so that the content inside this slot can be tested.
+    RefSelectorStub = Vue.component('RefSelectorStub', {
+      data() {
+        return {
+          footerSlotProps: {
+            isLoading: false,
+            matches: {
+              tags: {
+                totalCount: 1,
+                list: [{ name: TEST_TAG_NAME }],
+              },
+            },
+            query: searchQuery,
+          },
+        };
+      },
+      template: '<div><slot name="footer" v-bind="footerSlotProps"></slot></div>',
+    });
 
-  const createComponent = (mountFn = shallowMount) => {
     wrapper = mountFn(TagFieldNew, {
       store,
       stubs: {
@@ -84,8 +90,6 @@ describe('releases/components/tag_field_new', () => {
       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", () => {
@@ -102,8 +106,6 @@ describe('releases/components/tag_field_new', () => {
 
         beforeEach(async () => {
           findTagNameDropdown().vm.$emit('input', updatedTagName);
-
-          await wrapper.vm.$nextTick();
         });
 
         it("updates the store's release.tagName property", () => {
@@ -116,6 +118,28 @@ describe('releases/components/tag_field_new', () => {
       });
     });
 
+    describe('"Create tag" option', () => {
+      describe('when the search query exactly matches one of the search results', () => {
+        beforeEach(async () => {
+          createComponent(mount, { searchQuery: TEST_TAG_NAME });
+        });
+
+        it('does not show the "Create tag" option', () => {
+          expect(findCreateNewTagOption().exists()).toBe(false);
+        });
+      });
+
+      describe('when the search query does not exactly match one of the search results', () => {
+        beforeEach(async () => {
+          createComponent(mount, { searchQuery: NONEXISTENT_TAG_NAME });
+        });
+
+        it('shows the "Create tag" option', () => {
+          expect(findCreateNewTagOption().exists()).toBe(true);
+        });
+      });
+    });
+
     describe('validation', () => {
       beforeEach(() => {
         createComponent(mount);
@@ -176,8 +200,6 @@ describe('releases/components/tag_field_new', () => {
         const updatedCreateFrom = 'update-create-from';
         findCreateFromDropdown().vm.$emit('input', updatedCreateFrom);
 
-        await wrapper.vm.$nextTick();
-
         expect(store.state.editNew.createFrom).toBe(updatedCreateFrom);
       });
     });