Feature/move cypress tests

.github/workflows/run-cypress.yml

@@ -0,0 +1,53 @@
+name: run cypress
+on:
+    push:
+        branches:
+            - master
+    pull_request:
+    workflow_dispatch:
+    # run at 6 hour UTC
+    schedule:
+      - cron: "0 6 * * *"
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        timeout-minutes: 30
+        continue-on-error: true
+        strategy:
+          matrix:
+            php: [php72]
+        env:
+          PROD_PHP: php72
+          DOCKER_COMPOSE:  docker compose -f docker-compose.yml -f docker-compose-${{matrix.php}}.yml
+        steps:
+            - name: Checkout
+              uses: actions/checkout@master
+            - name: chown some dirs
+              run: |
+                mkdir tmp vendor && sudo chown -R  33 app/ theme/ web/ tmp/ vendor/
+            - name: Build Docker environmnent
+              if: always()
+              run: |
+                cd docker &&
+                ${DOCKER_COMPOSE} up -d --build &&
+                docker compose exec -T --user www-data php-fpm.vm.openconext.org bash -c '
+                    SYMFONY_ENV=ci composer install --prefer-dist -n -o --ignore-platform-reqs && \
+                    ./app/console cache:clear --env=ci && \
+                    cd theme && CYPRESS_INSTALL_BINARY=0 yarn install --frozen-lockfile && EB_THEME=skeune yarn build
+                    '
+            - name: Run Cypress integration tests
+              if: always()
+              run: |
+                  cd docker && \
+                  docker compose exec -T --user www-data php-fpm.vm.openconext.org bash -c '
+                    EB_THEME=skeune ./theme/scripts/prepare-test.js
+                  ' && \
+                  docker compose exec -T cypress bash -c '
+                    cd e2e && yarn install && cypress run --spec cypress/integration/skeune/**/*.spec.js,cypress/integration/shared/*.spec.js --browser=chrome --headless
+                  ' && \
+                  docker compose exec -T --user www-data php-fpm.vm.openconext.org bash -c '
+                    EB_THEME=openconext ./theme/scripts/prepare-test.js
+                  ' && \
+                  docker compose exec -T cypress bash -c '
+                    cd e2e && cypress run --spec cypress/integration/openconext/**/*.spec.js --browser=chrome --headless
+                  '

.github/workflows/test-integration.yml

@@ -11,26 +11,17 @@ jobs:
     build:
         runs-on: ubuntu-latest
         timeout-minutes: 30
+        continue-on-error: true
         strategy:
           matrix:
-            php: [php72, php82]
+            # php82 is ready to run alongside the 72, but is not enabled now as the code is not 82 compatible yet
+            php: [php72]
         env:
           PROD_PHP: php72
           DOCKER_COMPOSE:  docker compose -f docker-compose.yml -f docker-compose-${{matrix.php}}.yml
         steps:
             - name: Checkout
               uses: actions/checkout@master
-            - name: Get Composer cache directory
-              id: composer-cache
-              run: |
-                echo "::set-output name=dir::$(composer config cache-files-dir)"
-            - name: Restore Composer cache
-              uses: actions/cache@v1
-              with:
-                path: ${{ steps.composer-cache.outputs.dir }}
-                key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
-                restore-keys: |
-                  ${{ runner.os }}-composer-
             - name: chown some dirs
               run: |
                 mkdir tmp vendor && sudo chown -R  33 app/ theme/ web/ tmp/ vendor/
@@ -42,7 +33,7 @@ jobs:
                 docker compose exec -T --user www-data php-fpm.vm.openconext.org bash -c '
                     SYMFONY_ENV=ci composer install --prefer-dist -n -o --ignore-platform-reqs && \
                     ./app/console cache:clear --env=ci && \
-                    cd theme && CYPRESS_INSTALL_BINARY=0 npm ci && EB_THEME=skeune npm run build
+                    cd theme && CYPRESS_INSTALL_BINARY=0 yarn install --frozen-lockfile && EB_THEME=skeune yarn build
                 '
             - name: Run code quality tests
               if: always()
@@ -100,37 +91,11 @@ jobs:
                       echo -e "\nTwig lint\n"  && \
                       app/console lint:twig theme/ && \
                       cd theme && \
