Cypress Frontend Tests

Salut @AlexTrovato :wave:

J’ai testé aujourd’hui la branche Cypress que tu as développé et ça marche bien :slight_smile:
J’ai commencé à tester le front du service Tp-Link et j’arrive à bien avancer. La partie fixture/mock des appels backend est un peu plus complexe mais ça marche aussi.
Je pense qu’il faut vraiment se mettre en mode TDD pour écrire ce genre de tests.

Pour la partie API backend, on veut tester que le core ? Le reste (services) est trop lié au matériel donc on veut tout mocker, c’est ça ?

Je pense qu’il y a une erreur entre la doc et la commande dans le package.json pour lancer le server pour les tests cypress (npm run start:cypress <=> npm run cypress:start)

Merci pour le boulot :clap: et hâte de voir ça dans la CI et dans le coverage :rocket:

Super, bonnes nouvelles.

Oui ce sera plus simple pour mettre en place nos tests, et aussi pour valider nos devs.

Ce serait bien de tester le core au maximum. Mais en effet, pour les interactions avec les devices, c’est compliqué, donc il faut tenter de mocker uniquement les WebServices faisant appel aux vrais services.
Si on fait sur une page de config (comme pour le Bluetooth et la fréquence se scan, qui ne fait qu’enregistrer des param en base de données).

Le script npm run cypress:start ne devrait pas être sur le fichier package.json de la racine, et la doc précise qu’il faut se placer à la racine de Gladys (ni sur front, ni sur server).
(oui je sais cypress:start vs start:cypress, j’ai tenté de suivre la « logique » déjà en place, mais tout est changeable :slight_smile: ).

Avec ma PR, la CI exécute déjà les tests (bloquant en cas d’erreur), ne manque que la couverture.

Merci d’avoir essayer, avec @pierre-gilles on avait convenu que je devais tester le composant « react-select » qui est un peu particulier (afin de fournir la technique à appliquer), et de laisser la communauté jouer avec avant de merger, puis merger petits bouts par petits bouts, afin d’éviter l’effet tunnel (et j’avoue que bosser 5 jours d’affiler dessus, ça use).

1 « J'aime »

@AlexTrovato Du coup tu pense que je peux merger soon la PR cypress? Je pense comme on s’est dit qu’on peut le merger même si tout n’est pas couvert, comme ça au moins la structure est sur master et on peut se baser dessus pour faire des PRs qui ajoute du coverage :slight_smile:

Oui on peut, si elle passe,je suis pas sur d’avoir un rebase récent.
On complavec le temps, tout comme tu dis, ça me va.

Hi !!

Désolé je ne dois pas être doué ^^ @AlexTrovato pourrais-tu m’aider à lancer Cypress sous WSL ? Enfin si il y a un point que je n’ai pas compris ou fait …

  • J’ai suivi la doc :
  • J’ai donc lancé la commande serveur :
terdieu@DUBLEM-PC-01:~/gladys-dev/requeteAPI/Gladys/server[ExpandIconSelectionScenes !]$ npm run cypress

> gladys-server@ cypress /home/terdieu/gladys-dev/requeteAPI/Gladys/server
> npm run cypress:clean && npm run cypress:start


> gladys-server@ cypress:clean /home/terdieu/gladys-dev/requeteAPI/Gladys/server
> npx rimraf ./gladys-cypress.db*


> gladys-server@ cypress:start /home/terdieu/gladys-dev/requeteAPI/Gladys/server
> cross-env SQLITE_FILE_PATH=./gladys-cypress.db node index.js

2022-04-12T09:56:38+0200 <debug> index.js:370 (Umzug.log) == 20190205063641-create-user: migrating =======
2022-04-12T09:56:38+0200 <debug> index.js:370 (Umzug.log) == 20190205063641-create-user: migrated (0.036s)
  • J’ai ensuite lancé la commande front :
terdieu@DUBLEM-PC-01:~/gladys-dev/requeteAPI/Gladys/front[ExpandIconSelectionScenes !]$ npm run start:cypress

> gladys-front@ start:cypress /home/terdieu/gladys-dev/requeteAPI/Gladys/front
> cross-env DEMO_MODE=false WEBSOCKET_URL=ws://localhost:1443 LOCAL_API_URL=http://localhost:1443 npm start


