feat: notification center (#1612)

Co-authored-by: Pranav <pranav@chatwoot.com>

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

@@ -0,0 +1,93 @@
+import axios from 'axios';
+import { actions } from '../../notifications/actions';
+import types from '../../../mutation-types';
+
+const commit = jest.fn();
+global.axios = axios;
+jest.mock('axios');
+
+describe('#actions', () => {
+  describe('#get', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: {
+          data: {
+            payload: [{ id: 1 }],
+            meta: { count: 3, current_page: 1, unread_count: 2 },
+          },
+        },
+      });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true }],
+        [types.CLEAR_NOTIFICATIONS],
+        [types.SET_NOTIFICATIONS, [{ id: 1 }]],
+        [
+          types.SET_NOTIFICATIONS_META,
+          { count: 3, current_page: 1, unread_count: 2 },
+        ],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#unReadCount', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({ data: 1 });
+      await actions.unReadCount({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: true }],
+        [types.SET_NOTIFICATIONS_UNREAD_COUNT, 1],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.unReadCount({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: true }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: false }],
+      ]);
+    });
+  });
+
+  describe('#read', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({});
+      await actions.read({ commit }, { unreadCount: 2, primaryActorId: 1 });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UNREAD_COUNT, 1],
+        [types.UPDATE_NOTIFICATION, 1],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.read({ commit })).rejects.toThrow(Error);
+    });
+  });
+
+  describe('#readAll', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: 1 });
+      await actions.readAll({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
+        [types.SET_NOTIFICATIONS_UNREAD_COUNT, 0],
+        [types.UPDATE_ALL_NOTIFICATIONS],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.readAll({ commit })).rejects.toThrow(Error);
+    });
+  });
+});

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

@@ -0,0 +1,46 @@
+import { getters } from '../../notifications/getters';
+
+describe('#getters', () => {
+  it('getNotifications', () => {
+    const state = {
+      records: {
+        1: { id: 1 },
+        2: { id: 2 },
+        3: { id: 3 },
+      },
+    };
+    expect(getters.getNotifications(state)).toEqual([
+      { id: 3 },
+      { id: 2 },
+      { id: 1 },
+    ]);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: true,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: true,
+    });
+  });
+
+  it('getNotification', () => {
+    const state = {
+      records: {
+        1: { id: 1 },
+      },
+    };
+    expect(getters.getNotification(state)(1)).toEqual({ id: 1 });
+    expect(getters.getNotification(state)(2)).toEqual({});
+  });
+
+  it('getMeta', () => {
+    const state = {
+      meta: { unreadCount: 1 },
+    };
+    expect(getters.getMeta(state)).toEqual({ unreadCount: 1 });
+  });
+});

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

@@ -0,0 +1,90 @@
+import types from '../../../mutation-types';
+import { mutations } from '../../notifications/mutations';
+
+describe('#mutations', () => {
+  describe('#SET_NOTIFICATIONS_UI_FLAG', () => {
+    it('set notification ui flag', () => {
+      const state = { uiFlags: { isFetching: true } };
+      mutations[types.SET_NOTIFICATIONS_UI_FLAG](state, { isFetching: false });
+      expect(state.uiFlags).toEqual({ isFetching: false });
+    });
+  });
+
+  describe('#CLEAR_NOTIFICATIONS', () => {
+    it('clear notifications', () => {
+      const state = { records: { 1: { id: 1 } } };
+      mutations[types.CLEAR_NOTIFICATIONS](state);
+      expect(state.records).toEqual({});
+    });
+  });
+
+  describe('#SET_NOTIFICATIONS_META', () => {
+    it('set notifications meta data', () => {
+      const state = { meta: {} };
+      mutations[types.SET_NOTIFICATIONS_META](state, {
+        count: 3,
+        current_page: 1,
+        unread_count: 2,
+      });
+      expect(state.meta).toEqual({
+        count: 3,
+        currentPage: 1,
+        unreadCount: 2,
+      });
+    });
+  });
+
+  describe('#SET_NOTIFICATIONS_UNREAD_COUNT', () => {
+    it('set notifications unread count', () => {
+      const state = { meta: { unreadCount: 4 } };
+      mutations[types.SET_NOTIFICATIONS_UNREAD_COUNT](state, 3);
+      expect(state.meta).toEqual({ unreadCount: 3 });
+    });
+  });
+
+  describe('#SET_NOTIFICATIONS', () => {
+    it('set notifications ', () => {
+      const state = { records: {} };
+      mutations[types.SET_NOTIFICATIONS](state, [
+        { id: 1 },
+        { id: 2 },
+        { id: 3 },
+        { id: 4 },
+      ]);
+      expect(state.records).toEqual({
+        1: { id: 1 },
+        2: { id: 2 },
+        3: { id: 3 },
+        4: { id: 4 },
+      });
+    });
+  });
+  describe('#UPDATE_NOTIFICATION', () => {
+    it('update notifications ', () => {
+      const state = {
+        records: {
+          1: { id: 1, primary_actor_id: 1 },
+        },
+      };
+      mutations[types.UPDATE_NOTIFICATION](state, 1);
+      expect(state.records).toEqual({
+        1: { id: 1, primary_actor_id: 1, read_at: true },
+      });
+    });
+  });
+  describe('#UPDATE_ALL_NOTIFICATIONS', () => {
+    it('update all notifications ', () => {
+      const state = {
+        records: {
+          1: { id: 1, primary_actor_id: 1 },
+          2: { id: 2, primary_actor_id: 2 },
+        },
+      };
+      mutations[types.UPDATE_ALL_NOTIFICATIONS](state);
+      expect(state.records).toEqual({
+        1: { id: 1, primary_actor_id: 1, read_at: true },
+        2: { id: 2, primary_actor_id: 2, read_at: true },
+      });
+    });
+  });
+});