1 files changed, 56 insertions, 0 deletions
diff --git a/spec/frontend/releases/list/components/release_block_header_spec.js b/spec/frontend/releases/list/components/release_block_header_spec.js
new file mode 100644
index 00000000000..1f2331635d6
--- /dev/null
+++ b/spec/frontend/releases/list/components/release_block_header_spec.js
@@ -0,0 +1,56 @@
+import { shallowMount } from '@vue/test-utils';
+import { cloneDeep, merge } from 'lodash';
+import { GlLink } from '@gitlab/ui';
+import ReleaseBlockHeader from '~/releases/list/components/release_block_header.vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { release as originalRelease } from '../../mock_data';
+
+describe('Release block header', () => {
+  let wrapper;
+  let release;
+
+  const factory = (releaseUpdates = {}) => {
+    wrapper = shallowMount(ReleaseBlockHeader, {
+      propsData: {
+        release: merge({}, release, releaseUpdates),
+      },
+    });
+  };
+
+  beforeEach(() => {
+    release = convertObjectPropsToCamelCase(cloneDeep(originalRelease), {
+      ignoreKeyNames: ['_links'],
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findHeader = () => wrapper.find('h2');
+  const findHeaderLink = () => findHeader().find(GlLink);
+
+  describe('when _links.self is provided', () => {
+    beforeEach(() => {
+      factory();
+    });
+
+    it('renders the title as a link', () => {
+      const link = findHeaderLink();
+
+      expect(link.text()).toBe(release.name);
+      expect(link.attributes('href')).toBe(release._links.self);
+    });
+  });
+
+  describe('when _links.self is missing', () => {
+    beforeEach(() => {
+      factory({ _links: { self: null } });
+    });
+
+    it('renders the title as text', () => {
+      expect(findHeader().text()).toBe(release.name);
+      expect(findHeaderLink().exists()).toBe(false);
+    });
+  });
+});