> gladys-front@ start /home/terdieu/gladys-dev/requeteAPI/Gladys/front
> per-env


> gladys-front@ start:development /home/terdieu/gladys-dev/requeteAPI/Gladys/front
> npm run -s dev

 Build  [                    ] 0% (0.0s) compilingℹ 「wds」: Project is running at http://0.0.0.0:1444/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /home/terdieu/gladys-dev/requeteAPI/Gladys/front/src
ℹ 「wds」: 404s will fallback to /index.html
 Build  [==                  ] 10% (0.1s) buildingBrowserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
 Build  [==========          ] 49% (13.9s) buildingBrowserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Compiled successfully!

You can view the application in browser.

Local:            http://0.0.0.0:1444
On Your Network:  http://172.29.212.22:1444
  • Et enfin tenté de lancé Cypress (essai à partir du front et de la racine Gladys).
terdieu@DUBLEM-PC-01:~/gladys-dev/requeteAPI/Gladys[ExpandIconSelectionScenes !]$ npm run cypress:open

> gladys@4.8.3 cypress:open /home/terdieu/gladys-dev/requeteAPI/Gladys
> cd front && npm run cypress:open


> gladys-front@ cypress:open /home/terdieu/gladys-dev/requeteAPI/Gladys/front
> cypress open --config-file cypress/cypress.json

It looks like this is your first time using Cypress: 6.9.1

  ✖  Verifying Cypress can run /home/terdieu/.cache/Cypress/6.9.1/Cypress
    → Cypress Version: 6.9.1
Cypress verification timed out.

This command failed with the following output:

/home/terdieu/.cache/Cypress/6.9.1/Cypress/Cypress --no-sandbox --smoke-test --ping=156

----------

Command timed out after 30000 milliseconds: /home/terdieu/.cache/Cypress/6.9.1/Cypress/Cypress --no-sandbox --smoke-test --ping=156
Timed out

----------

