1 files changed, 107 insertions, 0 deletions
diff --git a/spec/frontend/releases/components/tag_create_spec.js b/spec/frontend/releases/components/tag_create_spec.js
new file mode 100644
index 00000000000..0df2483bcf2
--- /dev/null
+++ b/spec/frontend/releases/components/tag_create_spec.js
@@ -0,0 +1,107 @@
+import { GlButton, GlFormInput, GlFormTextarea } from '@gitlab/ui';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { __, s__ } from '~/locale';
+import TagCreate from '~/releases/components/tag_create.vue';
+import RefSelector from '~/ref/components/ref_selector.vue';
+import createStore from '~/releases/stores';
+import createEditNewModule from '~/releases/stores/modules/edit_new';
+import { createRefModule } from '~/ref/stores';
+
+const TEST_PROJECT_ID = '1234';
+
+const VALUE = 'new-tag';
+
+describe('releases/components/tag_create', () => {
+  let store;
+  let wrapper;
+  let mock;
+
+  const createWrapper = () => {
+    wrapper = shallowMount(TagCreate, {
+      store,
+      propsData: { value: VALUE },
+    });
+  };
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    store = createStore({
+      modules: {
+        editNew: createEditNewModule({
+          projectId: TEST_PROJECT_ID,
+        }),
+        ref: createRefModule(),
+      },
+    });
+    store.state.editNew.release = {
+      tagMessage: 'test',
+    };
+    store.state.editNew.createFrom = 'v1';
+    createWrapper();
+  });
+
+  afterEach(() => mock.restore());
+
+  const findTagInput = () => wrapper.findComponent(GlFormInput);
+  const findTagRef = () => wrapper.findComponent(RefSelector);
+  const findTagMessage = () => wrapper.findComponent(GlFormTextarea);
+  const findSave = () => wrapper.findAllComponents(GlButton).at(-2);
+  const findCancel = () => wrapper.findAllComponents(GlButton).at(-1);
+
+  it('initializes the input with value prop', () => {
+    expect(findTagInput().attributes('value')).toBe(VALUE);
+  });
+
+  it('emits a change event when the tag name chagnes', () => {
+    findTagInput().vm.$emit('input', 'new-value');
+
+    expect(wrapper.emitted('change')).toEqual([['new-value']]);
+  });
+
+  it('binds the store value to the ref selector', () => {
+    const ref = findTagRef();
+    expect(ref.props('value')).toBe('v1');
+
+    ref.vm.$emit('input', 'v2');
+
+    expect(ref.props('value')).toBe('v1');
+  });
+
+  it('passes the project id tot he ref selector', () => {
+    expect(findTagRef().props('projectId')).toBe(TEST_PROJECT_ID);
+  });
+
+  it('binds the store value to the message', async () => {
+    const message = findTagMessage();
+    expect(message.attributes('value')).toBe('test');
+
+    message.vm.$emit('input', 'hello');
+
+    await nextTick();
+
+    expect(message.attributes('value')).toBe('hello');
+  });
+
+  it('emits create event when Save is clicked', () => {
+    const button = findSave();
+
+    expect(button.text()).toBe(__('Save'));
+
+    button.vm.$emit('click');
+
+    expect(wrapper.emitted('create')).toEqual([[]]);
+  });
+
+  it('emits cancel event when Select another tag is clicked', () => {
+    const button = findCancel();
+
+    expect(button.text()).toBe(s__('Release|Select another tag'));
+
+    button.vm.$emit('click');
+
+    expect(wrapper.emitted('cancel')).toEqual([[]]);
+  });
+});