I recently started working the AngularJS MVC framework. I was previously working with GWT. No here is the problem that I noticed working with AngularJS. When I start implementing a new Controller Acceptance test suite is created at the beginning, I practice TDD as much as I can, then after write you first acceptance test you start write unit tests and step by step implement your controller.The problem, as I see it, is the your objects fields should be the same in at lease 4 places in unit tests, in E2E tests, in Controller and View. This is a nightmare to chase. I will give a simple example of what I mean. I wish I am wrong and my approach of work is wrong and if so I hope some one to correct me.
// in controller
$scope.newUsers = new Array(); // <-- $scope.newUsers should be the same array In unit tests.
$scope.addUserTobeCreated = function (user) {// <-- functions should be added in the view too
$scope.newUsers.push(user);
};
$scope.createUsers = function () {
$http.post("some url", $scope.newUsers).success(function () {
// do something
});
};
// in view
<label class="form-input-label">name:</label>
<input type="text" size="15" maxlength="15" class="form-input-field ipInput" ng-model="user.name">
<label class="form-input-label">age:</label>
<input type="text" size="15" maxlength="15" class="form-input-field ipInput" ng-model="user.age">
<label class="form-input-label">position:</label>
<input type="text" size="15" maxlength="15" class="form-input-field ipInput" ng-model="user.position">
<ul>
<li ng-repeat="user in newUsers">
Name:{{user.name}}, Age:{{user.age}}
</li>
</ul>
// in unit test
it("should add user to new users array to be added", function () {
var user = {name:"ivan"};
scope.addUserToBeCreated(user);
expect(scope.newUsers.length).toBe(1); // <-- we have "newUsers" in 4 palces until now. Controller, unit tests, and view 2 times ! .
// do some assertions ...
});
If I want to change the newUsers array name I have to do it in 4 places !.
Also, consider passing an object to a server that accepts a JSON objects. On the server I have to map the JSON to my server objects. with frameworks like sitebircks it is very easy to do so. But, again a have to keep classes names consistent in order to be able to deserialize objects coming from the client.
Am I the only one who sees this problem ?.Correct me If I am mistaken. Or its just me who really have this problem. If that is the case please guide me to the correct way to work with JS frameworks.
Thanks for replies.
If you use a good Javascript IDE the refactoring support will let you do it in one go.
For example, in IDEA I can put my cursor on newUsers and press Shift-F6. Then check "Search in comments and strings" to also pick up the string in the html.
This problem exists also with GWT, but then you probably didn't notice because you were comfortable with refactoring support in your Java IDE.