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,10 +28,10 @@ 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
@@ -43,9 +43,5 @@ export default function renderMetrics(elements) {
         },
       });
     });
-      })
-      .catch(() => {
-        // do nothing
   });
-  }
 }

spec/frontend/behaviors/markdown/render_metrics_spec.js

@@ -11,21 +11,21 @@ const getElements = () => Array.from(document.getElementsByClassName('js-render-
 
 describe('Render metrics for Gitlab Flavoured Markdown', () => {
   it('does nothing when no elements are found', () => {
-    renderMetrics([]);
-
+    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());
-
+    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', () => {
     document.body.innerHTML = `
@@ -36,8 +36,7 @@ describe('Render metrics for Gitlab Flavoured Markdown', () => {
       <div class="js-render-metrics" data-dashboard-url="${TEST_HOST}/3"></div>
     `;
 
-    renderMetrics(getElements());
-
+    return renderMetrics(getElements()).then(() => {
       expect(mockEmbedGroup).toHaveBeenCalledTimes(2);
       expect(mockEmbedGroup).toHaveBeenCalledWith(
         expect.objectContaining({ propsData: { urls: [`${TEST_HOST}/1`, `${TEST_HOST}/2`] } }),
@@ -46,4 +45,5 @@ describe('Render metrics for Gitlab Flavoured Markdown', () => {
         expect.objectContaining({ propsData: { urls: [`${TEST_HOST}/3`] } }),
       );
     });
+  });
 });