Introduction

Frontend development has become vital now for many applications development, like SPA (Single Page Application), Mobile development and Dynamics 365. So keeping and increasing the code quality is very important, I have created some videos which walk you through how to improve the code quality of the frontend development as the following

Frontend Code Quality Introduction and abstract

Here is an overview of a series short videos focusing on the enhancement of Frontend Development Code Quality. These includes understanding the following:

• JavaScript unit testing frameworks like Jasmine, Mocha, Jest, different types of task runner like Grunt and Gulp
• Linting tools, like JSHint, ESLint, JSLint, CSSLint
• Code formatter like Prettier and Tidy
• How to write your first JavaScript using test with Jasmine standalone version
• How to run JavaScript unit tests using Grunt, Command Line and PhantomJS
• How to calculate code coverage for JavaScript unit tests using Istanbul
• How to run JavaScript unit tests using Visual Studio Test Explorer using chutzpah extension
• How to Linting JavaScript code using JSHint and
• How to run that from Command Line using Grunt

Finally, it shows how to integrate all the quality practices with Visual Studio Team Service Build automation so it can be part of CI/CD or Continuous Integration and Continuous Delivery.

• Writing your first JavaScript unit test using Jasmine standalone version

How to write your first JavaScript unit test using Jasmine as a BDD or Behaviour Driven Development framework, how to use Jasmine standalone version, how reference the code under test, how to change the configuration in specrunner.html file. You will also see, how to use before Each to inject the needed elements of the DOM of the html and how to remove them using after Each after ran the tests, this video is prerequisite for all the coming videos if you don’t know Jasmine.

• Running Jasmine JavaScript unit test from command line using Grunt

How to run JavaScript Unit test written in Jasmine from Command Line using Grunt and PhantomJS. These includes how to install Node.js with NPM (Node Package Manager), how to install Grunt CLI (Command Line Interface), how to install contrib-jasmine npm, how to create Node.js default configuration file (pacakges.json), how to create the first Gruntfile.js configuration file, how to set the configuration to run Jasmine inside Gruntfile.js, how to ignore node modules from Git source control so it will be ready for build automation in further videos.

• Running Jasmine JavaScript unit test from Visual Studio Command Line Runner and Grunt

How to run JavaScript Unit test written in Jasmine from Visual Studio by using Command Task Runner extension which provide a command line embedded inside Visual Studio, this extension supports different task runners as well as PowerShell and others, we will see how to install the extension, how it reads and understand Gruntfile.js and finally how to run the JavaScript unit tests from it.

• Running Jasmine JavaScript unit test from Visual Studio Test Explorer using Chutzpah

How to run JavaScript unit tests written in Jasmine using Visual Studio Test Explorer and Chutzpah extension, the main idea that this extension is a test adapter for Visual Studio so it helps Test Explorer to understand Jasmine JavaScript unit tests. It’s compatible with other JavaScript fretworks as well like Mocha and Qunit, using Chutzpah, we don’t need any Grunt or Gruntfile.js as this extension use Jasmine standalone version behind the scenes.

• Running Jasmine JavaScript unit test with code coverage using Istanbul and Grunt

How to calculate code coverage for JavaScript unit test written in Jasmine using Istanbul, we will see how to install contrib jasmine Istanbul, how to tweak the Gruntfile.js Jasmine task to include the code coverage settings, how to see the result of the code coverage as html version as well as from Command Line and Visual Studio Command Task runner too.

• Running JavaScript code quality tool with JSHint and Grunt

How to scan JavaScript code for better code quality enhancements and suggestions using Static Code Analysis or Linting tools, in this video we will see how to use JSHint, how to download the grunt-contrib-jshint – npm, we will see also how to change the Gruntfile.js configuration to include JSHint settings and run that from Command Line and Visual Studio Command Task Runner.

• Running JavaScript unit test with Jasmine, code coverage, JSHint as build automation with VSTS

How to integrate all the code quality practices, JavaScript unit test with Jasmine, code coverage for unit test with Istanbul, linting JavaScript code quality with JSHint, and configure Visual Studio Team Service Build automation so it can be part of CI/CD or Continuous Integration and Continuous Delivery pipeline for frontend development.

This post was originally published on mohamedradwan.com at Front-end Code Quality (JavaScript Unit Test and Linting) Automation With VSTS Build