Merge pull request #1213 from City-of-Helsinki/develop

Release v2.0.31

.dockerignore

@@ -1,7 +1,6 @@
 node_modules/
 dist/
 build/
-.env
 .env.example
 .travis.yml
 .docker-compose.yml

.env.example

@@ -67,6 +67,7 @@ FEATURE_SERVICEMAP_PAGE_TRACKING="false"
 # MATOMO_MOBILITY_DIMENSION_ID=
 # MATOMO_SENSES_DIMENSION_ID=
 # MATOMO_NO_RESULTS_DIMENSION_ID=
+# MATOMO_ENABLED=
 
 # If false SHOW_AREA_SELECTION hides area related functionality.
 # Defaulting to true.

.github/workflows/ci.yml

@@ -57,7 +57,7 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm install
+    - run: npm install --legacy-peer-deps
     - run: npm run testBuild
     - run: npm test
     - run: npm run browserTestCLI

Dockerfile

@@ -7,7 +7,7 @@ WORKDIR /servicemap-ui
 # A wildcard is used to ensure both package.json AND package-lock.json are copied
 # where available (npm@5+)
 COPY package*.json ./
-RUN npm install
+RUN npm install --legacy-peer-deps
 
 COPY . .
 RUN npm run build

README.md

@@ -38,19 +38,28 @@ Launches Jest test runner.<br>
 Launches TestCafe test runner and performs browser tests on headless chrome.<br>
 
 ### `npm run browserTestCLI`
-Launches the application using `node dist` command and then launches TestCafe test runner in headless mode. Mainly used by Travis CI.
+Launches the application using `node dist` command and then launches TestCafe test runner in headless mode. Mainly used in GitHub Actions.
 
 ## How to use
 For development: 
-- Make sure npm packages are installed by running `npm install`in project root.
+- Make sure npm packages are installed by running `npm install --legacy-peer-deps`in project root.
 - Make sure you have environment variables set. `.env.example` should have all required values so you can copy it to `.env`.
 - Then you can start development server using `npm run dev`. Which watches files and updates on code changes.
+- Open the application by loading `localhost:2048` in the browser
 
 To run in production mode:
-- Make sure npm packages are installed by running `npm install`in project root.
+- Make sure npm packages are installed by running `npm install --legacy-peer-deps`in project root.
 - Make sure you have environment variables set. `.env.example` should have all required values so you can copy it to `.env`.
 - Build files by running `npm run build`
-- Then you can just run the app with `npm start`
+- Then you can run the app with `npm start`
+- Open the application by loading `localhost:2048` in the browser
+
+To run with docker compose:
+- Install Docker if not installed, check that port `2048` is free, not occupied by running server.
+- Make sure you have environment variables set. `.env.example` should have all required values so you can copy it to `.env`.
+- Run `docker compose up`
+- Open the application by loading `localhost:2048` in the browser
+
 
 ## Environment variables
 This is a documentation (some day hopefully exhaustive) of environment variables and how to use them.

browserTests/.testcaferc.js

