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

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

• Available on github: jasmine/jasmine download the release of your choice and drop in to your repo.

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)