Fix specs and expose promise as return value of renderMetrics

app/assets/javascripts/behaviors/markdown/render_metrics.js

@@ -4,7 +4,7 @@ import { createStore } from '~/monitoring/stores/embed_group/';
 // TODO: Handle copy-pasting - https://gitlab.com/gitlab-org/gitlab-foss/issues/64369.
 export default function renderMetrics(elements) {
   if (!elements.length) {
-    return;
+    return Promise.resolve();
   }
 
   const wrapperList = [];
@@ -28,24 +28,20 @@ export default function renderMetrics(elements) {
     element.parentNode.removeChild(element);
   });
 
-  if (wrapperList.length) {
-    import(/* webpackChunkName: 'gfm_metrics' */ '~/monitoring/components/embeds/embed_group.vue')
-      .then(EmbedGroup => {
-        const EmbedGroupComponent = Vue.extend(EmbedGroup.default);
+  return import(
+    /* webpackChunkName: 'gfm_metrics' */ '~/monitoring/components/embeds/embed_group.vue'
+  ).then(({ default: EmbedGroup }) => {
+    const EmbedGroupComponent = Vue.extend(EmbedGroup);
 
-        wrapperList.forEach(wrapper => {
-          // eslint-disable-next-line no-new
-          new EmbedGroupComponent({
-            el: wrapper,
-            store: createStore(),
-            propsData: {
-              urls: wrapper.urls,
-            },
-          });
-        });
-      })
-      .catch(() => {
-        // do nothing
+    wrapperList.forEach(wrapper => {
+      // eslint-disable-next-line no-new
+      new EmbedGroupComponent({
+        el: wrapper,
+        store: createStore(),
+        propsData: {
+          urls: wrapper.urls,
+        },
       });
-  }
+    });
+  });
 }

spec/frontend/behaviors/markdown/render_metrics_spec.js

@@ -11,20 +11,20 @@ const getElements = () => Array.from(document.getElementsByClassName('js-render-
 
 describe('Render metrics for Gitlab Flavoured Markdown', () => {
   it('does nothing when no elements are found', () => {
-    renderMetrics([]);
-
-    expect(mockEmbedGroup).not.toHaveBeenCalled();
+    return renderMetrics([]).then(() => {
+      expect(mockEmbedGroup).not.toHaveBeenCalled();
+    });
   });
 
   it('renders a vue component when elements are found', () => {
     document.body.innerHTML = `<div class="js-render-metrics" data-dashboard-url="${TEST_HOST}"></div>`;
 
-    renderMetrics(getElements());
-
-    expect(mockEmbedGroup).toHaveBeenCalledTimes(1);
-    expect(mockEmbedGroup).toHaveBeenCalledWith(
-      expect.objectContaining({ propsData: { urls: [`${TEST_HOST}`] } }),
-    );
+    return renderMetrics(getElements()).then(() => {
+      expect(mockEmbedGroup).toHaveBeenCalledTimes(1);
+      expect(mockEmbedGroup).toHaveBeenCalledWith(
+        expect.objectContaining({ propsData: { urls: [`${TEST_HOST}`] } }),
+      );
+    });
   });
 
   it('takes sibling metrics and groups them under a shared parent', () => {
@@ -36,14 +36,14 @@ describe('Render metrics for Gitlab Flavoured Markdown', () => {
       <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`] } }),
-    );
+    return renderMetrics(getElements()).then(() => {
+      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`] } }),
+      );
+    });
   });
 });