-                      echo -e "\nNPM lint\n" && \
-                      npm run lint
-                  '
-              env:
-                  SYMFONY_ENV: ci
-            - name: Run Cypress integration tests
-              if: always()
-              run: |
-                  cd docker && \
-                  docker compose exec -T --user www-data php-fpm.vm.openconext.org bash -c '
-                    EB_THEME=skeune ./theme/scripts/prepare-test.js
-                  ' && \
-                  docker compose exec -T cypress bash -c '
-                    cypress run --spec cypress/integration/skeune/**/*.spec.js,cypress/integration/shared/*.spec.js --browser=electron --headless
-                  ' && \
-                  docker compose exec -T --user www-data php-fpm.vm.openconext.org bash -c '
-                    EB_THEME=openconext ./theme/scripts/prepare-test.js
-                  ' && \
-                  docker compose exec -T cypress bash -c '
-                    cypress run --spec cypress/integration/openconext/**/*.spec.js --browser=electron --headless
+                      echo -e "\nLint frontend assets\n" && \
+                      yarn lint
                   '
               env:
                   SYMFONY_ENV: ci
-#            - name: Run Cypress visual regression tests
-#              if: ${{ github.event_name == 'schedule' && matrix.php == env.PROD_PHP }}
-#              run: |
-#                  cd docker && docker compose exec -T cypress bash -c '
-#                      CYPRESS_integrationFolder=cypress/visual-regression cypress run --browser=chrome --headless
-#                  '
-#              env:
-#                  SYMFONY_ENV: ci
             - name: Show log on failure
               if: failure()
               run:  |

.gitignore

@@ -19,6 +19,7 @@ bin/ignore_me.php
 /app/config/config_local.yml
 .idea
 local-php-security-checker
+/tests/e2e/node_modules
 /languages/overrides.*.php
 /theme/node_modules
 /theme/.sass-cache

README.md

@@ -33,7 +33,7 @@ parameters:
 Next build the front-end assets for the selected theme.
 
 ```
-    (cd theme && npm ci && npm run build)
+    (cd theme && yarn install --frozen-lockfile && yarn build)
 ```
 
 Finally, when not in an environment with the debug flag enabled, you need to clear the cache. This will ensure the translations and templates are swapped out for the ones found in the new theme.
@@ -47,9 +47,10 @@ To setup the required tooling on the VM, the following steps might be useful:
     cd /opt/openconext/OpenConext-engineblock/theme
     sudo curl --silent --location https://rpm.nodesource.com/setup_11.x | sudo bash -
     sudo yum install nodejs
-    (npm ci && npm run build)
+    sudo npm install --global yarn
+    (yarn install --frozen-lockfile && yarn build)
 
