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.

spec/javascripts/performance_bar/components/detailed_metric_spec.js → spec/frontend/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,8 @@ 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 +46,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');
       });
     });
   });

spec/javascripts/performance_bar/components/performance_bar_app_spec.js → spec/frontend/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');
   });
 });

spec/javascripts/performance_bar/components/request_selector_spec.js → spec/frontend/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');
   });
 });

spec/javascripts/performance_bar/components/request_warning_spec.js → spec/frontend/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);
     });
   });
 });