Refactor pipeline empty state specs

Aligns the spec with our current testing standards and prepares it for
a future experiment.

app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue

@@ -29,11 +29,13 @@ export default {
     </div>
 
     <div class="col-12">
-      <div class="text-content">
+      <div class="gl-text-content">
         <template v-if="canSetCi">
-          <h4 class="text-center">{{ s__('Pipelines|Build with confidence') }}</h4>
+          <h4 class="gl-text-center" data-testid="header-text">
+            {{ s__('Pipelines|Build with confidence') }}
+          </h4>
 
-          <p>
+          <p data-testid="info-text">
             {{
               s__(`Pipelines|Continuous Integration can help
                 catch bugs by running your tests automatically,
@@ -42,12 +44,11 @@ export default {
             }}
           </p>
 
-          <div class="text-center">
+          <div class="gl-text-center">
             <gl-button
               :href="helpPagePath"
               variant="info"
               category="primary"
-              class="js-get-started-pipelines"
               data-testid="get-started-pipelines"
             >
               {{ s__('Pipelines|Get started with Pipelines') }}
@@ -55,7 +56,7 @@ export default {
           </div>
         </template>
 
-        <p v-else class="text-center">
+        <p v-else class="gl-text-center">
           {{ s__('Pipelines|This project is not currently set up to run pipelines.') }}
         </p>
       </div>

spec/frontend/pipelines/empty_state_spec.js

-import Vue from 'vue';
-import emptyStateComp from '~/pipelines/components/pipelines_list/empty_state.vue';
-import mountComponent from '../helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
+import EmptyState from '~/pipelines/components/pipelines_list/empty_state.vue';
 
 describe('Pipelines Empty State', () => {
-  let component;
-  let EmptyStateComponent;
+  let wrapper;
+
+  const findGetStartedButton = () => wrapper.find('[data-testid="get-started-pipelines"]');
+  const findInfoText = () => wrapper.find('[data-testid="info-text"]').text();
+  const createWrapper = () => {
+    wrapper = shallowMount(EmptyState, {
+      propsData: {
+        helpPagePath: 'foo',
+        emptyStateSvgPath: 'foo',
+        canSetCi: true,
+      },
+    });
+  };
 
-  beforeEach(() => {
-    EmptyStateComponent = Vue.extend(emptyStateComp);
+  describe('renders', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
 
-    component = mountComponent(EmptyStateComponent, {
-      helpPagePath: 'foo',
-      emptyStateSvgPath: 'foo',
-      canSetCi: true,
+    afterEach(() => {
+      wrapper.destroy();
+      wrapper = null;
     });
-  });
 
-  afterEach(() => {
-    component.$destroy();
-  });
+    it('should render empty state SVG', () => {
+      expect(wrapper.find('img').attributes('src')).toBe('foo');
+    });
 
-  it('should render empty state SVG', () => {
-    expect(component.$el.querySelector('.svg-content svg')).toBeDefined();
-  });
+    it('should render empty state header', () => {
+      expect(wrapper.find('[data-testid="header-text"]').text()).toBe('Build with confidence');
+    });
 
-  it('should render empty state information', () => {
-    expect(component.$el.querySelector('h4').textContent).toContain('Build with confidence');
-
-    expect(
-      component.$el
-        .querySelector('p')
-        .innerHTML.trim()
-        .replace(/\n+\s+/m, ' ')
-        .replace(/\s\s+/g, ' '),
-    ).toContain('Continuous Integration can help catch bugs by running your tests automatically,');
-
-    expect(
-      component.$el
-        .querySelector('p')
-        .innerHTML.trim()
-        .replace(/\n+\s+/m, ' ')
-        .replace(/\s\s+/g, ' '),
-    ).toContain(
-      'while Continuous Deployment can help you deliver code to your product environment',
-    );
-  });
+    it('should render a link with provided help path', () => {
+      expect(findGetStartedButton().attributes('href')).toBe('foo');
+    });
 
-  it('should render a link with provided help path', () => {
-    expect(component.$el.querySelector('.js-get-started-pipelines').getAttribute('href')).toEqual(
-      'foo',
-    );
+    it('should render empty state information', () => {
+      expect(findInfoText()).toContain(
+        'Continuous Integration can help catch bugs by running your tests automatically',
+        'while Continuous Deployment can help you deliver code to your product environment',
+      );
+    });
 
-    expect(component.$el.querySelector('.js-get-started-pipelines').textContent).toContain(
-      'Get started with Pipelines',
-    );
+    it('should render a button', () => {
+      expect(findGetStartedButton().text()).toBe('Get started with Pipelines');
+    });
   });
 });