refactor(middleware): i18n middleware: adjustements

Author: Marcin Kwiatkowski

packages/api-client/src/helpers/apiClient/defaultSettings.ts

@@ -21,6 +21,8 @@ export const defaultSettings: ClientConfig = {
     setCurrency: () => {},
     getLocale: () => '',
     setLocale: () => {},
+    getCountry: () => '',
+    setCountry: () => {},
   },
   externalCheckout: {
     enable: false,

packages/composables/nuxt/plugin.js

@@ -21,73 +21,27 @@ export default integrationPlugin(({ app, res, req, integration }) => {
 
   const getCartId = () => getCookies(cartCookieName);
 
-  const setCartId = (id) => {
-    if (!id) {
-      removeCookie(cartCookieName)
-      // eslint-disable-next-line no-param-reassign
-      return;
-    }
-    setCookie(cartCookieName, id);
-  };
+  const setCartId = (id) => !id ? removeCookie(cartCookieName) : setCookie(cartCookieName, id);
 
   const getCustomerToken = () => getCookies(customerCookieName);
 
-  const setCustomerToken = (token) => {
-    if (!token) {
-      removeCookie(customerCookieName);
-      return;
-    }
-
-    setCookie(customerCookieName, token);
-  };
+  const setCustomerToken = (token) => !token ? removeCookie(customerCookieName) : setCookie(customerCookieName, token);
 
   const getStore = () => getCookies(storeCookieName);
 
-  const setStore = (id) => {
-    if (!id) {
-      // eslint-disable-next-line no-param-reassign
-      removeCookie(storeCookieName);
-      return;
-    }
-
-    setCookie(storeCookieName, id);
-  };
+  const setStore = (id) => !id ? removeCookie(storeCookieName) : setCookie(storeCookieName, id);
 
   const getCurrency = () => getCookies(currencyCookieName);
 
-  const setCurrency = (id) => {
-    if (!id) {
-      // eslint-disable-next-line no-param-reassign
-      removeCookie(currencyCookieName);
-      return;
-    }
-
-    setCookie(currencyCookieName, id);
-  };
+  const setCurrency = (id) => !id ? removeCookie(currencyCookieName) : setCookie(currencyCookieName, id);
 
   const getLocale = () => getCookies(localeCookieName);
 
-  const setLocale = (id) => {
-    if (!id) {
-      // eslint-disable-next-line no-param-reassign
-      removeCookie(localeCookieName);
-      return;
-    }
-
-    setCookie(localeCookieName, id);
-  };
+  const setLocale = (id) => !id ? removeCookie(localeCookieName) : setCookie(localeCookieName, id);
 
   const getCountry = () => getCookies(countryCookieName);
 
-  const setCountry = (id) => {
-    if (!id) {
-      // eslint-disable-next-line no-param-reassign
-      removeCookie(countryCookieName);
-      return;
-    }
-
-    setCookie(countryCookieName, id);
-  };
+  const setCountry = id =>  !id ? removeCookie(countryCookieName) : setCookie(countryCookieName, id);
 
   const settings = mapConfigToSetupObject({
     moduleOptions,

packages/theme/middleware/__tests__/i18n.spec.js

@@ -1,4 +1,4 @@
-import i18nMiddleware, { readStoreCookie, findLocaleBasedOnStoreCode, setDefaultLocale, prepareNewCookieString } from '~/middleware/i18n';
+import i18nMiddleware from '~/middleware/i18n';
 
 const localesMock = [
   {
@@ -18,6 +18,13 @@ const localesMock = [
   },
 ];
 
+const apiStateMock = {
+  getCurrency: () => 'USD',
+  getCountry: () => 'PL',
+  getCartId: () => '123',
+  getCustomerToken: () => '12fg45',
+};
+
 const appMock = {
   $cookies: {
     get: jest.fn(),
@@ -27,61 +34,50 @@ const appMock = {
     setLocale: jest.fn(),
     locales: localesMock,
   },
-};
-
-const apiStateMock = {
-  getCurrency: () => 'USD',
-  getCountry: () => 'PL',
-  getCartId: () => '123',
-  getCustomerToken: () => '12fg45',
+  $vsf: {
+    $magento: {
+      config: {
+        state: {
+          ...apiStateMock,
+          setStore: jest.fn(),
+          setLocale: jest.fn(),
+        },
+        axios: {
+          headers: {
+            cookie: null,
+          },
+        },
+      },
+    },
+  },
 };
 
 describe('i18n middleware', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
   it('Should read vsf-store cookie value', () => {
-    readStoreCookie(appMock);
+    i18nMiddleware({ app: appMock });
 
     expect(appMock.$cookies.get).toHaveBeenCalledWith('vsf-store');
   });
 
   it('Should find locale based on magento store code', () => {
-    const storeCode = 'nl_NL';
-    const localeObject = findLocaleBasedOnStoreCode(storeCode, localesMock);
-
-    expect(localeObject.code).toEqual('nl_NL');
-  });
-
-  it('Should not find when there is no locale that match given magento store code', () => {
-    const storeCode = 'pl_PL';
-    const localeObject = findLocaleBasedOnStoreCode(storeCode, localesMock);
-
-    expect(localeObject).toBeFalsy();
-  });
-
-  it('Should set default locale', async () => {
-    await setDefaultLocale(appMock.i18n);
-
-    expect(appMock.i18n.setLocale).toHaveBeenCalledWith('en');
-  });
-
-  it('Should prepare new cookie string', () => {
-    const cookie = prepareNewCookieString(apiStateMock, 'brandZ');
+    appMock.$cookies.get.mockReturnValue('default');
+    i18nMiddleware({ app: appMock });
 
-    expect(cookie).toMatchInlineSnapshot(
-      `"vsf-store=brandZ; vsf-locale=brandZ; vsf-currency=USD; vsf-country=PL; vsf-customer=12fg45; vsf-cart=123 "`
-    );
+    expect(appMock.i18n.setLocale).not.toHaveBeenCalled();
   });
 
-  it('Should set default locale if store cookie is not exist', () => {
-    appMock.$cookies.get.mockReturnValueOnce(null);
-
-    i18nMiddleware({ app: appMock });
+  it('Should set default locale when there is no locale that match given magento store code', () => {
+    appMock.$cookies.get.mockReturnValue('pl_PL');
 
-    expect(appMock.i18n.setLocale).toHaveBeenCalledWith('en');
+    expect(appMock.i18n.setLocale).not.toHaveBeenCalledTimes(1);
   });
 
-  it('Should set default locale if passed store code does not match aby locale from nuxt config', () => {
-    appMock.$cookies.get.mockReturnValueOnce('test');
-
+  it('Should set default locale when vsf-store cookie is not exist', () => {
+    appMock.$cookies.get.mockReturnValue(null);
     i18nMiddleware({ app: appMock });
 
     expect(appMock.i18n.setLocale).toHaveBeenCalledWith('en');
@@ -94,22 +90,6 @@ describe('i18n middleware', () => {
         ...appMock.i18n,
         locale: 'de_DE',
       },
-      $vsf: {
-        $magento: {
-          config: {
-            state: {
-              ...apiStateMock,
-              setStore: jest.fn(),
-              setLocale: jest.fn(),
-            },
-            axios: {
-              headers: {
-                cookie: null,
-              },
-            },
-          },
-        },
-      },
     };
 
     testCaseAppMock.$cookies.get.mockReturnValueOnce('de_DE').mockReturnValueOnce('default');
@@ -119,7 +99,6 @@ describe('i18n middleware', () => {
     expect(testCaseAppMock.$vsf.$magento.config.state.setLocale).toHaveBeenCalledWith('de_DE');
     expect(testCaseAppMock.$vsf.$magento.config.state.setStore).toHaveBeenCalledWith('de_DE');
     expect(testCaseAppMock.$vsf.$magento.config.axios.headers.cookie).toMatchInlineSnapshot(
-      '"vsf-store=de_DE vsf-locale=de_DE vsf-currency=USD vsf-country=PL vsf-cart=123 vsf-customer=12fg45 "',
       `"vsf-store=de_DE; vsf-locale=de_DE; vsf-currency=USD; vsf-country=PL; vsf-customer=12fg45; vsf-cart=123 "`
     );
   });

packages/theme/middleware/i18n.js

@@ -6,22 +6,22 @@ import cookieNames from '~/enums/cookieNameEnum';
  * @param app {NuxtAppOptions} - Nuxt App options object
  * @returns {string} - vsf-store cookie value
  */
-export const readStoreCookie = (app) => app.$cookies.get(cookieNames.storeCookieName);
+const readStoreCookie = (app) => app.$cookies.get(cookieNames.storeCookieName);
 
 /**
  * Find locale code based on magento store code
  * @param storeCode {string} - magento store code
  * @param locales {array} - array with locales
  * @returns boolean
  */
-export const findLocaleBasedOnStoreCode = (storeCode, locales) => locales.find((locale) => locale.code === storeCode);
+const findLocaleBasedOnStoreCode = (storeCode, locales) => locales.find((locale) => locale.code === storeCode);
 
 /**
  * Set default locale
  * @param i18n {i18n} i18n API
  * @returns {Promise<void>}
  */
-export const setDefaultLocale = async (i18n) => {
+const setDefaultLocale = async (i18n) => {
   await i18n.setLocale(i18n.defaultLocale);
 };
 
@@ -31,7 +31,7 @@ export const setDefaultLocale = async (i18n) => {
  * @param apiState {ConfigState}
  * @returns {string}
  */
-export const prepareNewCookieString = (apiState, newStoreCode) => {
+const prepareNewCookieString = (apiState, newStoreCode) => {
   let cookie = `vsf-store=${newStoreCode}; `;
 
   cookie += `vsf-locale=${newStoreCode}; `;
@@ -50,24 +50,15 @@ export const prepareNewCookieString = (apiState, newStoreCode) => {
     cookie += `vsf-cart=${cartIdCookie} `;
   }
 
-  console.log(cookie)
-
   return cookie;
 };
 
 export default async ({ app }) => {
   const { i18n } = app;
   const currentStoreCode = readStoreCookie(app);
 
-  if (!currentStoreCode) {
-    await setDefaultLocale(i18n);
-
-    return;
-  }
-
-  const i18nLocaleObject = findLocaleBasedOnStoreCode(currentStoreCode, i18n.locales);
-
-  if (!i18nLocaleObject) {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  if (!currentStoreCode || !findLocaleBasedOnStoreCode(currentStoreCode, i18n.locales)) {
     await setDefaultLocale(i18n);
 
     return;

packages/theme/package.json

@@ -10,7 +10,8 @@
   "scripts": {
     "build": "nuxt build -m",
     "build:analyze": "nuxt build -a -m",
-    "dev": "nuxt --inspect",
+    "dev": "nuxt",
+    "dev-debug": "nuxt --inspect",
     "generate": "nuxt generate",
     "lint": "eslint . --ext .ts,.vue",
     "lint:fix": "eslint . --ext .ts,.vue --fix",