Add latest changes from gitlab-org/gitlab@master

6 files changed, 310 insertions, 0 deletions

diff --git a/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap b/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap
new file mode 100644
index 00000000000..b87afdd7eb4
--- /dev/null
+++ b/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Contributors charts should render charts when loading completed and there is chart data 1`] = `
+<div>
+  <div
+    class="contributors-charts"
+  >
+    <h4>
+      Commits to master
+    </h4>
+     
+    <span>
+      Excluding merge commits. Limited to 6,000 commits.
+    </span>
+     
+    <div>
+      <glareachart-stub
+        data="[object Object]"
+        height="264"
+        option="[object Object]"
+      />
+    </div>
+     
+    <div
+      class="row"
+    >
+      <div
+        class="col-6"
+      >
+        <h4>
+          John
+        </h4>
+         
+        <p>
+          2 commits (jawnnypoo@gmail.com)
+        </p>
+         
+        <glareachart-stub
+          data="[object Object]"
+          height="216"
+          option="[object Object]"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/spec/frontend/contributors/component/contributors_spec.js b/spec/frontend/contributors/component/contributors_spec.js
new file mode 100644
index 00000000000..fdba09ed26c
--- /dev/null
+++ b/spec/frontend/contributors/component/contributors_spec.js
@@ -0,0 +1,69 @@
+import Vue from 'vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { createStore } from '~/contributors/stores';
+import axios from '~/lib/utils/axios_utils';
+import MockAdapter from 'axios-mock-adapter';
+import ContributorsCharts from '~/contributors/components/contributors.vue';
+
+const localVue = createLocalVue();
+let wrapper;
+let mock;
+let store;
+const Component = Vue.extend(ContributorsCharts);
+const endpoint = 'contributors';
+const branch = 'master';
+const chartData = [
+  { author_name: 'John', author_email: 'jawnnypoo@gmail.com', date: '2019-05-05' },
+  { author_name: 'John', author_email: 'jawnnypoo@gmail.com', date: '2019-03-03' },
+];
+
+function factory() {
+  mock = new MockAdapter(axios);
+  jest.spyOn(axios, 'get');
+  mock.onGet().reply(200, chartData);
+  store = createStore();
+
+  wrapper = shallowMount(Component, {
+    propsData: {
+      endpoint,
+      branch,
+    },
+    stubs: {
+      GlLoadingIcon: true,
+      GlAreaChart: true,
+    },
+    store,
+  });
+}
+
+describe('Contributors charts', () => {
+  beforeEach(() => {
+    factory();
+  });
+
+  afterEach(() => {
+    mock.restore();
+    wrapper.destroy();
+  });
+
+  it('should fetch chart data when mounted', () => {
+    expect(axios.get).toHaveBeenCalledWith(endpoint);
+  });
+
+  it('should display loader whiled loading data', () => {
+    wrapper.vm.$store.state.loading = true;
+    return localVue.nextTick(() => {
+      expect(wrapper.find('.contributors-loader').exists()).toBe(true);
+    });
+  });
+
+  it('should render charts when loading completed and there is chart data', () => {
+    wrapper.vm.$store.state.loading = false;
+    wrapper.vm.$store.state.chartData = chartData;
+    return localVue.nextTick(() => {
+      expect(wrapper.find('.contributors-loader').exists()).toBe(false);
+      expect(wrapper.find('.contributors-charts').exists()).toBe(true);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+});
diff --git a/spec/frontend/contributors/store/actions_spec.js b/spec/frontend/contributors/store/actions_spec.js
new file mode 100644
index 00000000000..bb017e0ac0f
--- /dev/null
+++ b/spec/frontend/contributors/store/actions_spec.js
@@ -0,0 +1,60 @@
+import axios from '~/lib/utils/axios_utils';
+import MockAdapter from 'axios-mock-adapter';
+import testAction from 'helpers/vuex_action_helper';
+import flashError from '~/flash';
+import * as actions from '~/contributors/stores/actions';
+import * as types from '~/contributors/stores/mutation_types';
+
+jest.mock('~/flash.js');
+
+describe('Contributors store actions', () => {
+  describe('fetchChartData', () => {
+    let mock;
+    const endpoint = '/contributors';
+    const chartData = { '2017-11': 0, '2017-12': 2 };
+
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+    });
+
+    it('should commit SET_CHART_DATA with received response', done => {
+      mock.onGet().reply(200, chartData);
+
+      testAction(
+        actions.fetchChartData,
+        { endpoint },
+        {},
+        [
+          { type: types.SET_LOADING_STATE, payload: true },
+          { type: types.SET_CHART_DATA, payload: chartData },
+          { type: types.SET_LOADING_STATE, payload: false },
+        ],
+        [],
+        () => {
+          mock.restore();
+          done();
+        },
+      );
+    });
+
+    it('should show flash on API error', done => {
+      mock.onGet().reply(400, 'Not Found');
+
+      testAction(
+        actions.fetchChartData,
+        { endpoint },
+        {},
+        [{ type: types.SET_LOADING_STATE, payload: true }],
+        [],
+        () => {
+          expect(flashError).toHaveBeenCalledWith(expect.stringMatching('error'));
+          mock.restore();
+          done();
+        },
+      );
+    });
+  });
+});
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/spec/frontend/contributors/store/getters_spec.js b/spec/frontend/contributors/store/getters_spec.js
new file mode 100644
index 00000000000..62ae9b36f87
--- /dev/null
+++ b/spec/frontend/contributors/store/getters_spec.js
@@ -0,0 +1,73 @@
+import * as getters from '~/contributors/stores/getters';
+
+describe('Contributors Store Getters', () => {
+  const state = {};
+
+  describe('showChart', () => {
+    it('should NOT show chart if loading', () => {
+      state.loading = true;
+
+      expect(getters.showChart(state)).toEqual(false);
+    });
+
+    it('should NOT show chart there is not data', () => {
+      state.loading = false;
+      state.chartData = null;
+
+      expect(getters.showChart(state)).toEqual(false);
+    });
+
+    it('should show the chart in case loading complated and there is data', () => {
+      state.loading = false;
+      state.chartData = true;
+
+      expect(getters.showChart(state)).toEqual(true);
+    });
+
+    describe('parsedData', () => {
+      let parsed;
+
+      beforeAll(() => {
+        state.chartData = [
+          { author_name: 'John', author_email: 'jawnnypoo@gmail.com', date: '2019-05-05' },
+          { author_name: 'John', author_email: 'jawnnypoo@gmail.com', date: '2019-05-05' },
+          { author_name: 'Carlson', author_email: 'jawnnypoo@gmail.com', date: '2019-03-03' },
+          { author_name: 'Carlson', author_email: 'jawnnypoo@gmail.com', date: '2019-05-05' },
+          { author_name: 'John', author_email: 'jawnnypoo@gmail.com', date: '2019-04-04' },
+          { author_name: 'John', author_email: 'jawnnypoo@gmail.com', date: '2019-04-04' },
+          { author_name: 'John', author_email: 'jawnnypoo@gmail.com', date: '2019-03-03' },
+        ];
+        parsed = getters.parsedData(state);
+      });
+
+      it('should group contributions by date ', () => {
+        expect(parsed.total).toMatchObject({ '2019-05-05': 3, '2019-03-03': 2, '2019-04-04': 2 });
+      });
+
+      it('should group contributions by author ', () => {
+        expect(parsed.byAuthor).toMatchObject({
+          Carlson: {
+            email: 'jawnnypoo@gmail.com',
+            commits: 2,
+            dates: {
+              '2019-03-03': 1,
+              '2019-05-05': 1,
+            },
+          },
+          John: {
+            email: 'jawnnypoo@gmail.com',
+            commits: 5,
+            dates: {
+              '2019-03-03': 1,
+              '2019-04-04': 2,
+              '2019-05-05': 2,
+            },
+          },
+        });
+      });
+    });
+  });
+});
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/spec/frontend/contributors/store/mutations_spec.js b/spec/frontend/contributors/store/mutations_spec.js
new file mode 100644
index 00000000000..e9e756d4a65
--- /dev/null
+++ b/spec/frontend/contributors/store/mutations_spec.js
@@ -0,0 +1,40 @@
+import state from '~/contributors/stores/state';
+import mutations from '~/contributors/stores/mutations';
+import * as types from '~/contributors/stores/mutation_types';
+
+describe('Contributors mutations', () => {
+  let stateCopy;
+
+  beforeEach(() => {
+    stateCopy = state();
+  });
+
+  describe('SET_LOADING_STATE', () => {
+    it('should set loading flag', () => {
+      const loading = true;
+      mutations[types.SET_LOADING_STATE](stateCopy, loading);
+
+      expect(stateCopy.loading).toEqual(loading);
+    });
+  });
+
+  describe('SET_CHART_DATA', () => {
+    const chartData = { '2017-11': 0, '2017-12': 2 };
+
+    it('should set chart data', () => {
+      mutations[types.SET_CHART_DATA](stateCopy, chartData);
+
+      expect(stateCopy.chartData).toEqual(chartData);
+    });
+  });
+
+  describe('SET_ACTIVE_BRANCH', () => {
+    it('should set search query', () => {
+      const branch = 'feature-branch';
+
+      mutations[types.SET_ACTIVE_BRANCH](stateCopy, branch);
+
+      expect(stateCopy.branch).toEqual(branch);
+    });
+  });
+});
diff --git a/spec/frontend/contributors/utils_spec.js b/spec/frontend/contributors/utils_spec.js
new file mode 100644
index 00000000000..a2b9154329b
--- /dev/null
+++ b/spec/frontend/contributors/utils_spec.js
@@ -0,0 +1,21 @@
+import * as utils from '~/contributors/utils';
+
+describe('Contributors Util Functions', () => {
+  describe('xAxisLabelFormatter', () => {
+    it('should return year if the date is in January', () => {
+      expect(utils.xAxisLabelFormatter(new Date('01-12-2019'))).toEqual('2019');
+    });
+
+    it('should return month name otherwise', () => {
+      expect(utils.xAxisLabelFormatter(new Date('12-02-2019'))).toEqual('Dec');
+      expect(utils.xAxisLabelFormatter(new Date('07-12-2019'))).toEqual('Jul');
+    });
+  });
+
+  describe('dateFormatter', () => {
+    it('should format provided date to YYYY-MM-DD format', () => {
+      expect(utils.dateFormatter(new Date('December 17, 1995 03:24:00'))).toEqual('1995-12-17');
+      expect(utils.dateFormatter(new Date(1565308800000))).toEqual('2019-08-09');
+    });
+  });
+});