Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js

@@ -0,0 +1,183 @@
+import articlesAPI from 'dashboard/api/helpCenter/articles';
+import { uploadExternalImage, uploadFile } from 'dashboard/helper/uploadHelper';
+import { throwErrorMessage } from 'dashboard/store/utils/api';
+import camelcaseKeys from 'camelcase-keys';
+
+import types from '../../mutation-types';
+export const actions = {
+  index: async (
+    { commit },
+    { pageNumber, portalSlug, locale, status, authorId, categorySlug }
+  ) => {
+    try {
+      commit(types.SET_UI_FLAG, { isFetching: true });
+      const { data } = await articlesAPI.getArticles({
+        pageNumber,
+        portalSlug,
+        locale,
+        status,
+        authorId,
+        categorySlug,
+      });
+      const payload = camelcaseKeys(data.payload);
+      const meta = camelcaseKeys(data.meta);
+      const articleIds = payload.map(article => article.id);
+      commit(types.CLEAR_ARTICLES);
+      commit(types.ADD_MANY_ARTICLES, payload);
+      commit(types.SET_ARTICLES_META, meta);
+      commit(types.ADD_MANY_ARTICLES_ID, articleIds);
+      return articleIds;
+    } catch (error) {
+      return throwErrorMessage(error);
+    } finally {
+      commit(types.SET_UI_FLAG, { isFetching: false });
+    }
+  },
+
+  create: async ({ commit, dispatch }, { portalSlug, ...articleObj }) => {
+    commit(types.SET_UI_FLAG, { isCreating: true });
+    try {
+      const { data } = await articlesAPI.createArticle({
+        portalSlug,
+        articleObj,
+      });
+      const payload = camelcaseKeys(data.payload);
+      const { id: articleId } = payload;
+      commit(types.ADD_ARTICLE, payload);
+      commit(types.ADD_ARTICLE_ID, articleId);
+      commit(types.ADD_ARTICLE_FLAG, articleId);
+      dispatch('portals/updatePortal', portalSlug, { root: true });
+      return articleId;
+    } catch (error) {
+      return throwErrorMessage(error);
+    } finally {
+      commit(types.SET_UI_FLAG, { isCreating: false });
+    }
+  },
+
+  show: async ({ commit }, { id, portalSlug }) => {
+    commit(types.SET_UI_FLAG, { isFetching: true });
+    try {
+      const { data } = await articlesAPI.getArticle({ id, portalSlug });
+      const payload = camelcaseKeys(data.payload);
+      const { id: articleId } = payload;
+      commit(types.ADD_ARTICLE, payload);
+      commit(types.ADD_ARTICLE_ID, articleId);
+      commit(types.SET_UI_FLAG, { isFetching: false });
+    } catch (error) {
+      commit(types.SET_UI_FLAG, { isFetching: false });
+    }
+  },
+
+  updateAsync: async ({ commit }, { portalSlug, articleId, ...articleObj }) => {
+    commit(types.UPDATE_ARTICLE_FLAG, {
+      uiFlags: { isUpdating: true },
+      articleId,
+    });
+
+    try {
+      await articlesAPI.updateArticle({ portalSlug, articleId, articleObj });
+      return articleId;
+    } catch (error) {
+      return throwErrorMessage(error);
+    } finally {
+      commit(types.UPDATE_ARTICLE_FLAG, {
+        uiFlags: { isUpdating: false },
+        articleId,
+      });
+    }
+  },
+
+  update: async ({ commit }, { portalSlug, articleId, ...articleObj }) => {
+    commit(types.UPDATE_ARTICLE_FLAG, {
+      uiFlags: {
+        isUpdating: true,
+      },
+      articleId,
+    });
+
+    try {
+      const { data } = await articlesAPI.updateArticle({
+        portalSlug,
+        articleId,
+        articleObj,
+      });
+      const payload = camelcaseKeys(data.payload);
+      commit(types.UPDATE_ARTICLE, payload);
+
+      return articleId;
+    } catch (error) {
+      return throwErrorMessage(error);
+    } finally {
+      commit(types.UPDATE_ARTICLE_FLAG, {
+        uiFlags: {
+          isUpdating: false,
+        },
+        articleId,
+      });
+    }
+  },
+
+  updateArticleMeta: async ({ commit }, { portalSlug, locale }) => {
+    try {
+      const { data } = await articlesAPI.getArticles({
+        pageNumber: 1,
+        portalSlug,
+        locale,
+      });
+      const meta = camelcaseKeys(data.meta);
+      const { currentPage, ...metaWithoutCurrentPage } = meta;
+      commit(types.SET_ARTICLES_META, metaWithoutCurrentPage);
+    } catch (error) {
+      throwErrorMessage(error);
+    }
+  },
+
+  delete: async ({ commit }, { portalSlug, articleId }) => {
+    commit(types.UPDATE_ARTICLE_FLAG, {
+      uiFlags: {
+        isDeleting: true,
+      },
+      articleId,
+    });
+    try {
+      await articlesAPI.deleteArticle({ portalSlug, articleId });
+      commit(types.REMOVE_ARTICLE, articleId);
+      commit(types.REMOVE_ARTICLE_ID, articleId);
+      return articleId;
+    } catch (error) {
+      return throwErrorMessage(error);
+    } finally {
+      commit(types.UPDATE_ARTICLE_FLAG, {
+        uiFlags: {
+          isDeleting: false,
+        },
+        articleId,
+      });
+    }
+  },
+
+  attachImage: async (_, { file }) => {
+    const { fileUrl } = await uploadFile(file);
+    return fileUrl;
+  },
+
+  uploadExternalImage: async (_, { url }) => {
+    const { fileUrl } = await uploadExternalImage(url);
+    return fileUrl;
+  },
+
+  reorder: async (_, { portalSlug, categorySlug, reorderedGroup }) => {
+    try {
+      await articlesAPI.reorderArticles({
+        portalSlug,
+        reorderedGroup,
+        categorySlug,
+      });
+    } catch (error) {
+      throwErrorMessage(error);
+    }
+
+    return '';
+  },
+};

