• Stars
    star
    179
  • Rank 214,039 (Top 5 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Testing Harness App Extensions for the Quasar Framework 2.0+

@quasar/testing

Youโ€™re looking at Quasar v2 testing docs. If you're searching for Quasar v1 docs, head here

Check out the migration status here

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, if you so choose, 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

The Quasar team spend a considerabile 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;
  • 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

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.

Roadmap

Test harnesses currently verified to have valid "integration" are checked off in the following list. We won't commit to any deadline for integrations of new harnesses.

UNIT

E2E

QUALITY

UTILS

Further Reading

Books

Tutorials

Documentation

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

License

MIT ยฉ2022 - present - Paolo Caleffi & Razvan Stoenescu

All Icons ยฉ the respective owners

More Repositories

1

quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
JavaScript
25,881
star
2

quasar-awesome

๐ŸŽ‰ A list of awesome things related to Quasar
1,756
star
3

quasar-ui-qcalendar

QCalendar - Quasar App Extension, Vue CLI plug-in and UMD distributions available
Vue
425
star
4

quasar-play

[<= 0.17] Quasar Framework Showcase App
Vue
318
star
5

quasar-ui-qmediaplayer

QMediaPlayer for Quasar
JavaScript
212
star
6

quasar-cli

[DEPRECATED, <= 0.17) Quasar Framework - CLI
JavaScript
203
star
7

icongenie

CLI tool to generate all the icons and splashscreens for your Quasar Apps
JavaScript
181
star
8

quasar-ui-qmarkdown

A Quasar UI App Extension to display inline markdown
JavaScript
157
star
9

quasar-framework.org

[DEPRECATED, v0.17] Quasar Framework - The Official Website
HTML
110
star
10

app-extension-apollo

The official Quasar App-Extension for Apollo and GraphQL - Currently Beta!
JavaScript
110
star
11

quasar-starter-kit

Quasar CLI Starter Kit
JavaScript
107
star
12

app-extension-qpdfviewer

View PDF documents in your Quasar app
JavaScript
102
star
13

app-extension-dotenv

Official Quasar App Extension for dotenv
JavaScript
71
star
14

firebase-sample-apps

Quasar sample apps for Firebase integration.
JavaScript
68
star
15

vue-cli-plugin-quasar

Quasar Framework Vue CLI plugin
JavaScript
68
star
16

quasar-ui-qwindow

QWindow - Floating, moveable, resizable windows
JavaScript
56
star
17

quasar-nuxt

[TEMPORARILY DISCONTINUED] Nuxt module for Quasar Framework
Vue
56
star
18

quasar-ui-qiconpicker

QIconPicker - Quasar App Extension
JavaScript
55
star
19

quasar-template-meteor

Quasar Starter Kit for Meteor
Vue
50
star
20

app-extension-typescript

Add TypeScript to your existing Quasar 1.0 JS project
JavaScript
50
star
21

app-extension-qenv

Load targeted variables into your quasar project
JavaScript
50
star
22

quasar-ui-qactivity

Create activity timeline
JavaScript
46
star
23

quasar-ui-qribbon

A Ribbon component for Quasar Framework v1.0
JavaScript
44
star
24

quasar-template-pwa

[DEPRECATED] Quasar PWA Boilerplate / Starter kit
JavaScript
43
star
25

quasar-template-default

[DEPRECATED] Quasar App Boilerplate / Starter kit
JavaScript
41
star
26

quasar-ui-qflashcard

QFlashcard component for Quasar
JavaScript
40
star
27

quasar-ui-qscroller

QScroller - App Extension, Vue CLI and UMD for Quasar
JavaScript
38
star
28

quasar-extras

[DEPRECATED, <= 0.17, moved to main repo] Fonts, icons and animations for Quasar Framework
CSS
32
star
29

quasar-ui-qoverlay

Overlays simplified
JavaScript
32
star
30

quasar-art

Quasar Framework Artworks
SCSS
31
star
31

app-extension-qzoom

Zoom any content (image, video, text, components, ...)
JavaScript
28
star
32

quasar-wrapper-feathersjs-api

[DEPRECATED] Quasar Framework Feathersjs API Wrapper
JavaScript
28
star
33

quasar-hackernews

HackerNews clone built with Vue 2.0, vue-router & vuex & Quasar Framework, with server-side rendering
JavaScript
25
star
34

app-extension-examples

Examples of basic Quasar App Extensions
JavaScript
18
star
35

rfcs

RFCs for Quasar Framework
17
star
36

electron-wrapper

[DEPRECATED] Electron Wrapper for Quasar App
JavaScript
17
star
37

quasar-starter-kit-umd

Quasar UMD/standalone example
HTML
16
star
38

app-extension-qplaceholder

QPlaceholder - Add a placeholder while your data is being retrieved from the server.
JavaScript
16
star
39

quasar-starter-kit-app-extension

Quasar Framework starter kit for creating App Extensions
JavaScript
14
star
40

eslint-plugin-quasar

Quasar Framework plugin for ESLint
JavaScript
12
star
41

quasar-wrapper-graphql-api

[DEPRECATED] Quasar Framework GraphQL API Wrapper
JavaScript
11
star
42

quasar-starter-kit-ui

Quasar Framework UI Template
JavaScript
10
star
43

quasar-codesandbox

A Codesandbox Template
JavaScript
10
star
44

quasar-wrapper-express-api

[DEPRECATED] Quasar Framework Express API Wrapper
JavaScript
9
star
45

app-extension-universal-fs

[WIP] @quasar/universal-fs Quasar App Extension
JavaScript
9
star
46

app-extension-feathersjs

[WIP] The official Quasar 1.0 App-Extension for feathersjs
JavaScript
6
star
47

app-extension-wizard

[DISCONTINUED] The wizard collects common App Extensions and lets you install a group and choose individual ones.
JavaScript
5
star
48

new-issue.quasar.dev

WIP - Handling new issue reporting for Quasar Github account
JavaScript
4
star
49

cdn

Quasar Framework CDN
3
star
50

app-extension-obyte

An app extension for integrating obyte.js into a Quasar 1.0 Project
JavaScript
2
star
51

legacy-create

The legacy "quasar create" command into its own CLI
JavaScript
2
star
52

dist-v0-16.quasar-framework.org

Distributable for v0-16.quasarframework.org
HTML
1
star
53

dist-v0-13.quasar-framework.org

Distributable for v0-13.quasarframework.org
HTML
1
star
54

dist-v0-15.quasar-framework.org

Distributable for v0-15.quasarframework.org
HTML
1
star