tests(ui): add unit testing boilerplate and first tests (#12047)

Co-authored-by: Evert van der Weit <[email protected]>
Co-authored-by: Paolo Caleffi <[email protected]>

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "johnsoncodehk.volar"
+  ],
+}

.vscode/settings.json

@@ -1,6 +1,10 @@
 {
-  "eslint.workingDirectories": [
-    "./docs",
-    "./ui"
-  ]
+  "eslint.format.enable": false,
+  "editor.formatOnSave": false,
+  "eslint.workingDirectories": ["./docs", "./ui"],
+  "editor.tabSize": 2,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.validate": ["javascript", "vue"]
 }

ui/.eslintrc.js

@@ -5,21 +5,26 @@ module.exports = {
     sourceType: 'module'
   },
   env: {
-    browser: true
+    browser: true,
+    mocha: true
   },
   extends: [
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
     'plugin:vue/vue3-essential',
+    'plugin:cypress/recommended',
     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
     'standard'
   ],
   // required to lint *.vue files
   plugins: [
-    'vue'
+    'vue',
+    'no-only-tests'
   ],
   globals: {
     cordova: true,
+    cy: true,
+    expect: true,
     __statics: true,
     __QUASAR_VERSION__: true,
     __QUASAR_SSR__: true,
@@ -76,6 +81,10 @@ module.exports = {
     'vue/object-curly-spacing': 'off',
     'vue/script-indent': 'off',
     'vue/no-v-model-argument': 'off',
-    'vue/require-explicit-emits': 'off'
+    'vue/require-explicit-emits': 'off',
+
+    // Testing
+    'cypress/no-unnecessary-waiting': 'off',
+    'no-only-tests/no-only-tests': 'error'
   }
 }

ui/.gitignore

@@ -14,3 +14,4 @@ cordova
 debug.log
 package-lock.json
 .vscode
+__diff_output__

ui/dev/cypress.json

@@ -0,0 +1,13 @@
+{
+  "fixturesFolder": "../test/cypress/fixtures",
+  "screenshotsFolder": "../test/cypress/screenshots",
+  "videosFolder": "../test/cypress/videos",
+  "videoCompression": false,
+  "videoUploadOnPasses": false, 
+  "component": {
+    "componentFolder": "../src",
+    "testFiles": "**/*.spec.js",
+    "pluginsFile": "../test/cypress/plugins/unit.js",
+    "supportFile": "../test/cypress/support/unit.js"
+  }
+}

ui/package.json

@@ -27,7 +27,10 @@
     "build": "node build/script.build.js",
     "test": "yarn lint && yarn build",
     "lint": "eslint --ext .js,.vue src dev",
