Merge pull request #100 from palcarazm:palcarazm/issue99

feat!: Change on and off option to onlabel and offlabel Closes #99
palcarazm · Dec 26, 2022 · 2d5dbaa · 2d5dbaa
2 parents ac8da0f + b855955
commit 2d5dbaa
Show file tree

Hide file tree

Showing 11 changed files with 1,072 additions and 526 deletions.
diff --git a/README.md b/README.md
@@ -45,7 +45,6 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [Installation](#installation)
   - [CDN](#cdn)
     - [ECMAS Interface](#ecmas-interface)
@@ -145,8 +144,8 @@ EX: Initialize id `chkToggle` with a single line of JavaScript.
 <input
   type="checkbox"
   data-toggle="toggle"
-  data-on="Enabled"
-  data-off="Disabled" />
+  data-onlabel="Enabled"
+  data-offlabel="Disabled" />
 <input type="checkbox" id="toggle-two" />
 <script>
   document.querySelector("#toggle-two").bootstrapToggle({
@@ -158,8 +157,8 @@ EX: Initialize id `chkToggle` with a single line of JavaScript.
 
 | Name       | Type        | Default     | Description                                                                                                                                              |
 | ---------- | ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `on`       | string/html | "On"        | Text of the on toggle                                                                                                                                    |
-| `off`      | string/html | "Off"       | Text of the off toggle                                                                                                                                   |
+| `onlabel`  | string/html | "On"        | Text of the on toggle                                                                                                                                    |
+| `offlabel` | string/html | "Off"       | Text of the off toggle                                                                                                                                   |
 | `size`     | string      | "normal"    | Size of the toggle. Possible values are: `large`, `normal`, `small`, `mini`.                                                                             |
 | `onstyle`  | string      | "primary"   | Style of the on toggle. Possible values are: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark` and with `outline-` prefix  |
 | `offstyle` | string      | "secondary" | Style of the off toggle. Possible values are: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark` and with `outline-` prefix |

diff --git a/cypress/e2e/custom-text.spec.cy.js b/cypress/e2e/custom-text.spec.cy.js
@@ -3,21 +3,66 @@ import ToggleModel from "../support/togglemodel";
 import PageModel from "../support/pagemodel";
 
 describe("Custom Text feature", () => {
-  context("Given ECMAS bootstrap toggle interface",()=>{
+  context("Given ECMAS bootstrap toggle interface", () => {
     testCase("ecmas");
   });
-  context("Given jQuery bootstrap toggle interface",()=>{
+  context("Given jQuery bootstrap toggle interface", () => {
     testCase("jquery");
   });
 });
 
 function testCase(bstInterface) {
+  context("When data-onlabel attribute is set", () => {
+    const data_test = "custom-text";
+    it("Then toggle-on text is equal to a custom text", () => {
+      PageModel.load(bstInterface, data_test);
+      PageModel.getTests().each(($test) => {
+        if (
+          $test.find('input[data-toggle="toggle"][data-onlabel]').length > 0
+        ) {
+          cy.wrap($test)
+            .find("code")
+            .then(($element) => {
+              cy.wrap($test)
+                .find(".toggle-on")
+                .should("have.text", $element.html());
+            });
+        }
+      });
+    });
+  });
+
+  context("When data-offlabel attribute is set", () => {
+    const data_test = "custom-text";
+    it("Then toggle-off text is equal to a custom text", () => {
+      PageModel.load(bstInterface, data_test);
+      PageModel.getTests().each(($test) => {
+        if (
+          $test.find('input[data-toggle="toggle"][data-offlabel]').length > 0
+        ) {
+          cy.wrap($test)
+            .find("code")
+            .then(($element) => {
+              cy.wrap($test)
+                .find(".toggle-off")
+                .should("have.text", $element.html());
+            });
+        }
+      });
+    });
+  });
+
   context("When data-on attribute is set", () => {
     const data_test = "custom-text";
     it("Then toggle-on text is equal to a custom text", () => {
       PageModel.load(bstInterface, data_test);
       PageModel.getTests().each(($test) => {
         if ($test.find('input[data-toggle="toggle"][data-on]').length > 0) {
+          ToggleModel.DEPRECATION.warnCheck(
+            ToggleModel.DEPRECATION.ATTRIBUTE,
+            "data-on",
+            "data-onlabel"
+          );
           cy.wrap($test)
             .find("code")
             .then(($element) => {
@@ -36,6 +81,11 @@ function testCase(bstInterface) {
       PageModel.load(bstInterface, data_test);
       PageModel.getTests().each(($test) => {
         if ($test.find('input[data-toggle="toggle"][data-off]').length > 0) {
+          ToggleModel.DEPRECATION.warnCheck(
+            ToggleModel.DEPRECATION.ATTRIBUTE,
+            "data-off",
+            "data-offlabel"
+          );
           cy.wrap($test)
             .find("code")
             .then(($element) => {
@@ -48,33 +98,37 @@ function testCase(bstInterface) {
     });
   });
 
-  context("When data-on attribute isn't set", () => {
+  context("When data-onlabel attribute isn't set", () => {
     const data_test = "custom-text";
     it("Then toggle-on text is equal to the default text", () => {
       PageModel.load(bstInterface, data_test);
       PageModel.getTests().each(($test) => {
         if (
-          $test.find('input[data-toggle="toggle"]:not([data-on])').length > 0
+          $test.find(
+            'input[data-toggle="toggle"]:not([data-onlabel]):not([data-on])'
+          ).length > 0
         ) {
           cy.wrap($test)
             .find(".toggle-on")
-            .should("have.text", ToggleModel.DEFAULTS.on);
+            .should("have.text", ToggleModel.DEFAULTS.onlabel);
         }
       });
     });
   });
 
-  context("When data-off attribute isn't set", () => {
+  context("When data-offlabel attribute isn't set", () => {
     const data_test = "custom-text";
     it("Then toggle-off text is equal to the default text", () => {
       PageModel.load(bstInterface, data_test);
       PageModel.getTests().each(($test) => {
         if (
-          $test.find('input[data-toggle="toggle"]:not([data-off])').length > 0
+          $test.find(
+            'input[data-toggle="toggle"]:not([data-offlabel]):not([data-off])'
+          ).length > 0
         ) {
           cy.wrap($test)
             .find(".toggle-off")
-            .should("have.text", ToggleModel.DEFAULTS.off);
+            .should("have.text", ToggleModel.DEFAULTS.offlabel);
         }
       });
     });

diff --git a/cypress/support/pagemodel.js b/cypress/support/pagemodel.js
@@ -6,7 +6,13 @@ class PageModel {
    * @static
    */
   static load(bstInterface, btn_data_test) {
-    cy.visit("./test/test-app." + bstInterface.toLowerCase() + ".html");
+    cy.visit("./test/test-app." + bstInterface.toLowerCase() + ".html", {
+      onBeforeLoad(win) {
+        cy.stub(win.console, "log").as("consoleLog");
+        cy.stub(win.console, "warn").as("consoleWarn");
+        cy.stub(win.console, "error").as("consoleError");
+      },
+    });
     cy.get('button[data-test="' + btn_data_test + '"]').click();
   }