Adds Vuex Store for the releases page

6 files changed, 369 insertions, 23 deletions

diff --git a/spec/javascripts/releases/components/app_spec.js b/spec/javascripts/releases/components/app_spec.js
new file mode 100644
index 00000000000..f30c7685e34
--- /dev/null
+++ b/spec/javascripts/releases/components/app_spec.js
@@ -0,0 +1,79 @@
+import Vue from 'vue';
+import app from '~/releases/components/app.vue';
+import createStore from '~/releases/store';
+import api from '~/api';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { resetStore } from '../store/helpers';
+import { releases } from '../mock_data';
+
+describe('Releases App ', () => {
+  const Component = Vue.extend(app);
+  let store;
+  let vm;
+
+  const props = {
+    projectId: 'gitlab-ce',
+    documentationLink: 'help/releases',
+    illustrationPath: 'illustration/path',
+  };
+
+  beforeEach(() => {
+    store = createStore();
+  });
+
+  afterEach(() => {
+    resetStore(store);
+    vm.$destroy();
+  });
+
+  describe('while loading', () => {
+    beforeEach(() => {
+      spyOn(api, 'releases').and.returnValue(Promise.resolve({ data: [] }));
+      vm = mountComponentWithStore(Component, { props, store });
+    });
+
+    it('renders loading icon', done => {
+      expect(vm.$el.querySelector('.js-loading')).not.toBeNull();
+      expect(vm.$el.querySelector('.js-empty-state')).toBeNull();
+      expect(vm.$el.querySelector('.js-success-state')).toBeNull();
+
+      setTimeout(() => {
+        done();
+      }, 0);
+    });
+  });
+
+  describe('with successful request', () => {
+    beforeEach(() => {
+      spyOn(api, 'releases').and.returnValue(Promise.resolve({ data: releases }));
+      vm = mountComponentWithStore(Component, { props, store });
+    });
+
+    it('renders success state', done => {
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.js-loading')).toBeNull();
+        expect(vm.$el.querySelector('.js-empty-state')).toBeNull();
+        expect(vm.$el.querySelector('.js-success-state')).not.toBeNull();
+
+        done();
+      }, 0);
+    });
+  });
+
+  describe('with empty request', () => {
+    beforeEach(() => {
+      spyOn(api, 'releases').and.returnValue(Promise.resolve({ data: [] }));
+      vm = mountComponentWithStore(Component, { props, store });
+    });
+
+    it('renders empty state', done => {
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.js-loading')).toBeNull();
+        expect(vm.$el.querySelector('.js-empty-state')).not.toBeNull();
+        expect(vm.$el.querySelector('.js-success-state')).toBeNull();
+
+        done();
+      }, 0);
+    });
+  });
+});
diff --git a/spec/javascripts/releases/components/release_block_spec.js b/spec/javascripts/releases/components/release_block_spec.js
index c0cd15b7507..19aecbb3636 100644
--- a/spec/javascripts/releases/components/release_block_spec.js
+++ b/spec/javascripts/releases/components/release_block_spec.js
@@ -28,6 +28,16 @@ describe('Release block', () => {
       committer_name: 'Jack Smith',
       committer_email: 'jack@example.com',
       committed_date: '2012-05-28T04:42:42-07:00',
+      author: {
+        avatar_url: 'uploads/-/system/user/avatar/johndoe/avatar.png',
+        id: 482476,
+        name: 'John Doe',
+        path: '/johndoe',
+        state: 'active',
+        status_tooltip_html: null,
+        username: 'johndoe',
+        web_url: 'https://gitlab.com/johndoe',
+      },
     },
     assets: {
       count: 6,
@@ -66,32 +76,10 @@ describe('Release block', () => {
       ],
     },
   };
-
-  const props = {
-    name: release.name,
-    tag: release.tag_name,
-    commit: release.commit,
-    description: release.description_html,
-    author: {
-      avatar_url: 'uploads/-/system/user/avatar/johndoe/avatar.png',
-      id: 482476,
-      name: 'John Doe',
-      path: '/johndoe',
-      state: 'active',
-      status_tooltip_html: null,
-      username: 'johndoe',
-      web_url: 'https://gitlab.com/johndoe',
-    },
-    createdAt: release.created_at,
-    assetsCount: release.assets.count,
-    sources: release.assets.sources,
-    links: release.assets.links,
-  };
-
   let vm;
 
   beforeEach(() => {
-    vm = mountComponent(Component, props);
+    vm = mountComponent(Component, { release });
   });
 
   afterEach(() => {
diff --git a/spec/javascripts/releases/mock_data.js b/spec/javascripts/releases/mock_data.js
new file mode 100644
index 00000000000..2855eca1711
--- /dev/null
+++ b/spec/javascripts/releases/mock_data.js
@@ -0,0 +1,128 @@
+export const release = {
+  name: 'Bionic Beaver',
+  tag_name: '18.04',
+  description: '## changelog\n\n* line 1\n* line2',
+  description_html: '<div><h2>changelog</h2><ul><li>line1</li<li>line 2</li></ul></div>',
+  author_name: 'Release bot',
+  author_email: 'release-bot@example.com',
+  created_at: '2012-05-28T05:00:00-07:00',
+  commit: {
+    id: '2695effb5807a22ff3d138d593fd856244e155e7',
+    short_id: '2695effb',
+    title: 'Initial commit',
+    created_at: '2017-07-26T11:08:53.000+02:00',
+    parent_ids: ['2a4b78934375d7f53875269ffd4f45fd83a84ebe'],
+    message: 'Initial commit',
+    author: {
+      avatar_url: 'uploads/-/system/user/avatar/johndoe/avatar.png',
+      id: 482476,
+      name: 'John Doe',
+      path: '/johndoe',
+      state: 'active',
+      status_tooltip_html: null,
+      username: 'johndoe',
+      web_url: 'https://gitlab.com/johndoe',
+    },
+    authored_date: '2012-05-28T04:42:42-07:00',
+    committer_name: 'Jack Smith',
+    committer_email: 'jack@example.com',
+    committed_date: '2012-05-28T04:42:42-07:00',
+  },
+  assets: {
+    count: 6,
+    sources: [
+      {
+        format: 'zip',
+        url: 'https://gitlab.com/gitlab-org/gitlab-ce/-/archive/v11.3.12/gitlab-ce-v11.3.12.zip',
+      },
+      {
+        format: 'tar.gz',
+        url: 'https://gitlab.com/gitlab-org/gitlab-ce/-/archive/v11.3.12/gitlab-ce-v11.3.12.tar.gz',
+      },
+      {
+        format: 'tar.bz2',
+        url:
+          'https://gitlab.com/gitlab-org/gitlab-ce/-/archive/v11.3.12/gitlab-ce-v11.3.12.tar.bz2',
+      },
+      {
+        format: 'tar',
+        url: 'https://gitlab.com/gitlab-org/gitlab-ce/-/archive/v11.3.12/gitlab-ce-v11.3.12.tar',
+      },
+    ],
+    links: [
+      {
+        name: 'release-18.04.dmg',
+        url: 'https://my-external-hosting.example.com/scrambled-url/',
+        external: true,
+      },
+      {
+        name: 'binary-linux-amd64',
+        url:
+          'https://gitlab.com/gitlab-org/gitlab-ce/-/jobs/artifacts/v11.6.0-rc4/download?job=rspec-mysql+41%2F50',
+        external: false,
+      },
+    ],
+  },
+};
+
+export const releases = [
+  release,
+  {
+    name: 'JoJos Bizarre Adventure',
+    tag_name: '19.00',
+    description: '## changelog\n\n* line 1\n* line2',
+    description_html: '<div><h2>changelog</h2><ul><li>line1</li<li>line 2</li></ul></div>',
+    author_name: 'Release bot',
+    author_email: 'release-bot@example.com',
+    created_at: '2012-05-28T05:00:00-07:00',
+    commit: {
+      id: '2695effb5807a22ff3d138d593fd856244e155e7',
+      short_id: '2695effb',
+      title: 'Initial commit',
+      created_at: '2017-07-26T11:08:53.000+02:00',
+      parent_ids: ['2a4b78934375d7f53875269ffd4f45fd83a84ebe'],
+      message: 'Initial commit',
+      author: {
+        avatar_url: 'uploads/-/system/user/avatar/johndoe/avatar.png',
+        id: 482476,
+        name: 'John Doe',
+        path: '/johndoe',
+        state: 'active',
+        status_tooltip_html: null,
+        username: 'johndoe',
+        web_url: 'https://gitlab.com/johndoe',
+      },
+      authored_date: '2012-05-28T04:42:42-07:00',
+      committer_name: 'Jack Smith',
+      committer_email: 'jack@example.com',
+      committed_date: '2012-05-28T04:42:42-07:00',
+    },
+    assets: {
+      count: 4,
+      sources: [
+        {
+          format: 'tar.gz',
+          url:
+            'https://gitlab.com/gitlab-org/gitlab-ce/-/archive/v11.3.12/gitlab-ce-v11.3.12.tar.gz',
+        },
+        {
+          format: 'tar.bz2',
+          url:
+            'https://gitlab.com/gitlab-org/gitlab-ce/-/archive/v11.3.12/gitlab-ce-v11.3.12.tar.bz2',
+        },
+        {
+          format: 'tar',
+          url: 'https://gitlab.com/gitlab-org/gitlab-ce/-/archive/v11.3.12/gitlab-ce-v11.3.12.tar',
+        },
+      ],
+      links: [
+        {
+          name: 'binary-linux-amd64',
+          url:
+            'https://gitlab.com/gitlab-org/gitlab-ce/-/jobs/artifacts/v11.6.0-rc4/download?job=rspec-mysql+41%2F50',
+          external: false,
+        },
+      ],
+    },
+  },
+];
diff --git a/spec/javascripts/releases/store/actions_spec.js b/spec/javascripts/releases/store/actions_spec.js
new file mode 100644
index 00000000000..6eb8e681be9
--- /dev/null
+++ b/spec/javascripts/releases/store/actions_spec.js
@@ -0,0 +1,98 @@
+import {
+  requestReleases,
+  fetchReleases,
+  receiveReleasesSuccess,
+  receiveReleasesError,
+} from '~/releases/store/actions';
+import state from '~/releases/store/state';
+import * as types from '~/releases/store/mutation_types';
+import api from '~/api';
+import testAction from 'spec/helpers/vuex_action_helper';
+import { releases } from '../mock_data';
+
+describe('Releases State actions', () => {
+  let mockedState;
+
+  beforeEach(() => {
+    mockedState = state();
+  });
+
+  describe('requestReleases', () => {
+    it('should commit REQUEST_RELEASES mutation', done => {
+      testAction(requestReleases, null, mockedState, [{ type: types.REQUEST_RELEASES }], [], done);
+    });
+  });
+
+  describe('fetchReleases', () => {
+    describe('success', () => {
+      it('dispatches requestReleases and receiveReleasesSuccess ', done => {
+        spyOn(api, 'releases').and.returnValue(Promise.resolve({ data: releases }));
+
+        testAction(
+          fetchReleases,
+          releases,
+          mockedState,
+          [],
+          [
+            {
+              type: 'requestReleases',
+            },
+            {
+              payload: releases,
+              type: 'receiveReleasesSuccess',
+            },
+          ],
+          done,
+        );
+      });
+    });
+
+    describe('error', () => {
+      it('dispatches requestReleases and receiveReleasesError ', done => {
+        spyOn(api, 'releases').and.returnValue(Promise.reject());
+
+        testAction(
+          fetchReleases,
+          null,
+          mockedState,
+          [],
+          [
+            {
+              type: 'requestReleases',
+            },
+            {
+              type: 'receiveReleasesError',
+            },
+          ],
+          done,
+        );
+      });
+    });
+  });
+
+  describe('receiveReleasesSuccess', () => {
+    it('should commit RECEIVE_RELEASES_SUCCESS mutation', done => {
+      testAction(
+        receiveReleasesSuccess,
+        releases,
+        mockedState,
+        [{ type: types.RECEIVE_RELEASES_SUCCESS, payload: releases }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveReleasesError', () => {
+    it('should commit RECEIVE_RELEASES_ERROR mutation', done => {
+      testAction(
+        receiveReleasesError,
+        null,
+        mockedState,
+        [{ type: types.RECEIVE_RELEASES_ERROR }],
+        [],
+        done,
+      );
+    });
+  });
+});
diff --git a/spec/javascripts/releases/store/helpers.js b/spec/javascripts/releases/store/helpers.js
new file mode 100644
index 00000000000..e962b254377
--- /dev/null
+++ b/spec/javascripts/releases/store/helpers.js
@@ -0,0 +1,6 @@
+import state from '~/releases/store/state';
+
+// eslint-disable-next-line import/prefer-default-export
+export const resetStore = store => {
+  store.replaceState(state());
+};
diff --git a/spec/javascripts/releases/store/mutations_spec.js b/spec/javascripts/releases/store/mutations_spec.js
new file mode 100644
index 00000000000..72b98529fe9
--- /dev/null
+++ b/spec/javascripts/releases/store/mutations_spec.js
@@ -0,0 +1,47 @@
+import state from '~/releases/store/state';
+import mutations from '~/releases/store/mutations';
+import * as types from '~/releases/store/mutation_types';
+import { releases } from '../mock_data';
+
+describe('Releases Store Mutations', () => {
+  let stateCopy;
+
+  beforeEach(() => {
+    stateCopy = state();
+  });
+
+  describe('REQUEST_RELEASES', () => {
+    it('sets isLoading to true', () => {
+      mutations[types.REQUEST_RELEASES](stateCopy);
+
+      expect(stateCopy.isLoading).toEqual(true);
+    });
+  });
+
+  describe('RECEIVE_RELEASES_SUCCESS', () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_RELEASES_SUCCESS](stateCopy, releases);
+    });
+
+    it('sets is loading to false', () => {
+      expect(stateCopy.isLoading).toEqual(false);
+    });
+
+    it('sets hasError to false', () => {
+      expect(stateCopy.hasError).toEqual(false);
+    });
+
+    it('sets data', () => {
+      expect(stateCopy.releases).toEqual(releases);
+    });
+  });
+
+  describe('RECEIVE_RELEASES_ERROR', () => {
+    it('resets data', () => {
+      mutations[types.RECEIVE_RELEASES_ERROR](stateCopy);
+
+      expect(stateCopy.isLoading).toEqual(false);
+      expect(stateCopy.releases).toEqual([]);
+    });
+  });
+});