Initial commit: Add logistics and order_detail message types

- Add Logistics component with progress tracking
- Add OrderDetail component for order information
- Support data-driven steps and actions
- Add blue color scale to widget SCSS
- Fix node overflow and progress bar rendering issues
- Add English translations for dashboard components

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

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

@@ -0,0 +1,316 @@
+import axios from 'axios';
+import { actions } from '../../notifications/actions';
+import types from '../../../mutation-types';
+const commit = vi.fn();
+global.axios = axios;
+vi.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('#index', () => {
+    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.index({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true }],
+        [types.SET_NOTIFICATIONS, [{ id: 1 }]],
+        [
+          types.SET_NOTIFICATIONS_META,
+          { count: 3, current_page: 1, unread_count: 2 },
+        ],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false }],
+        [types.SET_ALL_NOTIFICATIONS_LOADED],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.index({ 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 },
+        { id: 1, unreadCount: 2, primaryActorId: 1 }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
+        [types.SET_NOTIFICATIONS_UNREAD_COUNT, 1],
+        [types.READ_NOTIFICATION, { id: 1, read_at: expect.any(Date) }],
+        [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.read({ commit })).rejects.toThrow(Error);
+      await actions.read(
+        { commit },
+        { id: 1, unreadCount: 2, primaryActorId: 1 }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
+
+  describe('#unread', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({});
+      await actions.unread({ commit }, { id: 1 });
+      expect(commit.mock.calls).toEqual([
+        ['SET_NOTIFICATIONS_UI_FLAG', { isUpdating: true }],
+        ['READ_NOTIFICATION', { id: 1, read_at: null }],
+        ['SET_NOTIFICATIONS_UI_FLAG', { isUpdating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.unread({ commit })).rejects.toThrow(Error);
+      await actions.unread({ commit }, { id: 1 });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
+
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({});
+      await actions.delete(
+        { commit },
+        {
+          notification: { id: 1 },
+          count: 2,
+          unreadCount: 1,
+        }
+      );
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true }],
+        [types.SET_NOTIFICATIONS_UNREAD_COUNT, 0],
+        [
+          types.DELETE_NOTIFICATION,
+          { notification: { id: 1 }, count: 2, unreadCount: 1 },
+        ],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.delete({ commit })).rejects.toThrow(Error);
+      await actions.delete(
+        { commit },
+        {
+          notification: { id: 1 },
+          count: 2,
+          unreadCount: 1,
+        }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+  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);
+    });
+  });
+  describe('#addNotification', () => {
+    it('sends correct actions if API is success', async () => {
+      await actions.addNotification({ commit }, { data: 1 });
+      expect(commit.mock.calls).toEqual([
+        [types.ADD_NOTIFICATION, { data: 1 }],
+      ]);
+    });
+  });
+
+  describe('#deleteNotification', () => {
+    it('sends correct actions', async () => {
+      await actions.deleteNotification({ commit }, { data: 1 });
+      expect(commit.mock.calls).toEqual([
+        [types.DELETE_NOTIFICATION, { data: 1 }],
+      ]);
+    });
+  });
+
+  describe('clear', () => {
+    it('sends correct actions', async () => {
+      await actions.clear({ commit });
+      expect(commit.mock.calls).toEqual([[types.CLEAR_NOTIFICATIONS]]);
+    });
+  });
+
+  describe('deleteAllRead', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({});
+      await actions.deleteAllRead({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true }],
+        [types.DELETE_READ_NOTIFICATIONS],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.deleteAllRead({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true }],
+        [types.DELETE_READ_NOTIFICATIONS],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+
+  describe('deleteAll', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({});
+      await actions.deleteAll({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true }],
+        [types.DELETE_ALL_NOTIFICATIONS],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.deleteAll({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true }],
+        [types.DELETE_ALL_NOTIFICATIONS],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+
+  describe('snooze', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({
+        data: { snoozed_until: '20 Jan, 5.04pm' },
+      });
+      await actions.snooze({ commit }, { id: 1, snoozedUntil: 1703057715 });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
+        [types.SNOOZE_NOTIFICATION, { id: 1, snoozed_until: '20 Jan, 5.04pm' }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.snooze({ commit }, { id: 1, snoozedUntil: 1703057715 });
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
+
+  describe('setNotificationFilters', () => {
+    it('set notification filters', async () => {
+      const filters = {
+        page: 1,
+        status: 'read',
+        type: 'all',
+        sortOrder: 'desc',
+      };
+      await actions.setNotificationFilters({ commit }, filters);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATION_FILTERS, filters],
+      ]);
+    });
+  });
+
+  describe('updateNotificationFilters', () => {
+    it('update notification filters', async () => {
+      const filters = {
+        page: 1,
+        status: 'unread',
+        type: 'all',
+        sortOrder: 'desc',
+      };
+      await actions.updateNotificationFilters({ commit }, filters);
+      expect(commit.mock.calls).toEqual([
+        [types.UPDATE_NOTIFICATION_FILTERS, filters],
+      ]);
+    });
+  });
+});

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

