10 files changed, 57 insertions, 277 deletions

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/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/apollo_mock_data.js b/spec/frontend/analytics/usage_trends/apollo_mock_data.js
index 98eabd577ee..98eabd577ee 100644
--- a/spec/frontend/analytics/instance_statistics/apollo_mock_data.js
+++ b/spec/frontend/analytics/usage_trends/apollo_mock_data.js
diff --git a/spec/frontend/analytics/instance_statistics/components/__snapshots__/instance_statistics_count_chart_spec.js.snap b/spec/frontend/analytics/usage_trends/components/__snapshots__/usage_trends_count_chart_spec.js.snap
index 29bcd5f223b..65de69c2692 100644
--- a/spec/frontend/analytics/instance_statistics/components/__snapshots__/instance_statistics_count_chart_spec.js.snap
+++ b/spec/frontend/analytics/usage_trends/components/__snapshots__/usage_trends_count_chart_spec.js.snap
@@ -1,6 +1,6 @@
 // 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`] = `
+exports[`UsageTrendsCountChart when fetching more data when the fetchMore query returns data passes the data to the line chart 1`] = `
 Array [
   Object {
     "data": Array [
@@ -22,7 +22,7 @@ Array [
 ]
 `;
 
-exports[`InstanceStatisticsCountChart with data passes the data to the line chart 1`] = `
+exports[`UsageTrendsCountChart with data passes the data to the line chart 1`] = `
 Array [
   Object {
     "data": Array [
diff --git a/spec/frontend/analytics/usage_trends/components/app_spec.js b/spec/frontend/analytics/usage_trends/components/app_spec.js
new file mode 100644
index 00000000000..f0306ea72e3
--- /dev/null
+++ b/spec/frontend/analytics/usage_trends/components/app_spec.js
@@ -0,0 +1,40 @@
+import { shallowMount } from '@vue/test-utils';
+import UsageTrendsApp from '~/analytics/usage_trends/components/app.vue';
+import UsageCounts from '~/analytics/usage_trends/components/usage_counts.vue';
+import UsageTrendsCountChart from '~/analytics/usage_trends/components/usage_trends_count_chart.vue';
+import UsersChart from '~/analytics/usage_trends/components/users_chart.vue';
+
+describe('UsageTrendsApp', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(UsageTrendsApp);
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('displays the usage counts component', () => {
+    expect(wrapper.find(UsageCounts).exists()).toBe(true);
+  });
+
+  ['Total projects & groups', 'Pipelines', 'Issues & Merge Requests'].forEach((usage) => {
+    it(`displays the ${usage} chart`, () => {
+      const chartTitles = wrapper
+        .findAll(UsageTrendsCountChart)
+        .wrappers.map((chartComponent) => chartComponent.props('chartTitle'));
+
+      expect(chartTitles).toContain(usage);
+    });
+  });
+
+  it('displays the users chart component', () => {
+    expect(wrapper.find(UsersChart).exists()).toBe(true);
+  });
+});
diff --git a/spec/frontend/analytics/instance_statistics/components/instance_counts_spec.js b/spec/frontend/analytics/usage_trends/components/instance_counts_spec.js
index 12b5e14b9c4..707d2cc310f 100644
--- a/spec/frontend/analytics/instance_statistics/components/instance_counts_spec.js
+++ b/spec/frontend/analytics/usage_trends/components/instance_counts_spec.js
@@ -1,9 +1,9 @@
 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';
+import UsageCounts from '~/analytics/usage_trends/components/usage_counts.vue';
+import { mockUsageCounts } from '../mock_data';
 
-describe('InstanceCounts', () => {
+describe('UsageCounts', () => {
   let wrapper;
 
   const createComponent = ({ loading = false, data = {} } = {}) => {
@@ -15,7 +15,7 @@ describe('InstanceCounts', () => {
       },
     };
 
-    wrapper = shallowMount(InstanceCounts, {
+    wrapper = shallowMount(UsageCounts, {
       mocks: { $apollo },
       data() {
         return {
@@ -44,11 +44,11 @@ describe('InstanceCounts', () => {
 
   describe('with data', () => {
     beforeEach(() => {
-      createComponent({ data: { counts: mockInstanceCounts } });
+      createComponent({ data: { counts: mockUsageCounts } });
     });
 
     it('passes the counts data to the metric card', () => {
-      expect(findMetricCard().props('metrics')).toEqual(mockInstanceCounts);
+      expect(findMetricCard().props('metrics')).toEqual(mockUsageCounts);
     });
   });
 });
diff --git a/spec/frontend/analytics/instance_statistics/components/instance_statistics_count_chart_spec.js b/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js
index e80dcdff426..7c2df3fe8c4 100644
--- a/spec/frontend/analytics/instance_statistics/components/instance_statistics_count_chart_spec.js
+++ b/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js
@@ -3,8 +3,8 @@ 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 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';
@@ -15,7 +15,7 @@ localVue.use(VueApollo);
 const loadChartErrorMessage = 'My load error message';
 const noDataMessage = 'My no data message';
 
-const queryResponseDataKey = 'instanceStatisticsMeasurements';
+const queryResponseDataKey = 'usageTrendsMeasurements';
 const identifier = 'MOCK_QUERY';
 const mockQueryConfig = {
   identifier,
@@ -33,12 +33,12 @@ const mockChartConfig = {
   queries: [mockQueryConfig],
 };
 
-describe('InstanceStatisticsCountChart', () => {
+describe('UsageTrendsCountChart', () => {
   let wrapper;
   let queryHandler;
 
   const createComponent = ({ responseHandler }) => {
-    return shallowMount(InstanceStatisticsCountChart, {
+    return shallowMount(UsageTrendsCountChart, {
       localVue,
       apolloProvider: createMockApollo([[statsQuery, responseHandler]]),
       propsData: { ...mockChartConfig },
diff --git a/spec/frontend/analytics/instance_statistics/components/users_chart_spec.js b/spec/frontend/analytics/usage_trends/components/users_chart_spec.js
index d857b7fae61..6adfcca11ac 100644
--- a/spec/frontend/analytics/instance_statistics/components/users_chart_spec.js
+++ b/spec/frontend/analytics/usage_trends/components/users_chart_spec.js
@@ -3,8 +3,8 @@ 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 UsersChart from '~/analytics/usage_trends/components/users_chart.vue';
+import usersQuery from '~/analytics/usage_trends/graphql/queries/users.query.graphql';
 import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
 import { mockQueryResponse } from '../apollo_mock_data';
 import {
diff --git a/spec/frontend/analytics/instance_statistics/mock_data.js b/spec/frontend/analytics/usage_trends/mock_data.js
index e86e552a952..d96dfa26209 100644
--- a/spec/frontend/analytics/instance_statistics/mock_data.js
+++ b/spec/frontend/analytics/usage_trends/mock_data.js
@@ -1,4 +1,4 @@
-export const mockInstanceCounts = [
+export const mockUsageCounts = [
   { key: 'projects', value: 10, label: 'Projects' },
   { key: 'groups', value: 20, label: 'Group' },
 ];
diff --git a/spec/frontend/analytics/instance_statistics/utils_spec.js b/spec/frontend/analytics/usage_trends/utils_spec.js
index 3fd89c7f740..656f310dda7 100644
--- a/spec/frontend/analytics/instance_statistics/utils_spec.js
+++ b/spec/frontend/analytics/usage_trends/utils_spec.js
@@ -2,7 +2,7 @@ import {
   getAverageByMonth,
   getEarliestDate,
   generateDataKeys,
-} from '~/analytics/instance_statistics/utils';
+} from '~/analytics/usage_trends/utils';
 import {
   mockCountsData1,
   mockCountsData2,