webyourmind/angularjs-test-karma-protractor

AngularJS-Test-Karma-Protractor — An AngularJS repository to start testing with Karma and Protractor

Getting Started

Clone AngularJS-Test-Karma-Protractor

Clone the AngularJS-Test-Karma-Protractor repository using git:

git clone [email protected]:WebYourMind/AngularJS-Test-Karma-Protractor.git
cd AngularJS-Test-Karma-Protractor

Install Dependencies

npm install
``

After that, you should find out that you have
two new folders in your project.

* `node_modules` - contains the npm packages for the tools we need
* `app/bower_components` - contains the Angular framework files

*Note that the `bower_components` folder would normally be installed in the root folder but
`AngularJS-Test-Karma-Protractor` changes this location through the `.bowerrc` file. Putting it in the `app` folder
makes it easier to serve the files by a web server.*

### Run the Application

We have preconfigured the project with a simple development web server. The simplest way to start
this server is:

npm start

Now browse to the app at [`localhost:8000/index.html`][local-app-url].


## Testing

There are two kinds of tests in the `AngularJS-Test-Karma-Protractor` application: Unit tests and end-to-end tests.

### Running Unit Tests

The `AngularJS-Test-Karma-Protractor` app comes preconfigured with unit tests. These are written in [Jasmine][jasmine],
which we run with the [Karma][karma] test runner. 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 have an `.spec.js` suffix (e.g.
  `view1.spec.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 start
watching the source and test files for changes and then re-run the tests whenever any of them
changes.
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

<a name="e2e-testing"></a>
### Running End-to-End Tests

The `AngularJS-Test-Karma-Protractor` 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`.

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.

**Before starting Protractor, open a separate terminal window and run:**

npm start

In addition, since Protractor is built upon WebDriver, we need to ensure that it is installed and
up-to-date. The `AngularJS-Test-Karma-Protractor` project is configured to do this automatically before running the
end-to-end tests, so you don't need to worry about it. If you want to manually update the WebDriver,
you can run:

npm run update-webdriver

Once you have ensured that the development web server hosting our application is up and running, 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.

**Note:**
Under the hood, Protractor uses the [Selenium Standalone Server][selenium], which in turn requires
the [Java Development Kit (JDK)][jdk] to be installed on your local machine. Check this by running
`java -version` from the command line.

If JDK is not already installed, you can download it [here][jdk-download].

### Running the App during Development

The `AngularJS-Test-Karma-Protractor` project comes preconfigured with a local development web server. It is a Node.js
tool called [http-server][http-server]. You can start this web server with `npm start`, but you may
choose to install the tool globally:

sudo npm install -g http-server

Then you can start your own development web server to serve static files from a folder by running:

http-server -a localhost -p 8000