1 files changed, 18 insertions, 66 deletions

diff --git a/spec/javascripts/pipelines/nav_controls_spec.js b/spec/javascripts/pipelines/nav_controls_spec.js
index 09a0c14d96c..77c5258f74c 100644
--- a/spec/javascripts/pipelines/nav_controls_spec.js
+++ b/spec/javascripts/pipelines/nav_controls_spec.js
@@ -1,116 +1,68 @@
 import Vue from 'vue';
 import navControlsComp from '~/pipelines/components/nav_controls.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
 
 describe('Pipelines Nav Controls', () => {
   let NavControlsComponent;
+  let component;
 
   beforeEach(() => {
     NavControlsComponent = Vue.extend(navControlsComp);
   });
 
+  afterEach(() => {
+    component.$destroy();
+  });
+
   it('should render link to create a new pipeline', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCiEnabled: true,
-      helpPagePath: 'foo',
       ciLintPath: 'foo',
       resetCachePath: 'foo',
-      canCreatePipeline: true,
     };
 
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
+    component = mountComponent(NavControlsComponent, mockData);
 
-    expect(component.$el.querySelector('.btn-create').textContent).toContain('Run Pipeline');
-    expect(component.$el.querySelector('.btn-create').getAttribute('href')).toEqual(mockData.newPipelinePath);
+    expect(component.$el.querySelector('.js-run-pipeline').textContent).toContain('Run Pipeline');
+    expect(component.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(mockData.newPipelinePath);
   });
 
-  it('should not render link to create pipeline if no permission is provided', () => {
+  it('should not render link to create pipeline if no path is provided', () => {
     const mockData = {
-      newPipelinePath: 'foo',
-      hasCiEnabled: true,
       helpPagePath: 'foo',
       ciLintPath: 'foo',
       resetCachePath: 'foo',
-      canCreatePipeline: false,
     };
 
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
+    component = mountComponent(NavControlsComponent, mockData);
 
-    expect(component.$el.querySelector('.btn-create')).toEqual(null);
+    expect(component.$el.querySelector('.js-run-pipeline')).toEqual(null);
   });
 
   it('should render link for resetting runner caches', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCiEnabled: true,
-      helpPagePath: 'foo',
       ciLintPath: 'foo',
       resetCachePath: 'foo',
-      canCreatePipeline: false,
     };
 
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
+    component = mountComponent(NavControlsComponent, mockData);
 
-    expect(component.$el.querySelectorAll('.btn-default')[0].textContent).toContain('Clear runner caches');
-    expect(component.$el.querySelectorAll('.btn-default')[0].getAttribute('href')).toEqual(mockData.resetCachePath);
+    expect(component.$el.querySelector('.js-clear-cache').textContent.trim()).toContain('Clear Runner Caches');
+    expect(component.$el.querySelector('.js-clear-cache').getAttribute('href')).toEqual(mockData.resetCachePath);
   });
 
   it('should render link for CI lint', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCiEnabled: true,
-      helpPagePath: 'foo',
-      ciLintPath: 'foo',
-      resetCachePath: 'foo',
-      canCreatePipeline: true,
-    };
-
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
-
-    expect(component.$el.querySelectorAll('.btn-default')[1].textContent).toContain('CI Lint');
-    expect(component.$el.querySelectorAll('.btn-default')[1].getAttribute('href')).toEqual(mockData.ciLintPath);
-  });
-
-  it('should render link to help page when CI is not enabled', () => {
-    const mockData = {
-      newPipelinePath: 'foo',
-      hasCiEnabled: false,
-      helpPagePath: 'foo',
-      ciLintPath: 'foo',
-      resetCachePath: 'foo',
-      canCreatePipeline: true,
-    };
-
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
-
-    expect(component.$el.querySelector('.btn-info').textContent).toContain('Get started with Pipelines');
-    expect(component.$el.querySelector('.btn-info').getAttribute('href')).toEqual(mockData.helpPagePath);
-  });
-
-  it('should not render link to help page when CI is enabled', () => {
-    const mockData = {
-      newPipelinePath: 'foo',
-      hasCiEnabled: true,
       helpPagePath: 'foo',
       ciLintPath: 'foo',
       resetCachePath: 'foo',
-      canCreatePipeline: true,
     };
 
-    const component = new NavControlsComponent({
-      propsData: mockData,
-    }).$mount();
+    component = mountComponent(NavControlsComponent, mockData);
 
-    expect(component.$el.querySelector('.btn-info')).toEqual(null);
+    expect(component.$el.querySelector('.js-ci-lint').textContent.trim()).toContain('CI Lint');
+    expect(component.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(mockData.ciLintPath);
   });
 });