Add latest changes from gitlab-org/gitlab@master

4 files changed, 228 insertions, 0 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..74f242431a1
--- /dev/null
+++ b/spec/frontend/performance_bar/components/detailed_metric_spec.js
@@ -0,0 +1,111 @@
+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/frontend/performance_bar/components/request_selector_spec.js b/spec/frontend/performance_bar/components/request_selector_spec.js
new file mode 100644
index 00000000000..a4ed55fbf15
--- /dev/null
+++ b/spec/frontend/performance_bar/components/request_selector_spec.js
@@ -0,0 +1,64 @@
+import RequestSelector from '~/performance_bar/components/request_selector.vue';
+import { shallowMount } from '@vue/test-utils';
+
+describe('request selector', () => {
+  const requests = [
+    {
+      id: '123',
+      url: 'https://gitlab.com/',
+      hasWarnings: false,
+    },
+    {
+      id: '456',
+      url: 'https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/1',
+      hasWarnings: false,
+    },
+    {
+      id: '789',
+      url: 'https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/1.json?serializer=widget',
+      hasWarnings: false,
+    },
+    {
+      id: 'abc',
+      url: 'https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/1/discussions.json',
+      hasWarnings: true,
+    },
+  ];
+
+  const wrapper = shallowMount(RequestSelector, {
+    propsData: {
+      requests,
+      currentRequest: requests[1],
+    },
+  });
+
+  function optionText(requestId) {
+    return wrapper
+      .find(`[value='${requestId}']`)
+      .text()
+      .trim();
+  }
+
+  it('displays the last component of the path', () => {
+    expect(optionText(requests[2].id)).toEqual('1.json?serializer=widget');
+  });
+
+  it('keeps the last two components of the path when the last component is numeric', () => {
+    expect(optionText(requests[1].id)).toEqual('merge_requests/1');
+  });
+
+  it('ignores trailing slashes', () => {
+    expect(optionText(requests[0].id)).toEqual('gitlab.com');
+  });
+
+  it('has a warning icon if any requests have warnings', () => {
+    expect(wrapper.find('span > gl-emoji').element.dataset.name).toEqual('warning');
+  });
+
+  it('adds a warning glyph to requests with warnings', () => {
+    const requestValue = wrapper.find('[value="abc"]').text();
+
+    expect(requestValue).toContain('discussions.json');
+    expect(requestValue).toContain('(!)');
+  });
+});
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..6d8bfba56f6
--- /dev/null
+++ b/spec/frontend/performance_bar/components/request_warning_spec.js
@@ -0,0 +1,33 @@
+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,
+        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,
+        warnings: [],
+      },
+    });
+
+    it('does nothing', () => {
+      expect(wrapper.isEmpty()).toBe(true);
+    });
+  });
+});