@@ -0,0 +1,121 @@
+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('getFilteredNotifications', () => {
+    const state = {
+      records: {
+        1: { id: 1, read_at: '2024-02-07T11:42:39.988Z', snoozed_until: null },
+        2: { id: 2, read_at: null, snoozed_until: null },
+        3: {
+          id: 3,
+          read_at: '2024-02-07T11:42:39.988Z',
+          snoozed_until: '2024-02-07T11:42:39.988Z',
+        },
+      },
+    };
+    const filters = {
+      type: 'read',
+      status: 'snoozed',
+      sortOrder: 'desc',
+    };
+    expect(getters.getFilteredNotifications(state)(filters)).toEqual([
+      { id: 1, read_at: '2024-02-07T11:42:39.988Z', snoozed_until: null },
+      { id: 2, read_at: null, snoozed_until: null },
+      {
+        id: 3,
+        read_at: '2024-02-07T11:42:39.988Z',
+        snoozed_until: '2024-02-07T11:42:39.988Z',
+      },
+    ]);
+  });
+
+  it('getNotificationById', () => {
+    const state = {
+      records: {
+        1: { id: 1 },
+      },
+    };
+    expect(getters.getNotificationById(state)(1)).toEqual({ id: 1 });
+    expect(getters.getNotificationById(state)(2)).toEqual({});
+  });
+
+  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 });
+  });
+
+  it('getNotificationFilters', () => {
+    const state = {
+      notificationFilters: {
+        page: 1,
+        status: 'unread',
+        type: 'all',
+        sortOrder: 'desc',
+      },
+    };
+    expect(getters.getNotificationFilters(state)).toEqual(
+      state.notificationFilters
+    );
+  });
+
+  describe('getHasUnreadNotifications', () => {
+    it('should return true when there are unread notifications', () => {
+      const state = {
+        meta: { unreadCount: 5 },
+      };
+      expect(getters.getHasUnreadNotifications(state)).toBe(true);
+    });
+
+    it('should return false when there are no unread notifications', () => {
+      const state = {
+        meta: { unreadCount: 0 },
+      };
+      expect(getters.getHasUnreadNotifications(state)).toBe(false);
+    });
+
+    it('should return false when meta is empty', () => {
+      const state = {
+        meta: {},
+      };
+      expect(getters.getHasUnreadNotifications(state)).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,74 @@
+import { sortComparator } from '../../notifications/helpers';
+
+const notifications = [
+  {
+    id: 1,
+    read_at: '2024-02-07T11:42:39.988Z',
+    snoozed_until: null,
+    created_at: 1707328400,
+  },
+  {
+    id: 2,
+    read_at: null,
+    snoozed_until: null,
+    created_at: 1707233688,
+  },
+  {
+    id: 3,
+    read_at: '2024-01-07T11:42:39.988Z',
+    snoozed_until: null,
+    created_at: 1707233672,
+  },
+  {
+    id: 4,
+    read_at: null,
+    snoozed_until: '2024-02-08T03:30:00.000Z',
+    created_at: 1707233667,
+  },
+  {
+    id: 5,
+    read_at: '2024-02-07T10:42:39.988Z',
+    snoozed_until: '2024-02-08T03:30:00.000Z',
+    created_at: 1707233662,
+  },
+  {
+    id: 6,
+    read_at: null,
+    snoozed_until: '2024-02-08T03:30:00.000Z',
+    created_at: 1707233561,
+  },
+];
+
+describe('#sortComparator', () => {
+  it('returns the notifications sorted by newest', () => {
+    const sortOrder = 'newest';
+    const sortedNotifications = [...notifications].sort((a, b) =>
+      sortComparator(a, b, sortOrder)
+    );
+    const expectedOrder = [
+      notifications[0],
+      notifications[1],
+      notifications[2],
+      notifications[3],
+      notifications[4],
+      notifications[5],
+    ].sort((a, b) => b.created_at - a.created_at);
+    expect(sortedNotifications).toEqual(expectedOrder);
+  });
+
+  it('returns the notifications sorted by oldest', () => {
+    const sortOrder = 'oldest';
+    const sortedNotifications = [...notifications].sort((a, b) =>
+      sortComparator(a, b, sortOrder)
+    );
+    const expectedOrder = [
+      notifications[0],
+      notifications[1],
+      notifications[2],
+      notifications[3],
+      notifications[4],
+      notifications[5],
+    ].sort((a, b) => a.created_at - b.created_at);
+    expect(sortedNotifications).toEqual(expectedOrder);
+  });
+});

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

@@ -0,0 +1,186 @@
+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 } },
+        uiFlags: { isAllNotificationsLoaded: true },
+      };
+      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 });
+    });
+
+    it('set notifications unread count to 0 if invalid', () => {
+      const state = { meta: { unreadCount: 4 } };
+      mutations[types.SET_NOTIFICATIONS_UNREAD_COUNT](state, -1);
+      expect(state.meta).toEqual({ unreadCount: 0 });
+    });
+  });
+
+  describe('#SET_NOTIFICATIONS', () => {
+    it('set notifications', () => {
+      const state = { records: {} };
+      mutations[types.SET_NOTIFICATIONS](state, [
+        { id: 1, primary_actor_id: 1 },
+        { id: 2, primary_actor_id: 2 },
+        { id: 3, primary_actor_id: 3 },
+        { id: 4, primary_actor_id: 4 },
+      ]);
+      expect(state.records).toEqual({
+        1: { id: 1, primary_actor_id: 1 },
+        2: { id: 2, primary_actor_id: 2 },
+        3: { id: 3, primary_actor_id: 3 },
+        4: { id: 4, primary_actor_id: 4 },
+      });
+    });
+  });
+  describe('#UPDATE_NOTIFICATION', () => {
+    it('update notifications ', () => {
+      const state = {
+        records: {
+          1: { id: 1, primary_actor_id: 1 },
+        },
+      };
+      mutations[types.READ_NOTIFICATION](state, {
+        id: 1,
+        read_at: true,
+      });
+      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 },
+      });
+    });
+  });
+
+  describe('#ADD_NOTIFICATION', () => {
+    it('add notification', () => {
+      const state = {
+        meta: { unreadCount: 4, count: 231 },
+        records: {
+          1: { id: 1, primary_actor_id: 1 },
+          2: { id: 2, primary_actor_id: 2 },
+        },
+      };
+      const data = {
+        notification: { id: 3, primary_actor_id: 3 },
+        unread_count: 5,
+        count: 232,
+      };
+      mutations[types.ADD_NOTIFICATION](state, data);
+      expect(state.records).toEqual({
+        1: { id: 1, primary_actor_id: 1 },
+        2: { id: 2, primary_actor_id: 2 },
+        3: { id: 3, primary_actor_id: 3 },
+      });
+      expect(state.meta.unreadCount).toEqual(5);
+      expect(state.meta.count).toEqual(232);
+    });
+  });
+
+  describe('#DELETE_NOTIFICATION', () => {
+    it('delete notification', () => {
+      const state = {
+        meta: { unreadCount: 4, count: 231 },
+        records: {
+          1: { id: 1, primary_actor_id: 1 },
+          2: { id: 2, primary_actor_id: 2 },
+        },
+      };
+      const data = {
+        notification: { id: 1, primary_actor_id: 1 },
+        unread_count: 5,
+        count: 232,
+      };
+      mutations[types.DELETE_NOTIFICATION](state, data);
+      expect(state.records).toEqual({
+        2: { id: 2, primary_actor_id: 2 },
+      });
+      expect(state.meta.unreadCount).toEqual(5);
+      expect(state.meta.count).toEqual(232);
+    });
+  });
+
+  describe('#SET_ALL_NOTIFICATIONS_LOADED', () => {
+    it('set all notifications loaded', () => {
+      const state = { uiFlags: { isAllNotificationsLoaded: false } };
+      mutations[types.SET_ALL_NOTIFICATIONS_LOADED](state);
+      expect(state.uiFlags).toEqual({ isAllNotificationsLoaded: true });
+    });
+  });
+
+  describe('#DELETE_READ_NOTIFICATIONS', () => {
+    it('delete read notifications', () => {
+      const state = {
+        records: {
+          1: { id: 1, primary_actor_id: 1, read_at: true },
+          2: { id: 2, primary_actor_id: 2 },
+        },
+      };
+      mutations[types.DELETE_READ_NOTIFICATIONS](state);
+      expect(state.records).toEqual({
+        2: { id: 2, primary_actor_id: 2 },
+      });
+    });
+  });
+
+  describe('#DELETE_ALL_NOTIFICATIONS', () => {
+    it('delete all notifications', () => {
+      const state = {
+        records: {
+          1: { id: 1, primary_actor_id: 1, read_at: true },
+          2: { id: 2, primary_actor_id: 2 },
+        },
+      };
+      mutations[types.DELETE_ALL_NOTIFICATIONS](state);
+      expect(state.records).toEqual({});
+    });
+  });
+});