feat: refs #6695 run front

Dockerfile

@@ -2,5 +2,5 @@ FROM node:stretch-slim
 RUN corepack enable pnpm
 RUN pnpm install -g @quasar/cli
 WORKDIR /app
-COPY dist/spa ./
+COPY dist/spa proxy.mjs ./
 CMD ["quasar", "serve", "./", "--history", "--hostname", "0.0.0.0"]

Dockerfile.e2e

@@ -0,0 +1,44 @@
+FROM node:lts-bookworm
+ENV SHELL bash
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN npm install -g pnpm@8.15.1
+RUN pnpm setup
+
+RUN pnpm install -g @quasar/cli@2.2.1
+
+RUN apt-get -y  --fix-missing update
+RUN apt-get -y  --fix-missing upgrade
+RUN apt-get -y --no-install-recommends install apt-utils
+RUN apt-get install --fix-missing -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+
+WORKDIR /app
+
+COPY \
+    package.json \
+    .npmrc \
+    pnpm-lock.yaml \
+    ./
+
+RUN pnpm install
+RUN pnpm install cypress
+RUN npx cypress install
+
+COPY \
+    quasar.config.js \
+    index.html \
+    jsconfig.json \
+    quasar.extensions.json \
+    .eslintignore \
+    .eslintrc.cjs \
+    postcss.config.js \
+    cypress.config.js \
+    ./
+
+COPY src src
+COPY test/cypress test/cypress
+COPY public public
+
+# RUN npx quasar build
+
+CMD ["npx", "quasar", "dev"]

Jenkinsfile

@@ -64,15 +64,66 @@ pipeline {
                 sh 'pnpm install --prefer-offline'
             }
         }
