Client: async resources, make store reusable, move plugins and add getTaskFor getter (#8575)

Add library to manage async resource
Make Store reusable for easier testing
Move plugin to libs
Add getTaskFor getter with tests

test/client/unit/specs/libs/asyncResource.js

@@ -0,0 +1,151 @@
+import { asyncResourceFactory, loadAsyncResource } from 'client/libs/asyncResource';
+import axios from 'axios';
+import generateStore from 'client/store';
+import { sleep } from '../../../../helpers/sleep';
+
+describe('async resource', () => {
+  it('asyncResourceFactory', () => {
+    const resource = asyncResourceFactory();
+    expect(resource.loadingStatus).to.equal('NOT_LOADED');
+    expect(resource.data).to.equal(null);
+    expect(resource).to.not.equal(asyncResourceFactory);
+  });
+
+  describe('loadAsyncResource', () => {
+    context('errors', () => {
+      it('store is missing', () => {
+        expect(() => loadAsyncResource({})).to.throw;
+      });
+      it('path is missing', () => {
+        expect(() => loadAsyncResource({
+          store: 'store',
+        })).to.throw;
+      });
+      it('url is missing', () => {
+        expect(() => loadAsyncResource({
+          store: 'store',
+          path: 'path',
+        })).to.throw;
+      });
+      it('deserialize is missing', () => {
+        expect(() => loadAsyncResource({
+          store: 'store',
+          path: 'path',
+          url: 'url',
+        })).to.throw;
+      });
+      it('resource not found', () => {
+        const store = generateStore();
+
+        expect(() => loadAsyncResource({
+          store,
+          path: 'not existing path',
+          url: 'url',
+          deserialize: 'deserialize',
+        })).to.throw;
+      });
+
+      it('invalid loading status', () => {
+        const store = generateStore();
+        store.state.user.loadingStatus = 'INVALID';
+
+        expect(loadAsyncResource({
+          store,
+          path: 'user',
+          url: 'url',
+          deserialize: 'deserialize',
+        })).to.eventually.be.rejected;
+      });
+    });
+
+    it('returns the resource if it is already loaded and forceLoad is false', async () => {
+      const store = generateStore();
+      store.state.user.loadingStatus = 'LOADED';
+      store.state.user.data = {_id: 1};
+
+      sandbox.stub(axios, 'get');
+
+      const resource = await loadAsyncResource({
+        store,
+        path: 'user',
+        url: 'url',
+        deserialize: 'deserialize',
+      });
+
+      expect(resource).to.equal(store.state.user);
+      expect(axios.get).to.not.have.been.called;
+    });
+
+    it('load the resource if it is not loaded', async () => {
+      const store = generateStore();
+      store.state.user = asyncResourceFactory();
+
+      sandbox.stub(axios, 'get').withArgs('/api/v3/user').returns(Promise.resolve({data: {data: {_id: 1}}}));
+
+      const resource = await loadAsyncResource({
+        store,
+        path: 'user',
+        url: '/api/v3/user',
+        deserialize (response) {
+          return response.data.data;
+        },
+      });
+
+      expect(resource).to.equal(store.state.user);
+      expect(resource.loadingStatus).to.equal('LOADED');
+      expect(resource.data._id).to.equal(1);
+      expect(axios.get).to.have.been.calledOnce;
+    });
+
+    it('load the resource if it is loaded but forceLoad is true', async () => {
+      const store = generateStore();
+      store.state.user.loadingStatus = 'LOADED';
+
+      sandbox.stub(axios, 'get').withArgs('/api/v3/user').returns(Promise.resolve({data: {data: {_id: 1}}}));
+
+      const resource = await loadAsyncResource({
+        store,
+        path: 'user',
+        url: '/api/v3/user',
+        deserialize (response) {
+          return response.data.data;
+        },
+        forceLoad: true,
+      });
+
+      expect(resource).to.equal(store.state.user);
+      expect(resource.loadingStatus).to.equal('LOADED');
+      expect(resource.data._id).to.equal(1);
+      expect(axios.get).to.have.been.calledOnce;
+    });
+
+    it('does not send multiple requests if the resource is being loaded', async () => {
+      const store = generateStore();
+      store.state.user.loadingStatus = 'LOADING';
+
+      sandbox.stub(axios, 'get').withArgs('/api/v3/user').returns(Promise.resolve({data: {data: {_id: 1}}}));
+
+      const resourcePromise = loadAsyncResource({
+        store,
+        path: 'user',
+        url: '/api/v3/user',
+        deserialize (response) {
+          return response.data.data;
+        },
+        forceLoad: true,
+      });
+
+      await sleep(0.1);
+      const userData = {_id: 1};
+
+      expect(store.state.user.loadingStatus).to.equal('LOADING');
+      expect(axios.get).to.not.have.been.called;
+      store.state.user.data = userData;
+      store.state.user.loadingStatus = 'LOADED';
+
+      const result = await resourcePromise;
+      expect(axios.get).to.not.have.been.called;
+      expect(result).to.equal(store.state.user);
+    });
+  });
+});

test/client/unit/specs/libs/deepFreeze.js

@@ -1,7 +1,7 @@
 import deepFreeze from 'client/libs/deepFreeze';
 
 describe('deepFreeze', () => {
-  it('works as expected', () => {
+  it('deeply freezes an object', () => {
     let obj = {
       a: 1,
       b () {

test/client/unit/specs/libs/i18n.js

@@ -1,10 +1,10 @@
-import i18n from 'client/plugins/i18n';
+import i18n from 'client/libs/i18n';
 import commoni18n from 'common/script/i18n';
 import Vue from 'vue';
 
 describe('i18n plugin', () => {
   before(() => {
-    i18n.install(Vue);
+    Vue.use(i18n);
   });
 
   it('adds $t to Vue.prototype', () => {

test/client/unit/specs/libs/store.js

@@ -0,0 +1,178 @@
+import Vue from 'vue';
+import StoreModule, { mapState, mapGetters, mapActions } from 'client/libs/store';
+import { flattenAndNamespace } from 'client/libs/store/helpers/internals';
+
+describe('Store', () => {
+  let store;
+
+  beforeEach(() => {
+    store = new StoreModule({ // eslint-disable-line babel/new-cap
+      state: {
+        name: 'test',
+        nested: {
+          name: 'nested state test',
+        },
+      },
+      getters: {
+        computedName ({ state }) {
+          return `${state.name} computed!`;
+        },
+        ...flattenAndNamespace({
+          nested: {
+            computedName ({ state }) {
+              return `${state.name} computed!`;
+            },
+          },
+        }),
+      },
+      actions: {
+        getName ({ state }, ...args) {
+          return [state.name, ...args];
+        },
+        ...flattenAndNamespace({
+          nested: {
+            getName ({ state }, ...args) {
+              return [state.name, ...args];
+            },
+          },
+        }),
+      },
+    });
+
+    Vue.use(StoreModule);
+  });
+
+  it('injects itself in all component', (done) => {
+    new Vue({ // eslint-disable-line no-new
+      store,
+      created () {
+        expect(this.$store).to.equal(store);
+        done();
+      },
+    });
+  });
+
+  it('can watch a function on the state', (done) => {
+    store.watch(state => state.name, (newName) => {
+      expect(newName).to.equal('test updated');
+      done();
+    });
+
+    store.state.name = 'test updated';
+  });
+
+  describe('getters', () => {
+    it('supports getters', () => {
+      expect(store.getters.computedName).to.equal('test computed!');
+      store.state.name = 'test updated';
+      expect(store.getters.computedName).to.equal('test updated computed!');
+    });
+
+    it('supports nested getters', () => {
+      expect(store.getters['nested:computedName']).to.equal('test computed!');
+      store.state.name = 'test updated';
+      expect(store.getters['nested:computedName']).to.equal('test updated computed!');
+    });
+  });
+
+  describe('actions', () => {
+    it('can dispatch an action', () => {
+      expect(store.dispatch('getName', 1, 2, 3)).to.deep.equal(['test', 1, 2, 3]);
+    });
+
+    it('can dispatch a nested action', () => {
+      expect(store.dispatch('nested:getName', 1, 2, 3)).to.deep.equal(['test', 1, 2, 3]);
+    });
+
+    it('throws an error is the action doesn\'t exists', () => {
+      expect(() => store.dispatched('wrong')).to.throw;
+    });
+  });
+
+  describe('helpers', () => {
+    it('mapState', (done) => {
+      new Vue({ // eslint-disable-line no-new
+        store,
+        data: {
+          title: 'internal',
+        },
+        computed: {
+          ...mapState(['name']),
+          ...mapState({
+            nameComputed (state, getters) {
+              return `${this.title} ${getters.computedName} ${state.name}`;
+            },
+          }),
+          ...mapState({nestedTest: 'nested.name'}),
+        },
+        created () {
+          expect(this.name).to.equal('test');
+          expect(this.nameComputed).to.equal('internal test computed! test');
+          expect(this.nestedTest).to.equal('nested state test');
+          done();
+        },
+      });
+    });
+
+    it('mapGetters', (done) => {
+      new Vue({ // eslint-disable-line no-new
+        store,
+        data: {
+          title: 'internal',
+        },
+        computed: {
+          ...mapGetters(['computedName']),
+          ...mapGetters({
+            nameComputedTwice: 'computedName',
+          }),
+        },
+        created () {
+          expect(this.computedName).to.equal('test computed!');
+          expect(this.nameComputedTwice).to.equal('test computed!');
+          done();
+        },
+      });
+    });
+
+    it('mapActions', (done) => {
+      new Vue({ // eslint-disable-line no-new
+        store,
+        data: {
+          title: 'internal',
+        },
+        methods: {
+          ...mapActions(['getName']),
+          ...mapActions({
+            getNameRenamed: 'getName',
+          }),
+        },
+        created () {
+          expect(this.getName('123')).to.deep.equal(['test', '123']);
+          expect(this.getNameRenamed('123')).to.deep.equal(['test', '123']);
+          done();
+        },
+      });
+    });
+
+    it('flattenAndNamespace', () => {
+      let result = flattenAndNamespace({
+        nested: {
+          computed ({ state }, ...args) {
+            return [state.name, ...args];
+          },
+          getName ({ state }, ...args) {
+            return [state.name, ...args];
+          },
+        },
+        nested2: {
+          getName ({ state }, ...args) {
+            return [state.name, ...args];
+          },
+        },
+      });
+
+      expect(Object.keys(result).length).to.equal(3);
+      expect(Object.keys(result).sort()).to.deep.equal(['nested2:getName', 'nested:computed', 'nested:getName']);
+    });
+  });
+});

test/client/unit/specs/store/actions/guilds.js

@@ -1,17 +0,0 @@
-import { fetchAll as fetchAllGuilds } from 'client/store/actions/guilds';
-import axios from 'axios';
-import store from 'client/store';
-
-describe('guilds actions', () => {
-  it('fetchAll', async () => {
-    const guilds = [{_id: 1}];
-    sandbox
-      .stub(axios, 'get')
-      .withArgs('/api/v3/groups?type=publicGuilds')
-      .returns(Promise.resolve({data: {data: guilds}}));
-
-    await fetchAllGuilds(store);
-
-    expect(store.state.guilds).to.equal(guilds);
-  });
-});

test/client/unit/specs/store/actions/tasks.js

@@ -1,14 +1,54 @@
-import { fetchUserTasks } from 'client/store/actions/tasks';
 import axios from 'axios';
-import store from 'client/store';
+import generateStore from 'client/store';
 
 describe('tasks actions', () => {
-  it('fetchUserTasks', async () => {
-    const tasks = [{_id: 1}];
-    sandbox.stub(axios, 'get').withArgs('/api/v3/tasks/user').returns(Promise.resolve({data: {data: tasks}}));
+  let store;
 
-    await fetchUserTasks(store);
+  beforeEach(() => {
+    store = generateStore();
+  });
 
-    expect(store.state.tasks).to.equal(tasks);
+  describe('fetchUserTasks', () => {
+    it('fetches user tasks', async () => {
+      expect(store.state.tasks.loadingStatus).to.equal('NOT_LOADED');
+      const tasks = [{_id: 1}];
+      sandbox.stub(axios, 'get').withArgs('/api/v3/tasks/user').returns(Promise.resolve({data: {data: tasks}}));
+
+      await store.dispatch('tasks:fetchUserTasks');
+
+      expect(store.state.tasks.data).to.equal(tasks);
+      expect(store.state.tasks.loadingStatus).to.equal('LOADED');
+    });
+
+    it('does not reload tasks by default', async () => {
+      const originalTask = [{_id: 1}];
+      store.state.tasks = {
+        loadingStatus: 'LOADED',
+        data: originalTask,
+      };
+
+      const tasks = [{_id: 2}];
+      sandbox.stub(axios, 'get').withArgs('/api/v3/tasks/user').returns(Promise.resolve({data: {data: tasks}}));
+
+      await store.dispatch('tasks:fetchUserTasks');
+
+      expect(store.state.tasks.data).to.equal(originalTask);
+      expect(store.state.tasks.loadingStatus).to.equal('LOADED');
+    });
+
+    it('can reload tasks if forceLoad is true', async () => {
+      store.state.tasks = {
+        loadingStatus: 'LOADED',
+        data: [{_id: 1}],
+      };
+
+      const tasks = [{_id: 2}];
+      sandbox.stub(axios, 'get').withArgs('/api/v3/tasks/user').returns(Promise.resolve({data: {data: tasks}}));
+
+      await store.dispatch('tasks:fetchUserTasks', true);
+
+      expect(store.state.tasks.data).to.equal(tasks);
+      expect(store.state.tasks.loadingStatus).to.equal('LOADED');
+    });
   });
 });

test/client/unit/specs/store/actions/user.js

@@ -1,14 +1,54 @@
-import { fetch as fetchUser } from 'client/store/actions/user';
 import axios from 'axios';
-import store from 'client/store';
+import generateStore from 'client/store';
 
-describe('user actions', () => {
-  it('fetch', async () => {
-    const user = {_id: 1};
-    sandbox.stub(axios, 'get').withArgs('/api/v3/user').returns(Promise.resolve({data: {data: user}}));
+describe('tasks actions', () => {
+  let store;
 
-    await fetchUser(store);
+  beforeEach(() => {
+    store = generateStore();
+  });
 
-    expect(store.state.user).to.equal(user);
+  describe('fetch', () => {
+    it('loads the user', async () => {
+      expect(store.state.user.loadingStatus).to.equal('NOT_LOADED');
+      const user = {_id: 1};
+      sandbox.stub(axios, 'get').withArgs('/api/v3/user').returns(Promise.resolve({data: {data: user}}));
+
+      await store.dispatch('user:fetch');
+
+      expect(store.state.user.data).to.equal(user);
+      expect(store.state.user.loadingStatus).to.equal('LOADED');
+    });
+
+    it('does not reload user by default', async () => {
+      const originalUser = {_id: 1};
+      store.state.user = {
+        loadingStatus: 'LOADED',
+        data: originalUser,
+      };
+
+      const user = {_id: 2};
+      sandbox.stub(axios, 'get').withArgs('/api/v3/user').returns(Promise.resolve({data: {data: user}}));
+
+      await store.dispatch('user:fetch');
+
+      expect(store.state.user.data).to.equal(originalUser);
+      expect(store.state.user.loadingStatus).to.equal('LOADED');
+    });
+
+    it('can reload user if forceLoad is true', async () => {
+      store.state.user = {
+        loadingStatus: 'LOADED',
+        data: {_id: 1},
+      };
+
+      const user = {_id: 2};
+      sandbox.stub(axios, 'get').withArgs('/api/v3/user').returns(Promise.resolve({data: {data: user}}));
+
+      await store.dispatch('user:fetch', true);
+
+      expect(store.state.user.data).to.equal(user);
+      expect(store.state.user.loadingStatus).to.equal('LOADED');
+    });
   });
 });

test/client/unit/specs/store/getters/tasks/getTagsFor.js

@@ -0,0 +1,16 @@
+import generateStore from 'client/store';
+
+describe('getTagsFor getter', () => {
+  it('returns the tags for a task', () => {
+    const store = generateStore();
+    store.state.user.data = {
+      tags: [
+        {id: 1, name: 'tag 1'},
+        {id: 2, name: 'tag 2'},
+      ],
+    };
+
+    const task = {tags: [2]};
+    expect(store.getters['tasks:getTagsFor'](task)).to.deep.equal(['tag 2']);
+  });
+});

test/client/unit/specs/store/getters/user/userGems.js

@@ -5,7 +5,7 @@ describe('userGems getter', () => {
     expect(userGems({
       state: {
         user: {
-          balance: 4.5,
+          data: {balance: 4.5},
         },
       },
     })).to.equal(18);

test/client/unit/specs/store/store.js

@@ -1,168 +1,8 @@
-import Vue from 'vue';
-import storeInjector from 'inject-loader?-vue!client/store';
-import { mapState, mapGetters, mapActions } from 'client/store';
-import { flattenAndNamespace } from 'client/store/helpers/internals';
+import generateStore from 'client/store';
+import Store from 'client/libs/store';
 
-describe('Store', () => {
-  let injectedStore;
-
-  beforeEach(() => {
-    injectedStore = storeInjector({ // eslint-disable-line babel/new-cap
-      './state': {
-        name: 'test',
-      },
-      './getters': {
-        computedName ({ state }) {
-          return `${state.name} computed!`;
-        },
-        ...flattenAndNamespace({
-          nested: {
-            computedName ({ state }) {
-              return `${state.name} computed!`;
-            },
-          },
-        }),
-      },
-      './actions': {
-        getName ({ state }, ...args) {
-          return [state.name, ...args];
-        },
-        ...flattenAndNamespace({
-          nested: {
-            getName ({ state }, ...args) {
-              return [state.name, ...args];
-            },
-          },
-        }),
-      },
-    }).default;
-  });
-
-  it('injects itself in all component', (done) => {
-    new Vue({ // eslint-disable-line no-new
-      created () {
-        expect(this.$store).to.equal(injectedStore);
-        done();
-      },
-    });
-  });
-
-  it('can watch a function on the state', (done) => {
-    injectedStore.watch(state => state.name, (newName) => {
-      expect(newName).to.equal('test updated');
-      done();
-    });
-
-    injectedStore.state.name = 'test updated';
-  });
-
-  describe('getters', () => {
-    it('supports getters', () => {
-      expect(injectedStore.getters.computedName).to.equal('test computed!');
-      injectedStore.state.name = 'test updated';
-      expect(injectedStore.getters.computedName).to.equal('test updated computed!');
-    });
-
-    it('supports nested getters', () => {
-      expect(injectedStore.getters['nested:computedName']).to.equal('test computed!');
-      injectedStore.state.name = 'test updated';
-      expect(injectedStore.getters['nested:computedName']).to.equal('test updated computed!');
-    });
-  });
-
-  describe('actions', () => {
-    it('can dispatch an action', () => {
-      expect(injectedStore.dispatch('getName', 1, 2, 3)).to.deep.equal(['test', 1, 2, 3]);
-    });
-
-    it('can dispatch a nested action', () => {
-      expect(injectedStore.dispatch('nested:getName', 1, 2, 3)).to.deep.equal(['test', 1, 2, 3]);
-    });
-
-    it('throws an error is the action doesn\'t exists', () => {
-      expect(() => injectedStore.dispatched('wrong')).to.throw;
-    });
-  });
-
-  describe('helpers', () => {
-    it('mapState', (done) => {
-      new Vue({ // eslint-disable-line no-new
-        data: {
-          title: 'internal',
-        },
-        computed: {
-          ...mapState(['name']),
-          ...mapState({
-            nameComputed (state, getters) {
-              return `${this.title} ${getters.computedName} ${state.name}`;
-            },
-          }),
-        },
-        created () {
-          expect(this.name).to.equal('test');
-          expect(this.nameComputed).to.equal('internal test computed! test');
-          done();
-        },
-      });
-    });
-
-    it('mapGetters', (done) => {
-      new Vue({ // eslint-disable-line no-new
-        data: {
-          title: 'internal',
-        },
-        computed: {
-          ...mapGetters(['computedName']),
-          ...mapGetters({
-            nameComputedTwice: 'computedName',
-          }),
-        },
-        created () {
-          expect(this.computedName).to.equal('test computed!');
-          expect(this.nameComputedTwice).to.equal('test computed!');
-          done();
-        },
-      });
-    });
-
-    it('mapActions', (done) => {
-      new Vue({ // eslint-disable-line no-new
-        data: {
-          title: 'internal',
-        },
-        methods: {
-          ...mapActions(['getName']),
-          ...mapActions({
-            getNameRenamed: 'getName',
-          }),
-        },
-        created () {
-          expect(this.getName('123')).to.deep.equal(['test', '123']);
-          expect(this.getNameRenamed('123')).to.deep.equal(['test', '123']);
-          done();
-        },
-      });
-    });
-
-    it('flattenAndNamespace', () => {
-      let result = flattenAndNamespace({
-        nested: {
-          computed ({ state }, ...args) {
-            return [state.name, ...args];
-          },
-          getName ({ state }, ...args) {
-            return [state.name, ...args];
-          },
-        },
-        nested2: {
-          getName ({ state }, ...args) {
-            return [state.name, ...args];
-          },
-        },
-      });
-
-      expect(Object.keys(result).length).to.equal(3);
-      expect(Object.keys(result).sort()).to.deep.equal(['nested2:getName', 'nested:computed', 'nested:getName']);
-    });
+describe('Application store', () => {
+  it('is an instance of Store', () => {
+    expect(generateStore()).to.be.an.instanceof(Store);
   });
 });