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 2022/05/25 14:24:06 UTC

[myfaces-tobago] branch master updated: test(tab): CSS customClass set on header/body

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

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


The following commit(s) were added to refs/heads/master by this push:
     new 10a1c2fbec test(tab): CSS customClass set on header/body
10a1c2fbec is described below

commit 10a1c2fbecec4b29b8ced361f9427decf9d8154d
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Wed May 25 16:16:31 2022 +0200

    test(tab): CSS customClass set on header/body
    
    Issue: TOBAGO-2120
---
 .../900-test/2500-tab/Tabgroup_Style.test.js       | 36 ++++++++++++++++------
 .../content/900-test/2500-tab/Tabgroup_Style.xhtml |  4 +++
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2500-tab/Tabgroup_Style.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2500-tab/Tabgroup_Style.test.js
index b06c964dcf..02c3c9721f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2500-tab/Tabgroup_Style.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2500-tab/Tabgroup_Style.test.js
@@ -19,16 +19,18 @@ import {querySelectorFn} from "/script/tobago-test.js";
 import {JasmineTestTool} from "/tobago/test/tobago-test-tool.js";
 
 it("test numbers of tab-group-index", function (done) {
-  let tab1Fn = querySelectorFn("#page\\:mainForm\\:tabOne");
-  let tab2Fn = querySelectorFn("#page\\:mainForm\\:tabTwo");
-  let tab3Fn = querySelectorFn("#page\\:mainForm\\:tabThree");
-  let tab4Fn = querySelectorFn("#page\\:mainForm\\:tabFour");
-  let tab5Fn = querySelectorFn("#page\\:mainForm\\:tabFive");
-  let tabContent1Fn = querySelectorFn("#page\\:mainForm\\:tabOne\\:\\:content");
-  let tabContent2Fn = querySelectorFn("#page\\:mainForm\\:tabTwo\\:\\:content");
-  let tabContent3Fn = querySelectorFn("#page\\:mainForm\\:tabThree\\:\\:content");
-  let tabContent4Fn = querySelectorFn("#page\\:mainForm\\:tabFour\\:\\:content");
-  let tabContent5Fn = querySelectorFn("#page\\:mainForm\\:tabFive\\:\\:content");
+  const tab1Fn = querySelectorFn("#page\\:mainForm\\:tabOne");
+  const tab2Fn = querySelectorFn("#page\\:mainForm\\:tabTwo");
+  const tab3Fn = querySelectorFn("#page\\:mainForm\\:tabThree");
+  const tab4Fn = querySelectorFn("#page\\:mainForm\\:tabFour");
+  const tab5Fn = querySelectorFn("#page\\:mainForm\\:tabFive");
+  const tab6Fn = querySelectorFn("#page\\:mainForm\\:tabSix");
+  const tabContent1Fn = querySelectorFn("#page\\:mainForm\\:tabOne\\:\\:content");
+  const tabContent2Fn = querySelectorFn("#page\\:mainForm\\:tabTwo\\:\\:content");
+  const tabContent3Fn = querySelectorFn("#page\\:mainForm\\:tabThree\\:\\:content");
+  const tabContent4Fn = querySelectorFn("#page\\:mainForm\\:tabFour\\:\\:content");
+  const tabContent5Fn = querySelectorFn("#page\\:mainForm\\:tabFive\\:\\:content");
+  const tabContent6Fn = querySelectorFn("#page\\:mainForm\\:tabSix\\:\\:content");
 
   let test = new JasmineTestTool(done);
   test.do(() => expect(tab1Fn().index).toBe(0));
@@ -36,18 +38,32 @@ it("test numbers of tab-group-index", function (done) {
   test.do(() => expect(tab3Fn()).toBe(null, "Tab three is not rendered"));
   test.do(() => expect(tab4Fn().index).toBe(3));
   test.do(() => expect(tab5Fn().index).toBe(4));
+  test.do(() => expect(tab6Fn().index).toBe(5));
   test.do(() => expect(tabContent1Fn().dataset["index"]).toBe("0"));
   test.do(() => expect(tabContent2Fn().dataset["index"]).toBe("1"));
   test.do(() => expect(tabContent3Fn()).toBe(null, "Tab three content is not rendered"));
   test.do(() => expect(tabContent4Fn()).toBe(null, "Tab four content is not rendered (disabled)"));
   test.do(() => expect(tabContent5Fn().dataset["index"]).toBe("4"));
+  test.do(() => expect(tabContent6Fn().dataset["index"]).toBe("5"));
   test.do(() => expect(tab1Fn().querySelector(".nav-link").classList.contains("active")).toBe(true));
   test.do(() => expect(tab2Fn().querySelector(".nav-link").classList.contains("active")).not.toBe(true));
   test.do(() => expect(tab4Fn().querySelector(".nav-link").classList.contains("active")).not.toBe(true));
   test.do(() => expect(tab5Fn().querySelector(".nav-link").classList.contains("active")).not.toBe(true));
+  test.do(() => expect(tab6Fn().querySelector(".nav-link").classList.contains("active")).not.toBe(true));
   test.do(() => expect(tabContent1Fn().classList.contains("active")).toBe(true));
   test.do(() => expect(tabContent2Fn().classList.contains("active")).not.toBe(true));
   test.do(() => expect(tabContent4Fn()).toBe(null));
   test.do(() => expect(tabContent5Fn().classList.contains("active")).not.toBe("active"));
+  test.do(() => expect(tabContent6Fn().classList.contains("active")).not.toBe(true));
+  test.start();
+});
+
+it("test custom-css-class", function (done) {
+  const tab6Fn = querySelectorFn("#page\\:mainForm\\:tabSix");
+  const tabContent6Fn = querySelectorFn("#page\\:mainForm\\:tabSix\\:\\:content");
+
+  let test = new JasmineTestTool(done);
+  test.do(() => expect(tab6Fn().classList.contains("tab-six-custom")).toBe(true));
+  test.do(() => expect(tabContent6Fn().classList.contains("tab-six-custom")).toBe(true));
   test.start();
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2500-tab/Tabgroup_Style.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2500-tab/Tabgroup_Style.xhtml
index 55359a773d..cbd233a118 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2500-tab/Tabgroup_Style.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2500-tab/Tabgroup_Style.xhtml
@@ -38,5 +38,9 @@
     <tc:tab id="tabFive" label="Five">
       Fifth tab.
     </tc:tab>
+    <tc:tab id="tabSix" label="Six">
+      <tc:style customClass="tab-six-custom"/>
+      Sixth tab.
+    </tc:tab>
   </tc:tabGroup>
 </ui:composition>