1 files changed, 31 insertions, 35 deletions

diff --git a/spec/frontend/analytics/shared/components/metric_popover_spec.js b/spec/frontend/analytics/shared/components/metric_popover_spec.js
index 6a58f8c6d29..e0bfff3e664 100644
--- a/spec/frontend/analytics/shared/components/metric_popover_spec.js
+++ b/spec/frontend/analytics/shared/components/metric_popover_spec.js
@@ -1,6 +1,7 @@
 import { GlLink, GlIcon } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import MetricPopover from '~/analytics/shared/components/metric_popover.vue';
+import { METRIC_POPOVER_LABEL } from '~/analytics/shared/constants';
 
 const MOCK_METRIC = {
   key: 'deployment-frequency',
@@ -27,10 +28,11 @@ describe('MetricPopover', () => {
   };
 
   const findMetricLabel = () => wrapper.findByTestId('metric-label');
-  const findAllMetricLinks = () => wrapper.findAll('[data-testid="metric-link"]');
+  const findMetricLink = () => wrapper.find('[data-testid="metric-link"]');
   const findMetricDescription = () => wrapper.findByTestId('metric-description');
   const findMetricDocsLink = () => wrapper.findByTestId('metric-docs-link');
   const findMetricDocsLinkIcon = () => findMetricDocsLink().findComponent(GlIcon);
+  const findMetricDetailsIcon = () => findMetricLink().findComponent(GlIcon);
 
   afterEach(() => {
     wrapper.destroy();
@@ -47,17 +49,14 @@ describe('MetricPopover', () => {
   });
 
   describe('with links', () => {
+    const METRIC_NAME = 'Deployment frequency';
+    const LINK_URL = '/groups/gitlab-org/-/analytics/ci_cd?tab=deployment-frequency';
     const links = [
       {
-        name: 'Deployment frequency',
-        url: '/groups/gitlab-org/-/analytics/ci_cd?tab=deployment-frequency',
+        name: METRIC_NAME,
+        url: LINK_URL,
         label: 'Dashboard',
       },
-      {
-        name: 'Another link',
-        url: '/groups/gitlab-org/-/analytics/another-link',
-        label: 'Another link',
-      },
     ];
     const docsLink = {
       name: 'Deployment frequency',
@@ -68,37 +67,34 @@ describe('MetricPopover', () => {
     const linksWithDocs = [...links, docsLink];
 
     describe.each`
-      hasDocsLink | allLinks         | displayedMetricLinks
-      ${true}     | ${linksWithDocs} | ${links}
-      ${false}    | ${links}         | ${links}
-    `(
-      'when one link has docs_link=$hasDocsLink',
-      ({ hasDocsLink, allLinks, displayedMetricLinks }) => {
-        beforeEach(() => {
-          wrapper = createComponent({ metric: { ...MOCK_METRIC, links: allLinks } });
-        });
+      hasDocsLink | allLinks
+      ${true}     | ${linksWithDocs}
+      ${false}    | ${links}
+    `('when one link has docs_link=$hasDocsLink', ({ hasDocsLink, allLinks }) => {
+      beforeEach(() => {
+        wrapper = createComponent({ metric: { ...MOCK_METRIC, links: allLinks } });
+      });
 
-        displayedMetricLinks.forEach((link, idx) => {
-          it(`renders a link for "${link.name}"`, () => {
-            const allLinkContainers = findAllMetricLinks();
+      describe('Metric title row', () => {
+        it(`renders a link for "${METRIC_NAME}"`, () => {
+          expect(findMetricLink().text()).toContain(METRIC_POPOVER_LABEL);
+          expect(findMetricLink().findComponent(GlLink).attributes('href')).toBe(LINK_URL);
+        });
 
-            expect(allLinkContainers.at(idx).text()).toContain(link.name);
-            expect(allLinkContainers.at(idx).findComponent(GlLink).attributes('href')).toBe(
-              link.url,
-            );
-          });
+        it('renders the chart icon', () => {
+          expect(findMetricDetailsIcon().attributes('name')).toBe('chart');
         });
+      });
 
-        it(`${hasDocsLink ? 'renders' : "doesn't render"} a docs link`, () => {
-          expect(findMetricDocsLink().exists()).toBe(hasDocsLink);
+      it(`${hasDocsLink ? 'renders' : "doesn't render"} a docs link`, () => {
+        expect(findMetricDocsLink().exists()).toBe(hasDocsLink);
 
-          if (hasDocsLink) {
-            expect(findMetricDocsLink().attributes('href')).toBe(docsLink.url);
-            expect(findMetricDocsLink().text()).toBe(docsLink.label);
-            expect(findMetricDocsLinkIcon().attributes('name')).toBe('external-link');
-          }
-        });
-      },
-    );
+        if (hasDocsLink) {
+          expect(findMetricDocsLink().attributes('href')).toBe(docsLink.url);
+          expect(findMetricDocsLink().text()).toBe(docsLink.label);
+          expect(findMetricDocsLinkIcon().attributes('name')).toBe('external-link');
+        }
+      });
+    });
   });
 });