Merge pull request #7692 from ylavoie/msw-2

Msw 2

UI/__mocks__/dijit/registry.js

@@ -1,7 +1,6 @@
 /* eslint-disable no-shadow */
 // Borrowed from dijit/registry to avoid pulling in all Dojo/Dijit
 
-// import { jest } from '@jest/globals';
 const registry = Object.create(null);
 
 function findWidgets(root, skipNode) {

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

@@ -74,7 +74,7 @@
     "dojo-util": "1.17.3",
     "dojo-webpack-plugin": "3.0.6",
     "ejs-loader": "0.5.0",
-    "eslint": "8.53.0",
+    "eslint": "8.52.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-eslint": "9.0.0",
     "eslint-config-prettier": "9.0.0",
@@ -107,7 +107,7 @@
     "markdownlint": "0.31.1",
     "markdownlint-cli": "0.37.0",
     "mini-css-extract-plugin": "2.7.6",
-    "msw": "1.3.2",
+    "msw": "2.0.2",
     "npm-run-all": "4.1.5",
     "openapi-merge-cli": "^1.3.1",
     "path-browserify": "1.0.1",
@@ -123,6 +123,7 @@
     "stylelint-webpack-plugin": "4.1.1",
     "stylelint-z-index-value-constraint": "1.3.0",
     "tmp": "0.2.1",
+    "undici": "5.27.1",
     "unix-timestamp": "1.0.3",
     "unused-webpack-plugin": "2.4.0",
     "vue": "3.3.7",
@@ -137,7 +138,6 @@
     "webpack-merge": "5.10.0",
     "webpack-sources": "3.2.3",
     "webpack-virtual-modules": "0.6.0",
-    "whatwg-fetch": "3.6.19",
     "yaml-jest-transform": "^2.0.2",
     "yargs": "17.7.2"
   },

UI/src/store/configTemplate.js

@@ -11,11 +11,11 @@ export const configStoreTemplate = {
     //    };
     // },
     getters: {
-        apiURL: (state) => `./erp/api/v0/${state.url}`
+        apiURL: (state) => `/erp/api/v0/${state.url}`
     },
     actions: {
         async initialize() {
-            const response = await fetch(`./erp/api/v0/${this.url}`, {
+            const response = await fetch(`/erp/api/v0/${this.url}`, {
                 method: "GET"
             });
 
@@ -28,7 +28,7 @@ export const configStoreTemplate = {
             }
         },
         async add(adding) {
-            const response = await fetch(`./erp/api/v0/${this.url}`, {
+            const response = await fetch(`/erp/api/v0/${this.url}`, {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json"
@@ -48,7 +48,7 @@ export const configStoreTemplate = {
         },
         async del(id) {
             const warehouse = this.getById(id);
-            const response = await fetch(`./erp/api/v0/${this.url}/${id}`, {
+            const response = await fetch(`/erp/api/v0/${this.url}/${id}`, {
                 method: "DELETE",
                 headers: {
                     "If-Match": warehouse._meta.ETag
@@ -71,7 +71,7 @@ export const configStoreTemplate = {
             }
             const warehouse = this.items[index];
             if (!warehouse || !warehouse._meta || warehouse._meta.invalidated) {
-                const response = await fetch(`./erp/api/v0/${this.url}/${id}`, {
+                const response = await fetch(`/erp/api/v0/${this.url}/${id}`, {
                     method: "GET"
                 });
 
@@ -101,7 +101,7 @@ export const configStoreTemplate = {
         },
         async save(id, data) {
             const warehouse = this.getById(id);
-            const response = await fetch(`./erp/api/v0/${this.url}/${id}`, {
+            const response = await fetch(`/erp/api/v0/${this.url}/${id}`, {
                 method: "PUT",
                 headers: {
                     "Content-Type": "application/json",

UI/src/store/sessionUser.js

@@ -11,7 +11,7 @@ export const useSessionUserStore = defineStore("sessionUser", {
     },
     actions: {
         async initialize() {
-            const response = await fetch("./erp/api/v0/session", {
+            const response = await fetch("/erp/api/v0/session", {
                 method: "GET"
             });
 

UI/tests/common/jest-setup.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 
-import { jest, beforeAll, afterAll, afterEach } from "@jest/globals";
-import "whatwg-fetch";
+import { jest, beforeAll, afterAll, beforeEach, afterEach } from "@jest/globals";
+import { setGlobalOrigin } from 'undici';
 
 import "./mocks/lsmb_elements";
 import { server } from './mocks/server.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;
@@ -57,6 +57,11 @@ afterAll(() => {
   server.close();
 })
 
+beforeEach(() => {
+  // Set the global origin (used by fetch) to the url provided in vitest.config.ts
+  setGlobalOrigin(window.location.href)
+})
+
 // Reset any request handlers that we may add during the tests,
 // so they don't affect other tests.
 afterEach(() => {

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,41 @@
-import { rest } from 'msw';
+/* eslint-disable no-console */
+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 new 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 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 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 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 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 HttpResponse.json(
+      {
         id: "2",
         description: "Bigger customer",
         discount: 0.25
-      })
-    )
+      }, {
+      status: 200,
+      headers: {
+          'ETag': ['1234567891']
+      }
+    })
   })
 ]