2 files changed, 176 insertions, 0 deletions
diff --git a/spec/frontend/releases/components/milestone_list_spec.js b/spec/frontend/releases/components/milestone_list_spec.js
new file mode 100644
index 00000000000..f267177ddab
--- /dev/null
+++ b/spec/frontend/releases/components/milestone_list_spec.js
@@ -0,0 +1,56 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
+import MilestoneList from '~/releases/components/milestone_list.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import _ from 'underscore';
+import { milestones } from '../mock_data';
+
+describe('Milestone list', () => {
+  let wrapper;
+
+  const factory = milestonesProp => {
+    wrapper = shallowMount(MilestoneList, {
+      propsData: {
+        milestones: milestonesProp,
+      },
+      sync: false,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the milestone icon', () => {
+    factory(milestones);
+
+    expect(wrapper.find(Icon).exists()).toBe(true);
+  });
+
+  it('renders the label as "Milestone" if only a single milestone is passed in', () => {
+    factory(milestones.slice(0, 1));
+
+    expect(wrapper.find('.js-label-text').text()).toEqual('Milestone');
+  });
+
+  it('renders the label as "Milestones" if more than one milestone is passed in', () => {
+    factory(milestones);
+
+    expect(wrapper.find('.js-label-text').text()).toEqual('Milestones');
+  });
+
+  it('renders a link to the milestone with a tooltip', () => {
+    const milestone = _.first(milestones);
+    factory([milestone]);
+
+    const milestoneLink = wrapper.find(GlLink);
+
+    expect(milestoneLink.exists()).toBe(true);
+
+    expect(milestoneLink.text()).toBe(milestone.title);
+
+    expect(milestoneLink.attributes('href')).toBe(milestone.web_url);
+
+    expect(milestoneLink.attributes('data-original-title')).toBe(milestone.description);
+  });
+});
diff --git a/spec/frontend/releases/components/release_block_spec.js b/spec/frontend/releases/components/release_block_spec.js
new file mode 100644
index 00000000000..4be5d500fd9
--- /dev/null
+++ b/spec/frontend/releases/components/release_block_spec.js
@@ -0,0 +1,120 @@
+import { mount } from '@vue/test-utils';
+import ReleaseBlock from '~/releases/components/release_block.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { first } from 'underscore';
+import { release } from '../mock_data';
+
+describe('Release block', () => {
+  let wrapper;
+
+  const factory = releaseProp => {
+    wrapper = mount(ReleaseBlock, {
+      propsData: {
+        release: releaseProp,
+      },
+      sync: false,
+    });
+  };
+
+  const milestoneListExists = () => wrapper.find('.js-milestone-list').exists();
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('with default props', () => {
+    beforeEach(() => {
+      factory(release);
+    });
+
+    it("renders the block with an id equal to the release's tag name", () => {
+      expect(wrapper.attributes().id).toBe('v0.3');
+    });
+
+    it('renders release name', () => {
+      expect(wrapper.text()).toContain(release.name);
+    });
+
+    it('renders commit sha', () => {
+      expect(wrapper.text()).toContain(release.commit.short_id);
+    });
+
+    it('renders tag name', () => {
+      expect(wrapper.text()).toContain(release.tag_name);
+    });
+
+    it('renders release date', () => {
+      expect(wrapper.text()).toContain(timeagoMixin.methods.timeFormated(release.released_at));
+    });
+
+    it('renders number of assets provided', () => {
+      expect(wrapper.find('.js-assets-count').text()).toContain(release.assets.count);
+    });
+
+    it('renders dropdown with the sources', () => {
+      expect(wrapper.findAll('.js-sources-dropdown li').length).toEqual(
+        release.assets.sources.length,
+      );
+
+      expect(wrapper.find('.js-sources-dropdown li a').attributes().href).toEqual(
+        first(release.assets.sources).url,
+      );
+
+      expect(wrapper.find('.js-sources-dropdown li a').text()).toContain(
+        first(release.assets.sources).format,
+      );
+    });
+
+    it('renders list with the links provided', () => {
+      expect(wrapper.findAll('.js-assets-list li').length).toEqual(release.assets.links.length);
+
+      expect(wrapper.find('.js-assets-list li a').attributes().href).toEqual(
+        first(release.assets.links).url,
+      );
+
+      expect(wrapper.find('.js-assets-list li a').text()).toContain(
+        first(release.assets.links).name,
+      );
+    });
+
+    it('renders author avatar', () => {
+      expect(wrapper.find('.user-avatar-link').exists()).toBe(true);
+    });
+
+    describe('external label', () => {
+      it('renders external label when link is external', () => {
+        expect(wrapper.find('.js-assets-list li a').text()).toContain('external source');
+      });
+
+      it('does not render external label when link is not external', () => {
+        expect(wrapper.find('.js-assets-list li:nth-child(2) a').text()).not.toContain(
+          'external source',
+        );
+      });
+    });
+
+    it('renders the milestone list if at least one milestone is associated to the release', () => {
+      factory(release);
+
+      expect(milestoneListExists()).toBe(true);
+    });
+  });
+
+  it('does not render the milestone list if no milestones are associated to the release', () => {
+    const releaseClone = JSON.parse(JSON.stringify(release));
+    delete releaseClone.milestone;
+
+    factory(releaseClone);
+
+    expect(milestoneListExists()).toBe(false);
+  });
+
+  it('renders upcoming release badge', () => {
+    const releaseClone = JSON.parse(JSON.stringify(release));
+    releaseClone.upcoming_release = true;
+
+    factory(releaseClone);
+
+    expect(wrapper.text()).toContain('Upcoming Release');
+  });
+});