-    "lint-fix": "eslint --ext .js,.vue src dev --fix"
+    "lint-fix": "eslint --ext .js,.vue src dev --fix",
+    "test:unit": "cd ./dev && cypress open-ct && cd ..",
+    "test:unit:ci": "cd ./dev && cypress run-ct && cd ..",
+    "test:create": "node ./test/cypress/helpers/create-spec.js -c"
   },
   "repository": {
     "type": "git",
@@ -64,6 +67,7 @@
     "@babel/eslint-parser": "^7.13.14",
     "@quasar/app": "^3.0.0",
     "@quasar/extras": "^1.12.0",
+    "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.0.1",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
     "babel-preset-es2015-rollup": "^3.0.0",
@@ -72,7 +76,9 @@
     "eslint": "^7.4.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-friendly-formatter": "^4.0.1",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-no-only-tests": "^2.6.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-vue": "^7.0.0",
@@ -81,13 +87,17 @@
     "json-beautify": "^1.1.1",
     "module-alias": "^2.2.2",
     "prettier": "^2.4.1",
+    "quasar": "^2.1.9",
     "recast": "^0.18.5",
     "rimraf": "^3.0.1",
     "rollup": "^2.34.0",
     "rollup-plugin-typescript2": "^0.29.0",
     "table": "^6.0.4",
     "tslib": "^2.0.3",
-    "uglify-es": "^3.3.9"
+    "uglify-es": "^3.3.9",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0",
+    "yargs": "^17.3.0"
   },
   "vetur": {
     "tags": "dist/vetur/quasar-tags.json",

ui/src/components/avatar/__tests__/QAvatar.spec.js

@@ -0,0 +1,121 @@
+import { mount } from '@cypress/vue'
+import QAvatar from '../QAvatar'
+
+describe('Avatar API', () => {
+  describe('Props', () => {
+    describe('Category: content', () => {
+      describe('(prop): icon', () => {
+        it('should render an icon', () => {
+          const icon = 'bug_report'
+          mount(QAvatar, {
+            props: {
+              icon,
+              color: 'grey'
+            }
+          })
+
+          cy.get('.q-avatar')
+            .get('.q-icon')
+            .should('have.text', `${ icon }`)
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): font-size', () => {
+        it('should set the font-size', () => {
+          const size = '40px'
+          // Doing em/rem units here does not work
+          // Cypress looks at actual computed values in the browser
+          const fontSize = '32px'
+          mount(QAvatar, {
+            props: {
+              size,
+              fontSize,
+              color: 'grey'
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.css', 'font-size', size)
+            .get('.q-avatar__content')
+            .should('have.css', 'font-size', fontSize)
+        })
+      })
+
+      describe('(prop): color', () => {
+        it('should set a background color', () => {
+          const color = 'red'
+          mount(QAvatar, {
+            props: {
+              color
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.class', `bg-${ color }`)
+        })
+      })
+
+      describe('(prop): text-color', () => {
+        it('should set a text color', () => {
+          const textColor = 'red'
+          mount(QAvatar, {
+            props: {
+              textColor
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.class', `text-${ textColor }`)
+        })
+      })
+
+      describe('(prop): square', () => {
+        it('should create a square avatar', () => {
+          mount(QAvatar, {
+            props: {
+              square: true,
+              color: 'grey'
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.class', 'q-avatar--square')
+            .should('have.css', 'border-radius', '0px')
+        })
+      })
+
+      describe('(prop): rounded', () => {
+        it('should create a rounded avatar', () => {
+          mount(QAvatar, {
+            props: {
+              rounded: true,
+              color: 'grey'
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.class', 'rounded-borders')
+        })
+      })
+    })
+  })
+
+  describe('Slots', () => {
+    describe('(slot): default', () => {
+      it('render the text in the default slot', () => {
+        const text = 'QQ'
+        mount(QAvatar, {
+          slots: {
+            // Using only a string here results in an error, this is a workaround
+            default: () => text
+          }
+        })
+
+        cy.get('.q-avatar')
+          .should('have.text', text)
+      })
+    })
+  })
+})

ui/src/components/badge/__tests__/QBadge.spec.js

@@ -0,0 +1,74 @@
+// import { mount } from '@cypress/vue'
+// import QBadge from '../QBadge'
+
+// const snapshotOptions = { customSnapshotsDir: '../src/components/badge/__tests__' }
+
+describe('Badge API', () => {
+  describe('Props', () => {
+    describe('Category: content', () => {
+      describe('(prop): floating', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): multi-line', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): label', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): align', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): text-color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): transparent', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): outline', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): rounded', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+
+  describe('Slots', () => {
+    describe('(slot): default', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})

ui/src/components/btn/__tests__/QBtn.spec.js

@@ -0,0 +1,55 @@
+describe('Btn API', () => {
+  describe('Props', () => {
+    describe('Category: behavior', () => {
+      describe('(prop): percentage', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): dark-percentage', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): round', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+
+  describe('Slots', () => {
+    describe('(slot): default', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(slot): loading', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('Events', () => {
+    describe('(event): click', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('Methods', () => {
+    describe('(method): click', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})