24.02.51: axios mock update, docs [WTEL-3802, WTEL-3803, WTEL-3804]

docs/.vitepress/config.mjs

@@ -16,6 +16,7 @@ const sidebarComponents = globbySync(
 const onDemandSidebarComponents = globbySync('pages/webitel-ui/components/on-demand/**/Readme.md', { cwd: path.resolve(__dirname, '../') });
 const sidebarEnums = globbySync('pages/webitel-ui/enums/**/Readme.md', { cwd: path.resolve(__dirname, '../') });
 const sidebarModules = globbySync('pages/webitel-ui/modules/**/Readme.md', { cwd: path.resolve(__dirname, '../') });
+const sidebarTests = globbySync('pages/webitel-ui/tests/**/Readme.md', { cwd: path.resolve(__dirname, '../') });
 const sidebarValidators = globbySync('pages/webitel-ui/validators/**/Readme.md', { cwd: path.resolve(__dirname, '../') });
 
 const plyrIconsPath = path.resolve(__dirname, '../../src/assets/icons/plyr.svg');
@@ -75,6 +76,7 @@ export default defineConfig({
       { text: 'Components/on-demand', items: onDemandSidebarComponents },
       { text: 'Enums', items: sidebarEnums },
       { text: 'Modules', items: sidebarModules },
+      { text: 'Test utils and Mocks', items: sidebarTests },
       { text: 'Validators', items: sidebarValidators },
     ].map(({ text, items }) => (
       {

docs/pages/webitel-ui/tests/axios-mock/Readme.md

@@ -0,0 +1,55 @@
+# Axios Mock
+
+Mocking axios requests for testing purposes.
+
+```js
+// setup file, or actual test file
+import axiosMock from '@webitel/ui-sdk/src/tests/mocks/axiosMock';
+
+// pass vitest instance
+const mock = axiosMock();
+vi.doMock('axios', mock);
+```
+
+Note: is you want to mock all requests, globally, do it in setup file for tests,
+like `tests/config/config.js` in consumer project.
+
+## What if you need to override some of the mocks?
+
+Make a deep merge of your custom mock with axiosMock instance.
+
+```js
+import axiosMock from '@webitel/ui-sdk/src/tests/mocks/axiosMock';
+import merge from 'deepmerge';
+
+const mock = axiosMock({
+  default: {
+    request: jest.fn(),
+  },
+});
+```
+
+## vi.mock vs vi.doMock?
+
+### tldr;
+`.mock` is hoisted, so it won't access any other variables,
+`.doMock` is not hoisted, so it will access other variables.
+
+```js
+// For instance
+const mock = axiosMock();
+vi.mock('axios', mock); // won't work
+vi.doMock('axios', mock); // will work
+
+// BUT
+vi.mock('axios', axiosMock()); // will work
+```
+
+if you're not sure, use `doMock`
+
+### More info
+
+[github issue](https://github.com/vitest-dev/vitest/issues/4872)
+
+[doMock](https://vitest.dev/api/vi.html#vi-mock) isn't hoisted,
+but [mock](https://vitest.dev/api/vi.html#vi-domock) is

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.2.50",
+  "version": "24.2.51",
   "private": false,
   "scripts": {
     "dev": "vite",

src/tests/mocks/axiosMock.js

@@ -1,32 +1,25 @@
-/*
-Why .doMock() and not .mock()?
+import deepmerge from 'deepmerge';
 
-https://github.com/vitest-dev/vitest/issues/4872
-
-doMock isn't hoisted, but mock is
-https://vitest.dev/api/vi.html#vi-mock
-https://vitest.dev/api/vi.html#vi-domock
- */
-
-const axiosMock = (vi) => vi.doMock('axios', () => {
-  return {
-    default: {
-      post: vi.fn(() => Promise.resolve({ data: {}})),
-      get: vi.fn(() => Promise.resolve({ data: {}})),
-      delete: vi.fn(() => Promise.resolve({ data: {}})),
-      put: vi.fn(() => Promise.resolve({ data: {}})),
-      patch: vi.fn(() => Promise.resolve({ data: {}})),
-      request: vi.fn(() => Promise.resolve({ data: {}})),
-      create: vi.fn().mockReturnThis(),
-      interceptors: {
-        request: {
-          use: vi.fn(), eject: vi.fn(),
-        }, response: {
-          use: vi.fn(), eject: vi.fn(),
+const axiosMock = (customMock = {}) => () => deepmerge(
+    {
+      default: {
+        post: vi.fn(() => Promise.resolve({ data: {} })),
+        get: vi.fn(() => Promise.resolve({ data: {} })),
+        delete: vi.fn(() => Promise.resolve({ data: {} })),
+        put: vi.fn(() => Promise.resolve({ data: {} })),
+        patch: vi.fn(() => Promise.resolve({ data: {} })),
+        request: vi.fn(() => Promise.resolve({ data: {} })),
+        create: vi.fn().mockReturnThis(),
+        interceptors: {
+          request: {
+            use: vi.fn(), eject: vi.fn(),
+          }, response: {
+            use: vi.fn(), eject: vi.fn(),
+          },
         },
       },
     },
-  };
-});
+    customMock,
+);
 
 export default axiosMock;