Fix tests

Bttstrp · Apr 11, 2018 · faf936b · faf936b
1 parent a8d7fe4
commit faf936b
Show file tree

Hide file tree

Showing 6 changed files with 1,480 additions and 135 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,5 +1,8 @@
 {
   "extends": "airbnb-base",
   "parser": "babel-eslint",
-  "env": { "browser": true }
+  "env": {
+    "browser": true,
+    "jest": true
+  }
 }
diff --git a/package.json b/package.json
@@ -28,7 +28,9 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "babel-cli": "^6.22.2",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.3",
+    "babel-jest": "^22.4.3",
     "babel-polyfill": "^6.22.0",
     "babel-preset-babili": "^0.0.10",
     "babel-preset-env": "^1.1.8",
@@ -41,6 +43,7 @@
     "headr": "0.0.4",
     "jasmine": "^2.5.3",
     "jasmine-core": "^2.5.2",
+    "jest": "^22.4.3",
     "jquery": "^1.12.4",
     "karma": "^1.4.1",
     "karma-babel-preprocessor": "^6.0.1",
@@ -51,11 +54,12 @@
     "less": "^2.7.2",
     "less-plugin-clean-css": "^1.5.0",
     "npm-run-all": "^4.0.1",
+    "regenerator-runtime": "^0.11.1",
     "wintersmith": "^2.3.6"
   },
   "scripts": {
     "js:lint": "eslint src/js/",
-    "js:test": "mkdir -p test && babel -d test src/js && karma start karma.conf.js",
+    "js:test": "jest",
     "js:build:dir": "mkdir -p dist/js",
     "js:build:base": "babel -o dist/js/bootstrap-switch.js src/js/bootstrap-switch.js",
     "js:build:min": "NODE_ENV=production babel -o dist/js/bootstrap-switch.min.js src/js/bootstrap-switch.js",
@@ -88,5 +92,10 @@
       ]
     }
   ],
-  "dependencies": {}
+  "dependencies": {},
+  "jest": {
+    "setupFiles": [
+      "./src/setup-test.js"
+    ]
+  }
 }
