Move performance bar component specs to Jestshow-performance-bar-warnings

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

7 files changed, 182 insertions, 206 deletions

diff --git a/spec/frontend/performance_bar/components/detailed_metric_spec.js b/spec/frontend/performance_bar/components/detailed_metric_spec.js
new file mode 100644
index 00000000000..b6643e74ec4
--- /dev/null
+++ b/spec/frontend/performance_bar/components/detailed_metric_spec.js
@@ -0,0 +1,112 @@
+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', () => {
+  const createComponent = props =>
+    shallowMount(DetailedMetric, {
+      propsData: {
+        ...props,
+      },
+    });
+
+  describe('when the current request has no details', () => {
+    const wrapper = createComponent({
+      currentRequest: {},
+      metric: 'gitaly',
+      header: 'Gitaly calls',
+      details: 'details',
+      keys: ['feature', 'request'],
+    });
+
+    it('does not render the element', () => {
+      expect(wrapper.isEmpty()).toBe(true);
+    });
+  });
+
+  describe('when the current request has details', () => {
+    const requestDetails = [
+      { duration: '100', feature: 'find_commit', request: 'abcdef', backtrace: ['hello', 'world'] },
+      { duration: '23', feature: 'rebase_in_progress', request: '', backtrace: ['world', 'hello'] },
+    ];
+
+    describe('with a default metric name', () => {
+
+      const wrapper = createComponent({
+        currentRequest: {
+          details: {
+            gitaly: {
+              duration: '123ms',
+              calls: '456',
+              details: requestDetails,
+              warnings: ['gitaly calls: 456 over 30'],
+            },
+          },
+        },
+        metric: 'gitaly',
+        header: 'Gitaly calls',
+        keys: ['feature', 'request'],
+      });
+
+      it('displays details', () => {
+        expect(wrapper.text().replace(/\s+/g, ' ')).toContain('123ms / 456');
+      });
+
+      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');
+        });
+      });
+
+      it('displays the metric title', () => {
+        expect(wrapper.text()).toContain('gitaly');
+      });
+
+      it('displays request warnings', () => {
+        expect(wrapper.find(RequestWarning).exists()).toBe(true);
+      });
+    });
+
+    describe('when using a custom metric title', () => {
+      const wrapper = createComponent({
+        currentRequest: {
+          details: {
+            gitaly: {
+              duration: '123ms',
+              calls: '456',
+              details: requestDetails,
+            },
+          },
+        },
+        metric: 'gitaly',
+        title: 'custom',
+        header: 'Gitaly calls',
+        keys: ['feature', 'request'],
+      });
+
+      it('displays the custom title', () => {
+        expect(wrapper.text()).toContain('custom');
+      });
+    });
+  });
+});
diff --git a/spec/frontend/performance_bar/components/performance_bar_app_spec.js b/spec/frontend/performance_bar/components/performance_bar_app_spec.js
new file mode 100644
index 00000000000..ba403dd6209
--- /dev/null
+++ b/spec/frontend/performance_bar/components/performance_bar_app_spec.js
@@ -0,0 +1,20 @@
+import PerformanceBarApp from '~/performance_bar/components/performance_bar_app.vue';
+import PerformanceBarStore from '~/performance_bar/stores/performance_bar_store';
+import { shallowMount } from '@vue/test-utils';
+
+describe('performance bar app', () => {
+  const store = new PerformanceBarStore();
+  const wrapper = shallowMount(PerformanceBarApp, {
+    propsData: {
+      store,
+      env: 'development',
+      requestId: '123',
+      peekUrl: '/-/peek/results',
+      profileUrl: '?lineprofiler=true',
+    },
+  });
+
+  it('sets the class to match the environment', () => {
+    expect(wrapper.element.getAttribute('class')).toContain('development');
+  });
+});
diff --git a/spec/javascripts/performance_bar/components/request_selector_spec.js b/spec/frontend/performance_bar/components/request_selector_spec.js
index 0628ccae0f7..4ca73b8a14b 100644
--- a/spec/javascripts/performance_bar/components/request_selector_spec.js
+++ b/spec/frontend/performance_bar/components/request_selector_spec.js
@@ -1,6 +1,5 @@
-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');
   });
 });
