Testing



  • @s-molinari I didn’t know Flow, I’m going to give it a try. Thanks for the link @MusicForMellons .



  • @LaurentPayot - yeah. I am not really begging here at all to get any type system going. In fact, I am more like you in my thinking. To me a type system is a crutch for the “not-so-careful” or “not-so-experienced” or those afraid of JS’s dynamic capabilities and them being so odd compared to stricter typed languages. Type checking can, however, contribute to what many say is a better developer experience. I personally haven’t used TS or Flow enough to say “yup. That is correct.” And, good design, programming and testing can offer a nice developer experience too. 😉

    Scott



  • @LaurentPayot We are all very different in our way of thinking, and I must just again realize, that we all choose tools that emphasize our strong sides, and supports ours weak ones.

    For me, and most of the ones I have worked with, strong types (typescript in this case) have been a great help (I also work in C++) 🙂

    I have seen coffeescript and flow, but I like the fact that TS follows ES standards so closely, as it makes it easy to reason about and easy to introduce to new people.



  • I had a look and the good thing about flow is that it automagically warns you when you mix types without changing your code. That’s the best of both worlds. Unfortunately for me it doesn’t work with Coffeescript 2.0 …



  • Flow sounds really nice too, but I have invested way to much time in Typescript to make the change now 🙂



  • I was under the impression Flow was like TypeScript, just with the added benefit of having a better type inference and also no transpiling (aka “blazing fast”). This article makes a pretty good sell of it all.

    https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/

    Scott



  • I am trying to test with webpack-karma, I tried some configurations and now I am stucked here:

    [122] ./node_modules/util/node_modules/inherits/inherits_browser.js 672 bytes {0} [built]
    + 108 hidden modules

    ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Hello.vue
    Module not found: Error: Can’t resolve ‘quasar’ in ‘/home/mateu/VueProjects/sails1/cima20js/assets/frontend/src/components’
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Hello.vue 3:0-203
    @ ./src/components/Hello.vue
    @ ./src/test/components/hello.Spec.coffee

    ERROR in ./src/test/components/hello.Spec.coffee
    Module not found: Error: Can’t resolve ‘quasar’ in ‘/home/mateu/VueProjects/sails1/cima20js/assets/frontend/src/test/components’
    @ ./src/test/components/hello.Spec.coffee 3:0-27
    24 08 2017 06:01:03.673:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
    24 08 2017 06:01:03.674:INFO [launcher]: Launching browsers PhantomJS, Firefox with unlimited concurrency
    24 08 2017 06:01:03.724:INFO [launcher]: Starting browser PhantomJS
    24 08 2017 06:01:03.739:INFO [launcher]: Starting browser Firefox
    24 08 2017 06:01:04.101:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket vhe0wjpMOy2tMBa0AAAA with id 74984205
    24 08 2017 06:01:05.869:INFO [Firefox 55.0.0 (Ubuntu 0.0.0)]: Connected on socket 5AWcaU3_5W61T549AAAB with id 91018619

    Thank you for your help.
    By the way, thankyou for made quasar possible is what I was waiting for
    Mateu



  • Hello There Quasar Community
    I was working the last days integrating some Testing for Quasar Framwork, I Know there is some difficulties there, This is a little project am sharing with you guys, Your comments, I’ll be very happy to hear them thanks 🙂
    https://github.com/KaisNeffati/VueJSQuasarTesting
    Sincerly





  • @kais Thank you for your contribution. I’ve found it very helpful to get unit and e2e started. Is this work you’ve done still considered covered under the MIT licensing that the original Quasar is under?



  • Hey,

    Good news (Qusar v0.15.1x)
    I spent last month on configuring Qusar v0.15.1x with Jest 22 and Babel 6. It was real pain in the ass (today I’m thinking about better runner than jest). Important - it works as expected (tests, coverage, reporting to sonar). Will try to find time to publish example project on GH.

    Bad news (Qusar v0.16.xx)
    Yesterday I started migration to Quasar v0.16.xx, Jest 23 and Babel 7.
    Right now striggling with module-resolver and vue files,

    Test suite failed to run
        TypeError: Cannot read property 'includes' of undefined
              at node_modules/babel-plugin-module-resolver/lib/normalizeOptions.js:148:22
              at node_modules/reselect/lib/index.js:86:37
              at node_modules/reselect/lib/index.js:36:25
              at PluginPass.pre (node_modules/babel-plugin-module-resolver/lib/index.js:53:60)
              at transformFile (node_modules/@babel/core/lib/transformation/index.js:98:25)
              at runSync (node_modules/@babel/core/lib/transformation/index.js:35:3)
              at transformSync (node_modules/@babel/core/lib/transform-sync.js:15:38)
              at Object.transform (node_modules/@babel/core/lib/transform.js:20:65)
              at compileBabel (node_modules/vue-jest/lib/compilers/babel-compiler.js:21:21)
              at processScript (node_modules/vue-jest/lib/process.js:29:10)
    


  • @marek-kaczkowski - I am working on a mode for quasar v0.16+ that will set all of this up for you and am looking for feedback and bottlenecks that our users are facing. Feel free to send me a private message and we can talk more in detail about it. If you prefer, you can also escalate 0.16 problems to the repo:

    https://github.com/quasarframework/quasar-test



  • @marek-kaczkowski, What does your .babelrc file configuration look like?

    Here’s mine for Quasar v0.16.0:

    {
      "presets": [
        [
          "@babel/preset-env", {
            "modules": false,
            "loose": false,
            "useBuiltIns": "usage"
          }
        ],
        [
          "@babel/preset-stage-2", {
            "modules": false,
            "loose": false,
            "useBuiltIns": true,
            "decoratorsLegacy": true
          }
        ]
      ],
      "plugins": [
        [
          "@babel/transform-runtime", {
            "polyfill": false,
            "regenerator": false
          }
        ]
      ],
      "comments": false,
      "env": {
        "test": {
          "presets": [
            ["env", { "targets": { "node": "current" }}]
          ],
          "plugins": [
            [
              "module-resolver",
              {
                "root": [
                  "./src"
                ],
                "alias": {
                  "quasar": "quasar-framework/dist/quasar.mat.esm.js",
                  "^vue$": "vue/dist/vue.common.js"
                }
              }
            ]
          ]
        }
      }
    }
    

    However, I am running into the following issue:

     FAIL  src/components/search1_primary/search_primary.test.js
      ● Test suite failed to run
    
        ReferenceError: Unknown plugin "@babel/transform-runtime" specified in "/Users/jjpro/Github/Web/dessert/.babelrc" at 0, attempted to resolve relative to "/Users/jjpro/Github/Web/dessert"
    

    The configurations worked in Quasar v0.15.xx but unfortunately, not in v0.16.0, I’ll keep you posted if I get it working.



  • Update to previous message, seems Jest has issues with Babel 7 (Quasar v0.16 uses Babel 7 I believe) therefore the following changes need to be made: Source

    1. rm -rf node_modules
    2. rm package-lock.json
    npm install --save-dev babel-jest babel-core@^7.0.0-0 @babel/core
    

    You would also need to reconfigure the .babelrc file “env” segment to address the ‘babel-preset-env’ error. So:

    "env": {
        "test": {
          "presets": [
            ["@babel/env", { "targets": { "node": "current" }}]
          ],
          "plugins": [
            [
              "module-resolver",
              {
                "root": [
                  "./src"
                ],
                "alias": {
                  "quasar": "quasar-framework/dist/quasar.mat.esm.js",
                  "^vue$": "vue/dist/vue.common.js"
                }
              }
            ]
          ]
        }
      }
    

    However, this results in the error:

    Details:
    
        /Users/jjpro/Github/Web/ucasa/node_modules/quasar-framework/dist/quasar.mat.esm.js:23171
        export default index_esm;
        ^^^^^^
    
        SyntaxError: Unexpected token export
    
        > 1 | import Quasar, * as All from 'quasar'
            | ^
          2 | import Vuex from 'vuex'
          3 | import { shallowMount, createLocalVue } from '@vue/test-utils'
    

    So if anyone resolves this? That’d be amazing.



  • Here was what I got to get mine to work.

    .babelrc

    {
      "presets": [
        [
          "@babel/preset-env", {
            "modules": false,
            "loose": false,
            "useBuiltIns": "usage"
          }
        ],
        [
          "@babel/preset-stage-2", {
            "modules": false,
            "loose": false,
            "useBuiltIns": true,
            "decoratorsLegacy": true
          }
        ]
      ],
      "plugins": [
        [
          "@babel/plugin-transform-runtime", {
            "polyfill": false,
            "regenerator": false
        }
        ]
      ],
      "comments": false,
      "env": {
        "test": {
          "presets": [
            ["@babel/env", { "targets": { "node": "current" }}]
          ],
          "plugins": [
            [
              "module-resolver",
              {
                "root": [
                  "./src"
                ],
                "alias": {
                  "quasar": "quasar-framework/dist/quasar.mat.esm.js",
                  "^vue$": "vue/dist/vue.common.js"
                }
              }
            ]
          ]
        }
      }
    }
    

    packages.json

    "jest": {
        "moduleFileExtensions": [
          "js",
          "vue"
        ],
        "collectCoverageFrom": [
          "**/*.{vue}"
        ],
        "transformIgnorePatterns": [
          "node_modules/core-js",
          "node_modules/babel-runtime",
          "node_modules/lodash",
          "node_modules/vue"
        ],
        "moduleNameMapper": {
          "quasar": "<rootDir>/node_modules/quasar-framework",
          "^src/(.*)$": "<rootDir>/src/$1",
          "^assets/(.*)$": "<rootDir>/src/assets/$1",
          "^@/(.*)$": "<rootDir>/src/components/$1",
          "^variables/(.*)$": "<rootDir>/src/themes/quasar.variables.sty/$1"
        },
        "transform": {
          "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
          ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
        }
      },
      "dependencies": {
        "@babel/runtime": "^7.0.0-beta.49",
        "axios": "^0.18.0",
        "cordova": "^8.0.0",
        "cordova-cli": "^1.0.0",
        "mediaelement": "^4.2.9",
        "moment": "^2.22.2",
        "quasar": "0.0.18",
        "vue": "^2.5.16",
        "vue-i18n": "^7.3.3",
        "vue-rollbar": "^0.2.2",
        "vue-timers": "^1.7.3",
        "vue-video-player": "^5.0.2",
        "vue-worker": "^1.2.1",
        "vuetify": "^1.0.19",
        "vuex": "^3.0.1"
      },
      "devDependencies": {
        "@babel/core": "^7.0.0-beta.49",
        "@babel/plugin-transform-runtime": "^7.0.0-beta.49",
        "babel-core": "^7.0.0-beta.3",
        "babel-eslint": "^8.2.1",
        "babel-jest": "^23.0.1",
        "babel-plugin-module-resolver": "^3.1.1",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-preset-env": "^1.7.0",
        "babel-runtime": "^6.26.0",
        "devtron": "^1.4.0",
        "electron": "^2.0.0",
        "electron-debug": "^1.5.0",
        "electron-devtools-installer": "^2.2.4",
        "electron-packager": "^12.1.0",
        "eslint": "^4.18.2",
        "eslint-config-standard": "^11.0.0",
        "eslint-friendly-formatter": "^4.0.1",
        "eslint-loader": "^2.0.0",
        "eslint-plugin-import": "^2.9.0",
        "eslint-plugin-node": "^6.0.1",
        "eslint-plugin-promise": "^3.7.0",
        "eslint-plugin-standard": "^3.0.1",
        "eslint-plugin-vue": "^4.3.0",
        "jest": "^23.1.0",
        "jest-vue-preprocessor": "^1.4.0",
        "jsdom": "^11.11.0",
        "quasar-cli": "^0.16.0",
        "vue-jest": "^2.6.0",
        "vue-server-renderer": "^2.5.16"
      },
    




  • This post is deleted!


  • @jaxon did you found a solution for this? i’m stuck there as well



  • @visiond Hey Vision, unfortunately not. I’m just putting testing on ‘Ice’ tell its out of the box with the Quasar CLI, should be after v1.0 hopefully.



  • @jaxon I found the solution, in your package.json, inside moduleNameMapper use
    "quasar": "<rootDir>/node_modules/quasar-framework/dist/umd/quasar.mat.umd.js"

    Hope it helps 😃