gruntjs - Typescript-testit, Karmaa, Jasminea ja Gruntia käyttäen

Olen yrittänyt käyttää Karma+Jasminea suorittaakseni TypeScriptillä kirjoitettuja testejä.

Etsiessäni netistä, näyttää siltä, että melko monet ovat onnistuneet tällaisessa saavutuksessa, mutta en löytänyt täydellistä opasta siitä, miten tämä tehdään. Ympäristö:

• Typescript käyttäen ES6-moduuleja
• Karma
• Jasmiini
• Murina

Miten koko homma asetetaan pystyyn?

Vastaus #1

Katso tämä GitHub-repositorio täydellistä lähdekoodia varten.

package.json

Aloitetaan devDependencies-osuudesta:

"devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-karma": "^0.12.1",
    "grunt-ts": "^5.1.0",
    "jasmine-core": "^2.3.4",
    "karma": "^0.13.15",
    "karma-jasmine": "^0.3.6",
    "karma-phantomjs-launcher": "^0.2.1",
    "karma-requirejs": "^0.2.3",
    "load-grunt-tasks": "^3.3.0",
    "phantomjs": "^1.9.18",
    "requirejs": "^2.1.22"
}

Gruntfile.js

Katsoa

Seuraamme kaikkia .ts-tiedostoja, ja muutoksen tapahtuessa ensin transpiloi ne, sitten suoritetaan testit:

watch: {
    typescript: {
        // Watching all typescript files (specs and units)
        files: [ 'source/**/*.ts' ],
        // First transpile, then run tests
        tasks: [ 'ts:default', 'karma:continuous:run' ],
        options: {
            spawn: false
        }
    }
},

Typescriptin käännös

Me käännämme kaikki .ts-tiedostot käyttäen amd-moduulia. Huomaa, että tarvitsemme Jasminen tyyppimääritykset:

ts: {
    default: {
        src: [
            // Note that we add the typings for jasmine here
            'typings/jasmine.d.ts',
            // We compile all .ts files (specs and units)
            'source/**/*.ts'
        ],
        options: {
            // We need to convert ES6 to ES5 and use amd so it works
            // with RequireJS
            module: 'amd',
            fast: 'never'
        },
        // We output all files to a temp folder
        outDir: 'transpiled'
    }
},

Karma

Kun kaikki .ts-tiedostot ovat transpiled-kansiossa, voimme suorittaa karma-testit:

karma: {
    options: {
        configFile: 'karma.conf.js'
    },

    continuous: {
        logLevel:  'INFO',
        singleRun: false,
    }
}

karma.conf.js

Vaikein osa:

• Lisäämme requirejs kehyksenä.
• Lataamme kaikki käännetyt tiedostot, mutta include-lippu on asetettu vääräksi.
• Tiedosto nimeltä test-main.js skannaa sitten nämä tiedostot ja lataa dynaamisesti kaikki .spec-tiedostot testejä varten. test-main.js generoitiin Karman toimesta, katso tämä opas saadaksesi lisätietoja.

Näin:

module.exports = function(config) {
    config.set({
        // Note that we also use `requirejs`
        frameworks: [ 'jasmine', 'requirejs' ],

        files: [
            // We add all transpiled files (specs and unit) with included set
            // to false.
            { pattern: 'transpiled/**/*.js', included: false },

            // Test main will search the files for specs and load them
            // dynamically.
            'test-main.js'
        ],

        reporters: [ 'progress' ],

        browsers: [ 'PhantomJS' ],

        autoWatch: false,
        singleRun: true
    })
}

Vastaus #2

Kokeile karma-typescript-preprocessorin käyttämistä, mikä voi olla vähän helpompaa kuin testien katsominen, kääntäminen ja sitten ajaminen.

Tämän voi asettaa melko helposti sinun karma ja/tai grunt määrityksiisi.