1 files changed, 93 insertions, 17 deletions

diff --git a/spec/frontend/pipelines/pipelines_artifacts_spec.js b/spec/frontend/pipelines/pipelines_artifacts_spec.js
index d4a2db08d97..336255768d7 100644
--- a/spec/frontend/pipelines/pipelines_artifacts_spec.js
+++ b/spec/frontend/pipelines/pipelines_artifacts_spec.js
@@ -1,23 +1,43 @@
-import { GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlDropdown, GlDropdownItem, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import PipelineArtifacts from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';
+import MockAdapter from 'axios-mock-adapter';
+import waitForPromises from 'helpers/wait_for_promises';
+import axios from '~/lib/utils/axios_utils';
+import PipelineArtifacts, {
+  i18n,
+} from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';
 
 describe('Pipelines Artifacts dropdown', () => {
   let wrapper;
+  let mockAxios;
 
-  const createComponent = () => {
+  const artifacts = [
+    {
+      name: 'job my-artifact',
+      path: '/download/path',
+    },
+    {
+      name: 'job-2 my-artifact-2',
+      path: '/download/path-two',
+    },
+  ];
+  const artifactsEndpointPlaceholder = ':pipeline_artifacts_id';
+  const artifactsEndpoint = `endpoint/${artifactsEndpointPlaceholder}/artifacts.json`;
+  const pipelineId = 108;
+
+  const createComponent = ({ mockData = {} } = {}) => {
     wrapper = shallowMount(PipelineArtifacts, {
+      provide: {
+        artifactsEndpoint,
+        artifactsEndpointPlaceholder,
+      },
       propsData: {
-        artifacts: [
-          {
-            name: 'job my-artifact',
-            path: '/download/path',
-          },
-          {
-            name: 'job-2 my-artifact-2',
-            path: '/download/path-two',
-          },
-        ],
+        pipelineId,
+      },
+      data() {
+        return {
+          ...mockData,
+        };
       },
       stubs: {
         GlSprintf,
@@ -25,11 +45,14 @@ describe('Pipelines Artifacts dropdown', () => {
     });
   };
 
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findFirstGlDropdownItem = () => wrapper.find(GlDropdownItem);
   const findAllGlDropdownItems = () => wrapper.find(GlDropdown).findAll(GlDropdownItem);
 
   beforeEach(() => {
-    createComponent();
+    mockAxios = new MockAdapter(axios);
   });
 
   afterEach(() => {
@@ -37,13 +60,66 @@ describe('Pipelines Artifacts dropdown', () => {
     wrapper = null;
   });
 
+  it('should render the dropdown', () => {
+    createComponent();
+
+    expect(findDropdown().exists()).toBe(true);
+  });
+
+  it('should fetch artifacts on dropdown click', async () => {
+    const endpoint = artifactsEndpoint.replace(artifactsEndpointPlaceholder, pipelineId);
+    mockAxios.onGet(endpoint).replyOnce(200, { artifacts });
+    createComponent();
+    findDropdown().vm.$emit('show');
+    await waitForPromises();
+
+    expect(mockAxios.history.get).toHaveLength(1);
+    expect(wrapper.vm.artifacts).toEqual(artifacts);
+  });
+
   it('should render a dropdown with all the provided artifacts', () => {
-    expect(findAllGlDropdownItems()).toHaveLength(2);
+    createComponent({ mockData: { artifacts } });
+
+    expect(findAllGlDropdownItems()).toHaveLength(artifacts.length);
   });
 
   it('should render a link with the provided path', () => {
-    expect(findFirstGlDropdownItem().attributes('href')).toBe('/download/path');
+    createComponent({ mockData: { artifacts } });
 
-    expect(findFirstGlDropdownItem().text()).toBe('Download job my-artifact artifact');
+    expect(findFirstGlDropdownItem().attributes('href')).toBe(artifacts[0].path);
+
+    expect(findFirstGlDropdownItem().text()).toBe(`Download ${artifacts[0].name} artifact`);
+  });
+
+  describe('with a failing request', () => {
+    it('should render an error message', async () => {
+      const endpoint = artifactsEndpoint.replace(artifactsEndpointPlaceholder, pipelineId);
+      mockAxios.onGet(endpoint).replyOnce(500);
+      createComponent();
+      findDropdown().vm.$emit('show');
+      await waitForPromises();
+
+      const error = findAlert();
+      expect(error.exists()).toBe(true);
+      expect(error.text()).toBe(i18n.artifactsFetchErrorMessage);
+    });
+  });
+
+  describe('with no artifacts received', () => {
+    it('should render empty alert message', () => {
+      createComponent({ mockData: { artifacts: [] } });
+
+      const emptyAlert = findAlert();
+      expect(emptyAlert.exists()).toBe(true);
+      expect(emptyAlert.text()).toBe(i18n.noArtifacts);
+    });
+  });
+
+  describe('when artifacts are loading', () => {
+    it('should show loading icon', () => {
+      createComponent({ mockData: { isLoading: true } });
+
+      expect(findLoadingIcon().exists()).toBe(true);
+    });
   });
 });