Ariel Weinberger Ariel Weinberger - 10 months ago 42
AngularJS Question

AngularJS and Karma/Jasmine unit tests - folder structure and production

First of all, this question might seem a bit stupid and I'm sorry for that.

So I started diving into unit tests lately, doing AngularJS with Karma/Jasmine. It's amazing and I enjoy it much but something came up to my mind.

There is a very common structure for AngularJS apps thesedays as in the official seed project:

Now this one also includes unit tests, and all test files are located next to their "native" angular JS files (so for a "home.js" controller file you will have "home_test.js"). Makes perfect sense and makes it much easier/faster to write tests and locate test files.

But when we serve the AngularJS project on a server, the test files are also available. Is it a common practice? Is it a bad thing?

One thing I could think of is having a "tests" folder next to the angular's "app" folder (which is served to the user), the folder mimics the app's folder structure and test files are located there. But for some reason I don't see it in GitHub seeds and projects.

Would love to have some input here guys. I might be missing something too...

Answer Source

First, in development mode (local), you should use grunt, gulp or another build system that will help you develop rapidly an app.

When you use those tools, you tell them to not serve certain files. This is why you should give your tests an extension (ex: foobar.controller.spec.js). This will allow you to tell gulp to ignore .spec.js extensions and then they will not be embedded.

For production mode, you don't serve files individually : you concatenate them into a single app.js file. In the same way, when you build that file, you tell your build system to skip the tests files.

So, just keep your tests in the app, give them an extension and tell your build system to ignore them.