Code duplication in AngularJS Application

Question

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.

What do you mean by "change the newUsers array"? Change the object reference? Change the property name? — bmleite
– bmleite, Commented Jan 18, 2013 at 16:23
I don't get the point, this is a common issue in all programming languages, i.e. in Java if I change a class name, I have to change it everywhere I reference that class. Anyway I think it's not an Angular flaw. — remigio
– remigio, Commented Jan 18, 2013 at 18:45
you are right but, if you miss to change the class somewhere the whole program want work, and tests will fail for sure. This is not the case Angular If I change the name of an array, for example, in my controller unit tests will not pass, they will notify me, but changing the array name in my controller I need to change is html binding, in the repeater for example. Unit test wont check that right ? . everything will look OK, but when start working with application, no element will be shown because the array name is no changed in HTML. — Adelin
– Adelin, Commented Jan 19, 2013 at 14:22
This is due to the dynamic and loosely typed nature of JavaScript, it has nothing to do with Angular. The solution is that suggested from @iwein, that is using a god IDE with refactoring support. — remigio
– remigio, Commented Jan 21, 2013 at 9:15
So I am not doing things the wrong way. Ok, thanks for your replies guys. — Adelin
– Adelin, Commented Jan 21, 2013 at 12:08

iwein · Accepted Answer · 2013-01-19 07:20:33Z

2

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.

answered Jan 19, 2013 at 7:20

iwein

26.2k13 gold badges75 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Code duplication in AngularJS Application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related