quasarframework / quasar-testing

Testing Harness App Extensions for the Quasar Framework 2.0+

@quasar/testing

This is the monorepo for integrating the test-runner of your choice into your Quasar app.

You can install multiple pre-rigged testing harnesses (test runners) to your Quasar application, each one will:

• install the harness NPM package into your project;
• scaffold necessary configuration files;
• add script commands which expose some functionality of the respective harness.

App Extensions (such as these testing harnesses) only work with Quasar CLI, not with Vue CLI, nor by directly installing packages via a package manager as npm or yarn. Use quasar ext add ... or the installation step won't be executed and configuration files won't be copied over.

Testing is not in and of itself hard. The most complicated part is setting up the testing harness. The trick lies in knowing what to test. If you are new to testing, it is absolutely imperative that you familiarize yourself with some of the concepts and patterns. There are some links for further reading at the end of this document page.

The Test Driven Design approach will help you to write better (and fewer) tests. Even though it may seem like it slows you down to some degree, this habit pays its dividends on the long term drastically reducing the number of public bugs and the project maintenance effort. Think of tests like insurance for your code that always pays out. On the other hand, not everything is worth being tested, or is worth being tested only at an higher level (eg. using an E2E tests instead of unit tests).

REMEMBER

Test the functionality, not the function

Table of contents

• Donations

• Installation

• Removal

• Reset

• Upgrade

• Provided App Extensions

  • Testing Harnesses Manager (DEPRECATED)

  • Unit testing

    • Jest
    • Vitest

  • E2E testing

    • Cypress

  • Quality Auditing (OUTDATED, not migrated to Qv2 yet)

• Roadmap

• Contributing

• License

Donations

The Quasar team spend a considerable amount of time studying, coding and maintaining App Extensions (AE) which save literally thousands of developers hours, days or weeks of work.

Does your business or personal projects depend on these App Extensions? How much time did we save you until now? Consider donating to help us maintain them and allow us to create new ones!

Installation

You can add test harnesses:

• in a centralized way via the Testing Harnesses Manager (DEPRECATED);
• using an "a-la-carte" approach, checking each harness documentation.

You can add multiple harnesses and even use them into your continuous integration pipelines.

Removal

You can remove a testing harness running:

$ quasar ext remove @quasar/testing-unit-jest

This will remove the associated NPM package and run the Quasar App Extensions uninstall hook. If not done into the AE uninstall hook, the removal won't delete test or configuration files.

Reset

If you mess up your configuration and need to reset, or just want to check out if there has been any changes into new versions configuration, you should run:

$ quasar ext add @quasar/testing-unit-jest

Be careful though, this will overwrite ALL existing files (including configurations) if you allow it to. Make sure to have some kind of version control in place before proceeding. This operation will also upgrade the NPM package and its dependencies.

To prevent installing new or updated dependencies, you should run:

$ quasar ext invoke @quasar/testing-unit-jest

Upgrade

You can upgrade a testing harness and its dependencies by updating its related NPM package.

$ yarn add -D @quasar/quasar-app-extension-testing-unit-jest

This won't change existing test or configuration files.

Upgrade to a new major version with NPM

When upgrading between major versions, since there are major changes, we suggest you to remove and re-add the AE, to obtain lastest configuration files too. Ensure your source control is clean before proceeding, then answer (y) and "Overwrite all" when prompted to overwrite existing files and individually git diff all changes manually to check out which changes you want to keep and which you want to revert.

$ quasar ext remove @quasar/testing-unit-jest
$ quasar ext add @quasar/testing-unit-jest

Testing Harnesses Manager (DEPRECATED)

Check out Testing Harnesses Manager AE documentation

Unit Testing

Jest

Check out Jest AE documentation

Vitest

Check out Vitest AE documentation

E2E Testing

We recommend testing webapps with Cypress if you target Chrome-based browsers (Chrome, Edge, Electron) or Firefox - but if you want to test Safari or Cordova/Capacitor apps, then you should consider using webdriver.io.

Cypress

Check out Cypress AE documentation

Quality Auditing (OUTDATED, not migrated to Qv2 yet)

$ quasar ext add @quasar/testing-quality

Auditing the quality of your app is something you want to do before you go in production. Depending on your perspective, quality can mean many things. So we have put together a few tools that we think can help you have a qualitatively better project.

The Lighthouse tool can help you identify issues with your PWA app, but only if you serve the built version of your project. If you use it a lot, consider installing it globally.

Snyk is a tool for identifying node modules that have security implications. Running this regularly will keep you alerted to issues that may be stemming from repositories you use.

Node License Finder (nlf) is a free tool you can use to catalog all the licenses of the hundreds of open-source projects you are using in your project.

Further Reading

Books

• Testing Vue.js Applications by Edd Yerburgh, the author of the @vue/test-utils repo
• Free Vue Testing Handbook

Tutorials

• Introduction to TDD
• Overview of JavaScript testing 2020
• Unit Testing Vue Router with Jest
• Jest tests debugging

Documentation

