DSEGOG-341 Update mocked playwright tests and fix broken cypress tests

ral-facilities · Aug 15, 2024 · ed8ea6b · ed8ea6b
1 parent d1f672a
commit ed8ea6b
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 74 deletions.
diff --git a/cypress/e2e/table.cy.ts b/cypress/e2e/table.cy.ts
@@ -282,7 +282,7 @@ describe('Table Component', () => {
 
         worker.use(
           http.get('/records/count', () =>
-            HttpResponse.json(50, { status: 1000 })
+            HttpResponse.json(1000, { status: 200 })
           )
         );
       });
@@ -301,7 +301,7 @@ describe('Table Component', () => {
 
         worker.use(
           http.get('/records/count', () =>
-            HttpResponse.json(50, { status: 2500 })
+            HttpResponse.json(2500, { status: 200 })
           )
         );
       });

diff --git a/e2e/mocked/images.spec.ts b/e2e/mocked/images.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -326,56 +326,58 @@ test('user can change image via clicking on a thumbnail', async ({ page }) => {
     const url = window.URL.createObjectURL(responseBlob);
 
     msw.worker.use(
-      msw.rest.get('/images/:recordId/:channelName', async (req, res, ctx) => {
-        const canvas = window.document.createElement('canvas');
-        const context = canvas.getContext('2d');
-
-        const result = await new Promise((resolve, reject) => {
-          const img = new Image();
-          img.onload = function () {
-            canvas.width = img.width;
-            canvas.height = img.height;
-
-            if (context) {
-              // draw image
-              context.drawImage(img, 0, 0, canvas.width, canvas.height);
-
-              // set composite mode
-              context.globalCompositeOperation = 'color';
-
-              // draw color
-              context.fillStyle = '#f00';
-              context.fillRect(0, 0, canvas.width, canvas.height);
-
-              canvas.toBlob(async (blob) => {
-                if (blob) {
-                  const arrayBuffer = await blob.arrayBuffer();
-
-                  resolve(
-                    res.once(
-                      ctx.status(200),
-                      ctx.set(
-                        'Content-Length',
-                        arrayBuffer.byteLength.toString()
-                      ),
-                      ctx.set('Content-Type', 'image/png'),
-                      ctx.body(arrayBuffer)
-                    )
-                  );
-                } else {
-                  reject();
-                }
-              });
-            } else {
-              reject();
-            }
-          };
-          img.onerror = reject;
-          img.src = url;
-        });
-
-        return result;
-      })
+      msw.http.get(
+        '/images/:recordId/:channelName',
+        async () => {
+          const canvas = window.document.createElement('canvas');
+          const context = canvas.getContext('2d');
+
+          const result = await new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = function () {
+              canvas.width = img.width;
+              canvas.height = img.height;
+
+              if (context) {
+                // draw image
+                context.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+                // set composite mode
+                context.globalCompositeOperation = 'color';
+
+                // draw color
+                context.fillStyle = '#f00';
+                context.fillRect(0, 0, canvas.width, canvas.height);
+
+                canvas.toBlob(async (blob) => {
+                  if (blob) {
+                    const arrayBuffer = await blob.arrayBuffer();
+
+                    resolve(
+                      new msw.HttpResponse(arrayBuffer, {
+                        headers: {
+                          'Content-Length': arrayBuffer.byteLength.toString(),
+                          'Content-Type': 'image/png',
+                        },
+                        status: 200,
+                      })
+                    );
+                  } else {
+                    reject();
+                  }
+                });
+              } else {
+                reject();
+              }
+            };
+            img.onerror = reject;
+            img.src = url;
+          });
+
+          return result;
+        },
+        { once: true }
+      )
     );
   });
 

diff --git a/e2e/mocked/plotting.spec.ts b/e2e/mocked/plotting.spec.ts
@@ -554,6 +554,9 @@ test('user can change the line width of plotted channels', async ({ page }) => {
 test('user can plot channels on the right y axis', async ({ page }) => {
   await page.goto('/');
 
+  // MSW wont load immediately here, so wait for it to start
+  await page.waitForFunction(() => window.msw);
+
   await page.evaluate(async () => {
     const { msw } = window;
 
@@ -570,9 +573,9 @@ test('user can plot channels on the right y axis', async ({ page }) => {
     });
 
     msw.worker.use(
-      msw.rest.get('/records', async (req, res, ctx) => {
-        return res(ctx.status(200), ctx.json(modifiedRecordsJson));
-      })
+      msw.http.get('/records', async () =>
+        msw.HttpResponse.json(modifiedRecordsJson, { status: 200 })
+      )
     );
   });
 

diff --git a/e2e/mocked/traces.spec.ts b/e2e/mocked/traces.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -136,18 +136,18 @@ test('user can change trace via clicking on a thumbnail', async ({ page }) => {
     const { msw } = window;
 
     msw.worker.use(
-      msw.rest.get(
+      msw.http.get(
         '/waveforms/:recordId/:channelName',
-        async (req, res, ctx) => {
-          return res.once(
-            ctx.status(200),
-            ctx.json({
+        async () =>
+          msw.HttpResponse.json(
+            {
               _id: '2',
               x: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20],
               y: [8, 1, 10, 9, 4, 3, 5, 6, 2, 7],
-            })
-          );
-        }
+            },
+            { status: 200 }
+          ),
+        { once: true }
       )
     );
   });

diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
@@ -133,12 +133,10 @@ export const handlers = [
       { status: 200 }
     );
   }),
-  http.get('/records', () => {
-    return HttpResponse.json(recordsJson, { status: 200 });
-  }),
-  http.get('/records/count', () => {
-    return HttpResponse.json(recordsJson.length, { status: 200 });
-  }),
+  http.get('/records', () => HttpResponse.json(recordsJson, { status: 200 })),
+  http.get('/records/count', () =>
+    HttpResponse.json(recordsJson.length, { status: 200 })
+  ),
   http.get('/records/range_converter', ({ request }) => {
     const url = new URL(request.url);
     const shotnumRange = url.searchParams.get('shotnum_range');
@@ -270,9 +268,9 @@ export const handlers = [
       { status: 200 }
     );
   }),
-  http.get('/images/colourmap_names', () => {
-    return HttpResponse.json(colourMapsJson, { status: 200 });
-  }),
+  http.get('/images/colourmap_names', () =>
+    HttpResponse.json(colourMapsJson, { status: 200 })
+  ),
   http.get(`/users/preferences/${PREFERRED_COLOUR_MAP_PREFERENCE_NAME}`, () => {
     if (typeof preferredColourMap === 'undefined') {
       return HttpResponse.json(