Separate tests for triggerer component

spec/javascripts/pipelines/pipeline_triggerer_spec.js

+import { mount } from '@vue/test-utils';
+import pipelineTriggerer from '~/pipelines/components/pipeline_triggerer.vue';
+
+describe('Pipelines Triggerer', () => {
+  let wrapper;
+
+  const mockData = {
+    pipeline: {
+      user: {
+        name: 'foo',
+        avatar_url: '/avatar',
+        path: '/path',
+      },
+    },
+  };
+
+  const createComponent = () => {
+    wrapper = mount(pipelineTriggerer, {
+      propsData: mockData,
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render a table cell', () => {
+    expect(wrapper.contains('.table-section')).toBe(true);
+  });
+
+  it('should render triggerer information when triggerer is provided', () => {
+    const link = wrapper.find('.js-pipeline-url-user');
+
+    expect(link.attributes('href')).toEqual(mockData.pipeline.user.path);
+    expect(link.find('.js-user-avatar-image-toolip').text()).toEqual(mockData.pipeline.user.name);
+    expect(link.find('img.avatar').attributes('src')).toEqual(
+      `${mockData.pipeline.user.avatar_url}?width=26`,
+    );
+  });
+
+  it('should render "API" when no triggerer is provided', () => {
+    wrapper.setProps({
+      pipeline: {
+        user: null,
+      },
+    });
+
+    expect(wrapper.find('.js-pipeline-url-api').text()).toEqual('API');
+  });
+});

spec/javascripts/pipelines/pipeline_url_spec.js

@@ -42,54 +42,6 @@ describe('Pipeline Url Component', () => {
     expect(component.$el.querySelector('.js-pipeline-url-link span').textContent).toEqual('#1');
   });
 
-  it('should render user information when a user is provided', () => {
-    const mockData = {
-      pipeline: {
-        id: 1,
-        path: 'foo',
-        flags: {},
-        user: {
-          web_url: '/',
-          name: 'foo',
-          avatar_url: '/',
-          path: '/',
-        },
-      },
-      autoDevopsHelpPath: 'foo',
-    };
-
-    const component = new PipelineUrlComponent({
-      propsData: mockData,
-    }).$mount();
-
-    const image = component.$el.querySelector('.js-pipeline-url-user img');
-    const tooltip = component.$el.querySelector(
-      '.js-pipeline-url-user .js-user-avatar-image-toolip',
-    );
-
-    expect(component.$el.querySelector('.js-pipeline-url-user').getAttribute('href')).toEqual(
-      mockData.pipeline.user.web_url,
-    );
-
-    expect(tooltip.textContent.trim()).toEqual(mockData.pipeline.user.name);
-    expect(image.getAttribute('src')).toEqual(`${mockData.pipeline.user.avatar_url}?width=20`);
-  });
-
-  it('should render "API" when no user is provided', () => {
-    const component = new PipelineUrlComponent({
-      propsData: {
-        pipeline: {
-          id: 1,
-          path: 'foo',
-          flags: {},
-        },
-        autoDevopsHelpPath: 'foo',
-      },
-    }).$mount();
-
-    expect(component.$el.querySelector('.js-pipeline-url-api').textContent).toContain('API');
-  });
-
   it('should render latest, yaml invalid, merge request, and stuck flags when provided', () => {
     const component = new PipelineUrlComponent({
       propsData: {

spec/javascripts/pipelines/pipelines_table_row_spec.js

@@ -80,13 +80,13 @@ describe('Pipelines Table Row', () => {
       it('should render user information', () => {
         expect(
           component.$el
-            .querySelector('.table-section:nth-child(2) a:nth-child(3)')
+            .querySelector('.table-section:nth-child(3) .js-pipeline-url-user')
             .getAttribute('href'),
         ).toEqual(pipeline.user.path);
 
         expect(
           component.$el
-            .querySelector('.table-section:nth-child(2) .js-user-avatar-image-toolip')
+            .querySelector('.table-section:nth-child(3) .js-user-avatar-image-toolip')
             .textContent.trim(),
         ).toEqual(pipeline.user.name);
       });