research/chatwoot/app/javascript/dashboard/store/modules/helpCenterArticles/getters.js

@@ -0,0 +1,36 @@
+export const getters = {
+  uiFlags: state => helpCenterId => {
+    const uiFlags = state.articles.uiFlags.byId[helpCenterId];
+    if (uiFlags) return uiFlags;
+    return { isFetching: false, isUpdating: false, isDeleting: false };
+  },
+  isFetching: state => state.uiFlags.isFetching,
+  articleById:
+    (...getterArguments) =>
+    articleId => {
+      const [state] = getterArguments;
+      const article = state.articles.byId[articleId];
+      if (!article) return undefined;
+      return article;
+    },
+  allArticles: (...getterArguments) => {
+    const [state, _getters] = getterArguments;
+    const articles = state.articles.allIds
+      .map(id => {
+        return _getters.articleById(id);
+      })
+      .filter(article => article !== undefined);
+    return articles;
+  },
+  articleStatus:
+    (...getterArguments) =>
+    articleId => {
+      const [state] = getterArguments;
+      const article = state.articles.byId[articleId];
+      if (!article) return undefined;
+      return article.status;
+    },
+  getMeta: state => {
+    return state.meta;
+  },
+};

research/chatwoot/app/javascript/dashboard/store/modules/helpCenterArticles/index.js

@@ -0,0 +1,34 @@
+import { getters } from './getters';
+import { actions } from './actions';
+import { mutations } from './mutations';
+
+export const defaultHelpCenterFlags = {
+  isFetching: false,
+  isUpdating: false,
+  isDeleting: false,
+};
+const state = {
+  meta: {
+    count: 0,
+    currentPage: 1,
+  },
+  articles: {
+    byId: {},
+    allIds: [],
+    uiFlags: {
+      byId: {},
+    },
+  },
+  uiFlags: {
+    allFetched: false,
+    isFetching: false,
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

research/chatwoot/app/javascript/dashboard/store/modules/helpCenterArticles/mutations.js

@@ -0,0 +1,90 @@
+import types from '../../mutation-types';
+
+export const mutations = {
+  [types.SET_UI_FLAG](_state, uiFlags) {
+    _state.uiFlags = {
+      ..._state.uiFlags,
+      ...uiFlags,
+    };
+  },
+
+  [types.ADD_ARTICLE]: ($state, article) => {
+    if (!article.id) return;
+
+    $state.articles.byId[article.id] = article;
+  },
+  [types.CLEAR_ARTICLES]: $state => {
+    $state.articles.allIds = [];
+    $state.articles.byId = {};
+    $state.articles.uiFlags.byId = {};
+  },
+  [types.ADD_MANY_ARTICLES]($state, articles) {
+    const allArticles = { ...$state.articles.byId };
+    articles.forEach(article => {
+      allArticles[article.id] = article;
+    });
+
+    $state.articles.byId = allArticles;
+  },
+  [types.ADD_MANY_ARTICLES_ID]($state, articleIds) {
+    $state.articles.allIds.push(...articleIds);
+  },
+
+  [types.SET_ARTICLES_META]: ($state, meta) => {
+    $state.meta = {
+      ...$state.meta,
+      ...meta,
+    };
+  },
+
+  [types.ADD_ARTICLE_ID]: ($state, articleId) => {
+    if ($state.articles.allIds.includes(articleId)) return;
+    $state.articles.allIds.push(articleId);
+  },
+  [types.UPDATE_ARTICLE_FLAG]: ($state, { articleId, uiFlags }) => {
+    const flags = $state.articles.uiFlags.byId[articleId] || {};
+
+    $state.articles.uiFlags.byId[articleId] = {
+      ...{
+        isFetching: false,
+        isUpdating: false,
+        isDeleting: false,
+      },
+      ...flags,
+      ...uiFlags,
+    };
+  },
+  [types.ADD_ARTICLE_FLAG]: ($state, { articleId, uiFlags }) => {
+    $state.articles.uiFlags.byId[articleId] = {
+      ...{
+        isFetching: false,
+        isUpdating: false,
+        isDeleting: false,
+      },
+      ...uiFlags,
+    };
+  },
+  [types.UPDATE_ARTICLE]: ($state, updatedArticle) => {
+    const articleId = updatedArticle.id;
+    if ($state.articles.byId[articleId]) {
+      // Preserve the original position
+      const originalPosition = $state.articles.byId[articleId].position;
+
+      // Update the article, keeping the original position
+      // This is not moved out of the original position when we update the article
+      $state.articles.byId[articleId] = {
+        ...updatedArticle,
+        position: originalPosition,
+      };
+    }
+  },
+  [types.REMOVE_ARTICLE]($state, articleId) {
+    const { [articleId]: toBeRemoved, ...newById } = $state.articles.byId;
+    $state.articles.byId = newById;
+  },
+  [types.REMOVE_ARTICLE_ID]($state, articleId) {
+    $state.articles.allIds = $state.articles.allIds.filter(
+      id => id !== articleId
+    );
+  },
+};

research/chatwoot/app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js

@@ -0,0 +1,282 @@
+import axios from 'axios';
+import { uploadExternalImage, uploadFile } from 'dashboard/helper/uploadHelper';
+import * as types from '../../../mutation-types';
+import { actions } from '../actions';
+
+vi.mock('dashboard/helper/uploadHelper');
+
+const articleList = [
+  {
+    id: 1,
+    category_id: 1,
+    title: 'Documents are required to complete KYC',
+  },
+];
+
+const camelCasedArticle = {
+  id: 1,
+  categoryId: 1,
+  title: 'Documents are required to complete KYC',
+};
+
+const commit = vi.fn();
+const dispatch = vi.fn();
+global.axios = axios;
+vi.mock('axios');
+
+describe('#actions', () => {
+  describe('#index', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: {
+          payload: articleList,
+          meta: {
+            current_page: '1',
+            articles_count: 5,
+          },
+        },
+      });
+      await actions.index(
+        { commit },
+        { pageNumber: 1, portalSlug: 'test', locale: 'en' }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_UI_FLAG, { isFetching: true }],
+        [types.default.CLEAR_ARTICLES],
+        [
+          types.default.ADD_MANY_ARTICLES,
+          [
+            {
+              id: 1,
+              categoryId: 1,
+              title: 'Documents are required to complete KYC',
+            },
+          ],
+        ],
+        [
+          types.default.SET_ARTICLES_META,
+          { currentPage: '1', articlesCount: 5 },
+        ],
+        [types.default.ADD_MANY_ARTICLES_ID, [1]],
+        [types.default.SET_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.index(
+          { commit },
+          { pageNumber: 1, portalSlug: 'test', locale: 'en' }
+        )
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_UI_FLAG, { isFetching: true }],
+        [types.default.SET_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#create', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: { payload: camelCasedArticle } });
+      await actions.create({ commit, dispatch }, camelCasedArticle);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_UI_FLAG, { isCreating: true }],
+        [types.default.ADD_ARTICLE, camelCasedArticle],
+        [types.default.ADD_ARTICLE_ID, 1],
+        [types.default.ADD_ARTICLE_FLAG, 1],
+        [types.default.SET_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.create({ commit }, articleList[0])).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_UI_FLAG, { isCreating: true }],
+        [types.default.SET_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
+  describe('#update', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.patch.mockResolvedValue({ data: { payload: camelCasedArticle } });
+      await actions.update(
+        { commit },
+        {
+          portalSlug: 'room-rental',
+          articleId: 1,
+          title: 'Documents are required to complete KYC',
+        }
+      );
+      expect(commit.mock.calls).toEqual([
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isUpdating: true }, articleId: 1 },
+        ],
+        [types.default.UPDATE_ARTICLE, camelCasedArticle],
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isUpdating: false }, articleId: 1 },
+        ],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.update(
+          { commit },
+          {
+            portalSlug: 'room-rental',
+            articleId: 1,
+            title: 'Documents are required to complete KYC',
+          }
+        )
+      ).rejects.toThrow(Error);
+
+      expect(commit.mock.calls).toEqual([
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isUpdating: true }, articleId: 1 },
+        ],
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isUpdating: false }, articleId: 1 },
+        ],
+      ]);
+    });
+  });
+
+  describe('#updateArticleMeta', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: {
+          payload: articleList,
+          meta: {
+            all_articles_count: 56,
+            archived_articles_count: 7,
+            articles_count: 56,
+            current_page: '1', // This is not needed, it cause pagination issues.
+            draft_articles_count: 24,
+            mine_articles_count: 44,
+            published_count: 25,
+          },
+        },
+      });
+      await actions.updateArticleMeta(
+        { commit },
+        { pageNumber: 1, portalSlug: 'test', locale: 'en' }
+      );
+      expect(commit.mock.calls).toEqual([
+        [
+          types.default.SET_ARTICLES_META,
+          {
+            allArticlesCount: 56,
+            archivedArticlesCount: 7,
+            articlesCount: 56,
+            draftArticlesCount: 24,
+            mineArticlesCount: 44,
+            publishedCount: 25,
+          },
+        ],
+      ]);
+    });
+  });
+
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({ data: articleList[0] });
+      await actions.delete(
+        { commit },
+        { portalSlug: 'test', articleId: articleList[0].id }
+      );
+
+      expect(commit.mock.calls).toEqual([
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isDeleting: true }, articleId: 1 },
+        ],
+        [types.default.REMOVE_ARTICLE, articleList[0].id],
+        [types.default.REMOVE_ARTICLE_ID, articleList[0].id],
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isDeleting: false }, articleId: 1 },
+        ],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.delete(
+          { commit },
+          { portalSlug: 'test', articleId: articleList[0].id }
+        )
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isDeleting: true }, articleId: 1 },
+        ],
+        [
+          types.default.UPDATE_ARTICLE_FLAG,
+          { uiFlags: { isDeleting: false }, articleId: 1 },
+        ],
+      ]);
+    });
+  });
+
+  describe('attachImage', () => {
+    it('should upload the file and return the fileUrl', async () => {
+      const mockFile = new Blob(['test'], { type: 'image/png' });
+      mockFile.name = 'test.png';
+
+      const mockFileUrl = 'https://test.com/test.png';
+      uploadFile.mockResolvedValueOnce({ fileUrl: mockFileUrl });
+
+      const result = await actions.attachImage({}, { file: mockFile });
+
+      expect(uploadFile).toHaveBeenCalledWith(mockFile);
+      expect(result).toBe(mockFileUrl);
+    });
+
+    it('should throw an error if the upload fails', async () => {
+      const mockFile = new Blob(['test'], { type: 'image/png' });
+      mockFile.name = 'test.png';
+
+      const mockError = new Error('Upload failed');
+      uploadFile.mockRejectedValueOnce(mockError);
+
+      await expect(actions.attachImage({}, { file: mockFile })).rejects.toThrow(
+        'Upload failed'
+      );
+    });
+  });
+
+  describe('uploadExternalImage', () => {
+    it('should upload the image from external URL and return the fileUrl', async () => {
+      const mockUrl = 'https://example.com/image.jpg';
+      const mockFileUrl = 'https://uploaded.example.com/image.jpg';
+      uploadExternalImage.mockResolvedValueOnce({ fileUrl: mockFileUrl });
+
+      // When
+      const result = await actions.uploadExternalImage({}, { url: mockUrl });
+
+      // Then
+      expect(uploadExternalImage).toHaveBeenCalledWith(mockUrl);
+      expect(result).toBe(mockFileUrl);
+    });
+
+    it('should throw an error if the upload fails', async () => {
+      const mockUrl = 'https://example.com/image.jpg';
+      const mockError = new Error('Upload failed');
+      uploadExternalImage.mockRejectedValueOnce(mockError);
+
+      await expect(
+        actions.uploadExternalImage({}, { url: mockUrl })
+      ).rejects.toThrow('Upload failed');
+    });
+  });
+});

