Client-side placeholder implementation: create unit test

src/resources/apps/xforms-sandbox/samples/test-placeholder.coffee

@@ -0,0 +1,88 @@
+# Copyright (C) 2011 Orbeon, Inc.
+#
+# This program is free software; you can redistribute it and/or modify it under the terms of the
+# GNU Lesser General Public License as published by the Free Software Foundation; either version
+# 2.1 of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+# without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+# See the GNU Lesser General Public License for more details.
+#
+# The full text of the license is available at http://www.gnu.org/copyleft/lesser.html
+
+OD = ORBEON.util.Dom
+Test = ORBEON.util.Test
+Document = ORBEON.xforms.Document
+Assert = YAHOO.util.Assert
+YD = YAHOO.util.Dom
+
+YAHOO.tool.TestRunner.add new YAHOO.tool.TestCase
+
+    name: "Input placeholder"
+
+    browserSupportsPlaceholder: do ->
+        input = document.createElement "input"
+        input.placeholder?
+
+    assertPlaceholderShown: (control, placeholder) ->
+        input = (control.getElementsByTagName "input")[0]
+        Assert.areEqual placeholder, input.placeholder, "placeholder attribute has the correct value"
+        if @browserSupportsPlaceholder
+            Assert.areEqual "", input.value, "input should have no value"
+        else
+            Assert.isTrue (YD.hasClass control, "xforms-placeholder"), "has placeholder class"
+            Assert.areEqual placeholder, input.value, "input should have placeholder value"
+
+    assertContentShown: (control, content) ->
+        input = (control.getElementsByTagName "input")[0]
+        Assert.isFalse (YD.hasClass control, "xforms-placeholder"), "doesn't have placeholder class"
+        Assert.areEqual content, input.value, "input must show content"
+
+    assertBlockShows: (index, values) ->
+        prefixes = ["static-label·", "static-hint·", "dynamic-label·", "dynamic-hint·"]
+        for i in [0..3]
+            value = values[i]
+            control = YD.get (prefixes[i] + index)
+            @assertPlaceholderShown control, value.placeholder if value.placeholder?
+            @assertContentShown control, value.content if value.content?
+
+    # Initially placeholders must be shown
+    testPlaceholderShown: ->
+        placeholders = [{placeholder: "First name"}, {placeholder: "First name"}, {placeholder: "1"}, {placeholder: "1"}]
+        Test.runMayCauseXHR this, [
+            => @assertBlockShows 1, placeholders
+            => Test.click "add"
+            => @assertBlockShows 2, placeholders
+            => Test.click "remove"
+        ]
+
+    # Setting the content hides the placeholders
+    testContentShown: ->
+        content = [{content: "1"}, {content: "1"}, {content: "1"}, {content: "1"}]
+        Test.runMayCauseXHR this, [
+            => Test.click "increment-content·1"
+            => @assertBlockShows 1, content
+            => Test.click "reset-content·1"
+            => Test.click "add"
+            => Test.click "increment-content·2"
+            => @assertBlockShows 2, content
+            => Test.click "remove"
+        ]
+
+    # Setting the focus on a the first name hides the placeholder
+    testFocusNoPlaceholder: ->
+        focusOnFirst = [{content: ""}, {placeholder: "First name"}, {placeholder: "1"}, {placeholder: "1"}]
+        Test.runMayCauseXHR this, [
+            => (YD.get "static-label$xforms-input-1·1").focus()
+            => @assertBlockShows 1, focusOnFirst
+            => Test.click "add"
+            => (YD.get "static-label$xforms-input-1·2").focus()
+            => @assertBlockShows 2, focusOnFirst
+            => Test.click "remove"
+            => (YD.get "add").focus()
+        ]
+
+
+
+Test.onOrbeonLoadedRunTest()
+

src/resources/apps/xforms-sandbox/samples/test-placeholder.xhtml