-        stage('Test') {
+        // UNCOMMENT ME!
+        // stage('Test') {
+        //     when {
+        //         expression { !PROTECTED_BRANCH }
+        //     }
+        //     environment {
+        //         NODE_ENV = ""
+        //     }
+        //     steps {
+        //         sh 'pnpm run test:unit:ci'
+        //     }
+        //       post {
+        //         always {
+        //             junit(
+        //                 testResults: 'junitresults.xml',
+        //                 allowEmptyResults: true
+        //             )
+        //         }
+        //     }
+        // }
+        stage('E2E') {
             when {
                 expression { !PROTECTED_BRANCH }
             }
             environment {
-                NODE_ENV = ""
+                CREDENTIALS = credentials('docker-registry')
+                IMAGE = "$REGISTRY/salix-back"
             }
             steps {
-                sh 'pnpm run test:unit:ci'
+                script {
+                    def packageJson = readJSON file: 'package.json'
+                    env.VERSION = "${packageJson.version}-e2e${env.BUILD_ID}"
+                }
+                // // sh 'docker pull $IMAGE:dev'
+                // sh 'git clone https://gitea.verdnatura.es/verdnatura/salix.git'
+                // // sh 'docker ps -a'
+                // sh 'docker network create salix_default'
+                // sh 'docker-compose -f docker-compose.yml build db'
+                // sh 'docker-compose -f docker-compose.yml up db'
+                // sh 'docker run --name back $IMAGE:dev'
+                sh 'rm -rf salix'
+                sh 'docker-compose down'
+                sh 'docker-compose rm'
+                // sh 'docker rm -f back'
+                // sh 'docker rm -f db'
+                // sh 'docker rm -f front'
+                // sh 'docker rm -f e2e'
+                sh 'git clone --branch dev https://gitea.verdnatura.es/verdnatura/salix.git'
+                // sh 'cd front'
+                // sh '# export VERSION=e2e-try'
+                // sh 'docker build -f salix/back/Dockerfile -t back ./salix'
+                sh 'quasar build'
+                sh 'docker-compose -f docker-compose.e2e.yml build front'
+                sh 'docker-compose -f docker-compose.e2e.yml up front'
+                // sh 'pnpm i @verdnatura/myt'
+                // sh 'cd salix && npx myt run -t --ci -d -n front_default'
+                // // sh 'docker-compose -f docker-compose.e2e.yml up --build db'
+                // sh 'docker run --net=host -v ./test/cypress/storage:/salix/storage -d back'
+                // sh 'docker-compose -f docker-compose.e2e.yml up e2e'
+
             }
               post {
                 always {

cypress.config.js

@@ -9,7 +9,7 @@ module.exports = defineConfig({
         supportFile: 'test/cypress/support/index.js',
         videosFolder: 'test/cypress/videos',
         video: false,
-        specPattern: 'test/cypress/integration/**/*.spec.js',
+        specPattern: 'test/cypress/integration/claim/*.spec.js',
         experimentalRunAllSpecs: true,
         component: {
             componentFolder: 'src',

dind.sh

@@ -0,0 +1,12 @@
+docker stop dind-container || true && docker rm dind-container || true
+docker run --privileged -d \
+  -p 2376:2376 \
+  -e DOCKER_TLS_CERTDIR="" \
+  --name dind-container \
+  -v /home/alexm/Projects/salix-front:/front \
+  docker:dind \
+  dockerd -H tcp://0.0.0.0:2376 -H unix:///var/run/docker.sock
+
+docker exec -it dind-container sh
+
+

docker-compose.e2e.yml

@@ -0,0 +1,44 @@
+services:
+    front:
+        image: registry.verdnatura.es/salix-frontend:${VERSION:?}
+        command: quasar serve --history --proxy ./proxy.mjs --hostname localhost --port 9000
+        build:
+            context: .
+            dockerfile: ./Dockerfile
+        network_mode: host
+    e2e:
+        image: registry.verdnatura.es/salix-frontend:${VERSION:?}
+        command: npx cypress run
+        build:
+            context: .
+            dockerfile: ./Dockerfile.e2e
+        network_mode: host
+    # db:
+    #     image: db
+    #     command: npx myt run -t --ci -d -n front_default
+    #     build:
+    #         context: .
+    #         dockerfile: test/cypress/db/Dockerfile
+    #     network_mode: host
+    #     volumes:
+    #         - /var/run/docker.sock:/var/run/docker.sock
+
+    # back:
+    #     image: back
+    #     build:
+    #         context: ./salix
+    #         dockerfile: salix/back/Dockerfile
+    #     # depends_on:
+    #     #     - db
+    #     ports:
+    #         - 3000:3000
+    #         - 5000:5000
+    #     volumes:
+    #         - ./test/cypress/storage:/salix/storage
+
+    # e2e-2:
+    #     image: registry.verdnatura.es/salix-frontend:${VERSION:?}
+    #     command: npx cypress run --config-file test/cypress/configs/cypress.config.2.js
+    #     build:
+    #         context: .
+    #         dockerfile: ./Dockerfile.e2e

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3.7'
 services:
-  main:
-    image: registry.verdnatura.es/salix-frontend:${VERSION:?}
-    build:
-      context: .
-      dockerfile: ./Dockerfile
+    main:
+        image: registry.verdnatura.es/salix-frontend:${VERSION:?}
+        build:
+            context: .
+            dockerfile: ./Dockerfile

e2e.sh

@@ -0,0 +1,13 @@
+git clone --branch dev https://gitea.verdnatura.es/verdnatura/salix.git
+cd front
+export VERSION=e2e-try
+# docker buildx build -f salix/back/Dockerfile -t back ./salix
+# pnpm i @verdnatura/myt
+# cd salix && npx myt run -t --ci -d -n front_default
+# docker run --net=host -v ./test/cypress/storage:/salix/storage -d back
+# docker-compose -f docker-compose.e2e.yml -d up front
+# docker-compose -f docker-compose.e2e.yml up e2e --build
+
+docker-compose -f docker-compose.e2e.yml up front --build -d
+docker-compose -f docker-compose.e2e.yml up e2e --build
+

pnpm-lock.yaml

@@ -829,8 +829,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/message-compiler': 10.0.0-beta.5
-      '@intlify/shared': 10.0.0-beta.5
+      '@intlify/message-compiler': 10.0.0
+      '@intlify/shared': 10.0.0
       jsonc-eslint-parser: 1.4.1
       source-map: 0.6.1
       vue-i18n: 9.9.1(vue@3.4.19)
@@ -844,11 +844,11 @@ packages:
       '@intlify/message-compiler': 9.9.1
       '@intlify/shared': 9.9.1
 
-  /@intlify/message-compiler@10.0.0-beta.5:
-    resolution: {integrity: sha512-hLLchnM1dmtSEruerkzvU9vePsLqBXz3RU85SCx/Vd12fFQiymP+/5Rn9MJ8MyfLmIOLDEx4PRh+/GkIQP6oog==}
+  /@intlify/message-compiler@10.0.0:
+    resolution: {integrity: sha512-OcaWc63NC/9p1cMdgoNKBj4d61BH8sUW1Hfs6YijTd9656ZR4rNqXAlRnBrfS5ABq0vjQjpa8VnyvH9hK49yBw==}
     engines: {node: '>= 16'}
     dependencies:
-      '@intlify/shared': 10.0.0-beta.5
+      '@intlify/shared': 10.0.0
       source-map-js: 1.0.2
     dev: true
 
@@ -859,8 +859,8 @@ packages:
       '@intlify/shared': 9.9.1
       source-map-js: 1.0.2
 
-  /@intlify/shared@10.0.0-beta.5:
-    resolution: {integrity: sha512-g9bq5Y1bOcC9qxtNk4UWtF3sXm6Wh0fGISb7vD5aLyF7yQv7ZFjxQjJzBP2GqG/9+PAGYutqjP1GGadNqFtyAQ==}
+  /@intlify/shared@10.0.0:
+    resolution: {integrity: sha512-6ngLfI7DOTew2dcF9WMJx+NnMWghMBhIiHbGg+wRvngpzD5KZJZiJVuzMsUQE1a5YebEmtpTEfUrDp/NqVGdiw==}
     engines: {node: '>= 16'}
     dev: true
 
@@ -884,7 +884,7 @@ packages:
         optional: true
     dependencies:
       '@intlify/bundle-utils': 4.0.0(vue-i18n@9.9.1)
-      '@intlify/shared': 10.0.0-beta.5
+      '@intlify/shared': 10.0.0
       '@rollup/pluginutils': 4.2.1
       '@vue/compiler-sfc': 3.4.19
       debug: 4.3.4(supports-color@8.1.1)

proxy.mjs

@@ -0,0 +1,6 @@
+export default [
+    {
+        path: '/api',
+        rule: { target: 'http://localhost:3000' },
+    },
+];

quasar.config.js

@@ -109,7 +109,7 @@ module.exports = configure(function (/* ctx */) {
             },
             proxy: {
                 '/api': {
-                    target: 'http://0.0.0.0:3000',
+                    target: 'http://localhost:3000',
                     logLevel: 'debug',
                     changeOrigin: true,
                     secure: false,

test/cypress/.gitignore

@@ -1,2 +1,3 @@
 videos/*
-screenshots/*
+screenshots/*
+storage/*

test/cypress/db/Dockerfile

@@ -0,0 +1,18 @@
+FROM node:lts-bookworm
+ENV SHELL bash
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN npm install -g pnpm@8.15.1
+RUN pnpm setup
+RUN apt install libkrb5-dev libssl-dev
+RUN npm i -g pnpm
+
+WORKDIR /salix
+
+COPY salix/db db
+COPY salix/myt.config.yml .
+COPY salix/.git .git
+
+# COPY node_modules node_modules
+RUN pnpm i @verdnatura/myt
+

test/cypress/integration/claim/claimPhoto.spec.js

@@ -22,14 +22,12 @@ describe('ClaimPhoto', () => {
     });
 
     it('should open first image dialog change to second and close', () => {
-        cy.get(
-            ':nth-child(1) > .q-card > .q-img > .q-img__container > .q-img__image'
-        ).click();
+        cy.get(':nth-last-child(1) > .q-card').click();
         cy.get('.q-carousel__slide > .q-img > .q-img__container > .q-img__image').should(
             'be.visible'
         );
 
-        cy.get('.q-carousel__control > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get('.q-carousel__control > button').click();
 
         cy.get(
             '.q-dialog__inner > .q-toolbar > .q-btn > .q-btn__content > .q-icon'
@@ -41,7 +39,7 @@ describe('ClaimPhoto', () => {
 
     it('should remove third and fourth file', () => {
         cy.get(
-            '.multimediaParent > :nth-child(3) > .q-btn > .q-btn__content > .q-icon'
+            '.multimediaParent > :nth-last-child(1) > .q-btn > .q-btn__content > .q-icon'
         ).click();
         cy.get(
             '.q-card__actions > .q-btn--unelevated > .q-btn__content > .block'
@@ -49,7 +47,7 @@ describe('ClaimPhoto', () => {
         cy.get('.q-notification__message').should('have.text', 'Data deleted');
 
         cy.get(
-            '.multimediaParent > :nth-child(3) > .q-btn > .q-btn__content > .q-icon'
+            '.multimediaParent > :nth-last-child(1) > .q-btn > .q-btn__content > .q-icon'
         ).click();
         cy.get(
             '.q-card__actions > .q-btn--unelevated > .q-btn__content > .block'

test/cypress/integration/outLogin/recoverPassword.spec.js

@@ -24,7 +24,7 @@ describe('Recover Password', () => {
     it('should change password to user', () => {
         // Get token from mail
         cy.request(
-            `http://localhost:3000/api/Mails?filter=%7B%22where%22%3A%20%7B%22receiver%22%3A%20%22${username}%40mydomain.com%22%7D%2C%20%22order%22%3A%20%5B%22id%20DESC%22%5D%7D&access_token=DEFAULT_TOKEN`
+            `/api/Mails?filter=%7B%22where%22%3A%20%7B%22receiver%22%3A%20%22${username}%40mydomain.com%22%7D%2C%20%22order%22%3A%20%5B%22id%20DESC%22%5D%7D&access_token=DEFAULT_TOKEN`
         ).then((response) => {
             const regex = /access_token=([a-zA-Z0-9]+)/;
             const [match] = response.body[0].body.match(regex);

test/cypress/integration/outLogin/twoFactor.spec.js

@@ -11,7 +11,7 @@ describe('Two Factor', () => {
     it('should enable two factor to sysadmin', () => {
         cy.request(
             'PATCH',
-            `http://localhost:3000/api/VnUsers/${userId}/update-user?access_token=DEFAULT_TOKEN`,
+            `/api/VnUsers/${userId}/update-user?access_token=DEFAULT_TOKEN`,
             { twoFactor: 'email' }
         );
     });
@@ -41,7 +41,7 @@ describe('Two Factor', () => {
 
         // Get code from mail
         cy.request(
-            `http://localhost:3000/api/Mails?filter=%7B%22where%22%3A%20%7B%22receiver%22%3A%20%22${username}%40mydomain.com%22%7D%2C%20%22order%22%3A%20%5B%22id%20DESC%22%5D%7D&access_token=DEFAULT_TOKEN`
+            `/api/Mails?filter=%7B%22where%22%3A%20%7B%22receiver%22%3A%20%22${username}%40mydomain.com%22%7D%2C%20%22order%22%3A%20%5B%22id%20DESC%22%5D%7D&access_token=DEFAULT_TOKEN`
         ).then((response) => {
             const tempDiv = document.createElement('div');
             tempDiv.innerHTML = response.body[0].body;

test/cypress/support/commands.js

@@ -83,7 +83,7 @@ Cypress.Commands.add('getValue', (selector) => {
 Cypress.Commands.add('selectOption', (selector, option) => {
     cy.waitForElement(selector);
     cy.get(selector).find('.q-select__dropdown-icon').click();
-    cy.get('.q-menu .q-item').contains(option).click();
+    cy.get('.q-menu .q-item').contains(option).should('be.visible').click();
 });
 
 Cypress.Commands.add('fillInForm', (obj, form = '.q-form > .q-card') => {

test/cypress/support/index.js

@@ -15,3 +15,6 @@
 
 import './commands';
 
+Cypress.Screenshot.defaults({
+    screenshotOnRunFailure: false,
+});