testing in version 0.9.1


  • Admin

    @Martin Thanks! All I want is to grow Quasar. Not thinking about any job interview. I’ve quit high paying jobs so that I could write Quasar and made a hell lot of sacrifices (and still doing them). Just having a dream here which slowly becomes a reality and that’s reason enough to drive me forward.



  • Maybe this can help some of you, we have a running test setup with Quasar 0.9.1 and Webpack 2. Won’t be perfect for direct usage because we integrated Quasar later into an existing plain vue.js project, but it should get you in the right direction:

    Dependencies in package.json:

    "devDependencies": {
        "autoprefixer": "^6.4.0",
        "babel-core": "^6.0.0",
        "babel-eslint": "^7.0.0",
        "babel-loader": "^6.0.0",
        "babel-plugin-transform-runtime": "^6.0.0",
        "babel-polyfill": "^6.16.0",
        "babel-preset-es2015": "^6.0.0",
        "babel-preset-stage-2": "^6.0.0",
        "babel-register": "^6.0.0",
        "chai": "^3.5.0",
        "chalk": "^1.1.3",
        "chromedriver": "^2.21.2",
        "colors": "^1.1.2",
        "connect-history-api-fallback": "^1.1.0",
        "cross-spawn": "^4.0.2",
        "css-loader": "^0.25.0",
        "eslint": "^3.9.1",
        "eslint-config-standard": "^6.2.1",
        "eslint-friendly-formatter": "^2.0.5",
        "eslint-loader": "^1.5.0",
        "eslint-plugin-html": "^1.3.0",
        "eslint-plugin-promise": "^3.3.0",
        "eslint-plugin-standard": "^2.0.1",
        "eventsource-polyfill": "^0.9.6",
        "express": "^4.13.3",
        "extract-text-webpack-plugin": "^2.0.0-beta.4",
        "file-loader": "^0.9.0",
        "function-bind": "^1.0.2",
        "html-webpack-plugin": "^2.8.1",
        "http-proxy-middleware": "^0.17.2",
        "inject-loader": "^2.0.1",
        "isparta-loader": "^2.0.0",
        "json-loader": "^0.5.4",
        "karma": "^1.3.0",
        "karma-coverage": "^1.1.1",
        "karma-mocha": "^1.2.0",
        "karma-phantomjs-launcher": "^1.0.0",
        "karma-sinon-chai": "^1.2.0",
        "karma-sourcemap-loader": "^0.3.7",
        "karma-spec-reporter": "0.0.26",
        "karma-webpack": "^1.8.0",
        "less": "^2.7.1",
        "less-loader": "^2.2.3",
        "lolex": "^1.4.0",
        "mocha": "^3.1.0",
        "opn": "^4.0.2",
        "ora": "^0.3.0",
        "phantomjs-prebuilt": "^2.1.3",
        "postcss-loader": "^1.0.0",
        "semver": "^5.3.0",
        "shelljs": "^0.7.4",
        "sinon": "^1.17.3",
        "sinon-chai": "^2.8.0",
        "style-loader": "^0.13.1",
        "stylus": "^0.54.5",
        "stylus-loader": "^2.1.1",
        "url-loader": "^0.5.7",
        "vue-loader": "^10.0.0",
        "vue-style-loader": "^1.0.0",
        "vue-template-compiler": "^2.1.3",
        "webpack": "^2.1.0-beta.27",
        "webpack-dev-middleware": "^1.8.4",
        "webpack-dev-server": "^2.1.0-beta.12",
        "webpack-hot-middleware": "^2.13.2",
        "webpack-merge": "^0.18.0"
      }
    

    karma.conf.js:

    // This is a karma config file. For more details see
    //   http://karma-runner.github.io/0.13/config/configuration-file.html
    // we are also using it with karma-webpack
    //   https://github.com/webpack/karma-webpack
    
    const
        config = require('../../config'),
        path = require('path'),
        webpackConfig = require('../../build/webpack.test.conf'),
        projectRoot = path.resolve(__dirname, '../../'),
        webpack = require('webpack')
    
    module.exports = function (config) {
        config.set({
            // to run in additional browsers:
            // 1. install corresponding karma launcher
            //    http://karma-runner.github.io/0.13/config/browsers.html
            // 2. add it to the `browsers` array below.
            browsers: ['PhantomJS'],
            frameworks: ['mocha', 'sinon-chai'],
            reporters: ['spec', 'coverage'],
            files: [
                path.resolve(projectRoot, 'node_modules/babel-polyfill/dist/polyfill.js'),
                './index.js'
            ],
            webpack: webpackConfig,
            webpackMiddleware: {
                stats: 'errors-only'
            },
            preprocessors: {
                './index.js': ['webpack', 'sourcemap']
            },
            coverageReporter: {
                dir: './coverage',
                reporters: [
                { type: 'lcov', subdir: '.' },
                { type: 'text-summary' }
                ]
            }
        })
    }
    

    webpack.test.conf.js:

    var
        config = require('../config/test.env'),
        webpack = require('webpack'),
        merge = require('webpack-merge'),
        cssUtils = require('./css-utils'),
        baseWebpackConfig = require('./webpack.base.conf'),
        path = require('path'),
        projectRoot = path.resolve(__dirname, '../')
    
    var webpackConfig = merge(baseWebpackConfig, {
        // use inline sourcemap for karma-sourcemap-loader
        devtool: '#inline-source-map',
        module: {
            rules: cssUtils.styleRules()
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env': config,
                '__THEME': 'mat'
            })
        ]
    })
    
    module.exports = webpackConfig
    


  • @dominik I’m trying to imitate your solution. What are the contents of the following files such as config/index.js and build/script.test.js. Am unable to start karma correctly, can you help? -sub



  • Webpack template of the Vue-cli just migrated to webpack version 2. They seem to have testing setup. Maybe good time to fix testing?

    See:
    https://github.com/vuejs-templates/webpack/blob/master/template/package.json

    Do not know if / how they fixed the vue-router issue…


  • Admin

    @MusicForMellons Yes, it is time. PS: Did you know that Quasar’s template was taken as example for Webpack 2 setup? 😉



  • Ha! Next step they will make a Vue standard template with Quasar!



  • @rstoenescu any timeline for the integration 🙂 ? A lot of us are waiting for this … Any idea on the timeline for this will be very useful and appreciated . Thanks in advance 🙂


  • Admin

    @jonafrank Can only offer a very very rough idea (and very safe to say): 3rd quarter this year.



  • +10 for unit test integration.



  • +10 for unit test integration