chore(frontend/tests): switch from jsdom to happy-dom

hotosm · Jan 8, 2025 · 0d4d47d · 0d4d47d
1 parent 90d7fad
commit 0d4d47d
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 20 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -134,6 +134,7 @@
     "@vitejs/plugin-react-swc": "^3.7.0",
     "@vitest/ui": "2.1.8",
     "combine-react-intl-messages": "^4.0.0",
+    "happy-dom": "^16.5.2",
     "msw": "^2.7.0",
     "prettier": "^2.8.8",
     "react-scripts": "^5.0.1",

diff --git a/frontend/src/components/taskSelection/tests/taskStatus.test.jsx b/frontend/src/components/taskSelection/tests/taskStatus.test.jsx
@@ -15,8 +15,8 @@ describe('test correct elements of TaskStatus', () => {
     );
     expect(container.querySelectorAll("span")[0]).toHaveStyle({
       backgroundColor: '#fff',
-      height: '0.875rem',
-      width: '0.875rem',
+      height: '14px',
+      width: '14px',
     });
     expect(container.querySelectorAll("span")[0]).toHaveClass('ba bw1 b--grey-light dib v-mid');
     expect(screen.getByText("Locked for mapping by test_user")).toBeInTheDocument();
@@ -32,8 +32,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#fff',
-      height: '0.875rem',
-      width: '0.875rem',
+      height: '14px',
+      width: '14px',
     });
     expect(container.querySelector("span")).toHaveClass(
       'ba bw1 b--grey-light dib v-mid',
@@ -51,8 +51,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#ade6ef',
-      height: '1rem',
-      width: '1rem',
+      height: '16px',
+      width: '16px',
     });
     expect(container.querySelector("span")).toHaveClass(' dib v-mid');
     expect(screen.getByText("Locked for validation by test_user")).toBeInTheDocument();
@@ -68,8 +68,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#ade6ef',
-      height: '1rem',
-      width: '1rem',
+      height: '16px',
+      width: '16px',
     });
     expect(container.querySelector("span")).toHaveClass(' dib v-mid');
     expect(screen.getByText(messages.taskStatus_LOCKED_FOR_VALIDATION.defaultMessage)).toBeInTheDocument();
@@ -85,8 +85,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#fff',
-      height: '0.875rem',
-      width: '0.875rem',
+      height: '14px',
+      width: '14px',
     });
     expect(container.querySelector("span")).toHaveClass(
       'ba bw1 b--grey-light dib v-mid',
@@ -104,8 +104,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#ade6ef',
-      height: '1rem',
-      width: '1rem',
+      height: '16px',
+      width: '16px',
     });
     expect(container.querySelector("span")).toHaveClass(' dib v-mid');
     expect(screen.getByText(messages.taskStatus_MAPPED.defaultMessage)).toBeInTheDocument();
@@ -121,8 +121,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#40ac8c',
-      height: '1rem',
-      width: '1rem',
+      height: '16px',
+      width: '16px',
     });
     expect(container.querySelector("span")).toHaveClass(' dib v-mid');
     expect(screen.getByText(messages.taskStatus_VALIDATED.defaultMessage)).toBeInTheDocument();
@@ -138,8 +138,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#fceca4',
-      height: '1rem',
-      width: '1rem',
+      height: '16px',
+      width: '16px',
     });
     expect(container.querySelector("span")).toHaveClass(' dib v-mid');
     expect(screen.getByText(messages.taskStatus_INVALIDATED.defaultMessage)).toBeInTheDocument();
@@ -155,8 +155,8 @@ describe('test correct elements of TaskStatus', () => {
 
     expect(container.querySelector("span")).toHaveStyle({
       backgroundColor: '#d8dae4',
-      height: '1rem',
-      width: '1rem',
+      height: '16px',
+      width: '16px',
     });
     expect(container.querySelector("span")).toHaveClass(' dib v-mid');
     expect(screen.getByText(messages.taskStatus_BADIMAGERY.defaultMessage)).toBeInTheDocument();

diff --git a/frontend/src/components/user/tests/list.test.jsx b/frontend/src/components/user/tests/list.test.jsx
@@ -33,7 +33,7 @@ describe('User list card', () => {
     expect(getByText('Shyam')).toBeInTheDocument();
     expect(screen.getByText('Shyam').closest('a')).toHaveAttribute('href', '/users/Shyam');
     expect(screen.getByTitle(/Ram/i)).toHaveStyle(
-      `background-image: url(https://www.openstreetmap.org/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNXQ2Q3c9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fe41f1b2a5d6cf492a7133f15c81f105dec06ff7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkZISmxjMmw2WlY5MGIxOXNhVzFwZEZzSGFXbHBhUT09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--058ac785867b32287d598a314311e2253bd879a3/unnamed.webp)`,
+      `background-image: url("https://www.openstreetmap.org/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNXQ2Q3c9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fe41f1b2a5d6cf492a7133f15c81f105dec06ff7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkZISmxjMmw2WlY5MGIxOXNhVzFwZEZzSGFXbHBhUT09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--058ac785867b32287d598a314311e2253bd879a3/unnamed.webp")`,
     );
     expect(container.querySelectorAll('svg').length).toBe(2);
   });

diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
     globals: true,
     clearMocks: true,
     setupFiles: ['./src/setup.ts', './src/network/tests/server.ts'],
-    environment: "jsdom",
+    environment: "happy-dom",
     testTimeout: 20000
   },
   envPrefix: 'REACT_APP_',

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -8057,6 +8057,14 @@ handle-thing@^2.0.0:
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
   integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
 
+happy-dom@^16.5.2:
+  version "16.5.2"
+  resolved "https://registry.yarnpkg.com/happy-dom/-/happy-dom-16.5.2.tgz#0521876d462d014f4f42db2ce95bf8096a5ac9e0"
+  integrity sha512-XWXjbbNjog3Me13Q9FQ5L1D7p4bCUdxrJndLVdsCIsCZgHpKz7HUQzAy+R2TidjKEz2Spe3gaqNpPPxOOkepyg==
+  dependencies:
+    webidl-conversions "^7.0.0"
+    whatwg-mimetype "^3.0.0"
+
 hard-rejection@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
@@ -15155,6 +15163,11 @@ webidl-conversions@^6.1.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
+webidl-conversions@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
+  integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
+
 webpack-dev-middleware@^5.3.4:
   version "5.3.4"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz#eb7b39281cbce10e104eb2b8bf2b63fce49a3517"
@@ -15296,6 +15309,11 @@ whatwg-mimetype@^2.3.0:
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
+whatwg-mimetype@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7"
+  integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
+
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"