Merge pull request #300 from ral-facilities/DSEGOG-126-colourmap-pref…

…erence

DSEGOG-126 user preferred colourmap

.env.production

@@ -1 +1,2 @@
-REACT_APP_OPERATIONSGATEWAY_BUILD_DIRECTORY=/
+REACT_APP_OPERATIONSGATEWAY_BUILD_DIRECTORY=/
+REACT_APP_E2E_TESTING=false

.github/workflows/playwright.yml

@@ -17,16 +17,16 @@ jobs:
           node-version: 20
           cache: 'yarn'
 
-      - name: Build Playwright environment
-        run: docker build --tag playwright-test --file Dockerfile.playwright .
+      - name: Install dependencies
+        run: yarn --immutable
 
       - name: Run playwright tests
-        run: docker run --env CI=true --volume $PWD/playwright-report:/app/playwright-report playwright-test
+        run: yarn playwright:test
 
       - name: Upload test report
         uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3
         if: always()
         with:
           name: playwright-report
           path: playwright-report/
-          retention-days: 30
+          retention-days: 10

craco.config.js

@@ -6,7 +6,10 @@ module.exports = {
         'react-dom': 'ReactDOM', // Case matters here
       };
 
-      if (env === 'production' && !process.env.REACT_APP_E2E_TESTING) {
+      if (
+        env === 'production' &&
+        process.env.REACT_APP_E2E_TESTING !== 'true'
+      ) {
         webpackConfig.output.library = 'operationsgateway';
         webpackConfig.output.libraryTarget = 'window';
 

cypress/e2e/sessions.cy.ts

@@ -18,6 +18,7 @@ describe('Sessions', () => {
     cy.clearMocks();
   });
   it('sends a posts a request when a user session is created', () => {
+    cy.findByTestId('AddCircleIcon').should('exist');
     cy.window().then((window) => {
       // Reference global instances set in "src/mocks/browser.js".
       const { worker, rest } = window.msw;

cypress/e2e/table.cy.ts

@@ -248,6 +248,8 @@ describe('Table Component', () => {
 
   describe('can set max shots', () => {
     it('50 shots', () => {
+      cy.get('span[aria-label="Select unlimited max shots"]').should('exist');
+
       cy.window().then((window) => {
         // Reference global instances set in "src/mocks/browser.js".
         const { worker, rest } = window.msw;
@@ -263,6 +265,8 @@ describe('Table Component', () => {
     });
 
     it('1000 shots', () => {
+      cy.get('span[aria-label="Select unlimited max shots"]').should('exist');
+
       cy.window().then(async (window) => {
         // Reference global instances set in "src/mocks/browser.js".
         const { worker, rest } = window.msw;
@@ -280,6 +284,8 @@ describe('Table Component', () => {
     });
 
     it('unlimited shots', () => {
+      cy.get('span[aria-label="Select unlimited max shots"]').should('exist');
+
       cy.window().then((window) => {
         // Reference global instances set in "src/mocks/browser.js".
         const { worker, rest } = window.msw;

e2e/images.spec.ts

@@ -403,5 +403,52 @@ test('user can change image via clicking on a thumbnail', async ({ page }) => {
     await canvas.screenshot({
       type: 'png',
     })
+  ).toMatchSnapshot({ maxDiffPixels: 150 });
+});
+
+test('user can set their default colourmap', async ({ page }) => {
+  await page.evaluate(() => {
+    const div = document.createElement('div');
+    div.id = 'settings';
+    const ul = document.createElement('ul');
+    div.appendChild(ul);
+    document.body.appendChild(div);
+  });
+
+  await page
+    .getByRole('combobox', {
+      name: 'Default Colour Map',
+    })
+    .click();
+  await page
+    .getByRole('option', {
+      name: 'inferno',
+    })
+    .click();
+
+  // 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 image.click();
+
+  expect(
+    await image.screenshot({
+      type: 'png',
+    })
+  ).toMatchSnapshot({ maxDiffPixels: 150 });
+
+  expect(
+    await colourbar.screenshot({
+      type: 'png',
+    })
   ).toMatchSnapshot();
 });

package.json

@@ -55,12 +55,10 @@
     "lint:js": "eslint --max-warnings=0 --ext=tsx --ext=ts --ext=js --ext=jsx --fix ./src",
     "start": "craco start",
     "build": "craco build",
-    "build:playwright-docker": "docker build --tag operations-gateway-playwright-test --file Dockerfile.playwright .",
     "serve:build": "yarn build && serve -l 5001 build",
     "test": "craco test --env=jsdom --coverage --watchAll=false",
     "test:watch": "craco test --env=jsdom --watch",
-    "playwright:test": "yarn build:playwright-docker && docker run --env LOCAL_DOCKER=true --volume ./playwright-report:/app/playwright-report --publish 9323:9323 operations-gateway-playwright-test",
-    "playwright:update-snapshot": "yarn build:playwright-docker && docker run --env LOCAL_DOCKER=true --volume .:/app --publish 9323:9323 operations-gateway-playwright-test --update-snapshots",
+    "playwright:test": "docker run -v $PWD:/test -w=/test -e CI $(node -e \"if(process.env.CI !== 'true'){console.log('-it -u pwuser')}else{console.log('-e CI')}\") --rm --ipc=host -p 9323:9323 --add-host host.docker.internal:host-gateway mcr.microsoft.com/playwright:v$(yarn info @playwright/test --name-only --json | sed -n 's/^.*:\\(.*\\)\"$/\\1/p') yarn playwright test",
     "eject": "react-scripts eject",
     "build:e2e": "cross-env REACT_APP_E2E_TESTING=true GENERATE_SOURCEMAP=false craco build",
     "e2e-test-server": "node ./server/e2e-test-server.js",
@@ -69,7 +67,7 @@
     "e2e": "start-server-and-test e2e:serve http://localhost:3000 cy:run",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
-    "postinstall": "husky install & yarn dlx @yarnpkg/sdks"
+    "postinstall": "husky install && yarn dlx @yarnpkg/sdks"
   },
   "lint-staged": {
     "src/**/*.{tsx,ts,js,jsx}": [
@@ -131,6 +129,7 @@
     "express": "4.18.1",
     "husky": "8.0.1",
     "jest-canvas-mock": "2.5.0",
+    "jest-fail-on-console": "3.1.1",
     "lint-staged": "13.2.2",
     "msw": "1.3.2",
     "prettier": "3.0.3",

playwright.config.ts

@@ -32,18 +32,15 @@ const config: PlaywrightTestConfig = {
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   // use 0.0.0.0 loopback address when running the tests in a local docker container
   // so that the report URL is accessible via host localhost:9323.
-  reporter: process.env.LOCAL_DOCKER
-    ? [
-        [
-          'html',
-          {
-            open: 'never',
-            host: '0.0.0.0',
-            port: 9323,
-          },
-        ],
-      ]
-    : 'html',
+  reporter: [
+    [
+      'html',
+      {
+        host: '0.0.0.0',
+        port: 9323,
+      },
+    ],
+  ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
@@ -123,8 +120,9 @@ const config: PlaywrightTestConfig = {
     command: 'yarn e2e:serve',
     url: 'http://localhost:3000',
     timeout: 180 * 1000,
+    stdout: 'pipe',
     // this option means that we can serve our server ourselves and Playwright will reuse it during development
-    reuseExistingServer: !process.env.CI,
+    reuseExistingServer: true,
   },
 };
 

server/e2e-test-server.js

@@ -27,7 +27,7 @@ app.get('/*', function (req, res) {
   res.sendFile(path.resolve('./build/index.html'));
 });
 
-var server = app.listen(3000, function () {
+var server = app.listen(3000, '0.0.0.0', function () {
   var port = server.address().port;
   console.log('E2E test server listening at http://localhost:%s', port);
 });

src/App.tsx

@@ -11,6 +11,7 @@ import { store, RootState } from './state/store';
 import { connect, Provider } from 'react-redux';
 import Preloader from './preloader/preloader.component';
 import './App.css';
+import SettingsMenuItems from './settingsMenuItems.component';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -71,6 +72,7 @@ const App: React.FunctionComponent = () => {
                 {/* Open windows is it's own component so that the open windows are always mounted
                   no matter which other components the user has mounted in ViewTabs etc. */}
                 <OpenWindows />
+                <SettingsMenuItems />
               </React.Suspense>
             </ConnectedPreloader>
             <ReactQueryDevtools initialIsOpen={false} />