TS 74 AngularJS

AngularJS support Test Specification for NetBeans 7.4

Author: Vladimir Riha
Last update: 1st July 2013

Mac OS specific details: To find Options on MacOS, go to Netbeans menu -> Preferences

Contents


Test suite: Coloring

  1. Syntax coloring
<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="SettingsController">
        <h1>{{name}}</h1>
      Name: <input type="text" ng-model="name"/>
      [ <a href="" ng-click="greet()">greet</a> ]<br/>
      Contact:
      <ul>
        <li ng-repeat="contact in contacts">
            <select ng-model="contact.type" class="{{cssColor}}">
             <option>phone</option>
             <option>email</option>
          </select>
          <input type="text" ng-model="contact.value"/>
          [ <a href="" ng-click="clearContact(contact)">clear</a>
          | <a href="" ng-click="removeContact(contact)">X</a> ]
        </li>
        <li>[ <a href="" ng-dblclick="" ng-click="addContact()">add</a> ]</li>
     </ul>
    </div>
  </body>
</html>
    1. Paste the code above into HTML file
    2. File:Ts74_angularjs_coloring.png
    • EXPECTED RESULT: Syntax coloring looks like on the screenshot. Replace all ng-* with data-ng-* and make sure that these new attributes are bold green (screenshots shows old red colors)

Test suite: Directives completion

  1. Ng-* directives
    1. Create a new HTML file
    2. Invoke code completion for attributes of some HTML element
    • EXPECTED RESULT: ng-* directives are offered, pick one and confirm its completion
  2. Data-ng-* directives
    1. Create a new HTML file
    2. In some element, type "data-ng-" attribute and invoke code completion
    3.  <body data-ng-></body>
    • EXPECTED RESULT: data-ng-* directives are offered, pick one and confirm its completion

Test suite: Completion with controllers

<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <div ng-controller="SettingsController">
            <h1>{{name}}</h1>{{lastName}}
            Name: <input type="text" ng-model="name"/>
            [ <a href="" ng-click="greet()">greet</a> ]<br/>
            Contact:
            <ul>
                <li ng-repeat="contact in contacts">
                    <select ng-model="contact.type" class="{{cssColor}}">
                        <option>phone</option>
                        <option>email</option>
                    </select>
                    <input type="text" ng-model="contact.value"/>
                    [ <a href="" ng-click="clearContact(contact)">clear</a>
                    | <a href="" ng-click="removeContact(contact)">X</a> ]
                </li>
                <li>[ <a href="" ng-dblclick="" ng-click="addContact()">add</a> ]</li>
            </ul>
            <div ng-controller="Ctrl">
                {{foo}}
                <div ng-click="print()"></div>
            </div>
        </div>
        <div ng-controller="Ctrl2">
            {{foo}}
        </div>
    </body>
</html>

File.js

function SettingsController($scope) {
    $scope.name = "John Smith";
    $scope.cssColor = "blue";
    $scope.contacts = [
        {type: 'phone', value: '408 555 1212'},
        {type: 'email', value: 'john.smith@example.org'}];

    $scope.greet = function() {
        alert(this.name);
    };

    $scope.addContact = function() {
        this.contacts.push({type: 'email', value: 'yourname@example.org'});
    };

    $scope.removeContact = function(contactToRemove) {
        var index = this.contacts.indexOf(contactToRemove);
        this.contacts.splice(index, 1);
    };

    $scope.clearContact = function(contact) {
        contact.type = 'phone';
        contact.value = '';
    };
    $scope.foo = 1;
}

function Ctrl($scope) {
    $scope.page = 1;
    $scope.printAttempt = {
        number: 1,
        total: 2
    }
    $scope.print = function() {
    };
}
function Ctrl2($scope) {
    $scope.foo = 1;
}


  1. Completion inside expressions
    1. Use the files above
    2. in HTML file on line 12, type "{{| }}" and invoke cc in between the braces at "|"
    • EXPECTED RESULT: Members of SettingsController are offered together with global objects/functions and also "lastName" is offered although not declared anywhere but it is used
  2. Completion inside expressions II
    1. Use the files above
    2. in HTML file on line 15, at the end of line, type "{{| }}" and invoke code completion
    • EXPECTED RESULT: Members of SettingsController are offered together with global objects/functions. Make sure completion list contains also "contact" that was declared inside ng-repeat
  3. Completion inside expressions III
    1. Use the files above
    2. in HTML file on line 15, put cursor inside {{cssColor}} and invoke cc
    • EXPECTED RESULT: Only list of matching properties is offered
  4. Completion inside directives
    1. Use the files above
    2. in HTML file on line 27, add ng-model attribute for the div and invoke cc for its value
    • EXPECTED RESULT: Members of Ctrl are offered together with global objects/functions. Confirm "page" to be completed (see issue 231988)
  5. Completion inside directives II
    1. Use the files above
    2. in HTML file on line 26, paste
      <span ng-bind=""></span>
      and invoke cc for value of ng-bind
    • EXPECTED RESULT: Members of Ctrl are offered together with global objects and functions. Type "printAttempt." and invoke cc. Properties "total" and "number" should be offered (issue 232062).Repeat the same but change
      $scope.printAttempt = new Date()
  6. Go to declaration
    1. Use the files above
    2. Ctrl+Click on: SettingController (line 8), name on line 9, name on line 10, greet() line 11, contacts line 14, contact line 19, foo line 26
    • EXPECTED RESULT: Go to declaration works with each test

Test suite: Completion without controllers

Following quick suite is for situation when e.g. partial HTML file is used without specifying ng-controller attribute (as it could be part of module declaration). In this case, features are limited because IDE can't know the correct context. So code completion offers "everything" and also Go To Declaration won't work in all cases.

<div>
    <h1>{{name}}</h1>{{lastName}}
    Name: <input type="text" ng-model=""/>
    <ul>
        <li ng-repeat="contact in contacts">
            <select ng-model="contact.type" class="{{help}}">
                <option>phone</option>
                <option>email</option>
            </select>
            <input type="text" ng-model="contact.value"/>
            [ <a href="" ng-click="clearContact(contact)">clear</a>
            | <a href="" ng-click="removeContact(contact)">X</a> ]
        </li>

    </ul>
</div>
  1. Code completion in expressions
    1. Use the file above and the JS file from previous suite
    2. After closing ul tag, type
      {{| }}
      (where | denotes cursor) and invoke code completion
    • EXPECTED RESULT: Properties like lastName, name or help are offered because they are used in source
  2. Code completion in directives
    1. Use the file above
    2. At the 2nd line, for ng-model attribute value type "l" and invoke cc
    • EXPECTED RESULT: lastName is offered
Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo