search

quasarframework / quasar-testing

Testing Harness App Extensions for the Quasar Framework 2.0+
https://testing.quasar.dev
MIT License
179 stars 66 forks source link

Quasar 2.14.6 with app-vite fails cypress tests #368

Closed tofi86 closed 3 months ago

tofi86 commented 4 months ago

What happened?

We're using Quasar 2.14.5 and doing component tests with Cypress:

Cypress:        13.6.3 
Browser:        Electron 114 (headless) 
Node Version:   v18.16.1

some of the dev dependencies:

"@pinia/testing": "^0.1.3",
"@quasar/app-vite": "^1.7.3",
"@quasar/cli": "^2.3.0",
"@quasar/quasar-app-extension-testing-e2e-cypress": "^5.2.0",

Now when upgrading to Quasar 2.14.6 or 2.15.0 we get the following error when running Cypress:

  Running:  GFormInput.cy.ts                                                               (1 of 14)

  1) An uncaught error was detected outside of a test

  0 passing (191ms)
  1 failing

  1) An uncaught error was detected outside of a test:
     TypeError: The following error originated from your test code, not from Cypress.

  > Cannot read properties of undefined (reading 'iconSet')

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.
      at <unknown> (http://localhost:8080/__cypress/src/node_modules/.q-cache/vite/spa/deps/quasar_dist_icon-set_material-icons_umd_prod.js?v=81084690:9:21)
      at node_modules/quasar/dist/icon-set/material-icons.umd.prod.js (http://localhost:8080/__cypress/src/node_modules/.q-cache/vite/spa/deps/quasar_dist_icon-set_material-icons_umd_prod.js?v=81084690:10:7)
      at __require (http://localhost:8080/__cypress/src/node_modules/.q-cache/vite/spa/deps/chunk-HUBM7RA2.js?v=bc35c810:8:50)
      at <unknown> (http://localhost:8080/__cypress/src/node_modules/.q-cache/vite/spa/deps/quasar_dist_icon-set_material-icons_umd_prod.js?v=81084690:15:60)

What did you expect to happen?

Cypress tests should run fine.

Reproduction URL

cannot get a StackBlitz with cypress to work at all

How to reproduce?

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

Electron

Quasar info output

Operating System - Darwin(23.4.0) - darwin/arm64
NodeJs - 18.16.1

Global packages
  NPM - 9.5.1
  yarn - Not installed
  @quasar/cli - 2.4.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.14.6 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.7.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.15 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.16 -- Native-ESM powered web dev build tool
  eslint - 8.56.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-testing-e2e-cypress - 5.2.0 -- A Quasar App Extension for Cypress e2e

Networking
  Host - MBP.local
  en0 - 192.168.192.118
  en7 - 192.168.192.166
  utun4 - 10.8.15.7

Relevant log output

No response

Additional context

No response

github-actions[bot] commented 4 months ago

Hi @tofi86! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

rstoenescu commented 4 months ago

@IlCallo

Somehow, the dist/icon-set/.umd.prod.js files are imported, instead of quasar/icon-set/ files. The structure of the dist/icon-set/ recently changed, but this is besides the point. Can you take a look, please?

IlCallo commented 4 months ago

I'll take a look next week, thanks for the heads up

Jackson3195 commented 4 months ago

Any update on this?

IlCallo commented 3 months ago

Nope, sorry, I won't be able to check it out this and next week unluckily Try upgrading to the latest Cypress AE version and app-* version in the meantime You don't need the @beta tag anymore for Cypress AE

AFAIK we're using the Cypress AE to test Quasar UI components in our own repo, it's pretty strange it won't work out in the wild

If anyone wants to dig deeper, I'll gladly review the PR

Jackson3195 commented 3 months ago

@IlCallo

Just to confirm Im running:

And still running into this.

Will see if I can figure out why as per your comment above (No promises!)

Jackson3195 commented 3 months ago

@IlCallo

Based on what @rstoenescu mentioned, seems like the problem is with the test/cypress/support/component.ts file that gets injected when you add Cypress testing via Quasar cli.

Specifically: Screenshot 2024-04-03 at 12 38 52

Once you swap out the imports to use the ones found in @quasar/extras/*; which the subsequent line was importing from anyway, then Cypress starts working fine again.

Additionally, unsure which repo to raise the PR so pasting this here for visibility

IlCallo commented 3 months ago

You're mixing 2 features

quasar/icon-set/... define which icons should be used in Quasar components @quasar/extras/... loads the selected icon set, thus making the first import working

The problem here seems like to be that the quasar/icon-set/... exported files for some reason are not found anymore

IlCallo commented 3 months ago

What changed is the content of the imported file, which now only checks window.Quasar, instead of multiple other places (e.g. globalThis, etc)

When we started supporting Cypress component testing, that was the only way to have a CJS version of those files from quasar package, and Cypress refused to compile ESM ones back then

Apparently we now have a CJS versions which seem to work fine Please, try using import 'quasar/icon-set/material-icons'; instead and let me know if it fixes your issue

Jackson3195 commented 3 months ago

@IlCallo

I can confirm replacing the line with import 'quasar/icon-set/material-icons'; also solves the problem!

IlCallo commented 3 months ago

Thanks, I'll release the fix next week

IlCallo commented 3 months ago

Just released v6.1.0 which includes the fix

tofi86 commented 3 months ago

@IlCallo thanks for your effort in trying to fix this issue.

Unfortunately, we still get the same error as initially reported when upgrading our dependencies:

Cypress:        13.7.3
Browser:        Electron 118 (headless) 
Node Version:   v18.16.1

upgraded dependencies:
"quasar": "^2.15.2",
"@quasar/extras": "^1.16.11",

upgraded dev dependencies:

"@pinia/testing": "^0.1.3",
"@quasar/app-vite": "^1.8.0",
"@quasar/cli": "^2.4.0",
"@quasar/quasar-app-extension-testing-e2e-cypress": "^6.1.0",

Quasar Info Output:

Operating System - Darwin(23.4.0) - darwin/arm64
NodeJs - 18.16.1

Global packages
  NPM - 9.5.1
  yarn - Not installed
  @quasar/cli - 2.4.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.15.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.8.0 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.23 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.3.2
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.16 -- Native-ESM powered web dev build tool
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-testing-e2e-cypress - 6.1.0 -- A Quasar App Extension for Cypress e2e

Networking
  Host - MacBook-Pro-von-Tobias.local
  en0 - 192.168.192.118
  utun4 - 10.8.15.7
  en7 - 192.168.192.166

and when running the Cypress component tests, we still get the "iconSet" error... :-(

Did I miss upgrading another dependency?

tofi86 commented 3 months ago

Follow up: I regenerated the basic test suite with quasar ext add @quasar/testing-e2e-cypress and had a look whether this works – and it does. Looked at the diff and found this change:

diff --git forkSrcPrefix/frontend/test/cypress/support/component.ts forkDstPrefix/frontend/test/cypress/support/component.ts
index 0016a80e8e9022c7504f3ae5e9e212ce7d74c002..065a589ba096d095f74b9ef1a1f486439cfcd3b0 100644
--- forkSrcPrefix/frontend/test/cypress/support/component.ts
+++ forkDstPrefix/frontend/test/cypress/support/component.ts
@@ -17,15 +17,14 @@ import './commands';

 // Quasar styles
-import 'quasar/src/css/index.sass';
+import 'quasar/src/css/index.sass'; // Or 'quasar/dist/quasar.prod.css' if no CSS preprocessor is installed
 // Change this if you have a different entrypoint for the main scss.
-import 'src/css/app.scss';
+import 'src/css/app.scss'; // Or 'src/css/app.css' if no CSS preprocessor is installed

 // ICON SETS
 // If you use multiple or different icon-sets then the default, be sure to import them here.
-import 'quasar/dist/icon-set/material-icons.umd.prod';
+import 'quasar/icon-set/material-icons';
 import '@quasar/extras/material-icons/material-icons.css';
-import '@quasar/extras/material-icons-outlined/material-icons-outlined.css';

 import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-e2e-cypress';
 import { Dialog, extend, Notify, Quasar } from 'quasar';

With this change to our test/cypress/support/component.ts file, it now works as expected! 🎉

Thanks for the fix!