TS 74 KnockoutJS

Revision as of 13:46, 18 July 2013 by Vriha (Talk | contribs)

KnockoutJS support Test Specification for NetBeans 7.4

Author: Vladimir Riha
Last update: 18th July 2013

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

Contents


Test suite: Coloring

File:Ts74_knockoutjs_coloring.png

  1. Syntax coloring
    1. Create a new HTML5 sample project "Knockout.js must-play games list"
    • EXPECTED RESULT: Syntax coloring in opened HTML file looks like on the screenshot. Make sure data-bind attribute is recognized as HTML framework attribute (it has different color than normal HTML attribute) and its value is also colored properly

Test suite: Data-bind completion

  1. Attribute completion
    1. Create a new HTML file
    2. Pick some element and invoke code completion for its
    3. Invoke code completion for attributes of some HTML element
    • EXPECTED RESULT: data-bind attribute is offered and help window contains text about data-bind syntax
  2. Completion for bindings
    1. Create a new HTML file and paste following
    2.  <body data-bind=""></body>
    3. Invoke code completion inside quotes
    • EXPECTED RESULT: Different types of bindings are offered (text, attr, if, html...) and help window shows text about given binding. If you click on icon "Show documentation in external browser" then browser selected in Tools
  3. Completion for bindings II
    1. Create a new HTML file and paste following
    2.  <body data-bind=""></body>
    3. Invoke code completion inside quotes
    4. List of suggestions is opened, type "t"
    • EXPECTED RESULT: List of suggestions is reduced to items starting with "t", pick "text" and press Enter. Value of data-bind is now "text: "

Test suite: Knockout completion

This suite works with "Knockout.js must-play games list". Create this HTML5 sample project and open models/gamelistviewmodels.js file and append following code:

function SimpleMode(){
    this.name = "Test";
    var lastName = "Simple";
    var self = this;
    this.log = function(){
        return "log";
    };
    this.printName = ko.computed(function(){
        return "<b>"+self.name+" "+lastName+"</b>";
    });

}
  1. Knockout completion I
    1. Having the modified JS file, invoke code completion at last line inside SimpleMode function (line before last closing "}")
    2. Type "k", "ko" is offered and code completion shows "Knockout" in the right side of completion window
    3. Confirm "ko" and press dot
    • EXPECTED RESULT: List of suggestions for Knockout object is offered, for instance applyBindings(), computed(), extenders or jQueryTmplVersion
  2. Knockout completion II
    1. Remove modifications from previous test case
    2. At last line inside SimpleMode function (line before last closing "}"), type
       self.printLastname = 
    3. Invoke code completion and make sure it contains ko item
    4. Type "ko." and again invoke code completion
    5. computed() is offered
    6. Finish function declaration to look like
    7. ko.printLastname = ko.computed(function(){
              return lastName;
          } );
      
    8. save the file
    • EXPECTED RESULT: Everything is OK
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