• @vue/test-utils
• jest 24
• cypress
• lighthouse
• snyk
• nlf
• chai
• istanbul

Contributing

Contributions to this repository are highly desirable, see the Contribution Guidelines for more details. Please note: project coordination takes place on the Discord server.

Contributors

• ilcallo
• nothingismagick
• nklayman
• Allan Gaunt
• andreiTn
• fansanelli
• mgibson91
• eugene
• bloo_df
• PhearZero

License

MIT ©2022 - present - Paolo Caleffi & Razvan Stoenescu

All Icons © the respective owners

quasar-testing's Issues

Node module registry of @quasar/test

This module needs namespacing / org hosting to work. Depends on whether we take quasar / quasarjs at npmjs.com

[q-t] @quasar/test-base basic features

This should create a minimum viable test-harness in the user's app directory. Much of the work can be extrapolated out of the prior work done for the 0.15 test mode (that was never released)

•  add folders where needed
• update package.json settings (babelrc, etc.)
• create mandatory .nyc, etc.
• patch quasar.conf.js with webpack chain

[RFC] Smoke Tests for Quasar

This is the tracking issue for building a suite of smoke tests for the quasar-framework.

What is a smoke test? A smoke test is created on a passing test suite. It creates a "snapshot" against which future test-runs are diffed. This ensures that there are no regressions and that updated component code can be merged.

Add @quasar/testing to a clean project -> No App Extensions are installed

Trouble with installation of test functionality in a clean Quasar application generated via @quasar/cli.

quasar ext add @quasar/testing
 app:extension-manager  No App Extensions are installed +0ms
 app:extension-manager  You can look for "quasar-app-extension-*" in npm registry. +6ms

Software version

OS: Alpine linux
Node: v11.11.0
NPM: 6.7.0
Quasar 1.0.0-beta.10

When selecting wallaby during extension installation, the package script block is not updated.

So, if you both request wallabyjs and updating the package.json script block, Wallaby is installed but the package script block is not updated
It stays:
"scripts": {
"lint": "eslint --ext .js,.vue src",
"test": "echo "No test specified" && exit 0"
},

When you don't request wallaby, the script block is correctly updated.

Adding jest env to the .eslintrc.js

Feature

it would be nice to have jest: true automattically added to the eslintrc file that way the IDE behaves correctly with the new global variables.

// .eslintrc.js
...
env: {
    browser: true,
    jest: true // <------ This
  },
...

typescript

{
  "presets": [
    [
      "@babel/preset-env", {
        "modules": false,
        "loose": false,
        "useBuiltIns": "usage"
      }
    ],
    [
      "@babel/preset-stage-2", {
        "modules": false,
        "loose": false,
        "useBuiltIns": true,
        "decoratorsLegacy": true
      }
    ],
    "@babel/preset-flow"
  ],
  "plugins": [
    [
      "@babel/transform-runtime", {
        "polyfill": false,
        "regenerator": false
      }
    ]
  ],
  "comments": false
}

"devDependencies": {
    "@babel/preset-flow": "^7.0.0-beta.55",
    "babel-eslint": "^8.2.1",
    "babel-plugin-syntax-flow": "^6.18.0",
    "eslint": "^4.19.1",
    "eslint-config-standard": "10.2.1",
    "eslint-friendly-formatter": "3.0.0",
    "eslint-loader": "1.7.1",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-node": "5.2.0",
    "eslint-plugin-promise": "3.4.0",
    "eslint-plugin-standard": "3.0.1",
    "eslint-plugin-vue": "4.0.0",
    "flow-bin": "^0.71.0",
    "quasar-cli": "^0.17.0",
    "strip-ansi": "^3.0.1",
    "worker-loader": "^1.1.1"
  }

flow config

[ignore]
.*/findup/test/fixture.*
.*/config-chain/test.*

[include]

[libs]
./flow-typed/

[lints]

[options]

[strict]

it follows the recommendation of ./flow-typed/ directory

Software version

OS:
Node:
NPM:
Any other software related to your bug:

What did you get as the error?

What were you expecting?

What steps did you take, to get the error?

What is the purpose of jest-loader.js in folder test/loaders?

Just added jest to a V1 project.
what isjest-loader.js doing?

formatDate: Cannot read property 'date' of undefined

If inside a JEST test file I write this:

import { date } from 'quasar'
const { formatDate } = date
console.log(formatDate(new Date(), 'YYYYMMMMDD'))

I get Error:

Cannot read property 'date' of undefined

Does anyone know how to use the formatDate util inside test files?

the problem is not only on direct import of formatDate into a test file, but also anywhere that is used in my vuex store...

monorepo management

Here is a nicely done overview:
http://rachaelmoore.name/posts/development/devops/comparison-of-monorepo-tools/

Detailed analysis of monorepos:
https://trunkbaseddevelopment.com/monorepos/

We are probably going to go with: https://github.com/lerna/lerna

Developing on this monorepo, however, will require that you use yarn. Which is also something that Razvan recommends (and does himself) anyway.

V1 beta: passing props with mountQuasar doesn't work

Software version

OS:
Node:
NPM:
Any other software related to your bug:

What did you get as the error?

What were you expecting?

What steps did you take, to get the error?

Detect for typescript and use that install profile for jest / ava / etc.

We will have to use dynamic dependencies here - which I don't like because that makes them "invisible" to real dep auditing.

Proposal: helper packages for extensions

Error: Cannot find module 'jsdom'

Sorry for sounding stupid. First time I try to add testing to a Quasar (vue) project.

• I'm using npm
• I did: quasar ext add @quasar/testing
• I choose AVA since I have some experience with it
• It added all necessary files to my quasar project
• I did: quasar run @quasar/testing test -- --unit=ava --dev="-m spa"

And get this error:

Error: Cannot find module 'jsdom'
globalJsdom (node_modules/jsdom-global/index.js:28:15)
Object. (test/ava/helpers/setup.js:2:24)
FAILED TESTS: Tests with ava did not pass.

I read through the documentation again, but cannot find information about it.
Do we have to manually add packages as well? I'm not sure what JSDom is, but I imagine it's something that re-creates a DOM with just JS. : P

upgrade to latest quasar app package breaks (wallaby) testing

Testing worked great with wallaby until I upgraded to quasar app1.0.0-beta.10.
After the upgrade I'm getting:
Any ida how I can resolve this?
thanks

[Error] Error:  
[Error]  
[Error] Vue packages version mismatch: 
[Error]  
[Error] - [email protected] 
[Error] - [email protected] 
[Error]  
[Error] This may cause things to work incorrectly. Make sure to use the same version for both. 
[Error] If you are using vue-loader@>=10.0, simply update vue-template-compiler. 
[Error] If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest. 
[Error]  
[Error]     at Object.<anonymous> (D:\TFS-KUUB\Kuub.PanelButler\Kuub.CabinetButler.Quasar\node_modules\wallaby-vue-compiler\node_modules\vue-template-compiler\index.js:8:9) 
[Error]     at Module._compile (module.js:653:30) 
[Error]     at Module.i._compile (C:\Users\Paul\.vscode\extensions\wallabyjs.wallaby-vscode-1.0.116\wallaby\server.js:15:29332) 
[Error]     at Object.Module._extensions..js (module.js:664:10) 
[Error]     at Module.load (module.js:566:32) 
[Error]     at tryModuleLoad (module.js:506:12) 
[Error]     at Function.Module._load (module.js:498:3) 
[Error]     at Module.require (module.js:597:17) 
[Error]     at Module.o.require (C:\Users\Paul\.vscode\extensions\wallabyjs.wallaby-vscode-1.0.116\wallaby\server.js:21:19405) 
[Error]     at Module.i.require (C:\Users\Paul\.vscode\extensions\wallabyjs.wallaby-vscode-1.0.116\wallaby\server.js:21:18797) 
[Error]     at require (internal/module.js:11:18) 
[Error]     at module.exports (D:\TFS-KUUB\Kuub.PanelButler\Kuub.CabinetButler.Quasar\node_modules\wallaby-vue-compiler\index.js:3:18) 
[Error]     at module.exports (D:\TFS-KUUB\Kuub.PanelButler\Kuub.CabinetButler.Quasar\wallaby.js:25:50) 

Mocha webpack and quasar init

Post by @Arushi-Jain on the RFC

In order to download testing dependencies along with the quasar template, I forked the quasar-starter-kit and changed the package.json. It downloads only the dependencies for unit test for now only when the user says yes to the question asked (edit meta.js to change the questions asked).
Quasar-cli is needed only to create the folder for those tests, for now I create the folder myself for unit testing while the dependencies are downloaded only i choose to.
this is my meta.js

const
path = require('path'),
fs = require('fs')

const {
sortDependencies,
installDependencies,
runLintFix,
printMessage,
} = require('./utils')

const pkg = require('./package.json')

module.exports = {
helpers: {
template_version() {
return pkg.version
}
},

prompts: {
name: {
type: 'string',
required: true,
message: 'Project name (internal usage for dev)',
},
productName: {
type: 'string',
required: true,
message: 'Project product name (official name)',
default: 'Quasar App'
},
description: {
type: 'string',
required: false,
message: 'Project description',
default: 'A Quasar Framework app',
},
author: {
type: 'string',
message: 'Author',
},
lint: {
type: 'confirm',
message: 'Use ESLint to lint your code?',
},
lintConfig: {
when: 'lint',
type: 'list',
message: 'Pick an ESLint preset',
choices: [
{
name: 'Standard (https://github.com/standard/standard)',
value: 'standard',
short: 'Standard',
},
{
name: 'Airbnb (https://github.com/airbnb/javascript)',
value: 'airbnb',
short: 'Airbnb',
},
{
name: 'none (configure it yourself)',
value: 'none',
short: 'none',
}
]
},
cordovaId: {
type: 'string',
required: false,
message: 'Cordova id (disregard if not building mobile apps)',
default: 'org.cordova.quasar.app'
},
vuex: {
type: 'confirm',
message: 'Use Vuex? (recommended for complex apps/websites)',
},
axios: {
type: 'confirm',
message: 'Use Axios for Ajax calls?'
},
test : {
type: 'confirm',
message: 'Use Unit Testing for your code ?'
},
i18n: {
type: 'confirm',
message: 'Use Vue-i18n? (recommended if you support multiple languages)',
default: false
},
ie: {
type: 'confirm',
message: 'Support IE11?',
default: false
},
autoInstall: {
type: 'list',
message:
'Should we run npm install for you after the project has been created? (recommended)',
choices: [
{
name: 'Yes, use NPM',
value: 'npm',
short: 'NPM',
},
{
name: 'Yes, use Yarn (recommended)',
value: 'yarn',
short: 'yarn',
},
{
name: 'No, I will handle that myself',
value: false,
short: 'no',
}
]
}
},
filters: {
'.eslintrc.js': 'lint',
'.eslintignore': 'lint',
'.stylintrc': 'lint',
'src/store//': 'vuex',
'src/i18n//': 'i18n',
'src/plugins/i18n.js': 'i18n',
'src/plugins/axios.js': 'axios'
},
complete: function(data, { chalk }) {
const green = chalk.green

sortDependencies(data, green)

const cwd = path.join(process.cwd(), data.inPlace ? '' : data.destDirName)

if (data.autoInstall) {
installDependencies(cwd, data.autoInstall, green)
.then(() => {
return runLintFix(cwd, data, green)
})
.then(() => {
printMessage(data, green)
})
.catch(e => {
console.log(chalk.red('Error:'), e)
})
}
else {
printMessage(data, chalk)
}
}
}

and this my template/package.json