research/chatwoot/app/javascript/dashboard/store/modules/helpCenterArticles/specs/fixtures.js

@@ -0,0 +1,57 @@
+export default {
+  meta: {
+    count: 123,
+    currentPage: 2,
+  },
+  articles: {
+    byId: {
+      1: {
+        id: 1,
+        category_id: 1,
+        title: 'Documents are required to complete KYC',
+        content:
+          'The submission of the following documents is mandatory to complete registration, ID proof - PAN Card, Address proof',
+        description: 'Documents are required to complete KYC',
+        status: 'draft',
+        account_id: 1,
+        views: 122,
+        author: {
+          id: 5,
+          account_id: 1,
+          email: 'tom@furrent.com',
+          available_name: 'Tom',
+          name: 'Tom Jose',
+        },
+      },
+      2: {
+        id: 2,
+        category_id: 1,
+        title:
+          'How do I change my registered email address and/or phone number?',
+        content:
+          'Kindly login to your Furrent account to chat with us or submit a request and we would be glad to help you update the contact details on your account.',
+        description: 'Change my registered email address and/or phone number',
+        status: 'draft',
+        account_id: 1,
+        views: 121,
+        author: {
+          id: 5,
+          account_id: 1,
+          email: 'tom@furrent.com',
+          available_name: 'Tom',
+          name: 'Tom Jose',
+        },
+      },
+    },
+    allIds: [1, 2],
+    uiFlags: {
+      byId: {
+        1: { isFetching: false, isUpdating: true, isDeleting: false },
+      },
+    },
+  },
+  uiFlags: {
+    allFetched: false,
+    isFetching: true,
+  },
+};

