diff options
Diffstat (limited to 'spec/frontend/analytics/instance_statistics/components')
6 files changed, 0 insertions, 706 deletions
diff --git a/spec/frontend/analytics/instance_statistics/components/__snapshots__/instance_statistics_count_chart_spec.js.snap b/spec/frontend/analytics/instance_statistics/components/__snapshots__/instance_statistics_count_chart_spec.js.snap deleted file mode 100644 index 29bcd5f223b..00000000000 --- a/spec/frontend/analytics/instance_statistics/components/__snapshots__/instance_statistics_count_chart_spec.js.snap +++ /dev/null @@ -1,41 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`InstanceStatisticsCountChart when fetching more data when the fetchMore query returns data passes the data to the line chart 1`] = ` -Array [ - Object { - "data": Array [ - Array [ - "2020-07-01", - 41, - ], - Array [ - "2020-06-01", - 22, - ], - Array [ - "2020-08-01", - 5, - ], - ], - "name": "Mock Query", - }, -] -`; - -exports[`InstanceStatisticsCountChart with data passes the data to the line chart 1`] = ` -Array [ - Object { - "data": Array [ - Array [ - "2020-07-01", - 41, - ], - Array [ - "2020-06-01", - 22, - ], - ], - "name": "Mock Query", - }, -] -`; diff --git a/spec/frontend/analytics/instance_statistics/components/app_spec.js b/spec/frontend/analytics/instance_statistics/components/app_spec.js deleted file mode 100644 index b945cc20bd6..00000000000 --- a/spec/frontend/analytics/instance_statistics/components/app_spec.js +++ /dev/null @@ -1,45 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import InstanceCounts from '~/analytics/instance_statistics/components//instance_counts.vue'; -import InstanceStatisticsApp from '~/analytics/instance_statistics/components/app.vue'; -import InstanceStatisticsCountChart from '~/analytics/instance_statistics/components/instance_statistics_count_chart.vue'; -import ProjectsAndGroupsChart from '~/analytics/instance_statistics/components/projects_and_groups_chart.vue'; -import UsersChart from '~/analytics/instance_statistics/components/users_chart.vue'; - -describe('InstanceStatisticsApp', () => { - let wrapper; - - const createComponent = () => { - wrapper = shallowMount(InstanceStatisticsApp); - }; - - beforeEach(() => { - createComponent(); - }); - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - it('displays the instance counts component', () => { - expect(wrapper.find(InstanceCounts).exists()).toBe(true); - }); - - ['Pipelines', 'Issues & Merge Requests'].forEach((instance) => { - it(`displays the ${instance} chart`, () => { - const chartTitles = wrapper - .findAll(InstanceStatisticsCountChart) - .wrappers.map((chartComponent) => chartComponent.props('chartTitle')); - - expect(chartTitles).toContain(instance); - }); - }); - - it('displays the users chart component', () => { - expect(wrapper.find(UsersChart).exists()).toBe(true); - }); - - it('displays the projects and groups chart component', () => { - expect(wrapper.find(ProjectsAndGroupsChart).exists()).toBe(true); - }); -}); diff --git a/spec/frontend/analytics/instance_statistics/components/instance_counts_spec.js b/spec/frontend/analytics/instance_statistics/components/instance_counts_spec.js deleted file mode 100644 index 12b5e14b9c4..00000000000 --- a/spec/frontend/analytics/instance_statistics/components/instance_counts_spec.js +++ /dev/null @@ -1,54 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import InstanceCounts from '~/analytics/instance_statistics/components/instance_counts.vue'; -import MetricCard from '~/analytics/shared/components/metric_card.vue'; -import { mockInstanceCounts } from '../mock_data'; - -describe('InstanceCounts', () => { - let wrapper; - - const createComponent = ({ loading = false, data = {} } = {}) => { - const $apollo = { - queries: { - counts: { - loading, - }, - }, - }; - - wrapper = shallowMount(InstanceCounts, { - mocks: { $apollo }, - data() { - return { - ...data, - }; - }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - const findMetricCard = () => wrapper.find(MetricCard); - - describe('while loading', () => { - beforeEach(() => { - createComponent({ loading: true }); - }); - - it('displays the metric card with isLoading=true', () => { - expect(findMetricCard().props('isLoading')).toBe(true); - }); - }); - - describe('with data', () => { - beforeEach(() => { - createComponent({ data: { counts: mockInstanceCounts } }); - }); - - it('passes the counts data to the metric card', () => { - expect(findMetricCard().props('metrics')).toEqual(mockInstanceCounts); - }); - }); -}); diff --git a/spec/frontend/analytics/instance_statistics/components/instance_statistics_count_chart_spec.js b/spec/frontend/analytics/instance_statistics/components/instance_statistics_count_chart_spec.js deleted file mode 100644 index e80dcdff426..00000000000 --- a/spec/frontend/analytics/instance_statistics/components/instance_statistics_count_chart_spec.js +++ /dev/null @@ -1,177 +0,0 @@ -import { GlAlert } from '@gitlab/ui'; -import { GlLineChart } from '@gitlab/ui/dist/charts'; -import { createLocalVue, shallowMount } from '@vue/test-utils'; -import VueApollo from 'vue-apollo'; -import createMockApollo from 'helpers/mock_apollo_helper'; -import InstanceStatisticsCountChart from '~/analytics/instance_statistics/components/instance_statistics_count_chart.vue'; -import statsQuery from '~/analytics/instance_statistics/graphql/queries/instance_count.query.graphql'; -import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue'; -import { mockQueryResponse, mockApolloResponse } from '../apollo_mock_data'; -import { mockCountsData1 } from '../mock_data'; - -const localVue = createLocalVue(); -localVue.use(VueApollo); - -const loadChartErrorMessage = 'My load error message'; -const noDataMessage = 'My no data message'; - -const queryResponseDataKey = 'instanceStatisticsMeasurements'; -const identifier = 'MOCK_QUERY'; -const mockQueryConfig = { - identifier, - title: 'Mock Query', - query: statsQuery, - loadError: 'Failed to load mock query data', -}; - -const mockChartConfig = { - loadChartErrorMessage, - noDataMessage, - chartTitle: 'Foo', - yAxisTitle: 'Bar', - xAxisTitle: 'Baz', - queries: [mockQueryConfig], -}; - -describe('InstanceStatisticsCountChart', () => { - let wrapper; - let queryHandler; - - const createComponent = ({ responseHandler }) => { - return shallowMount(InstanceStatisticsCountChart, { - localVue, - apolloProvider: createMockApollo([[statsQuery, responseHandler]]), - propsData: { ...mockChartConfig }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - const findLoader = () => wrapper.find(ChartSkeletonLoader); - const findChart = () => wrapper.find(GlLineChart); - const findAlert = () => wrapper.find(GlAlert); - - describe('while loading', () => { - beforeEach(() => { - queryHandler = mockQueryResponse({ key: queryResponseDataKey, loading: true }); - wrapper = createComponent({ responseHandler: queryHandler }); - }); - - it('requests data', () => { - expect(queryHandler).toBeCalledTimes(1); - }); - - it('displays the skeleton loader', () => { - expect(findLoader().exists()).toBe(true); - }); - - it('hides the chart', () => { - expect(findChart().exists()).toBe(false); - }); - - it('does not show an error', () => { - expect(findAlert().exists()).toBe(false); - }); - }); - - describe('without data', () => { - beforeEach(() => { - queryHandler = mockQueryResponse({ key: queryResponseDataKey, data: [] }); - wrapper = createComponent({ responseHandler: queryHandler }); - }); - - it('renders an no data message', () => { - expect(findAlert().text()).toBe(noDataMessage); - }); - - it('hides the skeleton loader', () => { - expect(findLoader().exists()).toBe(false); - }); - - it('renders the chart', () => { - expect(findChart().exists()).toBe(false); - }); - }); - - describe('with data', () => { - beforeEach(() => { - queryHandler = mockQueryResponse({ key: queryResponseDataKey, data: mockCountsData1 }); - wrapper = createComponent({ responseHandler: queryHandler }); - }); - - it('requests data', () => { - expect(queryHandler).toBeCalledTimes(1); - }); - - it('hides the skeleton loader', () => { - expect(findLoader().exists()).toBe(false); - }); - - it('renders the chart', () => { - expect(findChart().exists()).toBe(true); - }); - - it('passes the data to the line chart', () => { - expect(findChart().props('data')).toMatchSnapshot(); - }); - - it('does not show an error', () => { - expect(findAlert().exists()).toBe(false); - }); - }); - - describe('when fetching more data', () => { - const recordedAt = '2020-08-01'; - describe('when the fetchMore query returns data', () => { - beforeEach(async () => { - const newData = [{ recordedAt, count: 5 }]; - queryHandler = mockQueryResponse({ - key: queryResponseDataKey, - data: mockCountsData1, - additionalData: newData, - }); - - wrapper = createComponent({ responseHandler: queryHandler }); - await wrapper.vm.$nextTick(); - }); - - it('requests data twice', () => { - expect(queryHandler).toBeCalledTimes(2); - }); - - it('passes the data to the line chart', () => { - expect(findChart().props('data')).toMatchSnapshot(); - }); - }); - - describe('when the fetchMore query throws an error', () => { - beforeEach(async () => { - queryHandler = jest.fn().mockResolvedValueOnce( - mockApolloResponse({ - key: queryResponseDataKey, - data: mockCountsData1, - hasNextPage: true, - }), - ); - - wrapper = createComponent({ responseHandler: queryHandler }); - jest - .spyOn(wrapper.vm.$apollo.queries[identifier], 'fetchMore') - .mockImplementation(jest.fn().mockRejectedValue()); - - await wrapper.vm.$nextTick(); - }); - - it('calls fetchMore', () => { - expect(wrapper.vm.$apollo.queries[identifier].fetchMore).toHaveBeenCalledTimes(1); - }); - - it('show an error message', () => { - expect(findAlert().text()).toBe(loadChartErrorMessage); - }); - }); - }); -}); diff --git a/spec/frontend/analytics/instance_statistics/components/projects_and_groups_chart_spec.js b/spec/frontend/analytics/instance_statistics/components/projects_and_groups_chart_spec.js deleted file mode 100644 index bbfc65f19b1..00000000000 --- a/spec/frontend/analytics/instance_statistics/components/projects_and_groups_chart_spec.js +++ /dev/null @@ -1,215 +0,0 @@ -import { GlAlert } from '@gitlab/ui'; -import { GlLineChart } from '@gitlab/ui/dist/charts'; -import { createLocalVue, shallowMount } from '@vue/test-utils'; -import VueApollo from 'vue-apollo'; -import createMockApollo from 'helpers/mock_apollo_helper'; -import ProjectsAndGroupChart from '~/analytics/instance_statistics/components/projects_and_groups_chart.vue'; -import groupsQuery from '~/analytics/instance_statistics/graphql/queries/groups.query.graphql'; -import projectsQuery from '~/analytics/instance_statistics/graphql/queries/projects.query.graphql'; -import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue'; -import { mockQueryResponse } from '../apollo_mock_data'; -import { mockCountsData2, roundedSortedCountsMonthlyChartData2 } from '../mock_data'; - -const localVue = createLocalVue(); -localVue.use(VueApollo); - -describe('ProjectsAndGroupChart', () => { - let wrapper; - let queryResponses = { projects: null, groups: null }; - const mockAdditionalData = [{ recordedAt: '2020-07-21', count: 5 }]; - - const createComponent = ({ - loadingError = false, - projects = [], - groups = [], - projectsLoading = false, - groupsLoading = false, - projectsAdditionalData = [], - groupsAdditionalData = [], - } = {}) => { - queryResponses = { - projects: mockQueryResponse({ - key: 'projects', - data: projects, - loading: projectsLoading, - additionalData: projectsAdditionalData, - }), - groups: mockQueryResponse({ - key: 'groups', - data: groups, - loading: groupsLoading, - additionalData: groupsAdditionalData, - }), - }; - - return shallowMount(ProjectsAndGroupChart, { - props: { - startDate: new Date(2020, 9, 26), - endDate: new Date(2020, 10, 1), - totalDataPoints: mockCountsData2.length, - }, - localVue, - apolloProvider: createMockApollo([ - [projectsQuery, queryResponses.projects], - [groupsQuery, queryResponses.groups], - ]), - data() { - return { loadingError }; - }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - queryResponses = { - projects: null, - groups: null, - }; - }); - - const findLoader = () => wrapper.find(ChartSkeletonLoader); - const findAlert = () => wrapper.find(GlAlert); - const findChart = () => wrapper.find(GlLineChart); - - describe('while loading', () => { - beforeEach(() => { - wrapper = createComponent({ projectsLoading: true, groupsLoading: true }); - }); - - it('displays the skeleton loader', () => { - expect(findLoader().exists()).toBe(true); - }); - - it('hides the chart', () => { - expect(findChart().exists()).toBe(false); - }); - }); - - describe('while loading 1 data set', () => { - beforeEach(async () => { - wrapper = createComponent({ - projects: mockCountsData2, - groupsLoading: true, - }); - - await wrapper.vm.$nextTick(); - }); - - it('hides the skeleton loader', () => { - expect(findLoader().exists()).toBe(false); - }); - - it('renders the chart', () => { - expect(findChart().exists()).toBe(true); - }); - }); - - describe('without data', () => { - beforeEach(async () => { - wrapper = createComponent({ projects: [] }); - await wrapper.vm.$nextTick(); - }); - - it('renders a no data message', () => { - expect(findAlert().text()).toBe('No data available.'); - }); - - it('hides the skeleton loader', () => { - expect(findLoader().exists()).toBe(false); - }); - - it('does not render the chart', () => { - expect(findChart().exists()).toBe(false); - }); - }); - - describe('with data', () => { - beforeEach(async () => { - wrapper = createComponent({ projects: mockCountsData2 }); - await wrapper.vm.$nextTick(); - }); - - it('hides the skeleton loader', () => { - expect(findLoader().exists()).toBe(false); - }); - - it('renders the chart', () => { - expect(findChart().exists()).toBe(true); - }); - - it('passes the data to the line chart', () => { - expect(findChart().props('data')).toEqual([ - { data: roundedSortedCountsMonthlyChartData2, name: 'Total projects' }, - { data: [], name: 'Total groups' }, - ]); - }); - }); - - describe('with errors', () => { - beforeEach(async () => { - wrapper = createComponent({ loadingError: true }); - await wrapper.vm.$nextTick(); - }); - - it('renders an error message', () => { - expect(findAlert().text()).toBe('No data available.'); - }); - - it('hides the skeleton loader', () => { - expect(findLoader().exists()).toBe(false); - }); - - it('hides the chart', () => { - expect(findChart().exists()).toBe(false); - }); - }); - - describe.each` - metric | loadingState | newData - ${'projects'} | ${{ projectsAdditionalData: mockAdditionalData }} | ${{ projects: mockCountsData2 }} - ${'groups'} | ${{ groupsAdditionalData: mockAdditionalData }} | ${{ groups: mockCountsData2 }} - `('$metric - fetchMore', ({ metric, loadingState, newData }) => { - describe('when the fetchMore query returns data', () => { - beforeEach(async () => { - wrapper = createComponent({ - ...loadingState, - ...newData, - }); - - jest.spyOn(wrapper.vm.$apollo.queries[metric], 'fetchMore'); - await wrapper.vm.$nextTick(); - }); - - it('requests data twice', () => { - expect(queryResponses[metric]).toBeCalledTimes(2); - }); - - it('calls fetchMore', () => { - expect(wrapper.vm.$apollo.queries[metric].fetchMore).toHaveBeenCalledTimes(1); - }); - }); - - describe('when the fetchMore query throws an error', () => { - beforeEach(() => { - wrapper = createComponent({ - ...loadingState, - ...newData, - }); - - jest - .spyOn(wrapper.vm.$apollo.queries[metric], 'fetchMore') - .mockImplementation(jest.fn().mockRejectedValue()); - return wrapper.vm.$nextTick(); - }); - - it('calls fetchMore', () => { - expect(wrapper.vm.$apollo.queries[metric].fetchMore).toHaveBeenCalledTimes(1); - }); - - it('renders an error message', () => { - expect(findAlert().text()).toBe('No data available.'); - }); - }); - }); -}); diff --git a/spec/frontend/analytics/instance_statistics/components/users_chart_spec.js b/spec/frontend/analytics/instance_statistics/components/users_chart_spec.js deleted file mode 100644 index d857b7fae61..00000000000 --- a/spec/frontend/analytics/instance_statistics/components/users_chart_spec.js +++ /dev/null @@ -1,174 +0,0 @@ -import { GlAlert } from '@gitlab/ui'; -import { GlAreaChart } from '@gitlab/ui/dist/charts'; -import { createLocalVue, shallowMount } from '@vue/test-utils'; -import VueApollo from 'vue-apollo'; -import createMockApollo from 'helpers/mock_apollo_helper'; -import UsersChart from '~/analytics/instance_statistics/components/users_chart.vue'; -import usersQuery from '~/analytics/instance_statistics/graphql/queries/users.query.graphql'; -import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue'; -import { mockQueryResponse } from '../apollo_mock_data'; -import { - mockCountsData1, - mockCountsData2, - roundedSortedCountsMonthlyChartData2, -} from '../mock_data'; - -const localVue = createLocalVue(); -localVue.use(VueApollo); - -describe('UsersChart', () => { - let wrapper; - let queryHandler; - - const createComponent = ({ - loadingError = false, - loading = false, - users = [], - additionalData = [], - } = {}) => { - queryHandler = mockQueryResponse({ key: 'users', data: users, loading, additionalData }); - - return shallowMount(UsersChart, { - props: { - startDate: new Date(2020, 9, 26), - endDate: new Date(2020, 10, 1), - totalDataPoints: mockCountsData2.length, - }, - localVue, - apolloProvider: createMockApollo([[usersQuery, queryHandler]]), - data() { - return { loadingError }; - }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - const findLoader = () => wrapper.find(ChartSkeletonLoader); - const findAlert = () => wrapper.find(GlAlert); - const findChart = () => wrapper.find(GlAreaChart); - - describe('while loading', () => { - beforeEach(() => { - wrapper = createComponent({ loading: true }); - }); - - it('displays the skeleton loader', () => { - expect(findLoader().exists()).toBe(true); - }); - - it('hides the chart', () => { - expect(findChart().exists()).toBe(false); - }); - }); - - describe('without data', () => { - beforeEach(async () => { - wrapper = createComponent({ users: [] }); - await wrapper.vm.$nextTick(); - }); - - it('renders an no data message', () => { - expect(findAlert().text()).toBe('There is no data available.'); - }); - - it('hides the skeleton loader', () => { - expect(findLoader().exists()).toBe(false); - }); - - it('renders the chart', () => { - expect(findChart().exists()).toBe(false); - }); - }); - - describe('with data', () => { - beforeEach(async () => { - wrapper = createComponent({ users: mockCountsData2 }); - await wrapper.vm.$nextTick(); - }); - - it('hides the skeleton loader', () => { - expect(findLoader().exists()).toBe(false); - }); - - it('renders the chart', () => { - expect(findChart().exists()).toBe(true); - }); - - it('passes the data to the line chart', () => { - expect(findChart().props('data')).toEqual([ - { data: roundedSortedCountsMonthlyChartData2, name: 'Total users' }, - ]); - }); - }); - - describe('with errors', () => { - beforeEach(async () => { - wrapper = createComponent({ loadingError: true }); - await wrapper.vm.$nextTick(); - }); - - it('renders an error message', () => { - expect(findAlert().text()).toBe( - 'Could not load the user chart. Please refresh the page to try again.', - ); - }); - - it('hides the skeleton loader', () => { - expect(findLoader().exists()).toBe(false); - }); - - it('renders the chart', () => { - expect(findChart().exists()).toBe(false); - }); - }); - - describe('when fetching more data', () => { - describe('when the fetchMore query returns data', () => { - beforeEach(async () => { - wrapper = createComponent({ - users: mockCountsData2, - additionalData: mockCountsData1, - }); - - jest.spyOn(wrapper.vm.$apollo.queries.users, 'fetchMore'); - await wrapper.vm.$nextTick(); - }); - - it('requests data twice', () => { - expect(queryHandler).toBeCalledTimes(2); - }); - - it('calls fetchMore', () => { - expect(wrapper.vm.$apollo.queries.users.fetchMore).toHaveBeenCalledTimes(1); - }); - }); - - describe('when the fetchMore query throws an error', () => { - beforeEach(() => { - wrapper = createComponent({ - users: mockCountsData2, - additionalData: mockCountsData1, - }); - - jest - .spyOn(wrapper.vm.$apollo.queries.users, 'fetchMore') - .mockImplementation(jest.fn().mockRejectedValue()); - return wrapper.vm.$nextTick(); - }); - - it('calls fetchMore', () => { - expect(wrapper.vm.$apollo.queries.users.fetchMore).toHaveBeenCalledTimes(1); - }); - - it('renders an error message', () => { - expect(findAlert().text()).toBe( - 'Could not load the user chart. Please refresh the page to try again.', - ); - }); - }); - }); -}); |