tests: add tests for scatter plot units and visual tests

Visual test makes sure function and identical scatter line plot look the same

tests/test_plotting.spec.mjs

@@ -586,4 +586,70 @@ test('test scatter plot y has inconsistent units', async ({ browserName }) => {
 
   await page.locator('#plot-expression-1-0 >> text=One or more of the y values has inconsistent units or a dimension error').waitFor({state: 'attached', timeout: 1000});  
 
+});
+
+test('test scatter plot inconsistent x user unit', async ({ browserName }) => {
+
+  await page.locator('#add-plot-cell').click();
+  await page.setLatex(1, String.raw`1\left\lbrack m\right\rbrack,\:2\left\lbrack m\right\rbrack=\left\lbrack s\right\rbrack,\left\lbrack mm\right\rbrack`, 0);
+
+  await page.waitForSelector('.status-footer', { state: 'detached' });
+
+  await page.locator('#plot-expression-1-0 >> text=All x-axis units must be compatible').waitFor({state: 'attached', timeout: 1000});  
+
+});
+
+test('test scatter plot inconsistent y user unit', async ({ browserName }) => {
+
+  await page.locator('#add-plot-cell').click();
+  await page.setLatex(1, String.raw`1\left\lbrack m\right\rbrack,\:2\left\lbrack m\right\rbrack=\left\lbrack mm\right\rbrack,\left\lbrack s\right\rbrack`, 0);
+
+  await page.waitForSelector('.status-footer', { state: 'detached' });
+
+  await page.locator('#plot-expression-1-0 >> text=Units Mismatch').waitFor({state: 'attached', timeout: 1000});  
+
+});
+
+test('Test visual comparison of function plot with identical scatter line plot', async ({ browserName }) => {
+
+  // create function plot with user units
+  await page.setLatex(0, String.raw`y_1=x_1`);
+
+  await page.locator('#add-plot-cell').click();
+  await page.setLatex(1, String.raw`y_1\left(0\left\lbrack mm\right\rbrack\le x_1\le1\left\lbrack m\right\rbrack\right)=\left\lbrack mm\right\rbrack`, 0);
+
+  await expect(page.locator('text=Updating...')).toBeHidden();
+  await expect(page.locator('g.trace.scatter')).toBeVisible();
+
+  let [download] = await Promise.all([
+    page.waitForEvent('download'),
+    page.locator('.modebar-btn').first().click()
+  ]);
+  const linearFunctionImageFile = `${browserName}_screenshot_plot_linear_with_user_units.png`;
+  fs.copyFileSync(await download.path(), path.join(screenshotDir, linearFunctionImageFile));
+
+  await page.setLatex(1, String.raw`\begin{bmatrix}0\left\lbrack m\right\rbrack\\ 1\left\lbrack m\right\rbrack\end{bmatrix},\begin{bmatrix}0\left\lbrack m\right\rbrack\\ 1\left\lbrack m\right\rbrack\end{bmatrix}\:as\:lines=\left\lbrack mm\right\rbrack,\:\left\lbrack mm\right\rbrack`, 0);
+
+  await page.waitForSelector('.status-footer', { state: 'detached' });
+  await expect(page.locator('g.trace.scatter')).toBeVisible();
+  [download] = await Promise.all([
+    page.waitForEvent('download'),
+    page.locator('.modebar-btn').first().click()
+  ]);
+  const scatterLinesImageFile = `${browserName}_screenshot_plot_scatter_lines_with_user_units.png`;
+  fs.copyFileSync(await download.path(), path.join(screenshotDir, scatterLinesImageFile));
+
+  await page.setLatex(1, String.raw`\begin{bmatrix}0\left\lbrack m\right\rbrack\\ 1\left\lbrack m\right\rbrack\end{bmatrix},\begin{bmatrix}0\left\lbrack m\right\rbrack\\ 1\left\lbrack m\right\rbrack\end{bmatrix}=\left\lbrack mm\right\rbrack,\:\left\lbrack mm\right\rbrack `, 0);
+
+  await page.waitForSelector('.status-footer', { state: 'detached' });
+  await expect(page.locator('g.trace.scatter')).toBeVisible();
+  [download] = await Promise.all([
+    page.waitForEvent('download'),
+    page.locator('.modebar-btn').first().click()
+  ]);
+  const scatterPointsImageFile = `${browserName}_screenshot_plot_scatter_points_with_user_units.png`;
+  fs.copyFileSync(await download.path(), path.join(screenshotDir, scatterPointsImageFile));
+
+  expect(compareImages(linearFunctionImageFile, scatterLinesImageFile)).toEqual(0);
+  expect(compareImages(scatterLinesImageFile, scatterPointsImageFile)).toBeGreaterThan(100);
 });