How Does One Manage E2E Testing of a AngularJS WebApp Before Minification?

We are creating a WebApp using the AngularJS Seed as the project template. The are many controllers, directives, services, each in it's own js file.

  • The contents of the app folder will be minified using Closure.
  • All lib dependencies will be substituted with the minified versions via CDN.
  • Unit/e2e testing using Testacular/Jasmine.

I am unsure of what the typical dev-compile-test process is as I am new to the world of AngularJS and Javascript WebApps in general :-) My question is how to manage the app js files during development such that E2E tests are debuggable. This this is my current thinking;

  1. Testacular watches the source files for continuous unit testing.
  2. The index.html page always references the concatenated but non minfied js file.
  3. Compilation must occur before the app can be run/e2e tested.
  4. Build server will minify as part of it's activities.

Is this a reasonable approach? It it helps with clarification I'm using WebStorm, nodejs, etc.

Create separate configurations for testing the minified and non-minified sources.

Local:

$ testacular start  
# make some changes
$ minify.sh
$ testacular start testacular-minified.conf.js # you could skip this if you trust your minification

Build server upon change:

$ testacular start --no-auto-watch # you could skip this if you trust your minification
$ minify.sh
$ testacular start testacular-minified.conf.js

If you have both Jasmine tests and e2e tests you need to have four config files.

Thank you to all who offered suggestions, they all helped with my finding a solution. The flow diagram (more or less) describes a valid build process. The key here is that you need a build tool. The use of a build tool - in this case GruntJS - should be implemented to manage the sequencing of a number of tasks. The sequence will vary according to the goal and build tools allow you to reuse the tasks in a number of different scenarios.

In the case of AngularJS apps. Refer to angular-app on github;

https://github.com/angular-app/angular-app

You will find a reference app for implementing an Angular app. It contains a build process implemented in Grunt for Continuous Test, Build and Release. More generally this reference app has been an excellent guide for implementing an highly manageable, understandable javascript project.