@@ -0,0 +1,89 @@
+<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"
+      xmlns:xforms="http://www.w3.org/2002/xforms"
+      xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
+      xmlns:ev="http://www.w3.org/2001/xml-events"
+      xmlns:xs="http://www.w3.org/2001/XMLSchema"
+      xmlns:fr="http://orbeon.org/oxf/xml/form-runner">
+    <xhtml:head>
+        <xhtml:title>Placeholder</xhtml:title>
+        <xforms:model>
+            <xforms:instance>
+                <instance>
+                    <iteration>
+                        <content/>
+                        <placeholder>1</placeholder>
+                    </iteration>
+                </instance>
+            </xforms:instance>
+        </xforms:model>
+
+        <!-- Added by server if placeholders are found in form -->
+        <xhtml:script type="text/javascript" src="/ops/javascript/orbeon/xforms/control/Placeholder.js"/>
+        <xhtml:link type="text/css" rel="stylesheet" href="/ops/yui/logger/assets/logger.css"/>
+        <xhtml:script type="text/javascript" src="/ops/yui/logger/logger.js"/>
+        <xhtml:script type="text/javascript" src="/ops/yui/event-simulate/event-simulate.js"/>
+        <xhtml:script type="text/javascript" src="/ops/yui/yuitest/yuitest.js"/>
+        <xhtml:script type="text/javascript" src="/apps/xforms-sandbox/samples/test-placeholder.js"/>
+        <xhtml:style type="text/css">
+            .add, .remove { margin-bottom: 10px }
+            .iteration { display: inline-block; border: 1px solid #999; padding: 10px }
+            .xforms-repeat-selected-item-1 { background-color: #EEE }
+        </xhtml:style>
+    </xhtml:head>
+    <xhtml:body>
+        <xhtml:div>
+            <xforms:trigger id="add" class="add">
+                <xforms:label>Add</xforms:label>
+                <xforms:insert ev:event="DOMActivate" nodeset="iteration"/>
+            </xforms:trigger>
+            <xforms:trigger id="remove" class="remove">
+                <xforms:label>Remove</xforms:label>
+                <xforms:delete ev:event="DOMActivate" nodeset="iteration[last()]"/>
+            </xforms:trigger>
+        </xhtml:div>
+        <xforms:repeat ref="iteration">
+            <xhtml:div class="iteration">
+                <xforms:trigger id="reset-content">
+                    <xforms:label>Reset content</xforms:label>
+                    <xforms:setvalue ev:event="DOMActivate" ref="content"/>
+                </xforms:trigger>
+                <xforms:trigger id="increment-content">
+                    <xforms:label>Content++</xforms:label>
+                    <xforms:setvalue ev:event="DOMActivate" ref="content" value="if (. castable as xs:integer) then . + 1 else 1"/>
+                </xforms:trigger>
+                <xforms:trigger id="increment-placeholder">
+                    <xforms:label>Placeholder++</xforms:label>
+                    <xforms:setvalue ev:event="DOMActivate" ref="placeholder" value="if (. castable as xs:integer) then . + 1 else 1"/>
+                </xforms:trigger>
+                <xhtml:dl>
+                    <xhtml:dt>Static label placeholder</xhtml:dt>
+                    <xhtml:dd>
+                        <xforms:input ref="content" id="static-label">
+                            <xforms:label appearance="xxforms:placeholder">First name</xforms:label>
+                        </xforms:input>
+                    </xhtml:dd>
+                    <xhtml:dt>Static hint placeholder</xhtml:dt>
+                    <xhtml:dd>
+                        <xforms:input ref="content" id="static-hint">
+                            <xforms:hint appearance="xxforms:placeholder">First name</xforms:hint>
+                        </xforms:input>
+                    </xhtml:dd>
+                    <xhtml:dt>Dynamic label placeholder</xhtml:dt>
+                    <xhtml:dd>
+                        <xforms:input ref="content" id="dynamic-label">
+                            <xforms:label appearance="xxforms:placeholder" ref="../placeholder"/>
+                            <xforms:hint ref="../placeholder"/>
+                        </xforms:input>
+                    </xhtml:dd>
+                    <xhtml:dt>Dynamic hint placeholder</xhtml:dt>
+                    <xhtml:dd>
+                        <xforms:input ref="content" id="dynamic-hint">
+                            <xforms:label ref="../placeholder"/>
+                            <xforms:hint appearance="xxforms:placeholder" ref="../placeholder"/>
+                        </xforms:input>
+                    </xhtml:dd>
+                </xhtml:dl>
+            </xhtml:div>
+        </xforms:repeat>
+    </xhtml:body>
+</xhtml:html>