TS 74 KnockoutJS

(Difference between revisions)
(Created page with '==KnockoutJS support Test Specification for NetBeans 7.4== '''Author:''' [mailto:vriha@netbeans.org Vladimir Riha] <br/> '''Last update:''' 18th July 2013 <br> '''Mac OS specif…')
(Test suite: Directives completion)
Line 13: Line 13:
## Create a new HTML5 sample project "Knockout.js must-play games list"
## Create a new HTML5 sample project "Knockout.js must-play games list"
#* {{result|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}}
#* {{result|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: Directives completion====
+
====Test suite: Data-bind completion====
-
# {{testcase| Ng-* directives}}
+
# {{testcase| Attribute completion}}
## Create a new HTML file
## Create a new HTML file
 +
## Pick some element and invoke code completion for its
## Invoke code completion for attributes of some HTML element
## Invoke code completion for attributes of some HTML element
-
#* {{result|EXPECTED RESULT: ng-* directives are offered, pick one and confirm its completion}}
+
#* {{result|EXPECTED RESULT: data-bind attribute is offered and help window contains text about data-bind syntax}}
-
# {{testcase| Data-ng-* directives}}
+
# {{testcase| Completion for bindings}}
-
## Create a new HTML file
+
## Create a new HTML file and paste following
-
## In some element, type "data-ng-" attribute and invoke code completion
+
## <pre> <body data-bind=""></body></pre>
-
## <pre> <body data-ng-></body></pre>
+
## Invoke code completion inside quotes
-
#* {{result|EXPECTED RESULT: data-ng-* directives are offered, pick one and confirm its completion}}
+
#* {{result|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|Options is opened with KnockoutJS page about the given binding }}
 +
# {{testcase| Completion for bindings II}}
 +
## Create a new HTML file and paste following
 +
## <pre> <body data-bind=""></body></pre>
 +
## Invoke code completion inside quotes
 +
## List of suggestions is opened, type "t"
 +
#* {{result|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:
 +
<pre>
 +
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>";
 +
    });
 +
 
 +
}
 +
</pre>
 +
# {{testcase| Knockout completion I }}
 +
## Having the modified JS file, invoke code completion at last line inside SimpleMode function (line before last closing "}")
 +
## Type "k", "ko" is offered and code completion shows "Knockout" in the right side of completion window
 +
## Confirm "ko" and press dot
 +
#* {{result|EXPECTED RESULT: List of suggestions for Knockout object is offered, for instance applyBindings(), computed(), extenders or jQueryTmplVersion }}
 +
# {{testcase| Knockout completion II }}
 +
## Remove modifications from previous test case
 +
## At last line inside SimpleMode function (line before last closing "}"), type <pre> self.printLastname = </pre>
 +
## Invoke code completion and make sure it contains ko item
 +
## Type "ko." and again invoke code completion
 +
## computed() is offered
 +
## Finish function declaration to look like
 +
## <pre>&#10;ko.printLastname = ko.computed(function(){&#10;        return lastName;&#10;    } );&#10;</pre>
 +
## save the file
 +
#* {{result|EXPECTED RESULT: Everything is OK }}

Revision as of 13:46, 18 July 2013

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