Automating tests on opened PRs

.github/workflows/tests-on-pr.yml

@@ -0,0 +1,65 @@
+name: UI Tests
+
+on:
+  pull_request:
+    types: [opened, edited, synchronize ]
+    branches:    
+      - 'dev'
+    paths:
+      - 'ui/**'
+
+jobs:
+  tests:      
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chrome, firefox]
+
+    name: Tests on ${{ matrix.browser }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14
+
+      - name: Install dependencies
+        run: cd ./ui && npm i
+
+      - name: Run tests in ${{ matrix.browser }} browser
+        uses: cypress-io/github-action@v2
+        with:
+          browser: ${{ matrix.browser }}
+          command: npm run test:component:ci
+          working-directory: ui
+          tag: ${{ github.event_name }} # Tag will be either "push" or "pull_request"
+          group: Tests in ${{ matrix.browser }} browser
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} # Dashboard record key as an environment variable        
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # To allow accurately detecting a build vs a re-run build
+          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }} # Either PR title or default information
+
+      - name: Add workflow summary
+        env:
+          SUMMARY: |
+            Hi @${{ github.event.pull_request.user.login }} and thanks for the contribution! 👏
+
+            We've detected file changes inside the `ui` folder, so that triggered our Cypress component tests.
+        run: echo "$SUMMARY" >> $GITHUB_STEP_SUMMARY
+        if: always()
+
+      - name: Output failure message
+        env: 
+          FAILURE: ":bangbang: Seems like some of the tests are failing. Please amend 'em for someone from the team to be able to review it."
+        run: echo "$FAILURE" >> $GITHUB_STEP_SUMMARY
+        if: failure() || cancelled()
+
+      - name: Output success message
+        env: 
+          SUCCESS: ":white_check_mark: Seems like all the tests passed successfully, so your PR is ready to be reviewed!"
+        run: echo "$SUCCESS" >> $GITHUB_STEP_SUMMARY
+        if: success()

CONTRIBUTING.md

