/ngTesting

Front End Web Development Testing - npm, Angular, Gulp and Karma

Primary LanguageHTML

ngTesting build

Testing AngularJs web apps with npm, Bower, Gulp and Jasmine

Exploring front development with unit testing and e2e testing in angular with npm, Bower, Gulp, Jasmine

Getting Started

Suggested editor for repo is Visual Studio Code. Use the following commands to build, test and run the project. It is usually best to open a separate terminal window in the source root.

  1. Build

    • Builds are run using the gulp task build:compileTypeScript

    • To compile gulp scripts open a Visual Studio code terminal and run the following command from the source root and run the following command

    • node_modules.bin\gulp build:compileTypeScript

  2. Test

    • Tests can be run using the gulp task test
    • To run karma test scripts in gulp, open a Visual Studio Code terminal and run the following command from the source root
    • node_modules.bin\gulp test
    • Note: Tests are set to run in PhantomJs, Chrome and Firefox. If any of these browsers are not installed, Karma will hang until until they are not found. This can take ~30s or so
    • Test results and code coverage can be viewed with in VSTS

  3. Run/Host

    • Run the following command in a terminal window to install all npm requirements and startup the http-server needed to server files
    • npm start

  4. Clean

    • To clean and remove generated TypeScript files use the following command -
    • node_modules.bin\gulp clean:TypeScript
    • To clean npm packages use the following command
    • npm prune

Debug: VS Code - Chrome Debugging Setup

Visual Studio Code Chrome Debugging by performing the following -

  1. Run npm start
    • You must setup node.js to publish static files. "npm start" installs all npm packages and runs the node http-server package.
  2. Add a path variable to C:\Program Files (x86)\Google\Chrome\Application or the location of chrome
  3. Run chrome.exe --remote-debugging-port=9222
  4. Run ctrl+F5 from the vs code project
  5. TODO: Add gulp build task to start chrome.exe

TypeScript Definition Management (.d.ts type definitions)

Type definition management in TypeScript 2.0 is managed with node. This is different from previous versions of TypeScript. Install definition files using npm install @types/libraryname.

If you are unable to find the type definition you are looking for use the npm typings package.

npm typings commands

For most libraries this npm module is not needed and vanilla npm @types/library name can be used. If that is not the case the following commands can be used with the npm typings module.

Search for Typings node_modules.bin\typings search bootstrap

Install Typings globally for project node_modules.bin\typings install dt~bootstrap --save --global

Search for Typings node_modules.bin\typings search bootstrap

Install Typings node_modules.bin\typings install dt~bootstrap --save --global

Protractor Integration Tests

Coming soon...