@@ -1,34 +1,8 @@
-const config = require('./config');
-const testcafe = require('testcafe');
-const { server } = config;
-
-async function setCookies(t) {
-  const afterOneYear = new Date();
-  afterOneYear.setDate(afterOneYear.getDate() + 365);
-  const url = await testcafe.ClientFunction(() => document.location.href)();
-  await t.setCookies({
-    name: 'city-of-helsinki-cookie-consents',
-    // value: '{"city-of-helsinki-cookie-consents":true,"matomo":false}',
-    value: '%7B%22city-of-helsinki-cookie-consents%22%3Atrue%2C%22matomo%22%3Atrue%7D',
-    domain: `${server.address}`,
-    path: '/',
-    expires: afterOneYear,
-    maxAge: 365 * 24 * 60 * 60,
-    secure: false,
-    httpOnly: false,
-    sameSite: 'Strict',
-  })
-    .navigateTo(url);
-}
-
 module.exports = {
-  hooks: {
-    test: {
-      before: async t => {
-        await setCookies(t);
-      },
-      after: async () => {
-      },
-    },
+  browsers: ["firefox:headless"], // Browsers to run tests on
+  skipJsErrors: true, // Ignores JavaScript errors
+  quarantineMode: {
+    successThreshold: 1,
+    attemptLimit: 10
   },
 }

browserTests/generic/browserTest.js

@@ -4,15 +4,16 @@ import { Selector } from 'testcafe';
 import { waitForReact } from 'testcafe-react-selectors';
 
 import { paletteDefault, paletteDark } from '../../src/themes'
-import { getBaseUrl, getLocation } from '../utility';
+import { acceptCookieConcent, getBaseUrl, getLocation } from '../utility';
 
 const siteRoot = `${getBaseUrl()}`;
 
 // TODO: move these to the related view folders
 fixture`General tests`
   .page`${siteRoot}/fi`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 test('Language does change', async (t) => {

browserTests/generic/mapTest.js

@@ -1,12 +1,13 @@
 import { waitForReact } from 'testcafe-react-selectors';
 import { Selector } from 'testcafe';
-import { getBaseUrl } from '../utility';
+import { acceptCookieConcent, getBaseUrl } from '../utility';
 
 /* eslint-disable */
 fixture`Map tests`
   .page`${getBaseUrl()}/fi`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 test.skip('Transit marker visible after zoom', async (t) => {
@@ -29,8 +30,9 @@ test.skip('Transit marker visible after zoom', async (t) => {
 
 fixture`Search unit geometry test`
   .page`${getBaseUrl()}/fi/search?q=latu`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 test('Unit geometry is drawn on map', async (t) => {
@@ -43,8 +45,9 @@ test('Unit geometry is drawn on map', async (t) => {
 
 fixture`Unit page geometry test`
   .page`${getBaseUrl()}/fi/unit/56544`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 test('Unit geometry is drawn on map', async (t) => {

browserTests/generic/navigationTest.js

@@ -1,6 +1,6 @@
 import { waitForReact } from 'testcafe-react-selectors';
 import { Selector } from 'testcafe';
-import { getBaseUrl } from '../utility';
+import { acceptCookieConcent, getBaseUrl } from '../utility';
 import {
   embedderToolButton,
   embedderToolCloseButton,
@@ -14,8 +14,9 @@ import {
 
 fixture`Navigation home page`
   .page`${getBaseUrl()}/fi`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 test('Should navigate to embedder tool', async (t) => {

browserTests/utility/focusIndicatorTest.js

@@ -1,4 +1,4 @@
-import { Selector, ClientFunction } from 'testcafe';
+import { ClientFunction, Selector } from 'testcafe';
 import { getContrast, getElementBG, getParentElementBG, getFocusedElement } from '../../src/utils/componentContrast';
 
 export default () => {

browserTests/utility/index.js

@@ -1,7 +1,16 @@
-import { ClientFunction } from 'testcafe';
+import { ClientFunction, Selector } from 'testcafe';
 
 const config = require('../config');
 
 export const getLocation = ClientFunction(() => document.location.href);
 
 export const getBaseUrl = () => `http://${config.server.address}:${config.server.port}`;
+
+export const acceptCookieConcent = async (t) => {
+  if (t) {
+    const cookieConsentApproveButton = Selector('button[data-testid="cookie-consent-approve-button"]');
+    await t
+      .expect(cookieConsentApproveButton.exists).ok('Cookie consent approve button should exist')
+      .click(cookieConsentApproveButton);
+  }
+}

browserTests/views/addressTest.js

@@ -1,15 +1,16 @@
 /* eslint-disable */
 import { Selector } from 'testcafe';
 import { ReactSelector, waitForReact } from 'testcafe-react-selectors';
-import { getBaseUrl, getLocation } from '../utility';
+import { acceptCookieConcent, getBaseUrl, getLocation } from '../utility';
 import { addressSearchBarInput } from '../utility/pageObjects';
 
 const testLocation = `${getBaseUrl()}/fi/address/helsinki/Topeliuksenkatu 27`;
 
 fixture`Address view test`
   .page`${testLocation}`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 test('AddressView does render correct view', async (t) => {

browserTests/views/areaTest.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import { Selector } from 'testcafe';
 import { waitForReact } from 'testcafe-react-selectors';
-import { getBaseUrl, getLocation } from '../utility';
+import { acceptCookieConcent, getBaseUrl, getLocation } from '../utility';
 import {
   accordionSelector,
   addressSearchBarInput,
@@ -12,8 +12,9 @@ import {
 
 fixture`Area view test`
   .page`${getBaseUrl()}/fi/area`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 const drawerButtons = Selector('[data-sm="ServiceTabComponent"]').find(accordionSelector);

browserTests/views/homeTest.js

@@ -1,15 +1,16 @@
 /* eslint-disable */
 import { Selector } from 'testcafe';
 import { waitForReact } from 'testcafe-react-selectors';
-import { getBaseUrl, getLocation } from '../utility';
+import { acceptCookieConcent, getBaseUrl, getLocation } from '../utility';
 import { feedbackButton, infoButton } from '../utility/pageObjects';
 
 const viewUrl = `${getBaseUrl()}/fi/`;
 
 fixture`Home view test`
   .page`${viewUrl}`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 test('Test home page navigation button clicks take user to correct pages', async (t) => {

browserTests/views/mobilityTreeTest.js

@@ -2,16 +2,17 @@ import { Selector } from 'testcafe';
 import { waitForReact } from 'testcafe-react-selectors';
 
 import finnish from '../../src/i18n/fi';
-import { getBaseUrl, getLocation } from '../utility';
+import { acceptCookieConcent, getBaseUrl, getLocation } from '../utility';
 import { treeSearchTest, treeViewAccordionTest } from '../utility/TreeViewTest';
 
 const searchBackButton = Selector('#SearchBar .SMBackButton');
 
 /* eslint-disable */
 fixture`Mobility tree page tests`
   .page`${getBaseUrl()}/fi/mobility`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
   treeViewAccordionTest();

browserTests/views/searchTest.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import { Selector } from 'testcafe';
 import { ReactSelector, waitForReact } from 'testcafe-react-selectors';
-import { getBaseUrl, getLocation } from '../utility';
+import { acceptCookieConcent, getBaseUrl, getLocation } from '../utility';
 import {
   addressSearchBarInput,
   cityDropdown,
@@ -30,8 +30,9 @@ const addressInput = Selector(addressSearchBarInput);
 
 fixture`Search view test`
   .page`${searchPage}`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 const searchUnits = async (t, search = 'uimastadion') => {
@@ -335,8 +336,9 @@ const cityChips = Selector(`${cityDropdown} ${settingChip}`);
 
 fixture`Search view custom url with city and org param test`
   .page`${homePage}`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 
@@ -425,8 +427,9 @@ test('Should not mess up organization settings between embedded and normal view'
 
 fixture`Search view custom url with accessibility param test`
   .page`${homePage}`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 
@@ -450,8 +453,9 @@ test('Should override accessibility settings', async(t) => {
 
 fixture`Search view should set settings to url test`
   .page`${homePage}`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 
@@ -484,8 +488,9 @@ test('Should set user settings to url', async(t) => {
 
 fixture`Search view should set home address with url test`
   .page`${homePage}/search?q=maauimala&hcity=helsinki&hstreet=Annankatu+12`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 // test('Should set home address from url', async(t) => {
@@ -497,8 +502,9 @@ fixture`Search view should set home address with url test`
 
 fixture`Search view should set map type with url test`
   .page`${homePage}/search?q=maauimala&hcity=helsinki&map=guidemap`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 test('Should set map type from url', async(t) => {

browserTests/views/serviceTest.js

@@ -1,6 +1,6 @@
 import { Selector } from 'testcafe';
 import { ReactSelector, waitForReact } from 'testcafe-react-selectors';
-import { getBaseUrl } from '../utility';
+import { acceptCookieConcent, getBaseUrl } from '../utility';
 
 import paginationTest from '../utility/paginationTest';
 import resultOrdererTest from '../utility/resultOrdererTest';
@@ -10,8 +10,9 @@ const coordinates = ['60.281936', '24.949933'];
 /* eslint-disable */
 fixture`Service page coordinate tests`
   .page`${getBaseUrl()}/fi/service/813?lat=${coordinates[0]}&lon=${coordinates[1]}`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });
 
 test('User marker is drawn on map based on coordinates', async (t) => {
@@ -27,8 +28,9 @@ const servicePage = `${getBaseUrl()}/fi/service/813`;
 
 fixture`Service page tests`
   .page`${servicePage}`
-  .beforeEach(async () => {
+  .beforeEach(async (t) => {
     await waitForReact();
+    await acceptCookieConcent(t);
   });