Update real e2e tests with plotly changes

e2e/mocked/images.spec.ts

@@ -499,7 +499,7 @@ test('user can use crosshairs mode and view intensity graphs', async ({
     maxDiffPixels: 150,
     stylePath:
       // hide image controls panel & top buttons from the screenshot as it's not important
-      path.join(__dirname, 'screenshotIgnoreStyles.css'),
+      path.join(__dirname, '..', 'screenshotIgnoreStyles.css'),
   });
 
   // check that clicking the image changes the crosshairs position & causes a data fetch
@@ -515,7 +515,7 @@ test('user can use crosshairs mode and view intensity graphs', async ({
     maxDiffPixels: 150,
     stylePath:
       // hide image controls panel & top buttons from the screenshot as it's not important
-      path.join(__dirname, 'screenshotIgnoreStyles.css'),
+      path.join(__dirname, '..', 'screenshotIgnoreStyles.css'),
   });
 
   // check reset view goes back to the centroid
@@ -531,7 +531,7 @@ test('user can use crosshairs mode and view intensity graphs', async ({
     maxDiffPixels: 150,
     stylePath:
       // hide image controls panel & top buttons from the screenshot as it's not important
-      path.join(__dirname, 'screenshotIgnoreStyles.css'),
+      path.join(__dirname, '..', 'screenshotIgnoreStyles.css'),
   });
 
   // can switch out of crosshairs mode and crosshair disappears
@@ -596,7 +596,7 @@ test('user can switch images via thumbnails whilst in crosshairs mode', async ({
     maxDiffPixels: 150,
     stylePath:
       // hide image controls panel & top buttons from the screenshot as it's not important
-      path.join(__dirname, 'screenshotIgnoreStyles.css'),
+      path.join(__dirname, '..', 'screenshotIgnoreStyles.css'),
   });
 
   // click to move the crosshair so we check when switching images it resets to the new image's centroid
@@ -730,6 +730,6 @@ test('user can switch images via thumbnails whilst in crosshairs mode', async ({
     maxDiffPixels: 150,
     stylePath:
       // hide image controls panel & top buttons from the screenshot as it's not important
-      path.join(__dirname, 'screenshotIgnoreStyles.css'),
+      path.join(__dirname, '..', 'screenshotIgnoreStyles.css'),
   });
 });

e2e/mocked/traces.spec.ts

@@ -1,5 +1,4 @@
 import { expect, test } from '@playwright/test';
-import { triggerAsyncId } from 'async_hooks';
 import path from 'path';
 import { fileURLToPath } from 'url';
 
@@ -46,8 +45,8 @@ test('user can show points for the trace', async ({ page }) => {
   await expect(chart).toHaveScreenshot({
     maxDiffPixels: 150,
     stylePath:
-      // hide image controls panel & top buttons from the screenshot as it's not important
-      path.join(__dirname, 'screenshotIgnoreStyles.css'),
+      // hide top buttons from the screenshot as it's not important
+      path.join(__dirname, '..', 'screenshotIgnoreStyles.css'),
   });
 });
 
@@ -104,17 +103,17 @@ test('user can zoom and pan the trace', async ({ page }) => {
   await expect(chart).toHaveScreenshot({
     maxDiffPixels: 150,
     stylePath:
-      // hide image controls panel & top buttons from the screenshot as it's not important
-      path.join(__dirname, 'screenshotIgnoreStyles.css'),
+      // hide top buttons from the screenshot as it's not important
+      path.join(__dirname, '..', 'screenshotIgnoreStyles.css'),
   });
 
   await popup.locator('text=Reset View').click();
 
   await expect(chart).toHaveScreenshot({
     maxDiffPixels: 150,
     stylePath:
-      // hide image controls panel & top buttons from the screenshot as it's not important
-      path.join(__dirname, 'screenshotIgnoreStyles.css'),
+      // hide top buttons from the screenshot as it's not important
+      path.join(__dirname, '..', 'screenshotIgnoreStyles.css'),
   });
 });
 
@@ -162,7 +161,7 @@ test('user can change trace via clicking on a thumbnail', async ({ page }) => {
   await expect(chart).toHaveScreenshot({
     maxDiffPixels: 150,
     stylePath:
-      // hide image controls panel & top buttons from the screenshot as it's not important
-      path.join(__dirname, 'screenshotIgnoreStyles.css'),
+      // hide top buttons from the screenshot as it's not important
+      path.join(__dirname, '..', 'screenshotIgnoreStyles.css'),
   });
 });

e2e/real/channels.spec.ts

@@ -48,11 +48,9 @@ test('should be able to view the channel summary', async ({ page }) => {
   await expect(
     page.getByText('Most recent data date: 2023-06-05 16:00:00')
   ).toBeVisible();
-  expect(
-    await page.getByRole('table', { name: 'recent data' }).screenshot({
-      type: 'png',
-    })
-  ).toMatchSnapshot({
+  await expect(
+    await page.getByRole('table', { name: 'recent data' })
+  ).toHaveScreenshot({
     maxDiffPixels: 150,
   });
 
@@ -68,11 +66,9 @@ test('should be able to view the channel summary', async ({ page }) => {
   await expect(
     page.getByText('Most recent data date: 2023-06-05 16:00:00')
   ).toBeVisible();
-  expect(
-    await page.getByRole('table', { name: 'recent data' }).screenshot({
-      type: 'png',
-    })
-  ).toMatchSnapshot({
+  await expect(
+    await page.getByRole('table', { name: 'recent data' })
+  ).toHaveScreenshot({
     maxDiffPixels: 150,
   });
 });

e2e/real/functions.spec.ts

@@ -51,13 +51,11 @@ test('scalar functions can be plotted', async ({ page }) => {
   // wait for open settings button to be visible i.e. menu is fully closed
   await popup.locator('[aria-label="open settings"]').click({ trial: true });
 
-  const chart = await popup.locator('.chartjs-chart');
-  expect(
-    await chart.screenshot({
-      type: 'png',
-    })
+  const chart = await popup.locator('.plotly-chart');
+  await expect(chart).toHaveScreenshot({
     // 150 pixels would only be very minor changes, so it's safe to ignore
-  ).toMatchSnapshot({ maxDiffPixels: 150 });
+    maxDiffPixels: 150,
+  });
 });
 
 test('creates multiple complex functions', async ({ page }) => {

e2e/real/images.spec.ts

@@ -1,4 +1,9 @@
 import { expect, test } from '@playwright/test';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file
+const __dirname = path.dirname(__filename); // get the name of the directory
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -133,17 +138,9 @@ test('user can change the false colour parameters of an image', async ({
     .not.toBe(oldImageSrc);
   await image.click();
 
-  expect(
-    await image.screenshot({
-      type: 'png',
-    })
-  ).toMatchSnapshot({ maxDiffPixels: 150 });
+  await expect(image).toHaveScreenshot({ maxDiffPixels: 150 });
 
-  expect(
-    await colourbar.screenshot({
-      type: 'png',
-    })
-  ).toMatchSnapshot();
+  await expect(colourbar).toHaveScreenshot();
 });
 
 test('user can disable false colour', async ({ page }) => {
@@ -179,11 +176,7 @@ test('user can disable false colour', async ({ page }) => {
 
   await image.click();
 
-  expect(
-    await image.screenshot({
-      type: 'png',
-    })
-  ).toMatchSnapshot({ maxDiffPixels: 150 });
+  await expect(image).toHaveScreenshot({ maxDiffPixels: 150 });
 });
 
 test('user can change image via clicking on a thumbnail', async ({ page }) => {
@@ -219,11 +212,7 @@ test('user can change image via clicking on a thumbnail', async ({ page }) => {
 
   await image.click();
 
-  expect(
-    await canvas.screenshot({
-      type: 'png',
-    })
-  ).toMatchSnapshot({ maxDiffPixels: 150 });
+  await expect(canvas).toHaveScreenshot({ maxDiffPixels: 150 });
 });
 
 test('user can set their default colourmap', async ({ page }) => {
@@ -274,11 +263,7 @@ test('user can set their default colourmap', async ({ page }) => {
   const response = await recordsPromise;
 
   await expect(tableThumbnail).toBeAttached();
-  expect(
-    await tableThumbnail.screenshot({
-      type: 'png',
-    })
-  ).toMatchSnapshot({
+  await expect(tableThumbnail).toHaveScreenshot({
     maxDiffPixels: 150,
   });
 
@@ -290,17 +275,9 @@ test('user can set their default colourmap', async ({ page }) => {
 
   await image.click();
 
-  expect(
-    await image.screenshot({
-      type: 'png',
-    })
-  ).toMatchSnapshot({ maxDiffPixels: 150 });
+  await expect(image).toHaveScreenshot({ maxDiffPixels: 150 });
 
-  expect(
-    await colourbar.screenshot({
-      type: 'png',
-    })
-  ).toMatchSnapshot();
+  await expect(colourbar).toHaveScreenshot();
 });
 
 test('user can use crosshairs mode and view intensity graphs', async ({
@@ -329,7 +306,7 @@ test('user can use crosshairs mode and view intensity graphs', async ({
     popup.getByRole('checkbox', { name: 'Centroid / Cross Hairs' })
   ).toBeChecked();
 
-  const charts = await popup.locator('.chartjs-chart');
+  const charts = await popup.locator('.plotly-chart');
   await expect(charts).toHaveCount(2);
   await expect(charts.first()).toBeVisible();
   await expect(charts.last()).toBeVisible();
@@ -345,14 +322,12 @@ test('user can use crosshairs mode and view intensity graphs', async ({
   await expect(popup.getByText(`Y FWHM: ${FWHMs[1]}`)).toBeVisible();
 
   // expect crosshairs to be drawn on image at the centroid & intensity plots to be drawn & positioned correctly
-  expect(
-    await popup.getByTestId('image-panel').screenshot({
-      type: 'png',
-      style:
-        // hide image controls panel & top buttons from the screenshot as it's not important
-        '[data-testid="image-controls-panel"], [aria-label="image actions"] { display: none !important; }',
-    })
-  ).toMatchSnapshot({ maxDiffPixels: 150 });
+  await expect(await popup.getByTestId('image-panel')).toHaveScreenshot({
+    maxDiffPixels: 150,
+    stylePath:
+      // hide image controls panel & top buttons from the screenshot as it's not important
+      path.join(__dirname, '..', 'screenshotIgnoreStyles.css'),
+  });
 
   // check that clicking the image changes the crosshairs position & causes a data fetch
   // for some reason playwright has an off by 1 error in the y-pos in chrome, it works fine when testing manually
@@ -366,14 +341,12 @@ test('user can use crosshairs mode and view intensity graphs', async ({
   await expect(popup.getByText(`X FWHM: ${newFWHMs[0]}`)).toBeVisible();
   await expect(popup.getByText(`Y FWHM: ${newFWHMs[1]}`)).toBeVisible();
 
-  expect(
-    await popup.getByTestId('image-panel').screenshot({
-      type: 'png',
-      style:
-        // hide image controls panel & top buttons from the screenshot as it's not important
-        '[data-testid="image-controls-panel"], [aria-label="image actions"] { display: none !important; }',
-    })
-  ).toMatchSnapshot({ maxDiffPixels: 150 });
+  await expect(await popup.getByTestId('image-panel')).toHaveScreenshot({
+    maxDiffPixels: 150,
+    stylePath:
+      // hide image controls panel & top buttons from the screenshot as it's not important
+      path.join(__dirname, '..', 'screenshotIgnoreStyles.css'),
+  });
 });
 
 test('user can export image', async ({ page }) => {

e2e/real/plotting.spec.ts

@@ -1,4 +1,9 @@
 import { test, expect } from '@playwright/test';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file
+const __dirname = path.dirname(__filename); // get the name of the directory
 
 test('plots a time vs channel graph', async ({ page }) => {
   await page.goto('/');
@@ -34,19 +39,15 @@ test('plots a time vs channel graph', async ({ page }) => {
   // wait for open settings button to be visible i.e. menu is fully closed
   await popup.locator('[aria-label="open settings"]').click({ trial: true });
 
-  const chart = await popup.locator('.chartjs-chart');
-  // need this to wait for canvas animations to execute
-  await popup.waitForTimeout(1000);
-
-  expect(
-    await chart.screenshot({
-      type: 'png',
-      style:
-        // hide plot buttons from the screenshot as it's not important & can mess up diffs
-        '[aria-label="plot actions"] { display: none !important; }',
-    })
+  const chart = await popup.locator('.plotly-chart');
+
+  await expect(chart).toHaveScreenshot({
     // 150 pixels would only be very minor changes, so it's safe to ignore
-  ).toMatchSnapshot({ maxDiffPixels: 150 });
+    maxDiffPixels: 150,
+    stylePath:
+      // hide plot buttons from the screenshot as it's not important & can mess up diffs
+      path.join(__dirname, '..', 'screenshotIgnoreStyles.css'),
+  });
 });
 
 test('plots a channel vs channel graph', async ({ page }) => {
@@ -90,16 +91,12 @@ test('plots a channel vs channel graph', async ({ page }) => {
   // wait for open settings button to be visible i.e. menu is fully closed
   await popup.locator('[aria-label="open settings"]').click({ trial: true });
 
-  const chart = await popup.locator('.chartjs-chart');
-  // need this to wait for canvas animations to execute
-  await popup.waitForTimeout(1000);
-
-  expect(
-    await chart.screenshot({
-      type: 'png',
-      style:
-        // hide plot buttons from the screenshot as it's not important & can mess up diffs
-        '[aria-label="plot actions"] { display: none !important; }',
-    })
-  ).toMatchSnapshot({ maxDiffPixels: 150 });
+  const chart = await popup.locator('.plotly-chart');
+
+  await expect(chart).toHaveScreenshot({
+    maxDiffPixels: 150,
+    stylePath:
+      // hide plot buttons from the screenshot as it's not important & can mess up diffs
+      path.join(__dirname, '..', 'screenshotIgnoreStyles.css'),
+  });
 });