2 files changed, 180 insertions, 0 deletions
diff --git a/spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js b/spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js
new file mode 100644
index 00000000000..7c20bbe21c8
--- /dev/null
+++ b/spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js
@@ -0,0 +1,134 @@
+import { GlTable, GlBadge, GlEmptyState, GlLink } from '@gitlab/ui';
+import { GlSingleStat } from '@gitlab/ui/dist/charts';
+import { mount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import DevopsScore from '~/analytics/devops_report/components/devops_score.vue';
+import {
+  devopsScoreMetricsData,
+  devopsReportDocsPath,
+  noDataImagePath,
+  devopsScoreTableHeaders,
+} from '../mock_data';
+
+describe('DevopsScore', () => {
+  let wrapper;
+
+  const createComponent = ({ devopsScoreMetrics = devopsScoreMetricsData } = {}) => {
+    wrapper = extendedWrapper(
+      mount(DevopsScore, {
+        provide: {
+          devopsScoreMetrics,
+          devopsReportDocsPath,
+          noDataImagePath,
+        },
+      }),
+    );
+  };
+
+  const findTable = () => wrapper.findComponent(GlTable);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findCol = (testId) => findTable().find(`[data-testid="${testId}"]`);
+  const findUsageCol = () => findCol('usageCol');
+  const findDevopsScoreApp = () => wrapper.findByTestId('devops-score-app');
+
+  describe('with no data', () => {
+    beforeEach(() => {
+      createComponent({ devopsScoreMetrics: {} });
+    });
+
+    describe('empty state', () => {
+      it('displays the empty state', () => {
+        expect(findEmptyState().exists()).toBe(true);
+      });
+
+      it('displays the correct message', () => {
+        expect(findEmptyState().text()).toBe(
+          'Data is still calculating... It may be several days before you see feature usage data. See example DevOps Score page in our documentation.',
+        );
+      });
+
+      it('contains a link to the feature documentation', () => {
+        expect(wrapper.findComponent(GlLink).exists()).toBe(true);
+      });
+    });
+
+    it('does not display the devops score app', () => {
+      expect(findDevopsScoreApp().exists()).toBe(false);
+    });
+  });
+
+  describe('with data', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('does not display the empty state', () => {
+      expect(findEmptyState().exists()).toBe(false);
+    });
+
+    it('displays the devops score app', () => {
+      expect(findDevopsScoreApp().exists()).toBe(true);
+    });
+
+    describe('devops score app', () => {
+      it('displays the title note', () => {
+        expect(wrapper.findByTestId('devops-score-note-text').text()).toBe(
+          'DevOps score metrics are based on usage over the last 30 days. Last updated: 2020-06-29 08:16.',
+        );
+      });
+
+      it('displays the single stat section', () => {
+        const component = wrapper.findComponent(GlSingleStat);
+
+        expect(component.exists()).toBe(true);
+        expect(component.props('value')).toBe(devopsScoreMetricsData.averageScore.value);
+      });
+
+      describe('devops score table', () => {
+        it('displays the table', () => {
+          expect(findTable().exists()).toBe(true);
+        });
+
+        describe('table headings', () => {
+          let headers;
+
+          beforeEach(() => {
+            headers = findTable().findAll("[data-testid='header']");
+          });
+
+          it('displays the correct number of headings', () => {
+            expect(headers).toHaveLength(devopsScoreTableHeaders.length);
+          });
+
+          describe.each(devopsScoreTableHeaders)('header fields', ({ label, index }) => {
+            let headerWrapper;
+
+            beforeEach(() => {
+              headerWrapper = headers.at(index);
+            });
+
+            it(`displays the correct table heading text for "${label}"`, () => {
+              expect(headerWrapper.text()).toContain(label);
+            });
+          });
+        });
+
+        describe('table columns', () => {
+          describe('Your usage', () => {
+            it('displays the corrrect value', () => {
+              expect(findUsageCol().text()).toContain('3.2');
+            });
+
+            it('displays the corrrect badge', () => {
+              const badge = findUsageCol().find(GlBadge);
+
+              expect(badge.exists()).toBe(true);
+              expect(badge.props('variant')).toBe('muted');
+              expect(badge.text()).toBe('Low');
+            });
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/admin/analytics/devops_score/mock_data.js b/spec/frontend/admin/analytics/devops_score/mock_data.js
new file mode 100644
index 00000000000..ae0c01a2661
--- /dev/null
+++ b/spec/frontend/admin/analytics/devops_score/mock_data.js
@@ -0,0 +1,46 @@
+export const devopsScoreTableHeaders = [
+  {
+    index: 0,
+    label: '',
+  },
+  {
+    index: 1,
+    label: 'Your usage',
+  },
+  {
+    index: 2,
+    label: 'Leader usage',
+  },
+  {
+    index: 3,
+    label: 'Score',
+  },
+];
+
+export const devopsScoreMetricsData = {
+  createdAt: '2020-06-29 08:16',
+  cards: [
+    {
+      title: 'Issues created per active user',
+      usage: '3.2',
+      leadInstance: '10.2',
+      score: '0',
+      scoreLevel: {
+        label: 'Low',
+        variant: 'muted',
+      },
+    },
+  ],
+  averageScore: {
+    value: '10',
+    scoreLevel: {
+      label: 'High',
+      icon: 'check-circle',
+      variant: 'success',
+    },
+  },
+};
+
+export const devopsReportDocsPath = 'docs-path';
+
+export const noDataImagePath = 'image-path';