diff --git a/spec/frontend/performance_bar/components/request_warning_spec.js b/spec/frontend/performance_bar/components/request_warning_spec.js
new file mode 100644
index 00000000000..5a411586ffa
--- /dev/null
+++ b/spec/frontend/performance_bar/components/request_warning_spec.js
@@ -0,0 +1,37 @@
+import RequestWarning from '~/performance_bar/components/request_warning.vue';
+import { shallowMount } from '@vue/test-utils';
+
+describe('request warning', () => {
+  const htmlId = 'request-123';
+
+  describe('when the request has warnings', () => {
+    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', () => {
+      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', () => {
+    const wrapper = shallowMount(RequestWarning, {
+      propsData: {
+        htmlId,
+        details: {
+          warnings: [],
+        },
+      },
+    });
+
+    it('does nothing', () => {
+      expect(wrapper.isEmpty()).toBe(true);
+    });
+  });
+});
diff --git a/spec/javascripts/performance_bar/components/detailed_metric_spec.js b/spec/javascripts/performance_bar/components/detailed_metric_spec.js
deleted file mode 100644
index 4f7fc7ef88d..00000000000
--- a/spec/javascripts/performance_bar/components/detailed_metric_spec.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import Vue from 'vue';
-import detailedMetric from '~/performance_bar/components/detailed_metric.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-describe('detailedMetric', () => {
-  let vm;
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  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'],
-      });
-    });
-
-    it('does not render the element', () => {
-      expect(vm.$el.innerHTML).toEqual(undefined);
-    });
-  });
-
-  describe('when the current request has details', () => {
-    const requestDetails = [
-      { duration: '100', feature: 'find_commit', request: 'abcdef', backtrace: ['hello', 'world'] },
-      { duration: '23', feature: 'rebase_in_progress', request: '', backtrace: ['world', 'hello'] },
-    ];
-
-    beforeEach(() => {
-      vm = mountComponent(Vue.extend(detailedMetric), {
-        currentRequest: {
-          details: {
-            gitaly: {
-              duration: '123ms',
-              calls: '456',
-              details: requestDetails,
-              warnings: ['gitaly calls: 456 over 30'],
-            },
-          },
-        },
-        metric: 'gitaly',
-        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);
-        });
-
-      vm.$el
-        .querySelectorAll('.performance-bar-modal td:nth-child(2)')
-        .forEach((request, index) => {
-          expect(request.innerText).toContain(requestDetails[index].request);
-        });
-
-      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 request warnings', () => {
-      expect(vm.$el.querySelector('gl-emoji').dataset.name).toEqual('warning');
-    });
-
-    describe('when using a custom metric title', () => {
-      beforeEach(() => {
-        vm = mountComponent(Vue.extend(detailedMetric), {
-          currentRequest: {
-            details: {
-              gitaly: {
-                duration: '123ms',
-                calls: '456',
-                details: requestDetails,
-              },
-            },
-          },
-          metric: 'gitaly',
-          title: 'custom',
-          header: 'Gitaly calls',
-          keys: ['feature', 'request'],
-        });
-      });
-
-      it('displays the custom title', () => {
-        expect(vm.$el.innerText).toContain('custom');
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/performance_bar/components/performance_bar_app_spec.js b/spec/javascripts/performance_bar/components/performance_bar_app_spec.js
deleted file mode 100644
index 7926db44429..00000000000
--- a/spec/javascripts/performance_bar/components/performance_bar_app_spec.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Vue from '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';
-
-describe('performance bar app', () => {
-  let vm;
-
-  beforeEach(() => {
-    const store = new PerformanceBarStore();
-
-    vm = mountComponent(Vue.extend(performanceBarApp), {
-      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');
-  });
-});
diff --git a/spec/javascripts/performance_bar/components/request_warning_spec.js b/spec/javascripts/performance_bar/components/request_warning_spec.js
deleted file mode 100644
index 0e3790ea4e3..00000000000
--- a/spec/javascripts/performance_bar/components/request_warning_spec.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import Vue from 'vue';
-import requestWarning from '~/performance_bar/components/request_warning.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-describe('request warning', () => {
-  const htmlId = 'request-123';
-
-  let vm;
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('when the request has warnings', () => {
-    beforeEach(() => {
-      vm = mountComponent(Vue.extend(requestWarning), {
-        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');
-    });
-  });
-
-  describe('when the request does not have warnings', () => {
-    beforeEach(() => {
-      vm = mountComponent(Vue.extend(requestWarning), {
-        htmlId,
-        details: {
-          warnings: [],
-        },
-      });
-    });
-
-    it('does nothing', () => {
-      expect(vm.$el.innerText).toBeUndefined();
-    });
-  });
-});