feat: Portals store integration (#5185)

app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js

@@ -4,6 +4,7 @@ import { types } from '../mutations';
 import { apiResponse } from './fixtures';
 
 const commit = jest.fn();
+const dispatch = jest.fn();
 global.axios = axios;
 jest.mock('axios');
 
@@ -11,11 +12,20 @@ describe('#actions', () => {
   describe('#index', () => {
     it('sends correct actions if API is success', async () => {
       axios.get.mockResolvedValue({ data: apiResponse });
-      await actions.index({ commit });
+      await actions.index({
+        commit,
+        dispatch,
+        state: {
+          selectedPortalId: 4,
+        },
+      });
+      expect(dispatch.mock.calls).toMatchObject([['setPortalId', 1]]);
       expect(commit.mock.calls).toEqual([
         [types.SET_UI_FLAG, { isFetching: true }],
-        [types.ADD_MANY_PORTALS_ENTRY, apiResponse],
+        [types.CLEAR_PORTALS],
+        [types.ADD_MANY_PORTALS_ENTRY, apiResponse.payload],
         [types.ADD_MANY_PORTALS_IDS, [1, 2]],
+        [types.SET_PORTALS_META, { current_page: 1, portals_count: 1 }],
         [types.SET_UI_FLAG, { isFetching: false }],
       ]);
     });
@@ -31,7 +41,7 @@ describe('#actions', () => {
 
   describe('#create', () => {
     it('sends correct actions if API is success', async () => {
-      axios.post.mockResolvedValue({ data: apiResponse[1] });
+      axios.post.mockResolvedValue({ data: apiResponse.payload[1] });
       await actions.create(
         { commit },
         {
@@ -42,7 +52,7 @@ describe('#actions', () => {
       );
       expect(commit.mock.calls).toEqual([
         [types.SET_UI_FLAG, { isCreating: true }],
-        [types.ADD_PORTAL_ENTRY, apiResponse[1]],
+        [types.ADD_PORTAL_ENTRY, apiResponse.payload[1]],
         [types.ADD_PORTAL_ID, 2],
         [types.SET_UI_FLAG, { isCreating: false }],
       ]);
@@ -59,14 +69,14 @@ describe('#actions', () => {
 
   describe('#update', () => {
     it('sends correct actions if API is success', async () => {
-      axios.patch.mockResolvedValue({ data: apiResponse[1] });
-      await actions.update({ commit }, apiResponse[1]);
+      axios.patch.mockResolvedValue({ data: apiResponse.payload[1] });
+      await actions.update({ commit }, apiResponse.payload[1]);
       expect(commit.mock.calls).toEqual([
         [
           types.SET_HELP_PORTAL_UI_FLAG,
           { uiFlags: { isUpdating: true }, portalId: 2 },
         ],
-        [types.UPDATE_PORTAL_ENTRY, apiResponse[1]],
+        [types.UPDATE_PORTAL_ENTRY, apiResponse.payload[1]],
         [
           types.SET_HELP_PORTAL_UI_FLAG,
           { uiFlags: { isUpdating: false }, portalId: 2 },
@@ -75,9 +85,9 @@ describe('#actions', () => {
     });
     it('sends correct actions if API is error', async () => {
       axios.patch.mockRejectedValue({ message: 'Incorrect header' });
-      await expect(actions.update({ commit }, apiResponse[1])).rejects.toThrow(
-        Error
-      );
+      await expect(
+        actions.update({ commit }, apiResponse.payload[1])
+      ).rejects.toThrow(Error);
       expect(commit.mock.calls).toEqual([
         [
           types.SET_HELP_PORTAL_UI_FLAG,
@@ -123,4 +133,11 @@ describe('#actions', () => {
       ]);
     });
   });
+  describe('#setPortalId', () => {
+    it('sends correct actions', async () => {
+      axios.delete.mockResolvedValue({});
+      await actions.setPortalId({ commit }, 1);
+      expect(commit.mock.calls).toEqual([[types.SET_SELECTED_PORTAL_ID, 1]]);
+    });
+  });
 });

app/javascript/dashboard/store/modules/helpCenterPortals/specs/fixtures.js

@@ -1,4 +1,8 @@
 export default {
+  meta: {
+    count: 0,
+    currentPage: 1,
+  },
   portals: {
     byId: {
       1: {
@@ -36,6 +40,7 @@ export default {
         1: { isFetching: false, isUpdating: true, isDeleting: false },
       },
     },
+    selectedPortalId: 1,
   },
   uiFlags: {
     allFetched: false,
@@ -43,33 +48,39 @@ export default {
   },
 };
 
-export const apiResponse = [
-  {
-    id: 1,
-    color: 'red',
-    custom_domain: 'domain_for_help',
-    header_text: 'Domain Header',
-    homepage_link: 'help-center',
-    name: 'help name',
-    page_title: 'page title',
-    slug: 'domain',
-    archived: false,
-    config: {
-      allowed_locales: ['en'],
+export const apiResponse = {
+  payload: [
+    {
+      id: 1,
+      color: 'red',
+      custom_domain: 'domain_for_help',
+      header_text: 'Domain Header',
+      homepage_link: 'help-center',
+      name: 'help name',
+      page_title: 'page title',
+      slug: 'domain',
+      archived: false,
+      config: {
+        allowed_locales: ['en'],
+      },
     },
-  },
-  {
-    id: 2,
-    color: 'green',
-    custom_domain: 'campaign_for_help',
-    header_text: 'Campaign Header',
-    homepage_link: 'help-center',
-    name: 'help name',
-    page_title: 'campaign title',
-    slug: 'campaign',
-    archived: false,
-    config: {
-      allowed_locales: ['en'],
+    {
+      id: 2,
+      color: 'green',
+      custom_domain: 'campaign_for_help',
+      header_text: 'Campaign Header',
+      homepage_link: 'help-center',
+      name: 'help name',
+      page_title: 'campaign title',
+      slug: 'campaign',
+      archived: false,
+      config: {
+        allowed_locales: ['en'],
+      },
     },
+  ],
+  meta: {
+    current_page: 1,
+    portals_count: 1,
   },
-];
+};

app/javascript/dashboard/store/modules/helpCenterPortals/specs/getters.spec.js

@@ -42,4 +42,9 @@ describe('#getters', () => {
     const state = portal;
     expect(getters.count(state)).toEqual(2);
   });
+
+  it('getMeta', () => {
+    const state = portal;
+    expect(getters.getMeta(state)).toEqual({ count: 0, currentPage: 1 });
+  });
 });

app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js

@@ -92,4 +92,33 @@ describe('#mutations', () => {
       });
     });
   });
+
+  describe('#CLEAR_PORTALS', () => {
+    it('clears portals', () => {
+      mutations[types.CLEAR_PORTALS](state);
+      expect(state.portals.allIds).toEqual([]);
+      expect(state.portals.byId).toEqual({});
+      expect(state.portals.uiFlags).toEqual({});
+    });
+  });
+
+  describe('#SET_PORTALS_META', () => {
+    it('add meta to state', () => {
+      mutations[types.SET_PORTALS_META](state, {
+        portals_count: 10,
+        current_page: 1,
+      });
+      expect(state.meta).toEqual({
+        count: 10,
+        currentPage: 1,
+      });
+    });
+  });
+
+  describe('#SET_SELECTED_PORTAL_ID', () => {
+    it('set selected portal id', () => {
+      mutations[types.SET_SELECTED_PORTAL_ID](state, 4);
+      expect(state.portals.selectedPortalId).toEqual(4);
+    });
+  });
 });