AngularJS: End to End Testing Issue - angularjs

Question

I am attempting to create an end-to-end test for my application. I just performed a basic test and it is working fine.
it('should not show any criterias when the application loads initially',
function() {
expect(repeater('.new-criteria').count()).toBe(0);
});
The above test works correctly.
Now, I am using ng-repeat directive for an element. The array for this repeat increases by 1 count every time a button is clicked. Thus, I wrote the followin test:
it('should show one criteria when the user adds a criteria', function() {
element('.add-criteria').click();
expect(repeater('.new-criteria').count()).toBe(1);
});
I am using runner.html (that can be found in AngularJS end to end tutorial). When I load the page, the first test is a success. However, the second test results in the following error:
Selector .add-criteria did not match any elements.
I do have a button with the class add-criteria as follows:
<button type="button" class="btn btn-inverse add-criteria" ng-click="addNewCriteria()">
<i class="icon-plus-sign icon-white"></i>
Add a new criteria
</button>
Yet, the test fails. If I remove .add-criteria and replace it with .new-criteria, even then I get the same error. Somehow, repeater() is able to get the correct element but element() reports that the element matching the selector could not be found.
Any idea what is going wrong?
Edit : I wish to add here that I am using AngularJS with Node / Express. My directory structure is the same as the one in angular-express-seed. I found that the issue occurs because the CSS and JS files are located in the public folder while the HTML page is in the views folder. Copying the CSS and JS files to the views folder solves my problem How do I achieve this without copying to the views folder?

Answer 1

Angular Express Seed hasn't been updated in quite some time. It has none of the testing functionality found in the current version of angular-seed, as issue #9 on the Github page illustrates. As such, I don't know where the tests you are trying to run are coming from.
I would suggest decoupling the client-side AngularJS portion of your project from the server-side Node.js/Express portion. Use the offical angular-seed project during development. It includes a simple Node.js server that is already preconfigured for local development and testing. It simplifies things greatly.
When you want to move the AngularJS into production, serve only the files you need using whichever option is convenient for you: Apache, nginx, an Express Node.js server. Your choice. If you decide to still go with an Express solution, a quick google/SO search will provide numerous resources on the subject of serving static files and redirecting to index.html. It's been discussed before and the solutions aren't that complicated.
This answer obviously doesn't solve the issue you seem to be having, but we need more information than what you've given. If you clarify how you constructed the environment your developing in (how are you running tests when angular-express-seed doesn't include them?) then we can likely provide a solution to the routing problems you seem to be having. Directory structure, app.js code, etc., would be helpful.