research/chatwoot/app/javascript/dashboard/store/modules/helpCenterArticles/specs/getters.spec.js

@@ -0,0 +1,44 @@
+import { getters } from '../getters';
+import articles from './fixtures';
+describe('#getters', () => {
+  let state = {};
+  beforeEach(() => {
+    state = articles;
+  });
+  it('uiFlags', () => {
+    expect(getters.uiFlags(state)(1)).toEqual({
+      isFetching: false,
+      isUpdating: true,
+      isDeleting: false,
+    });
+  });
+
+  it('articleById', () => {
+    expect(getters.articleById(state)(1)).toEqual({
+      id: 1,
+      category_id: 1,
+      title: 'Documents are required to complete KYC',
+      content:
+        'The submission of the following documents is mandatory to complete registration, ID proof - PAN Card, Address proof',
+      description: 'Documents are required to complete KYC',
+      status: 'draft',
+      account_id: 1,
+      views: 122,
+      author: {
+        id: 5,
+        account_id: 1,
+        email: 'tom@furrent.com',
+        available_name: 'Tom',
+        name: 'Tom Jose',
+      },
+    });
+  });
+
+  it('articleStatus', () => {
+    expect(getters.articleStatus(state)(1)).toEqual('draft');
+  });
+
+  it('isFetchingArticles', () => {
+    expect(getters.isFetching(state)).toEqual(true);
+  });
+});

research/chatwoot/app/javascript/dashboard/store/modules/helpCenterArticles/specs/mutation.spec.js

