diff options
Diffstat (limited to 'spec/frontend/pages/projects/graphs')
3 files changed, 312 insertions, 0 deletions
diff --git a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap new file mode 100644 index 00000000000..94089ea922b --- /dev/null +++ b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap @@ -0,0 +1,88 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Code Coverage when fetching data is successful matches the snapshot 1`] = ` +<div> + <div + class="gl-mt-3 gl-mb-3" + > + <!----> + + <!----> + + <gl-dropdown-stub + text="rspec" + > + <gl-dropdown-item-stub + value="rspec" + > + <div + class="gl-display-flex" + > + <gl-icon-stub + class="gl-absolute" + name="mobile-issue-close" + size="16" + /> + + <span + class="gl-display-flex align-items-center ml-4" + > + + rspec + + </span> + </div> + </gl-dropdown-item-stub> + <gl-dropdown-item-stub + value="cypress" + > + <div + class="gl-display-flex" + > + <!----> + + <span + class="gl-display-flex align-items-center ml-4" + > + + cypress + + </span> + </div> + </gl-dropdown-item-stub> + <gl-dropdown-item-stub + value="karma" + > + <div + class="gl-display-flex" + > + <!----> + + <span + class="gl-display-flex align-items-center ml-4" + > + + karma + + </span> + </div> + </gl-dropdown-item-stub> + </gl-dropdown-stub> + </div> + + <gl-area-chart-stub + annotations="" + data="[object Object]" + formattooltiptext="function () { [native code] }" + height="200" + includelegendavgmax="true" + legendaveragetext="Avg" + legendcurrenttext="Current" + legendlayout="inline" + legendmaxtext="Max" + legendmintext="Min" + option="[object Object]" + thresholds="" + /> +</div> +`; diff --git a/spec/frontend/pages/projects/graphs/code_coverage_spec.js b/spec/frontend/pages/projects/graphs/code_coverage_spec.js new file mode 100644 index 00000000000..4990985b076 --- /dev/null +++ b/spec/frontend/pages/projects/graphs/code_coverage_spec.js @@ -0,0 +1,164 @@ +import MockAdapter from 'axios-mock-adapter'; +import { shallowMount } from '@vue/test-utils'; +import { GlAlert, GlIcon, GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { GlAreaChart } from '@gitlab/ui/dist/charts'; + +import axios from '~/lib/utils/axios_utils'; +import CodeCoverage from '~/pages/projects/graphs/components/code_coverage.vue'; +import codeCoverageMockData from './mock_data'; +import waitForPromises from 'helpers/wait_for_promises'; +import httpStatusCodes from '~/lib/utils/http_status'; + +describe('Code Coverage', () => { + let wrapper; + let mockAxios; + + const graphEndpoint = '/graph'; + + const findAlert = () => wrapper.find(GlAlert); + const findAreaChart = () => wrapper.find(GlAreaChart); + const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem); + const findFirstDropdownItem = () => findAllDropdownItems().at(0); + const findSecondDropdownItem = () => findAllDropdownItems().at(1); + + const createComponent = () => { + wrapper = shallowMount(CodeCoverage, { + propsData: { + graphEndpoint, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('when fetching data is successful', () => { + beforeEach(() => { + mockAxios = new MockAdapter(axios); + mockAxios.onGet().replyOnce(httpStatusCodes.OK, codeCoverageMockData); + + createComponent(); + + return waitForPromises(); + }); + + afterEach(() => { + mockAxios.restore(); + }); + + it('renders the area chart', () => { + expect(findAreaChart().exists()).toBe(true); + }); + + it('matches the snapshot', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + it('shows no error messages', () => { + expect(findAlert().exists()).toBe(false); + }); + }); + + describe('when fetching data fails', () => { + beforeEach(() => { + mockAxios = new MockAdapter(axios); + mockAxios.onGet().replyOnce(httpStatusCodes.BAD_REQUEST); + + createComponent(); + + return waitForPromises(); + }); + + afterEach(() => { + mockAxios.restore(); + }); + + it('renders an error message', () => { + expect(findAlert().exists()).toBe(true); + expect(findAlert().attributes().variant).toBe('danger'); + }); + + it('still renders an empty graph', () => { + expect(findAreaChart().exists()).toBe(true); + }); + }); + + describe('when fetching data succeed but returns an empty state', () => { + beforeEach(() => { + mockAxios = new MockAdapter(axios); + mockAxios.onGet().replyOnce(httpStatusCodes.OK, []); + + createComponent(); + + return waitForPromises(); + }); + + afterEach(() => { + mockAxios.restore(); + }); + + it('renders an information message', () => { + expect(findAlert().exists()).toBe(true); + expect(findAlert().attributes().variant).toBe('info'); + }); + + it('still renders an empty graph', () => { + expect(findAreaChart().exists()).toBe(true); + }); + }); + + describe('dropdown options', () => { + beforeEach(() => { + mockAxios = new MockAdapter(axios); + mockAxios.onGet().replyOnce(httpStatusCodes.OK, codeCoverageMockData); + + createComponent(); + + return waitForPromises(); + }); + + it('renders the dropdown with all custom names as options', () => { + expect(wrapper.contains(GlDropdown)).toBeDefined(); + expect(findAllDropdownItems()).toHaveLength(codeCoverageMockData.length); + expect(findFirstDropdownItem().text()).toBe(codeCoverageMockData[0].group_name); + }); + }); + + describe('interactions', () => { + beforeEach(() => { + mockAxios = new MockAdapter(axios); + mockAxios.onGet().replyOnce(httpStatusCodes.OK, codeCoverageMockData); + + createComponent(); + + return waitForPromises(); + }); + + it('updates the selected dropdown option with an icon', async () => { + findSecondDropdownItem().vm.$emit('click'); + + await wrapper.vm.$nextTick(); + + expect( + findFirstDropdownItem() + .find(GlIcon) + .exists(), + ).toBe(false); + expect(findSecondDropdownItem().contains(GlIcon)).toBe(true); + }); + + it('updates the graph data when selecting a different option in dropdown', async () => { + const originalSelectedData = wrapper.vm.selectedDailyCoverage; + const expectedData = codeCoverageMockData[1]; + + findSecondDropdownItem().vm.$emit('click'); + + await wrapper.vm.$nextTick(); + + expect(wrapper.vm.selectedDailyCoverage).not.toBe(originalSelectedData); + expect(wrapper.vm.selectedDailyCoverage).toBe(expectedData); + }); + }); +}); diff --git a/spec/frontend/pages/projects/graphs/mock_data.js b/spec/frontend/pages/projects/graphs/mock_data.js new file mode 100644 index 00000000000..a15f861ee7a --- /dev/null +++ b/spec/frontend/pages/projects/graphs/mock_data.js @@ -0,0 +1,60 @@ +export default [ + { + group_name: 'rspec', + data: [ + { date: '2020-04-30', coverage: 40.0 }, + { date: '2020-05-01', coverage: 80.0 }, + { date: '2020-05-02', coverage: 99.0 }, + { date: '2020-05-10', coverage: 80.0 }, + { date: '2020-05-15', coverage: 70.0 }, + { date: '2020-05-20', coverage: 69.0 }, + ], + }, + { + group_name: 'cypress', + data: [ + { date: '2022-07-30', coverage: 1.0 }, + { date: '2022-08-01', coverage: 2.4 }, + { date: '2022-08-02', coverage: 5.0 }, + { date: '2022-08-10', coverage: 15.0 }, + { date: '2022-08-15', coverage: 30.0 }, + { date: '2022-08-20', coverage: 40.0 }, + ], + }, + { + group_name: 'karma', + data: [ + { date: '2020-05-01', coverage: 94.0 }, + { date: '2020-05-02', coverage: 94.0 }, + { date: '2020-05-03', coverage: 94.0 }, + { date: '2020-05-04', coverage: 94.0 }, + { date: '2020-05-05', coverage: 92.0 }, + { date: '2020-05-06', coverage: 91.0 }, + { date: '2020-05-07', coverage: 78.0 }, + { date: '2020-05-08', coverage: 94.0 }, + { date: '2020-05-09', coverage: 94.0 }, + { date: '2020-05-10', coverage: 94.0 }, + { date: '2020-05-11', coverage: 94.0 }, + { date: '2020-05-12', coverage: 94.0 }, + { date: '2020-05-13', coverage: 92.0 }, + { date: '2020-05-14', coverage: 91.0 }, + { date: '2020-05-15', coverage: 78.0 }, + { date: '2020-05-16', coverage: 94.0 }, + { date: '2020-05-17', coverage: 94.0 }, + { date: '2020-05-18', coverage: 93.0 }, + { date: '2020-05-19', coverage: 92.0 }, + { date: '2020-05-20', coverage: 91.0 }, + { date: '2020-05-21', coverage: 90.0 }, + { date: '2020-05-22', coverage: 91.0 }, + { date: '2020-05-23', coverage: 92.0 }, + { date: '2020-05-24', coverage: 75.0 }, + { date: '2020-05-25', coverage: 74.0 }, + { date: '2020-05-26', coverage: 74.0 }, + { date: '2020-05-27', coverage: 74.0 }, + { date: '2020-05-28', coverage: 80.0 }, + { date: '2020-05-29', coverage: 85.0 }, + { date: '2020-05-30', coverage: 92.0 }, + { date: '2020-05-31', coverage: 91.0 }, + ], + }, +]; |