Migrate artifacts spec to jest

Migrate the pipelines artifacts
spec from karma to jest. And also
now using vue test utils.

app/assets/javascripts/pipelines/components/pipelines_artifacts.vue

@@ -33,7 +33,7 @@ export default {
       <i class="fa fa-caret-down" aria-hidden="true"></i>
     </button>
     <ul class="dropdown-menu dropdown-menu-right">
-      <li v-for="(artifact, i) in artifacts" :key="i">
+      <li v-for="(artifact, i) in artifacts" :key="i" data-testid="artifact">
         <gl-link :href="artifact.path" rel="nofollow" download
           >Download {{ artifact.name }} artifacts</gl-link
         >

spec/frontend/pipelines/pipelines_artifacts_spec.js

+import { shallowMount } from '@vue/test-utils';
+import PipelineArtifacts from '~/pipelines/components/pipelines_artifacts.vue';
+import { GlLink } from '@gitlab/ui';
+
+describe('Pipelines Artifacts dropdown', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(PipelineArtifacts, {
+      propsData: {
+        artifacts: [
+          {
+            name: 'artifact',
+            path: '/download/path',
+          },
+        ],
+      },
+    });
+  };
+
+  const findGlLink = () => wrapper.find(GlLink);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('should render a dropdown with the provided artifacts', () => {
+    expect(wrapper.findAll('[data-testid="artifact"]')).toHaveLength(1);
+  });
+
+  it('should render a link with the provided path', () => {
+    expect(findGlLink().attributes('href')).toEqual('/download/path');
+
+    expect(findGlLink().text()).toContain('artifact');
+  });
+});

spec/javascripts/pipelines/pipelines_artifacts_spec.js

-import Vue from 'vue';
-import artifactsComp from '~/pipelines/components/pipelines_artifacts.vue';
-
-describe('Pipelines Artifacts dropdown', () => {
-  let component;
-  let artifacts;
-
-  beforeEach(() => {
-    const ArtifactsComponent = Vue.extend(artifactsComp);
-
-    artifacts = [
-      {
-        name: 'artifact',
-        path: '/download/path',
-      },
-    ];
-
-    component = new ArtifactsComponent({
-      propsData: {
-        artifacts,
-      },
-    }).$mount();
-  });
-
-  it('should render a dropdown with the provided artifacts', () => {
-    expect(component.$el.querySelectorAll('.dropdown-menu li').length).toEqual(artifacts.length);
-  });
-
-  it('should render a link with the provided path', () => {
-    expect(component.$el.querySelector('.dropdown-menu li a').getAttribute('href')).toEqual(
-      artifacts[0].path,
-    );
-
-    expect(component.$el.querySelector('.dropdown-menu li a').textContent).toContain(
-      artifacts[0].name,
-    );
-  });
-});