Move to msw2

UI/jest.config.js

@@ -186,7 +186,7 @@ module.exports = {
     sandboxInjectedGlobals: [],
 
     // The paths to modules that run some code to configure or set up the testing environment before each test
-    // setupFiles: [],
+    setupFiles: ["<rootDir>/tests/common/jest.polyfills.js"],
 
     // A list of paths to modules that run some code to configure or set up the testing framework before each test
     setupFilesAfterEnv: ["<rootDir>/tests/common/jest-setup.js"],

UI/package.json

@@ -63,7 +63,7 @@
     "babel-loader": "9.1.3",
     "browserslist": "4.22.1",
     "buffer": "6.0.3",
-    "caniuse-lite": "1.0.30001555",
+    "caniuse-lite": "1.0.30001557",
     "clean-webpack-plugin": "4.0.0",
     "compression-webpack-plugin": "10.0.0",
     "copy-webpack-plugin": "11.0.0",
@@ -97,8 +97,8 @@
     "html-webpack-plugin": "5.5.3",
     "http-status-codes": "2.3.0",
     "i18next-conv": "14.0.0",
-    "jest": "^29.6.2",
-    "jest-environment-jsdom": "^29.6.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-openapi": "0.14.2",
     "jest-runner-groups": "2.2.0",
     "jest-serializer-vue": "3.1.0",

UI/tests/common/jest-setup.js

@@ -17,7 +17,7 @@ Object.defineProperty(window, "lsmbConfig", {
 // Enable i18n
 import { config } from '@vue/test-utils'
 import { i18n } from '../common/i18n'
-    
+
 config.global.plugins = [i18n]
 
 const oldWindowLocation = window.location;

UI/tests/common/jest.polyfills.js

@@ -0,0 +1,20 @@
+/* global globalThis */
+
+const { TextEncoder, TextDecoder } = require('node:util')
+
+Object.defineProperties(globalThis, {
+    TextDecoder: { value: TextDecoder },
+    TextEncoder: { value: TextEncoder },
+})
+
+const { Blob } = require('node:buffer')
+// const { fetch, Headers, FormData, Request, Response } = require('undici')
+
+Object.defineProperties(globalThis, {
+    // fetch: { value: fetch, writable: true },
+    Blob: { value: Blob },
+    // Headers: { value: Headers },
+    // FormData: { value: FormData },
+    // Request: { value: Request },
+    // Response: { value: Response },
+})

UI/tests/common/mocks/login_handlers.js

@@ -1,39 +1,40 @@
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 
 export const loginHandlers = [
 
-    rest.post('login.pl', async (req, res, ctx) => {
+    http.post('login.pl', async ({ request }) => {
 
-        const action = req.url.searchParams.get('action');
-        const params = await req.json();
+        const url = new URL(request.url);
+        const action = url.searchParams.get('action');
+        const params = await request.json();
         const username = params.login;
         const password = params.password;
         const company = params.company;
 
         if ( action === 'authenticate' ) {
             if ( username === 'MyUser' && password === 'MyPassword' && company === 'MyCompany' ) {
                 window.location.assign('http://lsmb/erp.pl?action=root');
-                return res(
-                  ctx.status(200)
-                );
+                return new HttpResponse(null, {
+                    status: 200
+                  })
             }
             if ( username && password && company === 'MyOldCompany' ) {
-                return res(
-                    ctx.status(521)
-                );
+                return new HttpResponse(null, {
+                    status: 521
+                  })
             }
             if ( username === 'BadUser' && password && company ) {
-                return res(
-                    ctx.status(401)
-                );
+                return new HttpResponse(null, {
+                    status: 401
+                  })
             }
         }
         if (username === 'My' && password === 'My' && company === 'My') {
-            return res(
-                ctx.status(500)
-            );
+            return new HttpResponse(null, {
+                status: 500
+              })
         }
-        return res.networkError('Failed to connect');
+        return HttpResponse.error('Failed to connect');
     })
 ]
-  
+

UI/tests/common/mocks/store_business-types_handlers.js

@@ -1,13 +1,12 @@
 /* eslint-disable no-unused-vars, no-console */
-import { rest } from 'msw'
+import { http, HttpResponse } from 'msw';
 
 export const businessTypesHandlers = [
 
-  rest.get('/erp/api/v0/contacts/business-types', (req, res, ctx) => {
+  http.get('/erp/api/v0/contacts/business-types', () => {
 
-    return res(
-      ctx.status(200),
-      ctx.json({
+    return new HttpResponse.json(
+      {
         items: [
             { id: "1", description: "Big customer", discount: 0.05 },
             { id: "2", description: "Bigger customer", discount: 0.15 }
@@ -17,62 +16,61 @@ export const businessTypesHandlers = [
           rel : "download",
           href : "?format=HTML"
         }]
-      })
-    )
+      }, {
+      status: 200,
+    })
   }),
 
-  rest.get('/erp/api/v0/contacts/business-types/2', (req, res, ctx) => {
+  http.get('/erp/api/v0/contacts/business-types/2', () => {
 
-    return res(
-      ctx.status(200),
-      ctx.set({
-          'ETag': ['1234567890']
-      }),
-      ctx.json({
+    return new HttpResponse.json(
+      {
         id: "2",
         description: "Bigger customer",
         discount: 0.15
-      })
-    )
+      }, {
+      status: 200,
+      headers: {
+          'ETag': ['1234567890']
+      }
+    })
   }),
 
-  rest.get('/erp/api/v0/contacts/business-types/3', (req, res, ctx) => {
+  http.get('/erp/api/v0/contacts/business-types/3', () => {
 
-    return res(
-      ctx.status(404),
-      ctx.json(
-        { id: "", code: "", description: "" }
-      )
-    )
+    return new HttpResponse.json(
+      { id: "", code: "", description: "" }, {
+      status: 404
+      })
   }),
 
-  rest.post('/erp/api/v0/contacts/business-types', (req, res, ctx) => {
+  http.post('/erp/api/v0/contacts/business-types', () => {
 
-    return res(
-      ctx.status(201),
-      ctx.set({
-          'ETag': ['1234567891']
-      }),
-      ctx.json({
+    return new HttpResponse.json(
+      {
         id: "3",
         description: "Great customer",
         discount: 0.22
-      })
-    )
+      }, {
+      status: 201,
+      headers: {
+          'ETag': ['1234567891']
+      }
+    })
   }),
 
-  rest.put('/erp/api/v0/contacts/business-types/2', (req, res, ctx) => {
+  http.put('/erp/api/v0/contacts/business-types/2', () => {
 
-    return res(
-      ctx.status(200),
-      ctx.set({
-          'ETag': ['1234567891']
-      }),
-      ctx.json({
+    return new HttpResponse.json(
+      {
         id: "2",
         description: "Bigger customer",
         discount: 0.25
-      })
-    )
+      }, {
+      status: 200,
+      headers: {
+          'ETag': ['1234567891']
+      }
+    })
   })
 ]

UI/tests/common/mocks/store_countries_handlers.js

@@ -1,13 +1,12 @@
 /* eslint-disable no-unused-vars, no-console */
-import { rest } from 'msw'
+import { http, HttpResponse } from 'msw'
 
 export const countriesHandlers = [
 
-  rest.get('/erp/api/v0/countries', (req, res, ctx) => {
+  http.get('/erp/api/v0/countries', () => {
 
-    return res(
-      ctx.status(200),
-      ctx.json({
+    return new HttpResponse.json(
+      {
         items: [
           { code: "ca", name: "Canada" },
           { code: "us", name: "United States" }
@@ -17,57 +16,58 @@ export const countriesHandlers = [
           rel : "download",
           href : "?format=HTML"
         }]
-      }),
-    )
+      }, {
+        status: 200
+      })
   }),
 
-  rest.get('/erp/api/v0/countries/us', (req, res, ctx) => {
+  http.get('/erp/api/v0/countries/us', () => {
 
-    return res(
-      ctx.status(200),
-      ctx.set({
+    return new HttpResponse.json(
+      { code: "us", name: "United States" },
+      {
+      status: 200,
+      headers: {
           'ETag': ['1234567890']
-      }),
-      ctx.json(
-          { code: "us", name: "United States" }
-        ),
+        }
+      }
     )
   }),
 
-  rest.get('/erp/api/v0/countries/zz', (req, res, ctx) => {
+  http.get('/erp/api/v0/countries/zz', () => {
 
-    return res(
-      ctx.status(404),
-      ctx.json(
-          { code: "", name: "" }
-        ),
+    return new HttpResponse.json(
+      { code: "", name: "" },
+      { status: 404 }
     )
   }),
 
-  rest.post('/erp/api/v0/countries', (req, res, ctx) => {
+  http.post('/erp/api/v0/countries', () => {
 
-    return res(
-      ctx.status(201),
-      ctx.set({
-          'ETag': ['1234567891']
-      }),
-      ctx.json({
+    return new HttpResponse.json(
+      {
         code: "zz",
         name: "Atlantida",
-      }),
+      },
+      {
+        status: 201,
+        headers: {
+          'ETag': ['1234567891']
+        }
+      }
     )
   }),
 
-  rest.put('/erp/api/v0/countries/us', (req, res, ctx) => {
+  http.put('/erp/api/v0/countries/us', () => {
 
-    return res(
-      ctx.status(200),
-      ctx.set({
+    return new HttpResponse.json(
+      { code: "us", name: "America" },
+      {
+        status: 200,
+        headers: {
           'ETag': ['1234567891']
-      }),
-      ctx.json(
-        { code: "us", name: "America" }
-      )
+        }
+      }
     )
   })
 ]