{
"name": "{{ name }}",
"version": "1.0.0",
"description": "{{ description }}",
"productName": "{{ productName }}",
"cordovaId": "{{ cordovaId }}",
"author": "{{ author }}",
"private": true,
"scripts": {
"converttonemf": "node build/convert.js" ,
{{#lint}}"lint": "eslint --ext .js,.vue src --fix"{{/lint}}{{#test}}{{#lint}},{{/lint}}
"test": "mocha-webpack --webpack-config webpack.test.conf.js test --recursive --require test/setup.js"{{/test}}
},
"dependencies": {
"flo-components": "0.0.3",
"chart.js": "^2.7.2"
{{#axios}},{{/axios}}
{{#axios}}"axios": "^0.18.0"{{/axios}}
{{#i18n}},{{/i18n}}
{{#i18n}}"vue-i18n": "^7.3.3"{{/i18n}}
},
"devDependencies": {
{{#lint}}
"babel-eslint": "^8.2.1",
"eslint": "^4.18.2",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-vue": "^4.3.0",
{{#if_eq lintConfig "standard"}}
"eslint-config-standard": "^11.0.0",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-node": "^6.0.1",
{{/if_eq}}
{{#if_eq lintConfig "airbnb"}}
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "^2.9.0",
{{/if_eq}}
{{/lint}}
"quasar-cli": "^0.15.14" {{#test}},
"": "^1.0.0-beta.15",
"jsdom": "^11.9.0",
"jsdom-global": "^3.0.2",
"mocha": "^5.1.1",
"mocha-webpack": "^1.1.0",
"chai": "^4.1.2"
{{/test}}
},
"engines": {
"node": ">= 8.9.0",
"npm": ">= 5.6.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
]
}

Also i had to add webpack.test.config.js to the template folder to add the necessary webpack loaders and this config.js file is called only when we run the script "npm run test"

const path = require('path')

module.exports = {
module: {
loaders: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.js', '.vue']
}
}

You can refer to my forked repository for more

WDIO needs an update

PR Waiting

ziolko/wdio#13

[q-c] quasar mode -add

When the user adds the test mode, this should bring in all dependencies and create the test folder. Currently works, needs to be updated to work with @quasar/test monorepo restructuring.

• correctly creates the mode
•  brings in repo components and files / folders from the monorepo

Support for WallabyJs

WallabyJs is an amazing (I'm in no way affiliated with the company, just a very happy user) tool for running javascript tests in almost any editor.

With the help fo the wallaby guys (all credits to @ArtemGovorov), i could setup a sample
https://github.com/paulvanbladel/quasar-jest-unit-testing-sample

Maybe you could integrate this in quasar-testing?
It requires adding a wallaby.js file in the project root and some slight modification in index.js of the jest util folder.

[q-c] /lib/helpers/init-testing.js

Used to add the mode:test according to user preferences passed either through the command line during quasar init or quasar mode --add test

• It must lookup the test harnesses that are available
• use those to rig the user repository.

AVA default unit test: error "performance is not defined"

Software version

OS: Windows 10
Node: 8.9.4
NPM: 5.6.0
Any other software related to your bug:
quasar - 1.0.0-beta.11
@quasar/quasar-app-extension-testing - 1.0.0-beta.7
@quasar/quasar-app-extension-testing-unit-ava - 1.0.0-beta.6

What did you get as the error?

  × No tests found in test\ava\__tests__\App.spec.js

  1 uncaught exception

  Uncaught exception in test\ava\__tests__\App.spec.js

C:\Users\...\test-project\node_modules\vue\dist\vue.runtime.common.dev.js:4239

  ReferenceError: performance is not defined

What were you expecting?

AVA default test suite run without error

What steps did you take, to get the error?

Fresh new quasar project install (following doc)
quasar ext add @quasar/testing
quasar ext add @quasar/testing-unit-ava
then running quasar run @quasar/testing test -- --unit ava --dev

Note that the error occurs even if App.spec.js file does not contains import { mountQuasar } from '~/test/ava/utils' (=> not sure this is related to #58)

jsdom vuln

✗ Medium severity vulnerability found in content-type-parser
Description: Regular Expression Denial of Service (ReDoS)
Info: https://snyk.io/vuln/npm:content-type-parser:20170905
Introduced through: [email protected]
From: [email protected] > [email protected] > [email protected] > [email protected]

Can you please look into this @nklayman - do we need browser-env, or can we workaround it.
FYI: lukechilds/browser-env#74

When using Notify.create() outside of a component i get a strange error

Software version

OS: OSX 10.14.3
Node: 10.15.1
NPM: 6.4.1
Any other software related to your bug:

What did you get as the error?

Cannot read property add of undefined
followed by a HUGE stack trace of minified quasar.common.js

What were you expecting?

For Notify.create() to work or a message asking me to stub the function

What steps did you take, to get the error?

Create a JS file
Import { Notify } from 'quasar'
Notify.create({message: 'test'})
Run a test against that file

Quality Extension: a11y

Audit for A11Y

• https://github.com/vue-a11y/vue-axe
• https://pa11y.org/ => fork: https://www.npmjs.com/package/@a11ygato/audit-engine
• https://github.com/liip/TheA11yMachine (A, AA, AAA & 508) => uses pa11y internally, makes cute dashboards

OMG LIST!
https://docs.google.com/spreadsheets/d/10CTezA0iDdaWggaqxuHawj-5u8YXdZeWBJsIkuvJ364

Quasar Testing & Basic CI [WIP][RFC-Zero-1]

Quasar Testing & Basic CI [RFC-Zero-1]

Overview & Helpful Links:

Working draft on adding unit, integration and e2e testing to quasar-framework and it's downstream
Quasar applications. Primarily an effort for combining research and methods going on in the
community, including but not limited to:

• quasarframework/quasar-testing
• quasar-starter-ssr-pwa-jest-cypress
• quasar-webdriver
• quasar.d.ts

Quasar-Cli Goals:

• Add ENV Variable abstraction to QuasarConfig for controlling top level
  keys like quasar build. This would include output/misc paths and port/host mappings
• New top level script 'test' for quasar test
• Adopt 'modes' for test runner quasar test mode -a unit with default mode as 'lint'
  • lint - eslint
  • unit - JestJS
  • integration - Cypress(lightweight browser tests) + JestJS
  • e2e - WebdriverIO for Real Device testing
  • docs - js/esdoc with coverage
• Eat your own dogfood approach with quasar-cli for in house test running

Quasar-Framework Goals:

• Lint test runner for framework's core components quasar test || quasar test -m lint
• Unit test suite for framework's core components quasar test -m unit
• Integration tests for complex components and layouts quasar test -m integration
• End-to-end test suite with quasar-cli all modes integrated quasar test -m e2e
• Generate js/esdocs with coverage quasar test -m docs
• Set contribution guidelines on coverage/documentation
• Adopt Travis for CI after framework build lifecycle is well defined

[q-t] expose available test harnesses

This is to make sure that quasar-cli/lib/helpers/init-testing.js is hydrated whenever it is called.

•  make a POC that works locally
•  export these results

Not really sure about the best strategy for this, perhaps as @quasar/test-helper that can be included as a tiny dep within quasar-cli. At any rate, it should be maintained (derived) from within this repo.

Jest basic command fails with TypeError: (args.dev || "").split is not a function

After updating quasar + all testing packages, running quasar test --unit jest --dev (as found in doc) gives me
(node:33600) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: (args.dev || "").split is not a function

Note that quasar test --unit jest --dev="" and quasar test --unit jest --dev=spa gives the expected result (run test suite in SPA mode)

quasar info:
quasar - 1.0.0-beta.11
@quasar/quasar-app-extension-testing-unit-jest - 1.0.0-beta.15
@quasar/quasar-app-extension-testing - 1.0.0-rc.1

Quasar.config.js context error

OS: OSX 10.14.3
Node: 10.15.1
NPM: 6.4.1
Any other software related to your bug:
@quasar/testing extension

What did you get as the error?

Error: Cannot find module '../../../quasar.conf.js' from '/Users/adamkpurdy/Sites/KPA PRODUCTIONS/Quasar Community/extensions/ae-firebase-authentication/fb-test-app/test/cypress/integration/home'

What were you expecting?

Having the initial spec that comes with the extension download to pass

What steps did you take, to get the error?

I added the @quasar/testing ext to my test app for ext development, as well as try on a freshly created quasar app, and for both app instances the e2e fails. Landing spec in:

/test/cypress/integration/home/init.spec.js

Looks like the init spec is setting the ctx variable one level too low.

I tried forking, fixing, and PR'ing, but when investigating the assignment to the ctx variable to the quasar.config.js isn't being done in that file from the forked repo. Guessing this is done during the extension install.

Add a default command to testing

Via a proposal from Razvan:

$ quasar run @quasar/testing --jest --pwa
default command
"test" command on the app extension

problem on quasar dev

steps to make this error in my computer are simple, i followed the steps in quasar docs.

on quasar dev:

(node:15386) UnhandledPromiseRejectionWarning: Error: Exited with code 3

Add nightmare harness

https://forum.quasar-framework.org/topic/3200/quasar1-0beta-electron-app-requiring-nightmarejs-cannot-find-module-package-json

Security Extension

https://github.com/s0md3v/XSStrike/wiki/Compatibility-&-Dependencies

This will require some thinking about how best to include python3 projects.

npm run test:watch generates this error on OSX `fsevents` unavailable (this watcher can only be used on Darwin)

Software version

OS: OSX Mojave
Node: 10.15.1
NPM: 6.4.1
Any other software related to your bug:

What did you get as the error?

fsevents unavailable (this watcher can only be used on Darwin)

What were you expecting?

for the npm script to watch the files

What steps did you take, to get the error?

once jest was installed i ran npm run test:watch and it threw the error

The fix was to run brew install watchman Per the recommendations of this issue expo/expo#854

Can support power-assert to jest by default?

babel-preset-power-assert

https://github.com/power-assert-js/power-assert

AVA first test: SecurityError: localStorage is not available for opaque origins

Error on the AVA test after fresh install:

✖ No tests found in test/ava/__tests__/App.spec.js

  1 uncaught exception

  Uncaught exception in test/ava/__tests__/App.spec.js

  /Users/lucaban/.ghq/github.com/mesqueeb/visualist-app/node_modules/jsdom/lib/jsdom/browser/Window.js:240

  SecurityError: localStorage is not available for opaque origins

  Window.get localStorage [as localStorage] (node_modules/jsdom/lib/jsdom/browser/Window.js:240:15)
  getStorage (node_modules/quasar/dist/quasar.umd.js:26456:26)
  Object.install (node_modules/quasar/dist/quasar.umd.js:26496:11)
  node_modules/quasar/dist/quasar.umd.js:1487:13
  Object.install (node_modules/quasar/dist/quasar.umd.js:1484:33)
  Function.Vue.use (node_modules/vue/dist/vue.runtime.common.dev.js:5048:22)
  node_modules/quasar/dist/quasar.umd.js:26584:9
  node_modules/quasar/dist/quasar.umd.js:8:83
  Object.<anonymous> (node_modules/quasar/dist/quasar.umd.js:11:2)

quasar-jest-test-loader-recipe

I started trying to build a quasar-jest-vue-test-loader, but hit a few snags. This is a specialized type of testing that would require its own recipe.

This is the basis taken from a master (incl. failing code to be caught by the test):
https://github.com/eddyerburgh/vue-test-loader

And here is my (VERY BROKEN) version:
https://github.com/nothingismagick/quasar-jest-cypress-test-loader-recipe

[MVP]: Documentation as dynamic dev server

Please note, this is not talking about the static docs available at the gh-pages branch.

Use unit-tested quasar for run-time ENV parsing to create dynamic documentation and pass it through storybook.

ZERO STATE
If you haven't configured your quasar app to use testing by adding the "test mode" during init or with quasar mode --add test, then this server does not exist.

BAD BOOT STATE
If the documentation isn't working, neither is your setup. The viewer of this "red page of fail" will see debugging suggestions and a wizard to help repair or update the system. This is the <noquasar> version of the live docs as localhost:9090/index.html

WIZARD BOOT STATE
@quasar/testing-base can be detected and this server started successfully. This is the default state if the test mode is initialised with only the @quasar/testing-base and no harnesses. The user is presented with a list of steps to be carried out in order to progress to the next phase. This wizard process will be a live monitor to the state of the set up your system - and should be throttled so that the user actually sees what is being installed.

ALIVE STATE
Testing is installed and functional for the highlighted icons below. In this case, it is Jest, Mocha Webpack, NVY, Chai, Cypress, Snyk - and of course Babel (but it seems i forgot to make the icon).

Background
This may seem complex, but technically it is a really great way to navigate the documents and view the myriad of reports - because the dynamic documentation of the "mode test" is actually a development server hosted locally within the scope of quasar-cli by the developer. It is built by each component of @quasar/testing that is currently active, and each test harness has a default "manual boot" process that is a "setup wizard", which has stages of installation that can only be triggered by the components being configured as described within the html-rendered and served docs - all within a quasar app. (Whether we actually turn this into an Electron app is something else entirely, but not out of the question for future work. Indeed, depending on adoption, this might even be an alternative way to debug and manage an entire installation of quasar.)

Here are some needs:

•  be an example of best practice "Quasar in use"
• be delivered as a module that hooks into current configs and creates a unique local-dev "storybook"
• use actual module data based on current setup
• have animated tabs in header
• left-panel: usage documentation for currently active unit-test harnesses
•  right-panel: config file display / editor
•  main-pane: tab-sensitive web reporter (lcov, cypress vids, lighthouse)
  key:value input fields for important files
  textArea for javascript
• include a license navigator (would be possible through an "extra")
• act as the browser for the reports from the test runners
• the icons available in the `@quasar/test/packages/base/lib/icons/${h.name}.png`

Just a sketch:

  <q-tabs v-for"h in harnesses">
    <q-tab :v-class="h.active ? "opaque" : "notOpaque" :avatar="h.name" :disable="!hactive">
  </q>
<script>
 export: {
   data () {
     return {
        harnesses: [
          {name:'jest',active:true},
          {name:'ava',active:false},
          {name:'mocha-webpack',active:true},
          {name:'tap',active:false}
// ( ... appium,chai,cypress,import-cost, istanbul, jest,karma,lighthouse,nightwatch,sinon, snyk,spectron,tap,testcafe )
       ]
     }
   }
}
</script>
<style>
.opaque {opacity:1}
.notOpaque {opacity:0.1}
</style>
    H.chroma(()=>{h.active ? harness.icon.display(color) : harness.icon.display(mono)})

[q-t] Exit Codes

As Razvan rightfully mentioned, we need to make sure that we provide CI friendly exit codes, and the best would be not to modify them, which means we are going to ship a whole bunch of script commands that can be executed to run:

• one-time jobs
• watch-jobs
• quasar jobs

We should think about using (and thereby recyling) the canonical naming style for the scripts too:

• testing/unit/mocha-webpack/watch
• testing/e2e/cypress/run

quasar build command fails after installing quasar testing jest app extension with '@quasar/testing-unit-jest" has missing index script'

I'm using the latest quasar bits but after installing quasar jest testing, my quasar build fails. See lower for details
so, to be clear, the build worked before I installed quasar jest testing app extension.
It worked before both on windows and linux and it fails now also both on windows and linux.
surprisingly, on my local machine I can fix the problem when using yarn instead of npm.
Unfortunately I cannot run yarn on on my build server, so I need a solution that works with npm.
What is also very strange is that the quasar package info when building is different in both scenarios (beta.2 versus beta.5)

build after npm install

 Build mode........ spa
 Pkg quasar........ v1.0.0-beta.2
 Pkg @quasar/app... v1.0.0-beta.4
 Debugging......... no

 app:extension ⚠️  App Extension "@quasar/testing-unit-jest" has missing index script... +0ms
Service 'myservice' failed to build: The command '/bin/sh -c node node_modules/@quasar/app/bin/quasar-build' returned a non-zero code: 1
##[error]/bin/bash failed with return code: 1
##[error]Bash failed with error: /bin/bash failed with return code: 1

build after yarn install:

 Build mode........ spa
 Pkg quasar........ v1.0.0-beta.5
 Pkg @quasar/app... v1.0.0-beta.9
 Debugging......... no

[q-s] Rig for test options

quasar init is going to have to ask the user whether or not they want tests. I would prefer to keep this logic outside of the quasar-starter-kit to avoid having to replicate it and keep it up to date. According to #6 this will be taken care of here in quasar-test, so perhaps there is a way to hook the "Set up tests?" question from within quasar-cli.

@rstoenescu - what do you think is best?

QDialog is not mounted in tests when used with mount()

Follow up on this Discord chat: https://discordapp.com/channels/415874313728688138/450312684790087691/560449585307320322

I am using 1.0.

If used with shallowMount(), it mounts the stub fine. If used with mount() the wrapper.html() doesn't have any mention of the <q-dialog> component.

Some Quasar components run in their own context (QDialog, QMenu, QTooltip). I am not sure, but maybe this is somehow causing this problem.

Usually, I would just full mount the component that uses Quasar components and then trigger the events on components like QBtn. Currently, I can't do that.

My component:

<template>
  <div>
    <q-dialog
      v-model="sendFailureModalOpened"
      persistent
      :maximized="true"
      transition-show="slide-up"
      transition-hide="slide-down"
      content-class="dark-modal"
    >
       // HTML, Vue components and other Quasar components
    </q-dialog>
  </div>
</template>

My test:

import { mount, createWrapper } from '@vue/test-utils';
import SendFailure from '@/components/Modals/SendFailure';
import { localVue, i18n } from '@/helpers/SetupLocalVue';
import Vuex from 'vuex';
import * as All from 'quasar'
const { Quasar, date } = All;

const components = Object.keys(All).reduce((object, key) => {
  const val = All[key]
  if (val && val.component && val.component.name != null) {
    object[key] = val
  }
  return object
}, {})

describe('SendFailure component', () => {
  let store;

  localVue.use(Quasar, { components });

  beforeEach(() => {
    store = new Vuex.Store();
  });

  it('renders and matches snapshot', () => {
    const wrapper = mount(SendFailure, {
      i18n,
      localVue,
      store,
    });

    expect(wrapper.element).toMatchSnapshot();
  });
});

Snapshot output:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SendFailure component renders and matches snapshot 1`] = `
<div>
  <!---->
</div>
`;

Jest: localVue.use() with all components triggers error

When trying to "import" all components / directives / plugins using:

localVue.use(Quasar, { components: All, directives: All, plugins: All })

(as found here for older Quasar versions)

I get the following error:

 TypeError: Cannot read property 'name' of undefined

      15 |   describe('Test layout', () => {
      16 |     const localVue = createLocalVue()
    > 17 |     localVue.use(Quasar, {
         |              ^
      18 |       //lang: langEn,
      19 |       components: All,
      20 |       directives: All,

      at node_modules/quasar/dist/quasar.common.js:837:57
          at Array.forEach (<anonymous>)
      at Object.install (node_modules/quasar/dist/quasar.common.js:835:70)
      at Function.Vue.use (node_modules/vue/dist/vue.common.dev.js:5073:22)
      at Function.instance.use (node_modules/@vue/test-utils/dist/vue-test-utils.js:7141:14)
      at Suite.use (src/layouts/__tests__/MyLayout_jest.spec.js:17:14)
      at Object.describe (src/layouts/__tests__/MyLayout_jest.spec.js:15:3)

⚠️ this trace: at node_modules/quasar/dist/quasar.common.js:837:57 may not match yours, since I've "unminified" that file

Minimal code for reproduction (add in a layout file)

<test lang="jest">
  import { mount, createLocalVue } from '@vue/test-utils'

  // "import Quasar, * as All from 'quasar'" triggers another error...
  import * as All from 'quasar' 
  const Quasar = All.Quasar
  
  describe('Test layout', () => {
    const localVue = createLocalVue()
    localVue.use(Quasar, { components: All, directives: All, plugins: All })
  })
</test>

Quasar info

quasar - 1.0.0-beta.11
@quasar/quasar-app-extension-testing-unit-jest - 1.0.0-beta.15 -- A Quasar App Extension for running Jest tests
@quasar/quasar-app-extension-testing - 1.0.0-rc.1 -- A Quasar App Extension for managing Test Harnesses

[RFC] Documentation Approach

This is more a question of approach - because it is clear that there will be documentation. Discussion points:

Granularity:

• Each test-harness should have its own documentation, follow a strict standardised format and also be collected and distributed as a monolithic work.

Locations:

• https://testing.quasar-framework.org
• https://quasar-framework.org/guide/
• https://github.com/quasarframework/quasar-test
• npmjs.com / yarnpkg.com

Distribution method:

• jsdocs / vuedocs / storybook / ???
• githooks (precommit => gh-pages, submodule push => SSR)

option to use global cypress, lighthouse and wdio

Need to have this option urgently. Rebuild times will suffer otherwise. @nklayman - can you take this?

Add basic unit test (from Jest) to Ava

@nklayman - for tracking

CI for this repository

Because of the rate at which testing frameworks are being developed and the increasing maturity of webpack and babel, we are going to need to integrate a robust CI process that actually pulls a current quasar repo image and attempts to build each of the test runners in isolation and then run at least superficial tests to make sure that nothing is broken. This should be automatic on new point releases to quasar-cli (perhaps with a webhook) and mandatory for the introduction of new test-runners to the pantheon.

[q-c] quasar new test

Adding a new test is not trivial and should follow a procedure similar to that used by the quasar-cli, however the target is liable to change a great deal depending on the test harness used. So quasar-cli should hook into exported functions made available from @quasar/test-utils

•  basic integration
• parse currently set testing harness and drop a new test there

Jest coverage looks in weird places.

Failed to collect coverage from /Users/lucaban/.ghq/github.com/mesqueeb/visualist-app/src-cordova/platforms/ios/Visualist.xcarchive/Products/Applications/Visualist.app/www/js/vendor.js
ERROR: Call retries were exceeded
STACK: Error: Call retries were exceeded

So I think there needs to be extra configuration added for when using the Quasar Testing suite together with cordova iOS & android, so it won't go looking in src-cordova ?

Unit-Jest Utils function: mountQuasar update / review

Software version

OS: OSX 10.14.3
Node: 10.15.1
NPM: 6.4.1
Any other software related to your bug:

What did you get as the error?

In general the quasarMount function doesn't behave as expected nor does the loop for the options object for injected boot files match the current api for the quasar.config.js file. (/test/jest/utils/index.js:42)

What were you expecting?

Anything passed to the method will be handled properly and pass tests as expected.

What steps did you take, to get the error?

Researched pre-existing issue: #33 -- That test still doesnt pass
Tried passing in a boot file that adds instance properties to Vue. Used the options object as { boot: [] }, and { plugins: [] }

[Documentation] broken link

[Contribution Guidelines](./.github/CONTRIBUTING.md) is broken

On the page: https://testing.quasar-framework.org/#high-level-overview

[q-t] Get all the icons for all the test harnesses

We need to have one icon for each harness.