Product Finder - Front
Client code for the product finder.
In the long run it should become a global solution for all companies by allowing each one to tweak some HTML templates and CSS.
Installing
You should have bower installed (installable through npm).
Then run bower install in the root directory to get all the dependencies and voilà.
Directory Layout
app/ --> all of the source files for the application
app.css --> default stylesheet
components/ --> all app specific modules
version/ --> version related components
version.js --> version module declaration and basic "version" value service
version_test.js --> "version" value service tests
version-directive.js --> custom directive that returns the current app version
version-directive_test.js --> version directive tests
interpolate-filter.js --> custom interpolation filter
interpolate-filter_test.js --> interpolate filter tests
app.js --> main application module
index.html --> app layout file (the main html template file of the app)
karma.conf.js --> config file for running unit tests with Karma
e2e-tests/ --> end-to-end tests
protractor-conf.js --> Protractor config file
scenarios.js --> end-to-end scenarios to be run by Protractor
Testing
There are two kinds of tests in the angular-seed application: Unit tests and End to End tests.
Running Unit Tests
The angular-seed app comes preconfigured with unit tests. These are written in [Jasmine][jasmine], which we run with the [Karma Test Runner][karma]. We provide a Karma configuration file to run them.
- the configuration is found at
karma.conf.js - the unit tests are found next to the code they are testing and are named as
..._test.js.
The easiest way to run the unit tests is to use the supplied npm script:
npm test
This script will start the Karma test runner to execute the unit tests. Moreover, Karma will sit and watch the source and test files for changes and then re-run the tests whenever any of them change. This is the recommended strategy; if your unit tests are being run every time you save a file then you receive instant feedback on any changes that break the expected code functionality.
You can also ask Karma to do a single run of the tests and then exit. This is useful if you want to check that a particular version of the code is operating as expected. The project contains a predefined script to do this:
npm run test-single-run
End to end testing
The angular-seed app comes with end-to-end tests, again written in [Jasmine][jasmine]. These tests are run with the [Protractor][protractor] End-to-End test runner. It uses native events and has special features for Angular applications.
- the configuration is found at
e2e-tests/protractor-conf.js - the end-to-end tests are found in
e2e-tests/scenarios.js
Protractor simulates interaction with our web app and verifies that the application responds correctly. Therefore, our web server needs to be serving up the application, so that Protractor can interact with it.
npm start
In addition, since Protractor is built upon WebDriver we need to install this. The angular-seed project comes with a predefined script to do this:
npm run update-webdriver
This will download and install the latest version of the stand-alone WebDriver tool.
Once you have ensured that the development web server hosting our application is up and running and WebDriver is updated, you can run the end-to-end tests using the supplied npm script:
npm run protractor
This script will execute the end-to-end tests against the application being hosted on the development server.