From 6a6c16b7fc33c93884117fed806b728d5aa8ac02 Mon Sep 17 00:00:00 2001
From: Daniil Lohvinov <nsblnr@gmail.com>
Date: Thu, 15 Feb 2024 15:38:15 +0200
Subject: [PATCH] 24.02.51: axios mock update, docs [WTEL-3802, WTEL-3803,
 WTEL-3804]

---
 docs/.vitepress/config.mjs                    |  2 +
 .../webitel-ui/tests/axios-mock/Readme.md     | 55 +++++++++++++++++++
 package.json                                  |  2 +-
 src/tests/mocks/axiosMock.js                  | 45 +++++++--------
 4 files changed, 77 insertions(+), 27 deletions(-)
 create mode 100644 docs/pages/webitel-ui/tests/axios-mock/Readme.md

diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
index 9ee384c8..8ef5359b 100644
--- a/docs/.vitepress/config.mjs
+++ b/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 }) => (
       {
diff --git a/docs/pages/webitel-ui/tests/axios-mock/Readme.md b/docs/pages/webitel-ui/tests/axios-mock/Readme.md
new file mode 100644
index 00000000..500ebe6b
--- /dev/null
+++ b/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
diff --git a/package.json b/package.json
index 3e94175f..3322f971 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.2.50",
+  "version": "24.2.51",
   "private": false,
   "scripts": {
     "dev": "vite",
diff --git a/src/tests/mocks/axiosMock.js b/src/tests/mocks/axiosMock.js
index 90182866..7cac0f0c 100644
--- a/src/tests/mocks/axiosMock.js
+++ b/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;