diff options
Diffstat (limited to 'spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js')
-rw-r--r-- | spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js | 177 |
1 files changed, 177 insertions, 0 deletions
diff --git a/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js b/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js new file mode 100644 index 00000000000..7c2df3fe8c4 --- /dev/null +++ b/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js @@ -0,0 +1,177 @@ +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 UsageTrendsCountChart from '~/analytics/usage_trends/components/usage_trends_count_chart.vue'; +import statsQuery from '~/analytics/usage_trends/graphql/queries/usage_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 = 'usageTrendsMeasurements'; +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('UsageTrendsCountChart', () => { + let wrapper; + let queryHandler; + + const createComponent = ({ responseHandler }) => { + return shallowMount(UsageTrendsCountChart, { + 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); + }); + }); + }); +}); |