@@ -50,6 +50,8 @@ Hi! We are really excited that you are interested in contributing to Quasar 👏
   - If you are resolving a special issue, add `(fix: #xxxx[,#xxx])` (#xxxx is the issue id) in your PR title for a better release log, e.g. `fix: update entities encoding/decoding (fix #3899)`.
   - Provide detailed description of the bug in the PR. A live demo is preferred.
 
+- Cypress e2e tests will run every time there is a code change in any file of the `ui` folder.
+
 ## Development Setup
 
 You will need [Node.js](http://nodejs.org) **version 12.22.1+** along [Yarn](https://yarnpkg.com/) or [NPM](https://docs.npmjs.com/getting-started/installing-node). Read `package.json` and take notice of the scripts you can use.

README.md

@@ -10,6 +10,8 @@
 <a href="https://forum.quasar.dev" target="_blank"><img src="https://img.shields.io/badge/community-forum-brightgreen.svg"></a>
 [![https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg](https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg)](https://good-labs.github.io/greater-good-affirmation)
 
+[![UI Tests](https://github.com/quasarframework/quasar/actions/workflows/tests-on-pr.yml/badge.svg?branch=dev)](https://github.com/quasarframework/quasar/actions/workflows/tests-on-pr.yml)
+
 Please submit a PR to https://github.com/quasarframework/quasar-awesome with your website/app/Quasar tutorial/video etc. Thank you!
 
 ## Supporting Quasar

ui/dev/cypress.json

@@ -1,4 +1,5 @@
 {
+  "projectId": "5zr217",
   "fixturesFolder": "../test/cypress/fixtures",
   "screenshotsFolder": "../test/cypress/screenshots",
   "pluginsFile": "../test/cypress/plugins/index.js",

ui/package.json

@@ -30,7 +30,7 @@
     "lint": "eslint --ext .js,.vue src dev",
     "lint-fix": "eslint --ext .js,.vue src dev --fix",
     "test:component": "cd ./dev && cypress open-ct && cd ..",
-    "test:component:ci": "cd ./dev && cypress run-ct && cd ..",
+    "test:component:ci": "cd ./dev && cypress run-ct --record --parallel && cd ..",
     "test:create": "node ./test/cypress/helpers/create-spec.js -c"
   },
   "repository": {

ui/src/components/menu/__tests__/QMenu.spec.js

@@ -15,7 +15,7 @@ describe('Menu API', () => {
       describe('(prop): touch-position', () => {
         it('should show menu at the position of the click', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               'touch-position': true
             }
           })
@@ -71,7 +71,7 @@ describe('Menu API', () => {
 
         it('should not close the menu when clicking outside the menu when persistent', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               persistent: true
             }
           })
@@ -89,7 +89,7 @@ describe('Menu API', () => {
 
         it('should not close the menu when hitting the escape key when persistent', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               persistent: true
             }
           })
@@ -129,7 +129,7 @@ describe('Menu API', () => {
 
         it('should close the menu when clicking a menu child without v-close-popup when auto-close is true', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               'auto-close': true
             }
           })
@@ -174,7 +174,7 @@ describe('Menu API', () => {
 
         it('should not switch focus back to parent element when closing if no-refocus is true', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               'no-refocus': true
             }
           })
@@ -208,7 +208,7 @@ describe('Menu API', () => {
 
         it('should no switch focus to the menu when opening with no-focus is true', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               'no-focus': true
             }
           })
@@ -226,7 +226,7 @@ describe('Menu API', () => {
       describe('(prop): fit', () => {
         it('should show a menu that matches the full with of the target when fit is supplied', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               target: '.other-target',
               fit: true
             }
@@ -245,7 +245,7 @@ describe('Menu API', () => {
 
         it('should show a menu that not matches the full with of the target when fit is false', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               target: '.other-target',
               fit: false
             }
@@ -266,7 +266,7 @@ describe('Menu API', () => {
       describe('(prop): cover', () => {
         it('should show a menu that overlays the target when using cover', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               cover: true
             }
           })
@@ -279,7 +279,7 @@ describe('Menu API', () => {
 
         it('should show a menu that overlays the target when using cover', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               cover: true,
               target: '.other-target'
             }
@@ -293,7 +293,7 @@ describe('Menu API', () => {
 
         it('should ignore self property when using cover', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               cover: true,
               self: 'center right',
               target: '.other-target'
@@ -328,7 +328,7 @@ describe('Menu API', () => {
               horizontalSelf.forEach((hS) => {
                 it(`should position Anchor(${ vA } ${ hA }) & Self(${ vS } ${ hS })  correctly`, () => {
                   mount(WrapperOne, {
-                    attrs: {
+                    props: {
                       anchor: `${ vA } ${ hA }`,
                       self: `${ vS } ${ hS }`
                     }
@@ -357,7 +357,7 @@ describe('Menu API', () => {
           verticalSelf.forEach((vS) => {
             it(`should offset vertical position Anchor(${ vA } left) & Self(${ vS } left) correctly`, () => {
               mount(WrapperOne, {
-                attrs: {
+                props: {
                   anchor: `${ vA } left`,
                   self: `${ vS } left`,
                   offset: [ 0, 20 ]
@@ -378,7 +378,7 @@ describe('Menu API', () => {
           horizontalSelf.forEach((hS) => {
             it(`should offset horizontal position Anchor(top ${ hA }) & Self(top ${ hS }) correctly`, () => {
               mount(WrapperOne, {
-                attrs: {
+                props: {
                   anchor: `top ${ hA }`,
                   self: `top ${ hS }`,
                   offset: [ 20, 0 ]
@@ -399,7 +399,7 @@ describe('Menu API', () => {
       describe('(prop): dark', () => {
         it('should set the --q-dark color as background and white text color', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               dark: true
             }
           })
@@ -414,7 +414,7 @@ describe('Menu API', () => {
       describe('(prop): square', () => {
         it('should not have border-radius when using this prop', () => {
           mount(WrapperOne, {
-            attrs: {
+            props: {
               square: true
             }
           })
@@ -429,7 +429,7 @@ describe('Menu API', () => {
         it('should specify a max-height when setting this prop', () => {
           const maxHeight = '30px'
           mount(WrapperOne, {
-            attrs: {
+            props: {
               maxHeight
             }
           })
@@ -444,7 +444,7 @@ describe('Menu API', () => {
         it('should specify a max-width when setting this prop', () => {
           const maxWidth = '30px'
           mount(WrapperOne, {
-            attrs: {
+            props: {
               maxWidth
             }
           })
@@ -470,7 +470,7 @@ describe('Menu API', () => {
       it('should emit @escape-key event when escape key is pressed', () => {
         const fn = cy.stub()
         mount(WrapperOne, {
-          attrs: {
+          props: {
             onEscapeKey: fn
           }
         })
@@ -493,7 +493,7 @@ describe('Menu API', () => {
       it('should not emit @escape-key event when menu is persistent', () => {
         const fn = cy.stub()
         mount(WrapperOne, {
-          attrs: {
+          props: {
             onEscapeKey: fn,
             persistent: true
           }
@@ -520,7 +520,7 @@ describe('Menu API', () => {
     describe('(method): updatePosition', () => {
       it('should reposition the menu when it is no longer in correct position', () => {
         mount(WrapperTwo, {
-          attrs: {
+          props: {
             anchor: 'bottom left',
             self: 'bottom left'
           }
@@ -564,7 +564,7 @@ describe('Menu API', () => {
     describe('(method): focus', () => {
       it('should focus the menu', () => {
         mount(WrapperOne, {
-          attrs: {
+          props: {
             'no-focus': true
           }
         })
@@ -586,7 +586,7 @@ describe('Menu API', () => {
 
       it('should focus the autofocus element inside the menu', () => {
         mount(WrapperTwo, {
-          attrs: {
+          props: {
             'no-focus': true
           }
         })

ui/src/components/select/QSelect.js

@@ -127,7 +127,7 @@ export default createComponent({
 
   emits: [
     ...useFieldEmits,
-    'add', 'remove', 'input-value',
+    'add', 'remove', 'input-value', 'new-value',
     'keyup', 'keypress', 'keydown',
     'filter-abort'
   ],