TS 74 KnockoutJS

(Difference between revisions)
(Test suite: Knockout in HTML editor)
(Test suite: Knockout completion)
Line 50: Line 50:
         return "<b>"+self.name+" "+lastName+"</b>";
         return "<b>"+self.name+" "+lastName+"</b>";
     });
     });
 +
 +
    self.skills = { "speak":1, "listen":2, "point": function(){}};
 +
    self.today = new Date();
}
}

Revision as of 14:19, 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: "
  4. Multiple bindings parameters
    1. Create a new HTML file and paste following
    2.  <body data-bind="text: foo,"></body>
    3. Invoke code completion after comma
    4. List of suggestions is opened, type "t"
    • EXPECTED RESULT: Different types of bindings are offered (text, attr, if, html...) as in first test case. Select "visible", confirm it. It should be completed with double colon

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>";
    });

    self.skills = { "speak":1, "listen":2, "point": function(){}};
    self.today = new Date();

}
  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. self.printLastname = ko.computed(function(){
              return lastName;
          } );
      
    8. save the file
    • EXPECTED RESULT: Everything is OK

Test suite: Knockout in HTML editor

This suite expects you to have modified JS file and sample project from previous test suite.

  1. Code Completion I
    1. open file 0-iteratingwithdivs.html
    2. On empty line, insert new div element
      <div data-bind=""></div>
    3. invoke code completion inside quotes and select text
    4. invoke code completion one more time
    • EXPECTED RESULT: Properties of both models are offered, make sure code completion list contains: gamesToPlay(), gamesCount, name, log(), printLastname() and printName(). Also JavaScript global members are offered
  2. Code Completion II
    1. Use the file from previous step from moment when you have code completion with e.g. log() opened
    2. Type "p"
    • EXPECTED RESULT: Code completion list is reduced to items starting with p, select printLastname and confirm it. It should be completed without any problem
  3. Code Completion III
    1. Use the file from previous step
    2. On empty line, insert new div element
      <div data-bind="text: newVariable"></div>
    3. On empty line, insert new div element
      <div data-bind="text: |"></div>
    4. Invoke code completion where | shows cursor position
    • EXPECTED RESULT: newVariable should be offered
  4. Code Completion IV
    1. Use the file from previous step
    2. On empty line, insert new div element
      <div data-bind="text: newVariable, visible: "></div>
    3. Invoke code completion after "visible"
    • EXPECTED RESULT: Again properties of all models and JavaScript global are offered as in the 1st case.
  5. Code Completion for with binding
    1. On empty line, insert new div element
      <div data-bind="with: skills">
      <span data-bind="text: "></span></div>
    2. Invoke code completion the double colon in span element
    • EXPECTED RESULT: Members speak, listen and point() should be offered. Repeat the same with "with: today" and make sure completion in span's data-bind offers methods of Date
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