Skip to content

Latest commit

 

History

History
147 lines (118 loc) · 6 KB

README.md

File metadata and controls

147 lines (118 loc) · 6 KB
Raw

A guide for setting up a JS repo to use ESLint along side your jasmine test suite Build Status

ESLint is a linter for Javascript and requires node.js and runs on Windows, Linux and Mac.

To write test driven Javascript we need a testing suite and preferably some kind on linter to keep us on track.

Firstly we need to create package.json:

  • Assuming you've already got node.js installed
  • Run npm init
  • If you screw it up you can delete the package.json at this point and run npm init again or just edit it manually, its worth a look inside anyway

Then install jasmine of your choice, there are a few ways to do it:

Install via npm

  • You can use npm install --save-dev jasmine (--save-dev tag adds it to your develepment dependancies)
  • Then npx jasmine init
  • Add jasmine to your test script in your package.json "scripts": { "test": "jasmine" }
  • Then you can run your test script with npm test
  • We won't want to push our dependancies to github, so touch .gitignore and add node_modules

Jasmine via CDN script tags in your SpecRunner.html

Use a CDN SpecRunner.html there is an example in this repo, this is probably the easiest way to add jasmine.

  • You'll need to mkdir spec and mkdir src and populate it with your files manually.

Stand alone Jasmine download and unzip

Install ESLint:

  • npm install eslint --save-dev to install
  • npx eslint --init to initialize eslint and follow the instructions
  • I went with:
    • To check syntax and find problems
    • import/export (because I have babel installed in VScode, if you don't know just use require/exports)
    • none of these for framework
    • no for typescript
    • browser
    • JSON for the config file

Now everything might look quite angry at this point, there are a few things we need to specify.

  • Firstly npm install --save-dev eslint-plugin-jasmine
  • Then in your .eslintrc.json at the bottom of the tree add:
},                  // this is the previous blocks curly brace, add a comma
    "plugins": [
      "jasmine"
    ]
}
  • Stay in the .eslintrc.json and add "jasmine": true to the "env": block (your editor might help autofill with these)
  • There are other options check them out if you want on the eslint/jasmine plugin page on npm
  • Depending on your editor you may get wiggly red lines to show errors or you may need to run npx eslint ./src to test your files.

And there you go a testing suite and a linter for JS.

Extra: Add compatiblity with jQuery to ESLint

  • Add jquery so its in your package.json with npm install jquery
  • Add jquery plugin: npm install eslint-plugin-jquery --save-dev
  • Then in the .eslintrc.json:
{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true,
        "jasmine": true,
        "jquery": true  <<<<<< do this
    },
    "extends": [
        "standard",
        "plugin:jquery/deprecated"  <<<<<< do this
    ],
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
      "semi": [2, "always"]
    }, 
    "plugins": [
        "jasmine",
        "jquery"  <<<<<< do this 
    ]
}

Extra: Travis CI integration (Using Karma framework to support Jasmine)

  • Make a traivs.yml echo language: node_js >> .travis.yml
  • We're going to use a testing framework called Karma to carry out our Jasmine tests remotely on travis npm install karma --save-dev
  • Install the Karma-jasmine plugin npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev
  • Install the cli commands npm install -g karma-cli (the -g tag means globally)
  • Run Karma for the first time with karma init and follow the instructions, this will make a karma.conf.js in your root.
    • Jasmine
    • no
    • chrome (add firefox too if you like or -bleh- opera)
    • src/*.js and spec/*Spec.js
    • Just press return
    • yes (not seen this work though)
  • Change the "test" script in ./package.json to "karma start karma.conf.js --single-run"
  • Now you can run your tests in the CLI using npm test (test this because if it doesnt work neither will travis)
  • But before travis will work we need to tell it what we are going to need on our virtual machine:
language: node_js 
node_js:
  - 14

dist: xenial
services:
  - xvfb  # this adds display support to allow browser action

addons:
  chrome: stable   # adds chrome obvs, if you added other browsers add them here, 
                   # check travis docs to make sure you use the correct syntax
  • Commit and push (hopefully you've commited a few times during all this) and add your sticker to your README.md for unlimited kudos! you know, if your repo is passing...

Extra: Add coverage to Karma with Istanbul

  • You'll need to have added Karma to your repo as in the above steps
  • Run npm install karma karma-coverage --save-dev
  • In the reporters: section of your karma.conf.js add 'coverage' to the array
 // coverage reporter generates the coverage
    reporters: ['progress', 'coverage'],
  • In the preprocessors: section add 'src/**/*.js': ['coverage']
 preprocessors: {
      // source files, that you wanna generate coverage for
      // do not include tests or libraries
      // (these files will be instrumented by Istanbul)
      'src/**/*.js': ['coverage']
    },
  • In your .gitignore add the line coverage/ as you won't want to push your coverage reports to git
  • Now run npm test and you should see the coverage directory appear, inside will be a html file named yourJavascript.js.html open that in browser. (in VScode open with live server and it'll stay up to date)