TS 74 KnockoutJS

(Difference between revisions)
m (Test suite: Data-bind completion)
(Test suite: Foreach)
 
(4 intermediate revisions not shown)
Line 13: Line 13:
## <pre> &#10;<!DOCTYPE html>&#10;<html>&#10;    <head>        <title></title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">&#10;        <script src="libs/knockout-2.2.1.js"></script>        <script src="newjavascript.js"></script>    </head>&#10;    <body onload="init();">&#10;        <b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>&#10;        <input data-bind="visible: editing, value: name, hasFocus: editing" />&#10;        <div data-bind="css: { profitWarning: currentProfit() < 0 }">&#10;            Profit Information        </div>&#10;        <div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }"></div>&#10;        <div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">&#10;        </div>        <script type="text/html" id="person-template">&#10;            <h3 data-bind="text: name"></h3>&#10;            <p>Credits: <span data-bind="text: credits"></span></p>&#10;        </script>&#10;    </body>&#10;</html>&#10;</pre>
## <pre> &#10;<!DOCTYPE html>&#10;<html>&#10;    <head>        <title></title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">&#10;        <script src="libs/knockout-2.2.1.js"></script>        <script src="newjavascript.js"></script>    </head>&#10;    <body onload="init();">&#10;        <b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>&#10;        <input data-bind="visible: editing, value: name, hasFocus: editing" />&#10;        <div data-bind="css: { profitWarning: currentProfit() < 0 }">&#10;            Profit Information        </div>&#10;        <div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }"></div>&#10;        <div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">&#10;        </div>        <script type="text/html" id="person-template">&#10;            <h3 data-bind="text: name"></h3>&#10;            <p>Credits: <span data-bind="text: credits"></span></p>&#10;        </script>&#10;    </body>&#10;</html>&#10;</pre>
#* {{result|EXPECTED RESULT: Editor shows no syntax errors}}
#* {{result|EXPECTED RESULT: Editor shows no syntax errors}}
-
[[File:Ts74_knockoutjs_coloring.png]]
+
 
# {{testcase| Syntax coloring}}
# {{testcase| Syntax coloring}}
## 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}}
+
## [[File:Ts74_knockoutjs_coloring.png]]
 +
#* {{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 - screenshots show red but current font is bold green) and its value is also colored properly}}
====Test suite: Data-bind completion====
====Test suite: Data-bind completion====
Line 38: Line 39:
## <pre> <body data-bind="text: foo,"></body></pre>
## <pre> <body data-bind="text: foo,"></body></pre>
## Invoke code completion after comma
## Invoke code completion after comma
-
## List of suggestions is opened, type "t"
+
## List of suggestions as in first test case is opened, type "v"
-
#* {{result|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 }}
+
#* {{result|EXPECTED RESULT: List of suggestions is reduced to items starting with "v" (visible, value) . Select "visible", confirm it. It should be completed with double colon }}
====Test suite: Knockout completion====
====Test suite: Knockout completion====
Line 59: Line 60:
}
}
 +
ko.applyBindings(new SimpleMode());
</pre>
</pre>
# {{testcase| Knockout completion I }}
# {{testcase| Knockout completion I }}
Line 133: Line 135:
and HTML file
and HTML file
<pre>
<pre>
-
<h4>People</h4>
+
&lt;h4&gt;People&lt;/h4&gt;
-
<ul data-bind="foreach: people">
+
&lt;ul data-bind="foreach: people"&gt;
-
     <li>
+
     &lt;li&gt;
-
         Name at position <span data-bind="text: $index"> </span>:
+
         Name at position &lt;span data-bind="text: $index"&gt; &lt;/span&gt;:
-
         <span data-bind="text: name"> </span>
+
         &lt;span data-bind="text: name"&gt; &lt;/span&gt;
-
         <a href="#" data-bind="click: $parent.">Remove</a>
+
         &lt;a href="#" data-bind="click: $parent."&gt;Remove&lt;/a&gt;
-
     </li>
+
     &lt;/li&gt;
-
</ul>
+
&lt;/ul&gt;
-
<button data-bind="click: addPerson">Add</button>
+
&lt;button data-bind="click: addPerson"&gt;Add&lt;/button&gt;
</pre>
</pre>
# {{testcase| Parent }}
# {{testcase| Parent }}

Current revision as of 14:48, 13 September 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 and errors

  1. Syntax coloring
    1. Paste following into HTML document
    2.  
      <!DOCTYPE html>
      <html>
          <head>        <title></title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
              <script src="libs/knockout-2.2.1.js"></script>        <script src="newjavascript.js"></script>    </head>
          <body onload="init();">
              <b data-bind="visible: !editing(), text: name, click: edit"> </b>
              <input data-bind="visible: editing, value: name, hasFocus: editing" />
              <div data-bind="css: { profitWarning: currentProfit() < 0 }">
                  Profit Information        </div>
              <div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }"></div>
              <div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">
              </div>        <script type="text/html" id="person-template">
                  <h3 data-bind="text: name"></h3>
                  <p>Credits: <span data-bind="text: credits"></span></p>
              </script>
          </body>
      </html>
      
    • EXPECTED RESULT: Editor shows no syntax errors
  1. Syntax coloring
    1. Create a new HTML5 sample project "Knockout.js must-play games list"
    2. File:Ts74_knockoutjs_coloring.png
    • 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 - screenshots show red but current font is bold green) and its value is also colored properly

Test suite: Data-bind completion

  1. Attribute completion
    1. Create a new HTML file
    2. 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 as in first test case is opened, type "v"
    • EXPECTED RESULT: List of suggestions is reduced to items starting with "v" (visible, value) . 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();

}
ko.applyBindings(new SimpleMode());
  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 and Knockout's $data, $parent, $element, $root and $parents
  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
  6. Custom binding
    1. On empty line, insert new div element
      <div data-bind="customBinding: "></div>
    2. Invoke code completion the double colon
    • EXPECTED RESULT: Code completion works as in case 1, data-bind attribute is recognized as HTML framework

Test suite: Foreach

Have JS file (source: KnockoutJS documentation

function AppViewModel() {
    var self = this;
 
    self.people = ko.observableArray([
        { name: 'Bert' },
        { name: 'Charles' },
        { name: 'Denise' }
    ]);
 
    self.addPerson = function() {
        self.people.push({ name: "New at " + new Date() });
    };
 
    self.removePerson = function() {
        self.people.remove(this);
    }
}
 
ko.applyBindings(new AppViewModel());

and HTML file

<h4>People</h4>
<ul data-bind="foreach: people">
    <li>
        Name at position <span data-bind="text: $index"> </span>:
        <span data-bind="text: name"> </span>
        <a href="#" data-bind="click: $parent.">Remove</a>
    </li>
</ul>
<button data-bind="click: addPerson">Add</button>
  1. Parent
    1. In HTML file, invoke cc after "$parent."
    • EXPECTED RESULT: people, addPerson() and removePerson() are offered. Try it again, but replace $parent with $parents[0] and then with $root
  2. Data
    1. In HTML file, paste following
      <span data-bind="text: "> </span>
    2. Invoke cc for text binding
    • EXPECTED RESULT: $data should be offered
  3. Index
    1. In the HTML file above, paste
      <span data-bind="text: "> </span>
      inside foreach
    2. Invoke cc for text binding
    • EXPECTED RESULT: $index should be 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