1 files changed, 78 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/release_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/release_token_spec.js
new file mode 100644
index 00000000000..b804ff97b82
--- /dev/null
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/release_token_spec.js
@@ -0,0 +1,78 @@
+import { GlFilteredSearchToken, GlFilteredSearchTokenSegment } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import waitForPromises from 'helpers/wait_for_promises';
+import createFlash from '~/flash';
+import ReleaseToken from '~/vue_shared/components/filtered_search_bar/tokens/release_token.vue';
+import { mockReleaseToken } from '../mock_data';
+
+jest.mock('~/flash');
+
+describe('ReleaseToken', () => {
+  const id = 123;
+  let wrapper;
+
+  const createComponent = ({ config = mockReleaseToken, value = { data: '' } } = {}) =>
+    mount(ReleaseToken, {
+      propsData: {
+        active: false,
+        config,
+        value,
+      },
+      provide: {
+        portalName: 'fake target',
+        alignSuggestions: function fakeAlignSuggestions() {},
+        suggestionsListClass: () => 'custom-class',
+      },
+    });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders release value', async () => {
+    wrapper = createComponent({ value: { data: id } });
+    await wrapper.vm.$nextTick();
+
+    const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+
+    expect(tokenSegments).toHaveLength(3); // `Release` `=` `v1`
+    expect(tokenSegments.at(2).text()).toBe(id.toString());
+  });
+
+  it('fetches initial values', () => {
+    const fetchReleasesSpy = jest.fn().mockResolvedValue();
+
+    wrapper = createComponent({
+      config: { ...mockReleaseToken, fetchReleases: fetchReleasesSpy },
+      value: { data: id },
+    });
+
+    expect(fetchReleasesSpy).toHaveBeenCalledWith(id);
+  });
+
+  it('fetches releases on user input', () => {
+    const search = 'hello';
+    const fetchReleasesSpy = jest.fn().mockResolvedValue();
+
+    wrapper = createComponent({
+      config: { ...mockReleaseToken, fetchReleases: fetchReleasesSpy },
+    });
+
+    wrapper.findComponent(GlFilteredSearchToken).vm.$emit('input', { data: search });
+
+    expect(fetchReleasesSpy).toHaveBeenCalledWith(search);
+  });
+
+  it('renders error message when request fails', async () => {
+    const fetchReleasesSpy = jest.fn().mockRejectedValue();
+
+    wrapper = createComponent({
+      config: { ...mockReleaseToken, fetchReleases: fetchReleasesSpy },
+    });
+    await waitForPromises();
+
+    expect(createFlash).toHaveBeenCalledWith({
+      message: 'There was a problem fetching releases.',
+    });
+  });
+});