Merge pull request #215 from ral-facilities/DSEGOG-125-false-colour

DSEGOG-125 DSEGOG-126 DSEGOG-127 false colour

e2e/images.spec.ts

@@ -66,7 +66,7 @@ test('user can zoom and pan the image', async ({ page }) => {
     await imageDiv.screenshot({
       type: 'png',
     })
-  ).toMatchSnapshot();
+  ).toMatchSnapshot({ maxDiffPixels: 150 });
 
   // test that multiple zoom levels work
   await imageDiv.dragTo(imageDiv, {
@@ -84,17 +84,113 @@ test('user can zoom and pan the image', async ({ page }) => {
     await imageDiv.screenshot({
       type: 'png',
     })
-  ).toMatchSnapshot();
+  ).toMatchSnapshot({ maxDiffPixels: 150 });
 
   await popup.locator('text=Reset View').click();
 
   expect(
     await imageDiv.screenshot({
       type: 'png',
     })
+  ).toMatchSnapshot({ maxDiffPixels: 150 });
+});
+
+test('user can change the false colour parameters of an image', async ({
+  page,
+}) => {
+  // open up popup
+  const [popup] = await Promise.all([
+    page.waitForEvent('popup'),
+    page.getByAltText('Channel_BCDEF image', { exact: false }).first().click(),
+  ]);
+
+  const title = await popup.title();
+  const imgAltText = title.split(' - ')[1];
+
+  const image = await popup.getByAltText(imgAltText);
+  const colourbar = await popup.getByAltText('Colour bar');
+
+  await popup.getByLabel('Colour Map').click();
+
+  await popup.getByRole('option', { name: 'colourmap_2' }).click();
+
+  const llSlider = await popup.getByRole('slider', {
+    name: 'Lower Level (LL)',
+  });
+  const llSliderRoot = await popup.locator('.MuiSlider-root', {
+    has: llSlider,
+  });
+
+  const sliderDims = await llSliderRoot.boundingBox();
+
+  await llSliderRoot.dragTo(llSliderRoot, {
+    targetPosition: {
+      // moving the slider to the target value in %
+      x: (sliderDims?.width ?? 0) * 0.4,
+      y: sliderDims?.height ? sliderDims.height / 2 : 0,
+    },
+  });
+
+  expect(await llSlider.getAttribute('value')).toBe(`${0.4 * 255}`);
+
+  const ulSlider = await popup.getByRole('slider', {
+    name: 'Upper Level (UL)',
+  });
+  const ulSliderRoot = await popup.locator('.MuiSlider-root', {
+    has: ulSlider,
+  });
+
+  await ulSliderRoot.click({
+    position: {
+      x: (sliderDims?.width ?? 0) * 0.6,
+      y: sliderDims?.height ? sliderDims.height / 2 : 0,
+    },
+  });
+
+  expect(await ulSlider.getAttribute('value')).toBe(`${0.6 * 255}`);
+  // blur to avoid focus tooltip appearing in snapshot
+  await ulSlider.blur();
+
+  // wait for new image to have loaded
+  await image.click();
+
+  expect(
+    await image.screenshot({
+      type: 'png',
+    })
+  ).toMatchSnapshot({ maxDiffPixels: 150 });
+
+  expect(
+    await colourbar.screenshot({
+      type: 'png',
+    })
   ).toMatchSnapshot();
 });
 
