2 * Back 2 Browser Bytecode Translator
3 * Copyright (C) 2012 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
5 * This program is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License as published by
7 * the Free Software Foundation, version 2 of the License.
9 * This program is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details.
14 * You should have received a copy of the GNU General Public License
15 * along with this program. Look for COPYING file in the top folder.
16 * If not, see http://opensource.org/licenses/GPL-2.0.
18 package org.apidesign.bck2brwsr.htmlpage;
20 import java.util.List;
21 import javafx.scene.web.WebEngine;
22 import netscape.javascript.JSObject;
23 import org.apidesign.bck2brwsr.core.JavaScriptBody;
24 import org.apidesign.bck2brwsr.htmlpage.api.ComputedProperty;
25 import org.apidesign.bck2brwsr.htmlpage.api.OnEvent;
26 import org.apidesign.bck2brwsr.htmlpage.api.OnFunction;
27 import org.apidesign.bck2brwsr.htmlpage.api.Page;
28 import org.apidesign.bck2brwsr.htmlpage.api.Property;
29 import org.apidesign.bck2brwsr.vmtest.BrwsrTest;
30 import org.apidesign.bck2brwsr.vmtest.HtmlFragment;
31 import org.apidesign.bck2brwsr.vmtest.VMTest;
32 import static org.testng.Assert.assertEquals;
33 import org.testng.annotations.Factory;
34 import org.testng.annotations.Test;
38 * @author Jaroslav Tulach <jtulach@netbeans.org>
40 @Page(xhtml="Knockout.xhtml", className="KnockoutModel", properties={
41 @Property(name="name", type=String.class),
42 @Property(name="results", type=String.class, array = true),
43 @Property(name="callbackCount", type=int.class),
44 @Property(name="people", type=Person.class, array = true)
46 public class KnockoutTest {
49 "<h1 data-bind=\"text: helloMessage\">Loading Bck2Brwsr's Hello World...</h1>\n" +
50 "Your name: <input id='input' data-bind=\"value: name\"></input>\n" +
51 "<button id=\"hello\">Say Hello!</button>\n"
53 @BrwsrTest public void modifyValueAssertChangeInModel() {
54 KnockoutModel m = new KnockoutModel();
57 assert "Kukuc".equals(m.input.getValue()) : "Value is really kukuc: " + m.input.getValue();
58 m.input.setValue("Jardo");
59 m.triggerEvent(m.input, OnEvent.CHANGE);
60 assert "Jardo".equals(m.getName()) : "Name property updated: " + m.getName();
64 "<ul id='ul' data-bind='foreach: results'>\n"
65 + " <li data-bind='text: $data, click: $root.call'/>\n"
68 @BrwsrTest public void displayContentOfArray() {
69 KnockoutModel m = new KnockoutModel();
70 m.getResults().add("Ahoj");
73 int cnt = countChildren("ul");
74 assert cnt == 1 : "One child, but was " + cnt;
76 m.getResults().add("Hi");
78 cnt = countChildren("ul");
79 assert cnt == 2 : "Two children now, but was " + cnt;
81 triggerChildClick("ul", 1);
83 assert 1 == m.getCallbackCount() : "One callback " + m.getCallbackCount();
84 assert "Hi".equals(m.getName()) : "We got callback from 2nd child " + m.getName();
88 "<ul id='ul' data-bind='foreach: cmpResults'>\n"
89 + " <li><b data-bind='text: $data'></b></li>\n"
92 @BrwsrTest public void displayContentOfDerivedArray() {
93 KnockoutModel m = new KnockoutModel();
94 m.getResults().add("Ahoj");
97 int cnt = countChildren("ul");
98 assert cnt == 1 : "One child, but was " + cnt;
100 m.getResults().add("hello");
102 cnt = countChildren("ul");
103 assert cnt == 2 : "Two children now, but was " + cnt;
107 "<ul id='ul' data-bind='foreach: people'>\n"
108 + " <li data-bind='text: $data.firstName, click: $root.removePerson'></li>\n"
111 @BrwsrTest public void displayContentOfArrayOfPeople() {
112 KnockoutModel m = new KnockoutModel();
114 final Person first = new Person();
115 first.setFirstName("first");
116 m.getPeople().add(first);
120 int cnt = countChildren("ul");
121 assert cnt == 1 : "One child, but was " + cnt;
123 final Person second = new Person();
124 second.setFirstName("second");
125 m.getPeople().add(second);
127 cnt = countChildren("ul");
128 assert cnt == 2 : "Two children now, but was " + cnt;
130 triggerChildClick("ul", 1);
132 assert 1 == m.getCallbackCount() : "One callback " + m.getCallbackCount();
134 cnt = countChildren("ul");
135 assert cnt == 1 : "Again one child, but was " + cnt;
137 String txt = childText("ul", 0);
138 assert "first".equals(txt) : "Expecting 'first': " + txt;
140 first.setFirstName("changed");
142 txt = childText("ul", 0);
143 assert "changed".equals(txt) : "Expecting 'changed': " + txt;
147 static Person firstPerson(List<Person> people) {
148 return people.isEmpty() ? null : people.get(0);
152 "<p id='ul' data-bind='with: firstPerson'>\n"
153 + " <span data-bind='text: firstName, click: changeSex'></span>\n"
156 @BrwsrTest public void accessFirstPersonWithOnFunction() {
161 "<ul id='ul' data-bind='foreach: people'>\n"
162 + " <li data-bind='text: $data.firstName, click: changeSex'></li>\n"
165 @BrwsrTest public void onPersonFunction() {
169 private void trasfertToFemale() {
170 KnockoutModel m = new KnockoutModel();
172 final Person first = new Person();
173 first.setFirstName("first");
174 first.setSex(Sex.MALE);
175 m.getPeople().add(first);
180 int cnt = countChildren("ul");
181 assert cnt == 1 : "One child, but was " + cnt;
184 triggerChildClick("ul", 0);
186 assert first.getSex() == Sex.FEMALE : "Transverted to female: " + first.getSex();
189 @Test public void cloneModel() {
190 Person model = new Person();
192 model.setFirstName("first");
193 Person snd = model.clone();
194 snd.setFirstName("clone");
195 assertEquals("first", model.getFirstName(), "Value has not changed");
196 assertEquals("clone", snd.getFirstName(), "Value has changed in clone");
200 @Test public void deepCopyOnClone() {
201 People model = new People();
202 model.getNicknames().add("Jarda");
203 assertEquals(model.getNicknames().size(), 1, "One element");
204 People snd = model.clone();
205 snd.getNicknames().clear();
206 assertEquals(snd.getNicknames().size(), 0, "Clone is empty");
207 assertEquals(model.getNicknames().size(), 1, "Still one element");
212 static void call(KnockoutModel m, String data) {
214 m.setCallbackCount(m.getCallbackCount() + 1);
218 static void removePerson(KnockoutModel model, Person data) {
219 model.setCallbackCount(model.getCallbackCount() + 1);
220 model.getPeople().remove(data);
225 static String helloMessage(String name) {
226 return "Hello " + name + "!";
230 static List<String> cmpResults(List<String> results) {
235 public static Object[] create() {
236 return VMTest.create(KnockoutTest.class);
239 private static final String COUNT_CHILDREN =
240 "var e = window.document.getElementById(id);\n "
241 + "if (typeof e === 'undefined') return -2;\n "
242 + "return e.children.length;\n";
243 @JavaScriptBody(args = { "id" }, body = COUNT_CHILDREN)
244 private static int countChildren(String id) {
245 return ((Number)js().call("countChildren", id)).intValue();
248 private static final String TRIGGER_CHILD_CLICK =
249 "var e = window.document.getElementById(id);\n "
250 + "var ev = window.document.createEvent('MouseEvents');\n "
251 + "ev.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);\n "
252 + "e.children[pos].dispatchEvent(ev);\n ";
253 @JavaScriptBody(args = { "id", "pos" }, body = TRIGGER_CHILD_CLICK)
254 private static void triggerChildClick(String id, int pos) {
255 js().call("triggerChildClick", id, pos);
258 private static final String CHILD_TEXT =
259 "var e = window.document.getElementById(id);\n "
260 + "var t = e.children[pos].innerHTML;\n "
261 + "return t ? t : null;";
262 @JavaScriptBody(args = { "id", "pos" }, body = CHILD_TEXT)
263 private static String childText(String id, int pos) {
264 return (String) js().call("childText", id, pos);
268 private static JSObject js;
269 private static JSObject js() {
271 WebEngine eng = (WebEngine)System.getProperties().get("webEngine");
275 js = (JSObject) eng.executeScript("(function () {" +
278 + "obj.countChildren = function(id) { " + COUNT_CHILDREN + "};"
279 + "obj.triggerChildClick = function(id, pos) { " + TRIGGER_CHILD_CLICK + "};"
280 + "obj.childText = function(id, pos) { " + CHILD_TEXT + "};"