@@ -0,0 +1,157 @@
+import { mutations } from '../mutations';
+import article from './fixtures';
+import types from '../../../mutation-types';
+
+describe('#mutations', () => {
+  let state = {};
+  beforeEach(() => {
+    state = article;
+  });
+
+  describe('#SET_UI_FLAG', () => {
+    it('It returns default flags if empty object passed', () => {
+      mutations[types.SET_UI_FLAG](state, {});
+      expect(state.uiFlags).toEqual({
+        allFetched: false,
+        isFetching: true,
+      });
+    });
+    it('Update flags when flag passed as parameters', () => {
+      mutations[types.SET_UI_FLAG](state, { isFetching: true });
+      expect(state.uiFlags).toEqual({
+        allFetched: false,
+        isFetching: true,
+      });
+    });
+  });
+
+  describe('#ADD_ARTICLE', () => {
+    it('add valid article to state', () => {
+      mutations[types.ADD_ARTICLE](state, {
+        id: 3,
+        category_id: 1,
+        title:
+          'How do I change my registered email address and/or phone number?',
+      });
+      expect(state.articles.byId[3]).toEqual({
+        id: 3,
+        category_id: 1,
+        title:
+          'How do I change my registered email address and/or phone number?',
+      });
+    });
+    it('does not add article with empty data passed', () => {
+      mutations[types.ADD_ARTICLE](state, {});
+      expect(state).toEqual(article);
+    });
+  });
+
+  describe('#ARTICLES_META', () => {
+    beforeEach(() => {
+      state.meta = {};
+    });
+
+    it('add meta to state', () => {
+      mutations[types.SET_ARTICLES_META](state, {
+        articles_count: 3,
+        current_page: 1,
+      });
+      expect(state.meta).toEqual({
+        articles_count: 3,
+        current_page: 1,
+      });
+    });
+
+    it('preserves existing meta values and updates only provided keys', () => {
+      state.meta = {
+        all_articles_count: 56,
+        archived_articles_count: 5,
+        articles_count: 56,
+        current_page: '1',
+        draft_articles_count: 26,
+        published_count: 25,
+      };
+
+      mutations[types.SET_ARTICLES_META](state, {
+        articles_count: 3,
+        draft_articles_count: 27,
+      });
+
+      expect(state.meta).toEqual({
+        all_articles_count: 56,
+        archived_articles_count: 5,
+        current_page: '1',
+        articles_count: 3,
+        draft_articles_count: 27,
+        published_count: 25,
+      });
+    });
+  });
+
+  describe('#ADD_ARTICLE_ID', () => {
+    it('add valid article id to state', () => {
+      mutations[types.ADD_ARTICLE_ID](state, 3);
+      expect(state.articles.allIds).toEqual([1, 2, 3]);
+    });
+    it('Does not invalid article with empty data passed', () => {
+      mutations[types.ADD_ARTICLE_ID](state, {});
+      expect(state).toEqual(article);
+    });
+  });
+
+  describe('#UPDATE_ARTICLE', () => {
+    it('does not update if empty object is passed', () => {
+      mutations[types.UPDATE_ARTICLE](state, {});
+      expect(state).toEqual(article);
+    });
+
+    it('does not update if object id is not present in the state', () => {
+      mutations[types.UPDATE_ARTICLE](state, { id: 5 });
+      expect(state).toEqual(article);
+    });
+
+    it('updates if object with id is already present in the state', () => {
+      const updatedArticle = {
+        id: 2,
+        title: 'Updated Title',
+        content: 'Updated Content',
+      };
+      mutations[types.UPDATE_ARTICLE](state, updatedArticle);
+      expect(state.articles.byId[2].title).toEqual('Updated Title');
+      expect(state.articles.byId[2].content).toEqual('Updated Content');
+    });
+
+    it('preserves the original position when updating an article', () => {
+      const originalPosition = state.articles.byId[2].position;
+      const updatedArticle = {
+        id: 2,
+        title: 'Updated Title',
+        content: 'Updated Content',
+      };
+      mutations[types.UPDATE_ARTICLE](state, updatedArticle);
+      expect(state.articles.byId[2].position).toEqual(originalPosition);
+    });
+  });
+
+  describe('#REMOVE_ARTICLE', () => {
+    it('does not remove object entry if no id is passed', () => {
+      mutations[types.REMOVE_ARTICLE](state, undefined);
+      expect(state).toEqual({ ...article });
+    });
+    it('removes article if valid article id passed', () => {
+      mutations[types.REMOVE_ARTICLE](state, 2);
+      expect(state.articles.byId[2]).toEqual(undefined);
+    });
+  });
+
+  describe('#CLEAR_ARTICLES', () => {
+    it('clears articles', () => {
+      mutations[types.CLEAR_ARTICLES](state);
+      expect(state.articles.allIds).toEqual([]);
+      expect(state.articles.byId).toEqual({});
+      expect(state.articles.uiFlags).toEqual({
+        byId: {},
+      });
+    });
+  });
+});