+test('user can disable false colour', async ({ page }) => {
+  // open up popup
+  const [popup] = await Promise.all([
+    page.waitForEvent('popup'),
+    page.getByAltText('Channel_BCDEF image', { exact: false }).first().click(),
+  ]);
+
+  const title = await popup.title();
+  const imgAltText = title.split(' - ')[1];
+
+  const image = await popup.getByAltText(imgAltText);
+
+  await popup.getByRole('checkbox', { name: 'False colour' }).click();
+
+  // wait for new image to have loaded
+  await image.click();
+
+  expect(
+    await image.screenshot({
+      type: 'png',
+    })
+  ).toMatchSnapshot({ maxDiffPixels: 150 });
+});
+
 test('user can change image via clicking on a thumbnail', async ({ page }) => {
   // open up popup
   const [popup] = await Promise.all([
@@ -126,7 +222,7 @@ test('user can change image via clicking on a thumbnail', async ({ page }) => {
               context.drawImage(img, 0, 0, canvas.width, canvas.height);
 
               // set composite mode
-              context.globalCompositeOperation = 'overlay';
+              context.globalCompositeOperation = 'color';
 
               // draw color
               context.fillStyle = '#f00';

package.json

@@ -23,6 +23,7 @@
     "@types/react-table": "7.7.12",
     "axios": "1.3.3",
     "date-fns": "2.29.1",
+    "hacktimer": "1.1.3",
     "history": "5.3.0",
     "i18next": "22.4.3",
     "i18next-browser-languagedetector": "7.0.0",

src/api/images.test.tsx

@@ -1,16 +1,23 @@
 import { waitFor } from '@testing-library/react';
 import { renderHook } from '@testing-library/react';
-import { hooksWrapperWithProviders } from '../setupTests';
-import { useImage } from './images';
-// import image from '../mocks/image.png';
+import { hooksWrapperWithProviders, waitForRequest } from '../setupTests';
+import { useColourBar, useColourMaps, useImage } from './images';
 
 describe('images api functions', () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
 
   describe('useImage', () => {
-    it('sends request to fetch image and returns successful response', async () => {
+    let params: URLSearchParams;
+
+    beforeEach(() => {
+      params = new URLSearchParams();
+    });
+
+    it('sends request to fetch original image and returns successful response', async () => {
+      const pendingRequest = waitForRequest('GET', '/images/1/TEST');
+
       const { result } = renderHook(() => useImage('1', 'TEST'), {
         wrapper: hooksWrapperWithProviders(),
       });
@@ -19,11 +26,131 @@ describe('images api functions', () => {
         expect(result.current.isSuccess).toBeTruthy();
       });
 
+      const request = await pendingRequest;
+
+      params.set('original_image', 'true');
+
       expect(result.current.data).toEqual('testObjectUrl');
+      expect(request.url.searchParams).toEqual(params);
+    });
+
+    it('sends request to fetch original image with empty false colour params and returns successful response', async () => {
+      const pendingRequest = waitForRequest('GET', '/images/1/TEST');
+
+      const { result } = renderHook(() => useImage('1', 'TEST', {}), {
+        wrapper: hooksWrapperWithProviders(),
+      });
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBeTruthy();
+      });
+
+      const request = await pendingRequest;
+
+      params.set('original_image', 'true');
+
+      expect(result.current.data).toEqual('testObjectUrl');
+      expect(request.url.searchParams).toEqual(params);
+    });
+
+    it('sends request to fetch false colour image and returns successful response', async () => {
+      const pendingRequest = waitForRequest('GET', '/images/1/TEST');
+
+      const { result } = renderHook(
+        () =>
+          useImage('1', 'TEST', {
+            colourMap: 'red',
+            lowerLevel: 5,
+            upperLevel: 200,
+          }),
+        {
+          wrapper: hooksWrapperWithProviders(),
+        }
+      );
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBeTruthy();
+      });
+
+      const request = await pendingRequest;
+
+      params.set('colourmap_name', 'red');
+      params.set('lower_level', '5');
+      params.set('upper_level', '200');
+
+      expect(result.current.data).toEqual('testObjectUrl');
+      expect(request.url.searchParams).toEqual(params);
     });
 
     it.todo(
       'sends axios request to fetch image and throws an appropriate error on failure'
     );
   });
+
+  describe('useColourBar', () => {
+    let params: URLSearchParams;
+
+    beforeEach(() => {
+      params = new URLSearchParams();
+    });
+
+    it('sends request to fetch colourbar and returns successful response', async () => {
+      const pendingRequest = waitForRequest('GET', '/images/colour_bar');
+
+      const { result } = renderHook(
+        () =>
+          useColourBar({
+            colourMap: 'red',
+            lowerLevel: 5,
+            upperLevel: 200,
+          }),
+        {
+          wrapper: hooksWrapperWithProviders(),
+        }
+      );
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBeTruthy();
+      });
+
+      const request = await pendingRequest;
+
+      params.set('colourmap_name', 'red');
+      params.set('lower_level', '5');
+      params.set('upper_level', '200');
+
+      expect(result.current.data).toEqual('testObjectUrl');
+      expect(request.url.searchParams).toEqual(params);
+    });
+
+    it.todo(
+      'sends axios request to fetch colourbar and throws an appropriate error on failure'
+    );
+  });
+
+  describe('useColourMaps', () => {
+    it('sends request to fetch colourmaps and returns successful response', async () => {
+      const { result } = renderHook(() => useColourMaps(), {
+        wrapper: hooksWrapperWithProviders(),
+      });
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBeTruthy();
+      });
+
+      expect(result.current.data).toEqual([
+        'colourmap_1',
+        'colourmap_2',
+        'colourmap_3',
+        'colourmap_4',
+        'colourmap_5',
+        'colourmap_6',
+        'colourmap_7',
+      ]);
+    });
+
+    it.todo(
+      'sends axios request to fetch colourmaps and throws an appropriate error on failure'
+    );
+  });
 });