-In addition to the npm scripts that are available to run (unit/e2e) tests and quality assurance, you can also use the
+In addition to the npm/yarn scripts that are available to run (unit/e2e) tests and quality assurance, you can also use the
 Twig linting tool built into Symfony. To run this linter:
 
 ```
@@ -73,7 +74,7 @@ $ php72 ./app/console lint:twig theme/
     - default-collation=utf8_unicode_ci
 * [Manage][manage]
 * Composer (for php dendency management)
-* NPM (optional for theme deployment)
+* Yarn (optional for theme deployment)
 
 _**Note**:
 While care was given to make EngineBlock as compliant as possible with mainstream Linux distributions,

docker/docker-compose.yml

@@ -53,7 +53,7 @@ services:
             db-test.vm.openconext.org:
                 condition: service_healthy
         extra_hosts:
-          engine.vm.openconext.org: 127.0.0.1
+          - 'engine.vm.openconext.org: 127.0.0.1'
         environment:
           APP_ENV: ci
           SYMFONY_ENV: ci
@@ -77,13 +77,14 @@ services:
             interval: 15s
 
     cypress:
-        image: "cypress/included:5.6.0"
+        image: "cypress/included:13.1.0"
         environment:
             - CYPRESS_baseUrl=https://engine.vm.openconext.org
         working_dir: /e2e
         entrypoint: cypress open --project .
         volumes:
-            - ../theme:/e2e
+            - ../tests:/e2e
+            - ../theme:/theme
 
 volumes:
     eb-mysql-data:

docs/js_testing.md

@@ -63,7 +63,7 @@ parameters can be used to manipulate the behaviour of the wayf that is rendered.
 |feedbackInfo|Format: `JSON`<br>Value:`{"requestId":"5cb4bd3879b49","ipAddress":"192.168.66.98","artCode":"31914"}`|Can be filled with any parameter that can be rendered in the feedback information section of the feedback page.|
 |parameters|Format: `JSON`<br>Value:`{}`|Some templates might require additional twig parameters, this parameter allows you to pass these additional parameters in JSON format.|
 
-For a list of realistic reproductions of the available error pages, see this JavasScript test: `theme/cypress/integration/visual-regression/error-page/ErrorPage.spec.js`
+For a list of realistic reproductions of the available error pages, see this JavasScript test: `tests/e2e/cypress/integration/visual-regression/error-page/ErrorPage.spec.js`
 
 ### Consent
 The consent screen is available on: `/functional-testing/consent`
@@ -92,7 +92,7 @@ or if you prefer the cypress CLI
 `$ EB_THEME=theme_name npm run test:visual-regression`
 Do note that you need to set the EB_THEME env variable before running the tests!
 
-Snapshots are stored in `__image_snapshots__` directories in a subfolder of the `theme/cypress/integration/visual-regression/theme_name` directory, here you will also find diffs if ever your snapshot diverges from the previous snapshot.
+Snapshots are stored in `__image_snapshots__` directories in a subfolder of the `tests/e2e/cypress/integration/visual-regression/theme_name` directory, here you will also find diffs if ever your snapshot diverges from the previous snapshot.
 
 :warning: These tests are considered risky tests and are not run on every QA build.
 

tests/e2e/cypress.config.js

@@ -0,0 +1,55 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+
+  e2e: {
+    excludeSpecPattern: [
+      "**/__snapshots__/*",
+      "**/__image_snapshots__/*",
+      "**/unit-tests/**"
+    ],
+    screenshotOnRunFailure: false,
+    setupNodeEvents: function (on, config) {
+      const htmlvalidate = require('cypress-html-validate/plugin');
+
+      htmlvalidate.install(on, {
+        "rules": {
+          "prefer-button": "off",
+          "prefer-native-element": ["error", {
+            "exclude": ["button"],
+          }],
+          "require-sri": ["error", {
+            "target": "crossorigin",
+          }],
+        },
+      });
+
+      module.exports = (on, config) => {
+
+        // debug a11y in ci
+        on('task', {
+          log(message) {
+            console.log(message);
+
+            return null;
+          },
+          table(message) {
+            console.table(message);
+
+            return null;
+          },
+          'htmlvalidate:options'(opts) {
+            console.log(opts);
+            return null;
+
+          }
+        });
+
+        return config;
+      };
+
+    },
+    specPattern: "./cypress/integration/**/*.spec.js",
+    "video": false
+  },
+});

theme/cypress/integration/openconext/wayf/UnconnectedIdpPicker.spec.js → tests/e2e/cypress/integration/openconext/wayf/UnconnectedIdpPicker.spec.js

@@ -1,4 +1,4 @@
-import {UnconnectedIdpPicker} from "../../../../openconext/javascripts/wayf/UnconnectedIdpPicker";
+import {UnconnectedIdpPicker} from "../../../../../../theme/openconext/javascripts/wayf/UnconnectedIdpPicker";
 
 it('Check if the UnconnectedIdpPicker constructor was called', () => {
     const unconnectedIdpPicker = new UnconnectedIdpPicker(null, null, null);

theme/cypress/integration/shared/consent.a11y.spec.js → tests/e2e/cypress/integration/shared/consent.a11y.spec.js

@@ -1,13 +1,11 @@
-import {terminalLog} from '../../functions/terminalLog';
-
 context('Consent verify a11y', () => {
   beforeEach(() => {
     cy.visit('https://engine.vm.openconext.org/functional-testing/consent');
   });
 
   it('contains no a11y problems on load', () => {
     cy.injectAxe();
-    cy.checkA11y(null, null, terminalLog);
+    cy.checkA11y();
   });
 
   it('contains no html errors', () => {

theme/cypress/integration/shared/cookieRemoval.a11y.spec.js → tests/e2e/cypress/integration/shared/cookieRemoval.a11y.spec.js

@@ -1,5 +1,3 @@
-import {terminalLog} from '../../functions/terminalLog';
-
 /**
  * This doesn't run in CI, which is why it's skipped.  You can run it locally by setting the wayf.remember_choice flag to true in parameters.yml.
  */
@@ -10,7 +8,7 @@ context.skip('Cookie removal page verify a11y', () => {
 
   it('contains no a11y problems on load', () => {
     cy.injectAxe();
-    cy.checkA11y(null, null, terminalLog);
+    cy.checkA11y();
   });
 
   it('contains no html errors', () => {

theme/cypress/integration/shared/error.a11y.spec.js → tests/e2e/cypress/integration/shared/error.a11y.spec.js

@@ -1,11 +1,9 @@
-import {terminalLog} from '../../functions/terminalLog';
-
 context('Error pages verify a11y', () => {
   it('Unknown error page contains no a11y problems on load', () => {
     cy.visit('https://engine.vm.openconext.org/feedback/unknown-error', {failOnStatusCode: false
     });
     cy.injectAxe();
-    cy.checkA11y(null, null, terminalLog);
+    cy.checkA11y();
   });
 
   it('Unknown error page contains no html errors', () => {
@@ -18,7 +16,7 @@ context('Error pages verify a11y', () => {
     cy.visit('https://engine.vm.openconext.org/functional-testing/a;dkfj;ad', {failOnStatusCode: false
     });
     cy.injectAxe();
-    cy.checkA11y(null, null, terminalLog);
+    cy.checkA11y();
   });
 
   it('404 page contains no html errors', () => {

theme/cypress/integration/shared/index.a11y.spec.js → tests/e2e/cypress/integration/shared/index.a11y.spec.js

@@ -1,5 +1,3 @@
-import {terminalLog} from '../../functions/terminalLog';
-
 context('Index verify a11y', () => {
   beforeEach(() => {
     cy.visit('https://engine.vm.openconext.org/');
@@ -8,7 +6,7 @@ context('Index verify a11y', () => {
 
   it('Index contains no a11y problems on load', () => {
     cy.injectAxe();
-    cy.checkA11y(null, null, terminalLog);
+    cy.checkA11y();
   });
 
   it('Index contains no html errors', () => {

theme/cypress/integration/shared/logout.a11y.spec.js → tests/e2e/cypress/integration/shared/logout.a11y.spec.js

@@ -1,11 +1,9 @@
-import {terminalLog} from '../../functions/terminalLog';
-
 context('Logout page verify a11y', () => {
   it('Logout page contains no a11y problems on load', () => {
     cy.visit('https://engine.vm.openconext.org/logout', {failOnStatusCode: false
     });
     cy.injectAxe();
-    cy.checkA11y(null, null, terminalLog);
+    cy.checkA11y();
   });
 
   it('Logout page contains no html errors', () => {

theme/cypress/integration/shared/wayf.a11y.spec.js → tests/e2e/cypress/integration/shared/wayf.a11y.spec.js

@@ -1,13 +1,11 @@
-import {terminalLog} from '../../functions/terminalLog';
-
 context('Wayf verify a11y', () => {
   beforeEach(() => {
     cy.visit('https://engine.vm.openconext.org/functional-testing/wayf');
   });
 
   it('contains no a11y problems on load', () => {
     cy.injectAxe();
-    cy.checkA11y(null, null, terminalLog);
+    cy.checkA11y();
   });
 
   it('contains no html errors', () => {

theme/cypress/integration/skeune/consent/consent.general.spec.js → tests/e2e/cypress/integration/skeune/consent/consent.general.spec.js

@@ -1,4 +1,4 @@
-import {attributesSelector, siteNoticeSelector} from '../../../../base/javascripts/selectors';
+import {attributesSelector, siteNoticeSelector} from '../../../../../../theme/base/javascripts/selectors';
 import {attribute6, labelSelector, nokSectionTitleSelector, tooltip3Selector} from '../testSelectors';
 
 context('Consent on Skeune theme', () => {
@@ -24,11 +24,11 @@ context('Consent on Skeune theme', () => {
     it('Hides the tooltip on load', () => {
       cy.get(tooltip3Selector)
         .next()
-        .should('not.be.visible');
+        .should('not.exist');
     });
 
     it('Should not show the nok-modal on load', () => {
-      cy.notBeVisible(nokSectionTitleSelector);
+      cy.notExistOrVisible(nokSectionTitleSelector);
     });
   });
 

theme/cypress/integration/skeune/consent/consent.keyboard.spec.js → tests/e2e/cypress/integration/skeune/consent/consent.keyboard.spec.js

@@ -1,5 +1,5 @@
 import {attribute6, labelSelector, primaryTooltip3Selector} from '../testSelectors';
-import {backButtonSelector, contentSectionSelector, nokButtonSelectorForKeyboard, nokSectionSelector} from '../../../../base/javascripts/selectors';
+import {backButtonSelector, contentSectionSelector, nokButtonSelectorForKeyboard, nokSectionSelector} from '../../../../../../theme/base/javascripts/selectors';
 
 /**
  * Tests for behaviour of the consent screen which depends on the keyboard.