Move performance bar component specs to Jest

The main change is in using vue-test-utils, which don't work well with Karma, but make our specs cleaner.

Move performance bar component specs to Jest
The main change is in using vue-test-utils, which don't work well with Karma, but make our specs cleaner.
e444a6f2 · Sean McGivern · 21371119 · e444a6f2 · e444a6f2 · e444a6f2
--- a/spec/javascripts/performance_bar/components/detailed_metric_spec.js
+++ b/spec/javascripts/performance_bar/components/detailed_metric_spec.js
-import Vue from 'vue';
-import detailedMetric from '~/performance_bar/components/detailed_metric.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import DetailedMetric from '~/performance_bar/components/detailed_metric.vue';
+import RequestWarning from '~/performance_bar/components/request_warning.vue';
+import { shallowMount } from '@vue/test-utils';

 describe('detailedMetric', () => {
-  let vm;
-
-  afterEach(() => {
-    vm.$destroy();
-  });
+  const createComponent = props =>
+    shallowMount(DetailedMetric, {
+      propsData: {
+        ...props,
+      },
+    });

  describe('when the current request has no details', () => {
-    beforeEach(() => {
-      vm = mountComponent(Vue.extend(detailedMetric), {
-        currentRequest: {},
-        metric: 'gitaly',
-        header: 'Gitaly calls',
-        details: 'details',
-        keys: ['feature', 'request'],
-      });
+    const wrapper = createComponent({
+      currentRequest: {},
+      metric: 'gitaly',
+      header: 'Gitaly calls',
+      details: 'details',
+      keys: ['feature', 'request'],
    });

    it('does not render the element', () => {
-      expect(vm.$el.innerHTML).toEqual(undefined);
+      expect(wrapper.isEmpty()).toBe(true);
    });
  });

@@ -31,8 +30,9 @@ describe('detailedMetric', () => {
      { duration: '23', feature: 'rebase_in_progress', request: '', backtrace: ['world', 'hello'] },
    ];

-    beforeEach(() => {
-      vm = mountComponent(Vue.extend(detailedMetric), {
+    describe('with a default metric name', () => {
+
+      const wrapper = createComponent({
        currentRequest: {
          details: {
            gitaly: {
@@ -47,67 +47,65 @@ describe('detailedMetric', () => {
        header: 'Gitaly calls',
        keys: ['feature', 'request'],
      });
-    });
-
-    it('diplays details', () => {
-      expect(vm.$el.innerText.replace(/\s+/g, ' ')).toContain('123ms / 456');
-    });
-
-    it('adds a modal with a table of the details', () => {
-      vm.$el
-        .querySelectorAll('.performance-bar-modal td:nth-child(1)')
-        .forEach((duration, index) => {
-          expect(duration.innerText).toContain(requestDetails[index].duration);
-        });

-      vm.$el
-        .querySelectorAll('.performance-bar-modal td:nth-child(2)')
-        .forEach((feature, index) => {
-          expect(feature.innerText).toContain(requestDetails[index].feature);
-        });
+      it('displays details', () => {
+        expect(wrapper.text().replace(/\s+/g, ' ')).toContain('123ms / 456');
+      });

-      vm.$el
-        .querySelectorAll('.performance-bar-modal td:nth-child(2)')
-        .forEach((request, index) => {
-          expect(request.innerText).toContain(requestDetails[index].request);
+      it('adds a modal with a table of the details', () => {
+        wrapper
+          .findAll('.performance-bar-modal td:nth-child(1)')
+          .wrappers.forEach((duration, index) => {
+            expect(duration.text()).toContain(requestDetails[index].duration);
+          });
+
+        wrapper
+          .findAll('.performance-bar-modal td:nth-child(2)')
+          .wrappers.forEach((feature, index) => {
+            expect(feature.text()).toContain(requestDetails[index].feature);
+          });
+
+        wrapper
+          .findAll('.performance-bar-modal td:nth-child(2)')
+          .wrappers.forEach((request, index) => {
+            expect(request.text()).toContain(requestDetails[index].request);
+          });
+
+        expect(wrapper.find('.text-expander.js-toggle-button')).not.toBeNull();
+
+        wrapper.findAll('.performance-bar-modal td:nth-child(2)').wrappers.forEach(request => {
+          expect(request.text()).toContain('world');
        });
-
-      expect(vm.$el.querySelector('.text-expander.js-toggle-button')).not.toBeNull();
-
-      vm.$el.querySelectorAll('.performance-bar-modal td:nth-child(2)').forEach(request => {
-        expect(request.innerText).toContain('world');
      });
-    });

-    it('displays the metric title', () => {
-      expect(vm.$el.innerText).toContain('gitaly');
-    });
+      it('displays the metric title', () => {
+        expect(wrapper.text()).toContain('gitaly');
+      });

-    it('displays request warnings', () => {
-      expect(vm.$el.querySelector('gl-emoji').dataset.name).toEqual('warning');
+      it('displays request warnings', () => {
+        expect(wrapper.find(RequestWarning).exists()).toBe(true);
+      });
    });

    describe('when using a custom metric title', () => {
-      beforeEach(() => {
-        vm = mountComponent(Vue.extend(detailedMetric), {
-          currentRequest: {
-            details: {
-              gitaly: {
-                duration: '123ms',
-                calls: '456',
-                details: requestDetails,
-              },
+      const wrapper = createComponent({
+        currentRequest: {
+          details: {
+            gitaly: {
+              duration: '123ms',
+              calls: '456',
+              details: requestDetails,
            },
          },
-          metric: 'gitaly',
-          title: 'custom',
-          header: 'Gitaly calls',
-          keys: ['feature', 'request'],
-        });
+        },
+        metric: 'gitaly',
+        title: 'custom',
+        header: 'Gitaly calls',
+        keys: ['feature', 'request'],
      });

      it('displays the custom title', () => {
-        expect(vm.$el.innerText).toContain('custom');
+        expect(wrapper.text()).toContain('custom');
      });
    });
  });

--- a/spec/javascripts/performance_bar/components/performance_bar_app_spec.js
+++ b/spec/javascripts/performance_bar/components/performance_bar_app_spec.js
-import Vue from 'vue';
-import performanceBarApp from '~/performance_bar/components/performance_bar_app.vue';
+import PerformanceBarApp from '~/performance_bar/components/performance_bar_app.vue';
 import PerformanceBarStore from '~/performance_bar/stores/performance_bar_store';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';

 describe('performance bar app', () => {
-  let vm;
-
-  beforeEach(() => {
-    const store = new PerformanceBarStore();
-
-    vm = mountComponent(Vue.extend(performanceBarApp), {
+  const store = new PerformanceBarStore();
+  const wrapper = shallowMount(PerformanceBarApp, {
+    propsData: {
      store,
      env: 'development',
      requestId: '123',
      peekUrl: '/-/peek/results',
      profileUrl: '?lineprofiler=true',
-    });
-  });
-
-  afterEach(() => {
-    vm.$destroy();
+    },
  });

  it('sets the class to match the environment', () => {
-    expect(vm.$el.getAttribute('class')).toContain('development');
+    expect(wrapper.element.getAttribute('class')).toContain('development');
  });
 });
--- a/spec/javascripts/performance_bar/components/request_selector_spec.js
+++ b/spec/javascripts/performance_bar/components/request_selector_spec.js
-import Vue from 'vue';
-import requestSelector from '~/performance_bar/components/request_selector.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import RequestSelector from '~/performance_bar/components/request_selector.vue';
+import { shallowMount } from '@vue/test-utils';

 describe('request selector', () => {
  const requests = [
@@ -26,21 +25,18 @@ describe('request selector', () => {
    },
  ];

-  let vm;
-
-  beforeEach(() => {
-    vm = mountComponent(Vue.extend(requestSelector), {
+  const wrapper = shallowMount(RequestSelector, {
+    propsData: {
      requests,
      currentRequest: requests[1],
-    });
-  });
-
-  afterEach(() => {
-    vm.$destroy();
+    },
  });

  function optionText(requestId) {
-    return vm.$el.querySelector(`[value='${requestId}']`).innerText.trim();
+    return wrapper
+      .find(`[value='${requestId}']`)
+      .text()
+      .trim();
  }

  it('displays the last component of the path', () => {
@@ -56,13 +52,13 @@ describe('request selector', () => {
  });

  it('has a warning icon if any requests have warnings', () => {
-    expect(vm.$el.querySelector('span > gl-emoji').dataset.name).toEqual('warning');
+    expect(wrapper.find('span > gl-emoji').element.dataset.name).toEqual('warning');
  });

  it('adds a warning icon to requests with warnings', () => {
-    const option = vm.$el.querySelector('[value="abc"]');
+    const option = wrapper.find('[value="abc"]');

-    expect(option.querySelector('gl-emoji').dataset.name).toEqual('warning');
-    expect(option.innerText).toContain('discussions.json');
+    expect(option.find('gl-emoji').element.dataset.name).toEqual('warning');
+    expect(option.text()).toContain('discussions.json');
  });
 });
--- a/spec/javascripts/performance_bar/components/request_warning_spec.js
+++ b/spec/javascripts/performance_bar/components/request_warning_spec.js
-import Vue from 'vue';
-import requestWarning from '~/performance_bar/components/request_warning.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import RequestWarning from '~/performance_bar/components/request_warning.vue';
+import { shallowMount } from '@vue/test-utils';

 describe('request warning', () => {
  const htmlId = 'request-123';

-  let vm;
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
  describe('when the request has warnings', () => {
-    beforeEach(() => {
-      vm = mountComponent(Vue.extend(requestWarning), {
+    const wrapper = shallowMount(RequestWarning, {
+      propsData: {
        htmlId,
        details: {
          warnings: ['gitaly calls: 30 over 10', 'gitaly duration: 1500 over 1000'],
        },
-      });
+      },
    });

    it('adds a warning emoji with the correct ID', () => {
-      const wrapper = vm.$el.querySelector('span[id]');
-
-      expect(wrapper.id).toEqual(htmlId);
-      expect(wrapper.querySelector('gl-emoji').dataset.name).toEqual('warning');
+      expect(wrapper.find('span[id]').attributes('id')).toEqual(htmlId);
+      expect(wrapper.find('span[id] gl-emoji').element.dataset.name).toEqual('warning');
    });
  });

  describe('when the request does not have warnings', () => {
-    beforeEach(() => {
-      vm = mountComponent(Vue.extend(requestWarning), {
+    const wrapper = shallowMount(RequestWarning, {
+      propsData: {
        htmlId,
        details: {
          warnings: [],
        },
-      });
+      },
    });

    it('does nothing', () => {
-      expect(vm.$el.innerText).toBeUndefined();
+      expect(wrapper.isEmpty()).toBe(true);
    });
  });
 });