diff --git a/src/js/bootstrap-switch.js b/src/js/bootstrap-switch.js
@@ -304,7 +304,8 @@ class BootstrapSwitch {
 
     this.$element.on('init.bootstrapSwitch', () => this.options.onInit(element));
     this.$element.on('switchChange.bootstrapSwitch', (...args) => {
-      if (this.options.onSwitchChange.apply(element, args) === false) {
+      const changeState = this.options.onSwitchChange.apply(element, args);
+      if (changeState === false) {
         if (this.$element.is(':radio')) {
           $(`[name="${this.$element.attr('name')}"]`).trigger('previousState.bootstrapSwitch', true);
         } else {

diff --git a/src/js/bootstrap-switch.test.js b/src/js/bootstrap-switch.test.js
@@ -1,32 +1,31 @@
-const { $, describe, beforeEach, afterEach, it, expect } = window;
+import './bootstrap-switch';
+
+const { $ } = global;
 
 describe('Bootstrap Switch:', () => {
   beforeEach(() => {
     $.support.transition = false;
     $.fx.off = true;
   });
+
   afterEach(() => {
     $(`.${$.fn.bootstrapSwitch.defaults.baseClass}`).bootstrapSwitch('destroy');
   });
 
-  function createCheckbox() {
-    return $('<input>', {
+  const createCheckbox = () =>
+    $('<input>', {
       type: 'checkbox',
       class: 'switch',
     }).appendTo('body');
-  }
 
-  function createRadio() {
-    return $('<input>', {
+  const createRadio = () =>
+    $('<input>', {
       type: 'radio',
       name: 'name',
       class: 'switch',
     }).appendTo('body');
-  }
 
-  function getOptions($element) {
-    return $element.data('bootstrap-switch').options;
-  }
+  const getOptions = $element => $element.data('bootstrap-switch').options;
 
   it('should set the default options as element options, except state', () => {
     const $switch = createCheckbox().prop('checked', true).bootstrapSwitch();
@@ -40,78 +39,95 @@ describe('Bootstrap Switch:', () => {
     expect(getOptions($switch2).state).toBe(false);
   });
 
-  it('should something', () => {
+  it('should trigger the same events on element and document', () => {
     const $switch = createCheckbox().bootstrapSwitch();
-    let eventDoc = 0;
-    let eventElement = 0;
-    $(document).on('switchChange.bootstrapSwitch', ':checkbox', () => { eventDoc += 1; });
-    $(':checkbox').on('switchChange.bootstrapSwitch', () => { eventElement += 1; });
-    $switch.click();
-    expect(eventElement).toEqual(eventDoc);
-    expect(eventElement).toEqual(1);
+    let doc = 0;
+    let element = 0;
+    $(document).on('switchChange.bootstrapSwitch', ':checkbox', () => { doc += 1; });
+    $switch.on('switchChange.bootstrapSwitch', () => { element += 1; });
+    $switch.bootstrapSwitch('state', true);
+    expect(element).toBe(doc);
+    expect(element).toBe(1);
   });
 
-  describe('The Checkbox Bootstrap Switch', () => {
-    it('should conserve its state if onSwitchChange returns false', () => {
+  describe('Checkbox', () => {
+    it('should retain state if `onSwitchChange` returns false', () => {
+      let shadowState = null;
       const $switch = createCheckbox().bootstrapSwitch({
+        state: false,
         onSwitchChange(event, state) {
-          expect(state).toEqual(true);
+          shadowState = state;
           return false;
         },
       });
-      const $indeterminateSwitch = createCheckbox().data('indeterminate', true).bootstrapSwitch({
+      $switch.bootstrapSwitch('state', true);
+      expect(shadowState).toBe(true);
+      expect($switch.bootstrapSwitch('state')).toBe(false);
+    });
+
+    it('should retain state if `onSwitchChange` returns false when intederminate is true', () => {
+      let shadowState;
+      const $indeterminate = createCheckbox().bootstrapSwitch({
+        state: false,
         onSwitchChange(event, state) {
-          expect(state).toEqual(true);
+          shadowState = state;
           return false;
         },
       });
-      $switch.click();
-      $indeterminateSwitch.click();
-      expect($switch.bootstrapSwitch('state')).toEqual(false);
-      expect($indeterminateSwitch.bootstrapSwitch('state')).toEqual(false);
+      $indeterminate.data('indeterminate', true);
+      $indeterminate.bootstrapSwitch('state', true);
+      expect(shadowState).toBe(true);
+      expect($indeterminate.bootstrapSwitch('state')).toBe(false);
     });
 
-    it('should change its state if onSwitchChange does not return false', () => {
+    it('should change state if `onSwitchChange` does not return false', () => {
+      let shadowState = null;
       const $switch = createCheckbox().bootstrapSwitch({
-        onSwitchChange(event, state) {
-          expect(state).toEqual(true);
+        onSwitchChange: (event, state) => {
+          shadowState = state;
         },
       });
-      $switch.click();
-      expect($switch.bootstrapSwitch('state')).toEqual(true);
+      $switch.bootstrapSwitch('state', true);
+      expect(shadowState).toBe(true);
+      expect($switch.bootstrapSwitch('state')).toBe(true);
     });
   });
 
-  describe('The Radio Bootstrap Switch', () => {
-    it('should conserve its state if onSwitchChange returns false', () => {
+  describe('Radio', () => {
+    it('should retain state if `onSwitchChange` returns false', () => {
       const $radio1 = createRadio().prop('checked', true);
       const $radio2 = createRadio().prop('checked', false);
       const $radio3 = createRadio().prop('checked', false);
-      $('[name="name"]').bootstrapSwitch({
-        onSwitchChange(e, s) {
-          expect(s).toEqual(true);
+      let shadowState = null;
+      $radio1.add($radio2).add($radio3).bootstrapSwitch({
+        onSwitchChange(event, state) {
+          shadowState = state;
           return false;
         },
       });
-      $radio2.click();
-      expect($radio1.bootstrapSwitch('state')).toEqual(true);
-      expect($radio2.bootstrapSwitch('state')).toEqual(false);
-      expect($radio3.bootstrapSwitch('state')).toEqual(false);
+      $radio2.bootstrapSwitch('state', true);
+      expect(shadowState).toBe(true);
+      expect($radio1.bootstrapSwitch('state')).toBe(true);
+      expect($radio2.bootstrapSwitch('state')).toBe(false);
+      expect($radio3.bootstrapSwitch('state')).toBe(false);
     });
 
-    it('should change its state if onSwitchChange not returns false', () => {
+    it('should change its state if `onSwitchChange` does not return false', () => {
       const $radio1 = createRadio().prop('checked', true);
       const $radio2 = createRadio().prop('checked', false);
       const $radio3 = createRadio().prop('checked', false);
-      $('[name="name"]').bootstrapSwitch({
-        onSwitchChange(e, s) {
-          expect(s).toEqual(true);
+      let shadowState = null;
+      $radio2.bootstrapSwitch({
+        onSwitchChange(event, state) {
+          shadowState = state;
+          return false;
         },
       });
       $radio2.click();
-      expect($radio1.bootstrapSwitch('state')).toEqual(false);
-      expect($radio2.bootstrapSwitch('state')).toEqual(true);
-      expect($radio3.bootstrapSwitch('state')).toEqual(false);
+      expect(shadowState).toBe(true);
+      expect($radio1.bootstrapSwitch('state')).toBe(false);
+      expect($radio2.bootstrapSwitch('state')).toBe(true);
+      expect($radio3.bootstrapSwitch('state')).toBe(false);
     });
   });
 });
diff --git a/src/setup-test.js b/src/setup-test.js
@@ -0,0 +1,4 @@
+import $ from 'jquery';
+
+global.jQuery = $;
+global.$ = global.jQuery;