You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2021/10/11 13:49:48 UTC

[myfaces-tobago] branch tobago-5.x updated: test: implement Jasmine test

This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git


The following commit(s) were added to refs/heads/tobago-5.x by this push:
     new 6deed8b  test: implement Jasmine test
6deed8b is described below

commit 6deed8bc00b437a8ff48bf6ab32f3b5267d224c5
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon Oct 11 15:42:12 2021 +0200

    test: implement Jasmine test
    
    * reimplement test for collapsible popup
    * adjust example for better testing
---
 .../example/demo/CollapsiblePopupController.java   |  27 ++
 .../10-collapsible-popup/Collapsible_Popup.test.js | 341 ++++++++++-----------
 .../10-collapsible-popup/Collapsible_Popup.xhtml   |  37 ++-
 3 files changed, 219 insertions(+), 186 deletions(-)

diff --git a/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/CollapsiblePopupController.java b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/CollapsiblePopupController.java
index 65afba1..3e739e1 100644
--- a/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/CollapsiblePopupController.java
+++ b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/CollapsiblePopupController.java
@@ -28,6 +28,9 @@ import java.io.Serializable;
 public class CollapsiblePopupController implements Serializable {
 
   private boolean collapsed = true;
+  private String input1;
+  private String input2;
+  private String input3;
 
   public boolean isCollapsed() {
     return collapsed;
@@ -44,4 +47,28 @@ public class CollapsiblePopupController implements Serializable {
   public void close() {
     collapsed = true;
   }
+
+  public String getInput1() {
+    return input1;
+  }
+
+  public void setInput1(String input1) {
+    this.input1 = input1;
+  }
+
+  public String getInput2() {
+    return input2;
+  }
+
+  public void setInput2(String input2) {
+    this.input2 = input2;
+  }
+
+  public String getInput3() {
+    return input3;
+  }
+
+  public void setInput3(String input3) {
+    this.input3 = input3;
+  }
 }
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/10-collapsible-popup/Collapsible_Popup.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/10-collapsible-popup/Collapsible_Popup.test.js
index aee4965..9e1959a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/10-collapsible-popup/Collapsible_Popup.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/10-collapsible-popup/Collapsible_Popup.test.js
@@ -16,183 +16,182 @@
  */
 
 import {JasmineTestTool} from "/tobago/test/tobago-test-tool.js";
+import {elementByIdFn, querySelectorAllFn, querySelectorFn} from "/script/tobago-test.js";
 
-it("not implemented yet", function (done) {
-  let test = new JasmineTestTool(done);
-  test.do(() => fail("must be fixed first"));
+it("Simple Popup", function (done) {
+  const messagesFn = querySelectorAllFn("#page\\:messages.tobago-messages div");
+  const openFn = elementByIdFn("page:mainForm:simple:open1");
+  const submitOnPageFn = elementByIdFn("page:mainForm:simple:submitOnPage1");
+  const popupFn = elementByIdFn("page:mainForm:simple:simplePopup");
+  const inFn = elementByIdFn("page:mainForm:simple:simplePopup:in1::field");
+  const outFn = querySelectorFn("#page\\:mainForm\\:simple\\:simplePopup\\:out1 .form-control-plaintext");
+  const submitOnPopupFn = elementByIdFn("page:mainForm:simple:simplePopup:submitOnPopup1");
+  const closeFn = elementByIdFn("page:mainForm:simple:simplePopup:close1");
+
+  const clientInFn = elementByIdFn("page:mainForm:client:clientPopup:in3::field");
+  const clientSubmitOnPopupFn = elementByIdFn("page:mainForm:client:clientPopup:submitOnPopup3");
+
+  const date = new Date().toString();
+
+  const test = new JasmineTestTool(done);
+  test.setup(() => !popupFn().classList.contains("show"), null, "click", closeFn);
+  test.event("click", openFn, () => popupFn().classList.contains("show"));
+  test.do(() => expect(popupFn().classList).toContain("show"));
+  test.do(() => expect(inFn()).not.toBeNull());
+
+  test.do(() => inFn().value = date);
+  test.event("click", submitOnPopupFn, () => outFn().textContent === date);
+  test.do(() => expect(messagesFn().length).toBe(0));
+  test.do(() => expect(inFn()).not.toBeNull());
+  test.do(() => expect(inFn().value).toBe(date));
+  test.do(() => expect(outFn().textContent).toBe(date));
+
+  test.do(() => inFn().value = "");
+  test.event("click", submitOnPopupFn, () => messagesFn().length === 1);
+  test.do(() => expect(messagesFn().length).toBe(1));
+  test.do(() => expect(inFn()).not.toBeNull());
+  test.do(() => expect(inFn().value).toBe(""));
+  test.do(() => expect(outFn().textContent).toBe(date));
+
+  test.event("click", closeFn, () => !popupFn().classList.contains("show"));
+  test.do(() => expect(popupFn().classList).not.toContain("show"));
+  test.do(() => expect(inFn()).toBeNull());
+
+  //add an error message for the next step
+  test.do(() => expect(messagesFn().length).toBe(0));
+  test.do(() => clientInFn().value = "");
+  test.event("click", clientSubmitOnPopupFn, () => messagesFn().length === 1);
+  test.do(() => expect(messagesFn().length).toBe(1));
+
+  test.event("click", submitOnPageFn, () => messagesFn().length === 0);
+  test.do(() => expect(messagesFn().length).toBe(0));
   test.start();
 });
 
-/*
-import {querySelectorAllFn, querySelectorFn} from "/script/tobago-test.js";
-import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
-import {JasmineTestTool} from "/tobago/test/tobago-test-tool.js";
+it("Full Server Request", function (done) {
+  const messagesFn = querySelectorAllFn("#page\\:messages.tobago-messages div");
+  const openFn = elementByIdFn("page:mainForm:server:open2");
+  const submitOnPageFn = elementByIdFn("page:mainForm:server:submitOnPage2");
+  const popupFn = elementByIdFn("page:mainForm:server:serverPopup");
+  const inFn = elementByIdFn("page:mainForm:server:serverPopup:in2::field");
+  const outFn = querySelectorFn("#page\\:mainForm\\:server\\:serverPopup\\:out2 .form-control-plaintext");
+  const submitOnPopupFn = elementByIdFn("page:mainForm:server:serverPopup:submitOnPopup2");
+  const closeFn = elementByIdFn("page:mainForm:server:serverPopup:close2");
 
-QUnit.test("Simple Popup", function (assert) {
-  let messagesFn = querySelectorAllFn("#page\\:messages.tobago-messages div");
-  let openFn = querySelectorFn("#page\\:mainForm\\:simple\\:open1");
-  let submitOnPageFn = querySelectorFn("#page\\:mainForm\\:simple\\:submitOnPage1");
-  let inFn = querySelectorFn("#page\\:mainForm\\:simple\\:controllerPopup\\:in1\\:\\:field");
-  let submitOnPopupFn = querySelectorFn("#page\\:mainForm\\:simple\\:controllerPopup\\:submitOnPopup1");
-  let closeFn = querySelectorFn("#page\\:mainForm\\:simple\\:controllerPopup\\:close1");
-
-  let TTT = new TobagoTestTool(assert);
-  TTT.action(function () {
-    openFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.waitForResponse();
-  TTT.asserts(1, function () {
-    assert.ok(inFn() !== null);
-  });
-  TTT.action(function () {
-    inFn().value = "some text";
-    submitOnPopupFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.waitForResponse();
-  TTT.asserts(3, function () {
-    assert.equal(messagesFn().length, 0);
-    assert.ok(inFn() !== null);
-    assert.equal(inFn().value, "some text");
-  });
-  TTT.action(function () {
-    inFn().value = "";
-    submitOnPopupFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.waitForResponse();
-  TTT.asserts(3, function () {
-    assert.equal(messagesFn().length, 1);
-    assert.ok(inFn() !== null);
-    assert.equal(inFn().value, "");
-  });
-  TTT.action(function () {
-    closeFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.waitForResponse();
-  TTT.asserts(1, function () {
-    assert.equal(inFn(), null);
-  });
-  TTT.action(function () {
-    submitOnPageFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.waitForResponse();
-  TTT.asserts(1, function () {
-    assert.equal(messagesFn().length, 0);
-  });
-  TTT.startTest();
-});
+  const clientInFn = elementByIdFn("page:mainForm:client:clientPopup:in3::field");
+  const clientSubmitOnPopupFn = elementByIdFn("page:mainForm:client:clientPopup:submitOnPopup3");
+
+  const date = new Date().toString();
+
+  const test = new JasmineTestTool(done);
+  test.setup(() => !popupFn().classList.contains("show"), null, "click", closeFn);
+  test.event("click", openFn, () => popupFn().classList.contains("show"));
+  test.do(() => expect(popupFn().classList).toContain("show"));
+  test.do(() => expect(inFn()).not.toBeNull());
+
+  test.do(() => inFn().value = date);
+  test.event("click", submitOnPopupFn, () => outFn().textContent === date);
+  test.do(() => expect(messagesFn().length).toBe(0));
+  test.do(() => expect(inFn()).not.toBeNull());
+  test.do(() => expect(inFn().value).toBe(date));
+  test.do(() => expect(outFn().textContent).toBe(date));
+
+  test.do(() => inFn().value = "");
+  test.event("click", submitOnPopupFn, () => messagesFn().length === 1);
+  test.do(() => expect(messagesFn().length).toBe(1));
+  test.do(() => expect(inFn()).not.toBeNull());
+  test.do(() => expect(inFn().value).toBe(""));
+  test.do(() => expect(outFn().textContent).toBe(date));
+
+  test.event("click", closeFn, () => !popupFn().classList.contains("show"));
+  test.do(() => expect(popupFn().classList).not.toContain("show"));
+  test.do(() => expect(inFn()).toBeNull());
 
-QUnit.test("Full Server Request", function (assert) {
-  let messagesFn = querySelectorAllFn("#page\\:messages.tobago-messages div");
-  let openFn = querySelectorFn("#page\\:mainForm\\:server\\:open2");
-  let submitOnPageFn = querySelectorFn("#page\\:mainForm\\:server\\:submitOnPage2");
-  let inFn = querySelectorFn("#page\\:mainForm\\:server\\:fullServerRequestPopup\\:in2\\:\\:field");
-  let submitOnPopupFn = querySelectorFn("#page\\:mainForm\\:server\\:fullServerRequestPopup\\:submitOnPopup2");
-  let closeFn = querySelectorFn("#page\\:mainForm\\:server\\:fullServerRequestPopup\\:close2");
-
-  let TTT = new TobagoTestTool(assert);
-  TTT.action(function () {
-    openFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.waitForResponse();
-  TTT.asserts(1, function () {
-    assert.ok(inFn() !== null);
-  });
-  TTT.action(function () {
-    inFn().value = "some text";
-    submitOnPopupFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.waitForResponse();
-  TTT.asserts(3, function () {
-    assert.equal(messagesFn().length, 0);
-    assert.ok(inFn() !== null);
-    assert.equal(inFn().value, "some text");
-  });
-  TTT.action(function () {
-    inFn().value = "";
-    submitOnPopupFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.waitForResponse();
-  TTT.asserts(3, function () {
-    assert.equal(messagesFn().length, 1);
-    assert.ok(inFn() !== null);
-    assert.equal(inFn().value, "");
-  });
-  TTT.action(function () {
-    closeFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.waitForResponse();
-  TTT.asserts(1, function () {
-    assert.equal(inFn(), null);
-  });
-  TTT.action(function () {
-    submitOnPageFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.waitForResponse();
-  TTT.asserts(1, function () {
-    assert.equal(messagesFn().length, 0);
-  });
-  TTT.startTest();
+  //add an error message for the next step
+  test.do(() => expect(messagesFn().length).toBe(0));
+  test.do(() => clientInFn().value = "");
+  test.event("click", clientSubmitOnPopupFn, () => messagesFn().length === 1);
+  test.do(() => expect(messagesFn().length).toBe(1));
+
+  test.event("click", submitOnPageFn, () => messagesFn().length === 0);
+  test.do(() => expect(messagesFn().length).toBe(0));
+  test.start();
 });
 
-QUnit.test("Client Side", function (assert) {
-  let messagesFn = querySelectorAllFn("#page\\:messages.tobago-messages div");
-  let openFn = querySelectorFn("#page\\:mainForm\\:client\\:open3");
-  let submitOnPageFn = querySelectorFn("#page\\:mainForm\\:client\\:submitOnPage3");
-  let popupCollapsedFn = querySelectorFn("#page\\:mainForm\\:client\\:clientPopup\\:\\:collapse");
-  let inFn = querySelectorFn("#page\\:mainForm\\:client\\:clientPopup\\:in3\\:\\:field");
-  let submitOnPopupFn = querySelectorFn("#page\\:mainForm\\:client\\:clientPopup\\:submitOnPopup3");
-  let closeFn = querySelectorFn("#page\\:mainForm\\:client\\:clientPopup\\:close3");
-
-  let TTT = new TobagoTestTool(assert);
-  TTT.action(function () {
-    openFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.asserts(1, function () {
-    assert.equal(popupCollapsedFn().value, "false");
-  });
-  TTT.action(function () {
-    closeFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.asserts(1, function () {
-    assert.equal(popupCollapsedFn().value, "true");
-  });
-  TTT.action(function () {
-    openFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.asserts(1, function () {
-    assert.equal(popupCollapsedFn().value, "false");
-  });
-  TTT.action(function () {
-    inFn().value = "some text";
-    submitOnPopupFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.waitForResponse();
-  TTT.asserts(2, function () {
-    assert.equal(messagesFn().length, 0);
-    assert.equal(popupCollapsedFn().value, "true");
-  });
-  TTT.action(function () {
-    openFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.asserts(1, function () {
-    assert.equal(popupCollapsedFn().value, "false");
-  });
-  TTT.action(function () {
-    inFn().value = "";
-    submitOnPopupFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.waitForResponse();
-  TTT.asserts(2, function () {
-    assert.equal(messagesFn().length, 1);
-    assert.equal(popupCollapsedFn().value, "true");
-  });
-  TTT.action(function () {
-    submitOnPageFn().dispatchEvent(new Event("click", {bubbles: true}));
-  });
-  TTT.waitForResponse();
-  TTT.asserts(1, function () {
-    assert.equal(messagesFn().length, 1);
-  });
-  TTT.startTest();
+it("Client Side", function (done) {
+  const messagesFn = querySelectorAllFn("#page\\:messages.tobago-messages div");
+  const openFn = elementByIdFn("page:mainForm:client:open3");
+  const submitOnPageFn = elementByIdFn("page:mainForm:client:submitOnPage3");
+  const popupFn = elementByIdFn("page:mainForm:client:clientPopup");
+  const collapseFn = elementByIdFn("page:mainForm:client:clientPopup::collapse");
+  const inFn = elementByIdFn("page:mainForm:client:clientPopup:in3::field");
+  const outFn = querySelectorFn("#page\\:mainForm\\:client\\:clientPopup\\:out3 .form-control-plaintext");
+  const submitOnPopupFn = elementByIdFn("page:mainForm:client:clientPopup:submitOnPopup3");
+  const closeFn = elementByIdFn("page:mainForm:client:clientPopup:close3");
+
+  const simpleSubmitOnPageFn = elementByIdFn("page:mainForm:simple:submitOnPage1");
+
+  const date = new Date().toString();
+
+  let shownEventCount = 0;
+  let hiddenEventCount = 0;
+  popupFn().addEventListener("shown.bs.modal", () => shownEventCount++);
+  popupFn().addEventListener("hidden.bs.modal", () => hiddenEventCount++);
+
+  const test = new JasmineTestTool(done);
+  test.do(() => hiddenEventCount = 1);
+  test.setup(() => collapseFn().value === "true" && hiddenEventCount === 1,
+      () => hiddenEventCount = 0,
+      "click", closeFn);
+
+  test.do(() => shownEventCount = 0);
+  test.event("click", openFn, () => shownEventCount > 0);
+  test.do(() => expect(popupFn().classList).toContain("show"));
+  test.do(() => expect(collapseFn().value).toBe("false"));
+
+  test.do(() => hiddenEventCount = 0);
+  test.event("click", closeFn, () => hiddenEventCount > 0);
+  test.do(() => expect(popupFn().classList).not.toContain("show"));
+  test.do(() => expect(collapseFn().value).toBe("true"));
+
+  test.do(() => shownEventCount = 0);
+  test.event("click", openFn, () => shownEventCount > 0);
+  test.do(() => expect(popupFn().classList).toContain("show"));
+  test.do(() => expect(collapseFn().value).toBe("false"));
+
+  test.do(() => inFn().value = date);
+  test.event("click", submitOnPopupFn, () => outFn().textContent === date);
+  test.do(() => expect(popupFn().classList).not.toContain("show"));
+  test.do(() => expect(collapseFn().value).toBe("true"));
+  test.do(() => expect(messagesFn().length).toBe(0));
+  test.do(() => expect(inFn().value).toBe(date));
+  test.do(() => expect(outFn().textContent).toBe(date));
+
+  test.do(() => popupFn().addEventListener("shown.bs.modal", () => shownEventCount++));
+  test.do(() => popupFn().addEventListener("hidden.bs.modal", () => hiddenEventCount++));
+
+  test.do(() => shownEventCount = 0);
+  test.event("click", openFn, () => shownEventCount > 0);
+  test.do(() => expect(popupFn().classList).toContain("show"));
+  test.do(() => expect(collapseFn().value).toBe("false"));
+
+  test.do(() => inFn().value = "");
+  test.event("click", submitOnPopupFn, () => messagesFn().length === 1);
+  test.do(() => expect(popupFn().classList).not.toContain("show"));
+  test.do(() => expect(collapseFn().value).toBe("true"));
+  test.do(() => expect(messagesFn().length).toBe(1));
+  test.do(() => expect(inFn().value).toBe(""));
+  test.do(() => expect(outFn().textContent).toBe(date));
+
+  //remove error message for the next step
+  test.event("click", simpleSubmitOnPageFn, () => messagesFn().length === 0);
+  test.do(() => expect(popupFn().classList).not.toContain("show"));
+  test.do(() => expect(collapseFn().value).toBe("true"));
+  test.do(() => expect(messagesFn().length).toBe(0));
+
+  test.event("click", submitOnPageFn, () => messagesFn().length === 1);
+  test.do(() => expect(popupFn().classList).not.toContain("show"));
+  test.do(() => expect(collapseFn().value).toBe("true"));
+  test.do(() => expect(messagesFn().length).toBe(1));
+  test.start();
 });
-*/
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/10-collapsible-popup/Collapsible_Popup.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/10-collapsible-popup/Collapsible_Popup.xhtml
index 9fa1784..489629a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/10-collapsible-popup/Collapsible_Popup.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/130-collapsible/10-collapsible-popup/Collapsible_Popup.xhtml
@@ -19,6 +19,7 @@
 
 <ui:composition template="/main.xhtml"
                 xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
                 xmlns:tc="http://myfaces.apache.org/tobago/component"
                 xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
 
@@ -34,12 +35,14 @@
         Even if the required input field is empty.</p>
       <tc:button id="open1" label="Open" action="#{collapsiblePopupController.open}"/>
       <tc:button id="submitOnPage1" label="Submit"/>
-      <tc:popup id="controllerPopup" collapsed="#{collapsiblePopupController.collapsed}">
-        <tc:box label="Simple Popup">
-          <tc:in id="in1" label="Required" required="true"/>
+      <tc:popup id="simplePopup" collapsed="#{collapsiblePopupController.collapsed}">
+        <f:facet name="label">Simple Popup</f:facet>
+        <tc:in id="in1" label="Required" required="true" value="#{collapsiblePopupController.input1}"/>
+        <tc:out id="out1" label="Output" value="#{collapsiblePopupController.input1}"/>
+        <f:facet name="footer">
           <tc:button id="submitOnPopup1" label="Submit"/>
           <tc:button id="close1" label="Close" immediate="true" action="#{collapsiblePopupController.close}"/>
-        </tc:box>
+        </f:facet>
       </tc:popup>
     </tc:form>
   </tc:section>
@@ -51,17 +54,19 @@
         If you press the 'Submit'-button in the popup, the popup remains open,
         because the server know the current state.</p>
       <tc:button id="open2" label="Open">
-        <tc:operation name="show" for="fullServerRequestPopup"/>
+        <tc:operation name="show" for="serverPopup"/>
       </tc:button>
       <tc:button id="submitOnPage2" label="Submit"/>
-      <tc:popup id="fullServerRequestPopup">
-        <tc:box label="Full Server Request">
-          <tc:in id="in2" label="Required" required="true"/>
+      <tc:popup id="serverPopup">
+        <f:facet name="label">Full Server Request Popup</f:facet>
+        <tc:in id="in2" label="Required" required="true" value="#{collapsiblePopupController.input2}"/>
+        <tc:out id="out2" label="Output" value="#{collapsiblePopupController.input2}"/>
+        <f:facet name="footer">
           <tc:button id="submitOnPopup2" label="Submit"/>
           <tc:button id="close2" label="Close" immediate="true">
-            <tc:operation name="hide" for="fullServerRequestPopup"/>
+            <tc:operation name="hide" for="serverPopup"/>
           </tc:button>
-        </tc:box>
+        </f:facet>
       </tc:popup>
     </tc:form>
   </tc:section>
@@ -81,15 +86,17 @@
       </tc:button>
       <tc:button id="submitOnPage3" label="Submit"/>
       <tc:popup id="clientPopup" collapsedMode="hidden">
-        <tc:box label="Full Server Request">
-          <p>The opening of the popup is client side.
-            Therefor the popup will be closed after pressing the 'Submit'-button which reload the page.</p>
-          <tc:in id="in3" label="Required" required="true"/>
+        <f:facet name="label">Client Sided Popup</f:facet>
+        <p>The opening of the popup is client side.
+          Therefor the popup will be closed after pressing the 'Submit'-button which reload the page.</p>
+        <tc:in id="in3" label="Required" required="true" value="#{collapsiblePopupController.input3}"/>
+        <tc:out id="out3" label="Output" value="#{collapsiblePopupController.input3}"/>
+        <f:facet name="footer">
           <tc:button id="submitOnPopup3" label="Submit"/>
           <tc:button id="close3" label="Close" omit="true">
             <tc:operation name="hide" for="clientPopup"/>
           </tc:button>
-        </tc:box>
+        </f:facet>
       </tc:popup>
     </tc:form>
   </tc:section>