Platform: linux (Ubuntu - 20.04)
Cypress Version: 6.9.1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gladys-front@ cypress:open: `cypress open --config-file cypress/cypress.json`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gladys-front@ cypress:open script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/terdieu/.npm/_logs/2022-04-12T08_25_08_213Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gladys@4.8.3 cypress:open: `cd front && npm run cypress:open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gladys@4.8.3 cypress:open script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/terdieu/.npm/_logs/2022-04-12T08_25_08_243Z-debug.log
  • J’ai ensuite tenté de suivre le lien que tu donnes dans tes slides :

Mais rien n’y fait :smiling_face_with_tear: :smiling_face_with_tear:

Merci d’avance !!

J’ai suivi la procédure wsl 2 est c’est ok de mon côté

Mince !!^^

T’as lancé xlaunch sur Windows avant ?

Avant le cypress:open oui.

Apres j ai tenté de relancer la partie serv et front avant egalement mais rien non plus.
J ai aucun client sur Xlaunch. Des port en particulier à ouvrir ?

La seule et unique commande à la racine npm run cypress :slight_smile:

Oups lol j’ai suivi la doc :

Bon toutefois ça marche encore moins avec la seule et unique ^^


Et dans le fichier de log :

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'cypress' ]
2 info using npm@6.14.10
3 info using node@v12.20.1
4 verbose run-script [ 'precypress', 'cypress', 'postcypress' ]
5 info lifecycle gladys@4.8.3~precypress: gladys@4.8.3
6 info lifecycle gladys@4.8.3~cypress: gladys@4.8.3
7 verbose lifecycle gladys@4.8.3~cypress: unsafe-perm in lifecycle true
8 verbose lifecycle gladys@4.8.3~cypress: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/terdieu/gladys-dev/requeteAPI/Gladys/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/usr/lib/wsl/lib:/mnt/c/Python39/Scripts/:/mnt/c/Python39/:/mnt/c/Program Files (x86)/Common Files/Oracle/Java/javapath:/mnt/c/ProgramData/Oracle/Java/javapath:/mnt/c/Program Files (x86)/Intel/iCLS Client/:/mnt/c/Program Files/Intel/iCLS Client/:/mnt/c/WINDOWS/system32:/mnt/c/WINDOWS:/mnt/c/WINDOWS/System32/Wbem:/mnt/c/WINDOWS/System32/WindowsPowerShell/v1.0/:/mnt/c/Program Files (x86)/Intel/Intel(R) Management Engine Components/DAL:/mnt/c/Program Files/Intel/Intel(R) Management Engine Components/DAL:/mnt/c/Program Files (x86)/Intel/Intel(R) Management Engine Components/IPT:/mnt/c/Program Files/Intel/Intel(R) Management Engine Components/IPT:/mnt/c/Program Files/PuTTY/:/mnt/c/Program Files/Git/cmd:/mnt/c/Program Files (x86)/NVIDIA Corporation/PhysX/Common:/mnt/c/WINDOWS/system32:/mnt/c/WINDOWS:/mnt/c/WINDOWS/System32/Wbem:/mnt/c/WINDOWS/System32/WindowsPowerShell/v1.0/:/mnt/c/WINDOWS/System32/OpenSSH/:/mnt/c/Program Files/dotnet/:/mnt/c/Program Files (x86)/dotnet/:/mnt/c/Program Files (x86)/Windows Kits/10/Windows Performance Toolkit/:/mnt/c/Program Files (x86)/Windows Kits/10/Microsoft Application Virtualization/Sequencer/:/mnt/c/Program Files/Microsoft VS Code/bin:/mnt/c/ProgramData/chocolatey/bin:/mnt/c/Users/Thomas/AppData/Local/Microsoft/WindowsApps:/mnt/c/Users/Thomas/AppData/Local/GitHubDesktop/bin:/mnt/c/Users/Thomas/AppData/Local/Microsoft/WindowsApps:/mnt/c/Program Files (x86)/Nmap:/snap/bin
9 verbose lifecycle gladys@4.8.3~cypress: CWD: /home/terdieu/gladys-dev/requeteAPI/Gladys
10 silly lifecycle gladys@4.8.3~cypress: Args: [ '-c', 'run-p start:cypress cypress:open' ]
11 info lifecycle gladys@4.8.3~cypress: Failed to exec cypress script
12 verbose stack Error: gladys@4.8.3 cypress: `run-p start:cypress cypress:open`
12 verbose stack spawn ENOENT
12 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack     at ChildProcess.emit (events.js:314:20)
12 verbose stack     at maybeClose (internal/child_process.js:1022:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
13 verbose pkgid gladys@4.8.3
14 verbose cwd /home/terdieu/gladys-dev/requeteAPI/Gladys
15 verbose Linux 5.10.102.1-microsoft-standard-WSL2
16 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "cypress"
17 verbose node v12.20.1
18 verbose npm  v6.14.10
19 error code ELIFECYCLE
20 error syscall spawn
21 error file sh
22 error errno ENOENT
23 error gladys@4.8.3 cypress: `run-p start:cypress cypress:open`
23 error spawn ENOENT
24 error Failed at the gladys@4.8.3 cypress script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

Salut,
Tu as bien npm install a la racine de Gladys d’abord ?

Install nodejs v14 aussi :grin:

Voui :sweat_smile:, :smiling_face_with_tear:
Mais vaut mieux demander ^^

Ah oui en effet ca c’est peut-etre pas le cas … je vérifie !!

D’après le log t’es en 12

En effet ^^

Bon c’est fait, alors ça ajoute des choses, au moins ça tente vraiment de le lancer ^^
Mais ça plante ^^ - Je regarderais ça ce soir en rentrant ^^ :

terdieu@DUBLEM-PC-01:~/gladys-dev/requeteAPI/Gladys[ExpandIconSelectionScenes !]$ npm run cypress

> gladys@4.8.3 cypress /home/terdieu/gladys-dev/requeteAPI/Gladys
> run-p start:cypress cypress:open


> gladys@4.8.3 cypress:open /home/terdieu/gladys-dev/requeteAPI/Gladys
> cd front && npm run cypress:open


> gladys@4.8.3 start:cypress /home/terdieu/gladys-dev/requeteAPI/Gladys
> run-p start-server:cypress start-front:cypress


> gladys-front@ cypress:open /home/terdieu/gladys-dev/requeteAPI/Gladys/front
> cypress open --config-file cypress/cypress.json


> gladys@4.8.3 start-server:cypress /home/terdieu/gladys-dev/requeteAPI/Gladys
> cd server && npm run cypress


> gladys@4.8.3 start-front:cypress /home/terdieu/gladys-dev/requeteAPI/Gladys
> cd front && npm run start:cypress


> gladys-server@ cypress /home/terdieu/gladys-dev/requeteAPI/Gladys/server
> npm run cypress:clean && npm run cypress:start


> gladys-front@ start:cypress /home/terdieu/gladys-dev/requeteAPI/Gladys/front
> cross-env DEMO_MODE=false WEBSOCKET_URL=ws://localhost:1443 LOCAL_API_URL=http://localhost:1443 npm start

It looks like this is your first time using Cypress: 6.9.1

  ⠹  Verifying Cypress can run /home/terdieu/.cache/Cypress/6.9.1/Cypress

> gladys-server@ cypress:clean /home/terdieu/gladys-dev/requeteAPI/Gladys/server
> npx rimraf ./gladys-cypress.db*


> gladys-front@ start /home/terdieu/gladys-dev/requeteAPI/Gladys/front
> per-env
  ⠴  Verifying Cypress can run /home/terdieu/.cache/Cypress/6.9.1/Cypress

> gladys-server@ cypress:start /home/terdieu/gladys-dev/requeteAPI/Gladys/server
> cross-env SQLITE_FILE_PATH=./gladys-cypress.db node index.js


> gladys-front@ start:development /home/terdieu/gladys-dev/requeteAPI/Gladys/front
> npm run -s dev
  ⠋  Verifying Cypress can run /home/terdieu/.cache/Cypress/6.9.1/Cypress
internal/modules/cjs/loader.js:1144
  return process.dlopen(module, path.toNamespacedPath(filename));
                 ^

Error: The module '/home/terdieu/gladys-dev/requeteAPI/Gladys/server/node_modules/node-webcrypto-ossl/build/Release/nodessl.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 72. This version of Node.js requires
NODE_MODULE_VERSION 83. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:1144:18)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (/home/terdieu/gladys-dev/requeteAPI/Gladys/server/node_modules/node-webcrypto-ossl/buildjs/native.js:3:16)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (/home/terdieu/gladys-dev/requeteAPI/Gladys/server/node_modules/node-webcrypto-ossl/buildjs/key_storage.js:8:16)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32) {
  code: 'ERR_DLOPEN_FAILED'
}
npm ERR! code ELIFECYCLE
  ⠙  Verifying Cypress can run /home/terdieu/.cache/Cypress/6.9.1/Cypress
npm ERR! gladys-server@ cypress:start: `cross-env SQLITE_FILE_PATH=./gladys-cypress.db node index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gladys-server@ cypress:start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/terdieu/.npm/_logs/2022-04-13T04_06_38_053Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gladys-server@ cypress: `npm run cypress:clean && npm run cypress:start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gladys-server@ cypress script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/terdieu/.npm/_logs/2022-04-13T04_06_38_092Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gladys@4.8.3 start-server:cypress: `cd server && npm run cypress`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gladys@4.8.3 start-server:cypress script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/terdieu/.npm/_logs/2022-04-13T04_06_38_114Z-debug.log
  ⠹  Verifying Cypress can run /home/terdieu/.cache/Cypress/6.9.1/Cypress
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gladys@4.8.3 start:cypress: `run-p start-server:cypress start-front:cypress`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gladys@4.8.3 start:cypress script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/terdieu/.npm/_logs/2022-04-13T04_06_38_161Z-debug.log
ERROR: "start:cypress" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gladys@4.8.3 cypress: `run-p start:cypress cypress:open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gladys@4.8.3 cypress script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/terdieu/.npm/_logs/2022-04-13T04_06_38_202Z-debug.log

Tu n’aurais pas mis node 16 au lieu de 14 ? :smiley:

Mmmmh non même pas ^^


C’est fou quand même quand ça marche pas ^^ Y a forcément une raison mais …

Je vais éplucher les logs voir si il y a un indice …

Par contre il faut faire un npm rebuild si tu as changer de version de node ( c’est écrit dans les logs précédent) car les packages ont été installés sous node 12.