Using Angular/CLI within VS Code, can I run Tests at same time as Builds?

Question

I've been using Angular/CLI from within the context of VS Code.

From the Terminal prompt within VS Code one can invoke ng serve or ng test -- but is there a way to combine the two (eg: something like ng serve test) so that as I TDD, and develop tests first, I see the Terminal show failed tests, then go green as i write code to meet the tests, AND see the web page results on another screen?

Thanks!

Answer 1

There are 2 solutions that I know of for this issue:

A work arround using 2 terminals

• just open 2 terminals
• in one, run ng serve
• in the other, run ng test

I tried with VS Code terminals, and traditional windows cmd terminals. It works but it is very limited and implies much visual pollution.

A distributable solution using an npm package

You may use an npm package called npm-run-all. This package helps you running multiple npm tasks in parallel or sequentially.

Just run

npm install --save-dev npm-run-all

This shall install npm-run-all in the dev dependencies of your project.

npm-run-all has 2 modes:

• run-p: runs multiple tasks in parallel
• run-s: runs multiple tasks sequentially

In the package.json file of your project, in the script section, you may now add:

"scripts": {
  ...
  "tdd": "run-p \"start\" \"test\"",
  "verify": "run-s \"test -- --watch=false\" \"lint\"",
  ...
},

You may call the tasks anything you want. I just named the dev task tdd to be more explicit on my intent.

Note: You may also use another npm package called concurrently, but i'm not sure it has the run sequentially mode.

This solution is distributable: every developper is now able to perform a npm install on your project and run task tdd (or whatever you want to call it). Moreover, you may also create task to be ran in a build factory. This alows your project to be integrated in a dev-ops context.