TeamZeus Frontend

Prerequisites

You need to have Node.js server and with npm (node package manager) version 3 and above. You can just install new stable version of Node.js(^5) that came with new version of npm(^3).

Installation

npm i - install modules

Development

npm run dev - run development mode

npm run dev nolint - run in development mode without eslint

When you run development mode, new window of your default browser will open with this app at localhost:PORT, if you want to disable this behavior just add .env file with DISABLE_OPEN=true in root folder.

You can use NODE_ENV variable inside of your Javascript code to access actual enviroment value (the NODE_ENV var is processed by Webpack). Possible values are production, development and test for Karma tests.

Testing

Unit testing:

We are using Karma for testing in real browsers together with Mocha and Chai assertations. When writing tests, create new file with .spec.js sufix in the same folder your tested file is located. You can run tests in different or multiple enviromets by using karma browsers flag, posible options are: Chrome, Firefox, PhantomJS, IE. Default browser is Chrome. See package.json for more information.

npm run test - run karma tests once in default browser

npm run test-general -- --brosers=Chrome,PhantomJS - run karma tests once in Chrome & PhantomJS

npm run test-watch - run tests in watch mode in default browser, handy for fixing or developing tests

npm run test-watch-general -- --browsers=IE - run tests in watch mode in Internet Explorer

End 2 End testing:

• We are using Nightwatch.js (http://nightwatchjs.org/) as a superstructure of Selenium Web Driver, with own implementation of PageObjects (written in ES6).
• Tests are located in ./test/e2e/.
• By default all tests run in parallel, if you like to change that just modify "test_workers" property of ./test/nightwatch.json.

Running E2E Tests

To run E2E tests you need to start the app first: npm run dev or npm run serve-dist.

You can choose specific browser using Nightwatch.js env flag, posible options are: chrome, firefox, phantomjs, ie.

npm run e2e - run e2e tests in default enviroment (Chrome)

npm run e2e -- --env=firefox - run e2e tests in Firefox

Automated Testing

We are using BrowserStack for both Unit and E2E testing, to determine specific OS & browser to run, put BrowserStack's config object (located in ./test/BrowserStacEnvs.all.json, you can get updated version with curl -u "teamzeus1:WwGtng523aziPuKn9Njw" https://www.browserstack.com/automate/browsers.json or visit List of all envs) into ./test/BrowserStacEnvs.json. Then you can simply run:

npm run browserstack-unit - runs Unit tests on BrowserStack

npm run browserstack-e2e - runs E2E test on BrowserStack

Build

npm run build - run build script

Build script bundles and compresses all js, html templates, css and small images(as BASE64). Then copyies all necessary files into ./dist folder. For production simply copy contents of distribution folder into your server root direcotry.

npm run porod-server - run server with production assets from ./dist folder, this is mostly for testing purposes.

Deploy

npm run deploy - deploys distribution file to staging env

Coding Stuff

Use "ngInject"; in the begginging of each angular controller function that uses dependency injection pattern. Otherwise uglified production code wont work. This declaration automatically injects all dependencies with $inject Property Annotation - ng-annotate(-loader) will take care of that.

IDE Configuration

When developing the application and working with Webpack HMR, note that solution is refreshed after each change so you might want to disable save files automatically feature or similar functionality in order to have a control over the actual reaload.

If you are using WebStorm please disable Smart indent feature in settings(indents automatically whole file including template html)

Troubleshooting

When things go wrong, you can try:

Remove node_modules folder rm -rf node_modules and reinstall all modules npm i

Clear npm cache npm cache clear

If none of steps above resolve your problem, please contact [email protected]