diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-19 18:44:42 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-19 18:44:42 +0300 |
commit | 4555e1b21c365ed8303ffb7a3325d773c9b8bf31 (patch) | |
tree | 5423a1c7516cffe36384133ade12572cf709398d /spec/frontend/admin/analytics/devops_score | |
parent | e570267f2f6b326480d284e0164a6464ba4081bc (diff) |
Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42
Diffstat (limited to 'spec/frontend/admin/analytics/devops_score')
-rw-r--r-- | spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js | 134 | ||||
-rw-r--r-- | spec/frontend/admin/analytics/devops_score/mock_data.js | 46 |
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'; |