Add latest changes from gitlab-org/gitlab@master

1 files changed, 33 insertions, 21 deletions

diff --git a/spec/frontend/behaviors/markdown/render_metrics_spec.js b/spec/frontend/behaviors/markdown/render_metrics_spec.js
index 9157d2a8448..3f7beeb817b 100644
--- a/spec/frontend/behaviors/markdown/render_metrics_spec.js
+++ b/spec/frontend/behaviors/markdown/render_metrics_spec.js
@@ -1,37 +1,49 @@
-import Vue from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import renderMetrics from '~/behaviors/markdown/render_metrics';
 
-const originalExtend = Vue.extend;
+const mockEmbedGroup = jest.fn();
 
-describe('Render metrics for Gitlab Flavoured Markdown', () => {
-  const container = {
-    Metrics() {},
-  };
-
-  let spyExtend;
-
-  beforeEach(() => {
-    Vue.extend = () => container.Metrics;
-    spyExtend = jest.spyOn(Vue, 'extend');
-  });
+jest.mock('vue', () => ({ extend: () => mockEmbedGroup }));
+jest.mock('~/monitoring/components/embeds/embed_group.vue', () => jest.fn());
+jest.mock('~/monitoring/stores/embed_group/', () => ({ createStore: jest.fn() }));
 
-  afterEach(() => {
-    Vue.extend = originalExtend;
-  });
+const getElements = () => Array.from(document.getElementsByClassName('js-render-metrics'));
 
+describe('Render metrics for Gitlab Flavoured Markdown', () => {
   it('does nothing when no elements are found', () => {
     renderMetrics([]);
 
-    expect(spyExtend).not.toHaveBeenCalled();
+    expect(mockEmbedGroup).not.toHaveBeenCalled();
   });
 
   it('renders a vue component when elements are found', () => {
-    const element = document.createElement('div');
-    element.setAttribute('data-dashboard-url', TEST_HOST);
+    document.body.innerHTML = `<div class="js-render-metrics" data-dashboard-url="${TEST_HOST}"></div>`;
 
-    renderMetrics([element]);
+    renderMetrics(getElements());
+
+    expect(mockEmbedGroup).toHaveBeenCalledTimes(1);
+    expect(mockEmbedGroup).toHaveBeenCalledWith(
+      expect.objectContaining({ propsData: { urls: [`${TEST_HOST}`] } }),
+    );
+  });
 
-    expect(spyExtend).toHaveBeenCalled();
+  it('takes sibling metrics and groups them under a shared parent', () => {
+    document.body.innerHTML = `
+      <p><span>Hello</span></p>
+      <div class="js-render-metrics" data-dashboard-url="${TEST_HOST}/1"></div>
+      <div class="js-render-metrics" data-dashboard-url="${TEST_HOST}/2"></div>
+      <p><span>Hello</span></p>
+      <div class="js-render-metrics" data-dashboard-url="${TEST_HOST}/3"></div>
+    `;
+
+    renderMetrics(getElements());
+
+    expect(mockEmbedGroup).toHaveBeenCalledTimes(2);
+    expect(mockEmbedGroup).toHaveBeenCalledWith(
+      expect.objectContaining({ propsData: { urls: [`${TEST_HOST}/1`, `${TEST_HOST}/2`] } }),
+    );
+    expect(mockEmbedGroup).toHaveBeenCalledWith(
+      expect.objectContaining({ propsData: { urls: [`${TEST_HOST}/3`] } }),
+    );
   });
 });