#237: Removes Jasmine + Karma. Introduces Jest + JSDOM + Testing Libr…

.babelrc

@@ -4,7 +4,7 @@
     [
       "@babel/preset-env",
       {
-        "modules": false
+        "targets": { "node": "current" }
       }
     ]
   ]

spec/features/cancel_class_spec.js → __tests__/features/cancel_class_spec.js

@@ -1,5 +1,5 @@
-describe('#cancelClass', function () {
-  it('changes the class', function () {
+describe('#cancelClass', () => {
+  it('changes the class', () => {
     // given
     Helper.create('#el');
 
@@ -12,7 +12,7 @@ describe('#cancelClass', function () {
     expect(raty.element.querySelector('.custom-class').alt).toEqual('x');
   });
 
-  it('accepts data attribute', function () {
+  it('accepts data attribute', () => {
     // given
     Helper._append('div', { 'data-cancel-class': 'custom' });
 

spec/features/cancel_hint_spec.js → __tests__/features/cancel_hint_spec.js

@@ -1,5 +1,5 @@
-describe('#cancelHint', function () {
-  it('changes the cancel hint', function () {
+describe('#cancelHint', () => {
+  it('changes the cancel hint', () => {
     // given
     Helper.create('#el');
 
@@ -14,7 +14,7 @@ describe('#cancelHint', function () {
     expect(raty.element.querySelector('.raty-cancel').title).toEqual('double');
   });
 
-  it('accepts data attribute', function () {
+  it('accepts data attribute', () => {
     // given
     Helper._append('div', { 'data-cancel-hint': 'custom' });
 

spec/features/cancel_off_spec.js → __tests__/features/cancel_off_spec.js

@@ -1,5 +1,5 @@
-describe('#cancelOff', function () {
-  it('changes the icon', function () {
+describe('#cancelOff', () => {
+  it('changes the icon', () => {
     // given
     Helper.create('#el');
 
@@ -18,7 +18,7 @@ describe('#cancelOff', function () {
     expect(Helper.extension(cancel.src)).toEqual('star-half.png');
   });
 
-  it('accepts data attribute', function () {
+  it('accepts data attribute', () => {
     // given
     Helper._append('div', { 'data-cancel-off': 'custom.png' });
 

spec/features/cancel_on_spec.js → __tests__/features/cancel_on_spec.js

@@ -1,5 +1,5 @@
-describe('#cancelOn', function () {
-  it('changes the icon', function () {
+describe('#cancelOn', () => {
+  it('changes the icon', () => {
     // given
     Helper.create('#el');
 
@@ -13,7 +13,7 @@ describe('#cancelOn', function () {
     expect(Helper.extension(cancel.src)).toEqual('star-half.png');
   });
 
-  it('accepts data attribute', function () {
+  it('accepts data attribute', () => {
     // given
     Helper._append('div', { 'data-cancel-on': 'custom' });
 

spec/features/cancel_place_spec.js → __tests__/features/cancel_place_spec.js

@@ -1,5 +1,5 @@
-describe('#cancelPlace', function () {
-  it('accepts data attribute', function () {
+describe('#cancelPlace', () => {
+  it('accepts data attribute', () => {
     // given
     Helper._append('div', { 'data-cancel-place': 'custom' });
 
@@ -11,7 +11,7 @@ describe('#cancelPlace', function () {
   });
 
   context('when left', function () {
-    it('is prepended', function () {
+    it('is prepended', () => {
       // given
       Helper.create('#el');
 
@@ -24,7 +24,7 @@ describe('#cancelPlace', function () {
   });
 
   context('when left', function () {
-    it('is appended', function () {
+    it('is appended', () => {
       // given
       Helper.create('#el');
 

spec/features/cancel_spec.js → __tests__/features/cancel_spec.js

@@ -1,5 +1,5 @@
-describe('#cancel', function () {
-  it('creates the element', function () {
+describe('#cancel', () => {
+  it('creates the element', () => {
     // given
     Helper.create('#el');
 
@@ -15,7 +15,7 @@ describe('#cancel', function () {
     expect(Helper.extension(cancel.src)).toEqual('cancel-off.png');
   });
 
-  it('accepts data attribute', function () {
+  it('accepts data attribute', () => {
     // given
     Helper._append('div', { 'data-cancel': true });
 
@@ -27,7 +27,7 @@ describe('#cancel', function () {
   });
 
   context('on mouseover', function () {
-    it('turns on', function () {
+    it('turns on', () => {
       // given
       Helper.create('#el');
 
@@ -41,7 +41,7 @@ describe('#cancel', function () {
       expect(Helper.extension(cancel.src)).toEqual('cancel-on.png');
     });
 
-    it('keeps the :cancelClass', function () {
+    it('keeps the :cancelClass', () => {
       // given
       Helper.create('#el');
 
@@ -57,7 +57,7 @@ describe('#cancel', function () {
     });
 
     context('with stars on', function () {
-      it('turns off the stars', function () {
+      it('turns off the stars', () => {
         // given
         Helper.create('#el');
 
@@ -79,7 +79,7 @@ describe('#cancel', function () {
     });
 
     context('with :starType', function () {
-      it('uses the given element', function () {
+      it('uses the given element', () => {
         // given
         Helper.create('#el');
 
@@ -93,7 +93,7 @@ describe('#cancel', function () {
         expect(cancel.tagName).toEqual('I');
       });
 
-      it('keeps the :cancelClass', function () {
+      it('keeps the :cancelClass', () => {
         // given
         Helper.create('#el');
 
@@ -107,7 +107,7 @@ describe('#cancel', function () {
         expect(cancel).toHaveClass(raty.opt.cancelClass);
       });
 
-      it('sets class replacing dot to hiphen', function () {
+      it('sets class replacing dot to hiphen', () => {
         // given
         Helper.create('#el');
 
@@ -121,7 +121,7 @@ describe('#cancel', function () {
         expect(cancel).toHaveClass('cancel-on-png');
       });
 
-      it('does not set "src" attribute', function () {
+      it('does not set "src" attribute', () => {
         // given
         Helper.create('#el');
 
@@ -132,10 +132,10 @@ describe('#cancel', function () {
         Helper.trigger(cancel, 'mouseover');
 
         // then
-        expect(cancel).not.toHaveAttr('src');
+        expect(cancel).not.toHaveAttribute('src');
       });
 
-      it('sets "data-alt" attribute', function () {
+      it('sets "data-alt" attribute', () => {
         // given
         Helper.create('#el');
 
@@ -146,10 +146,10 @@ describe('#cancel', function () {
         Helper.trigger(cancel, 'mouseover');
 
         // then
-        expect(cancel).toHaveAttr('data-alt');
+        expect(cancel).toHaveAttribute('data-alt');
       });
 
-      it('does not set "alt" attribute', function () {
+      it('does not set "alt" attribute', () => {
         // given
         Helper.create('#el');
 
@@ -160,13 +160,13 @@ describe('#cancel', function () {
         Helper.trigger(cancel, 'mouseover');
 
         // then
-        expect(cancel).not.toHaveAttr('alt');
+        expect(cancel).not.toHaveAttribute('alt');
       });
     });
   });
 
   context('on mouseleave', function () {
-    it('turns off', function () {
+    it('turns off', () => {
       // given
       Helper.create('#el');
 
@@ -180,7 +180,7 @@ describe('#cancel', function () {
       expect(Helper.extension(cancel.src)).toEqual('cancel-off.png');
     });
 
-    it('keeps the :cancelClass', function () {
+    it('keeps the :cancelClass', () => {
       // given
       Helper.create('#el');
 
@@ -195,7 +195,7 @@ describe('#cancel', function () {
     });
 
     context('with stars turned on', function () {
-      it('turns on the star again', function () {
+      it('turns on the star again', () => {
         // given
         Helper.create('#el');
 
@@ -213,7 +213,7 @@ describe('#cancel', function () {
   });
 
   context('on click', function () {
-    it('cancel the rating', function () {
+    it('cancel the rating', () => {
       // given
       Helper.create('#el');
 
@@ -238,7 +238,7 @@ describe('#cancel', function () {
   });
 
   context('when starts :readOnly', function () {
-    it('starts hidden', function () {
+    it('starts hidden', () => {
       // given
       Helper.create('#el');
 
@@ -249,11 +249,11 @@ describe('#cancel', function () {
       raty.readOnly(true);
 
       // then
-      expect(cancel).toBeHidden();
+      expect(cancel).not.toBeVisible();
     });
 
     context('on click', function () {
-      it('does not cancel the rating', function () {
+      it('does not cancel the rating', () => {
         // given
         Helper.create('#el');
 
@@ -274,7 +274,7 @@ describe('#cancel', function () {
   });
 
   context('when become :readOnly', function () {
-    it('becomes hidden', function () {
+    it('becomes hidden', () => {
       // given
       Helper.create('#el');
 
@@ -284,12 +284,12 @@ describe('#cancel', function () {
       raty.readOnly(true);
 
       // then
-      expect(raty.element.querySelectorAll('.raty-cancel')).toBeHidden();
+      raty.element.querySelectorAll('.raty-cancel').forEach((element) => expect(element).not.toBeVisible());
     });
   });
 
   context('with :starType', function () {
-    it('uses the given element', function () {
+    it('uses the given element', () => {
       // given
       Helper.create('#el');
 
@@ -300,7 +300,7 @@ describe('#cancel', function () {
       expect(raty.element.querySelectorAll('.raty-cancel')[0].tagName).toEqual('I');
     });
 
-    it('keeps the :cancelClass', function () {
+    it('keeps the :cancelClass', () => {
       // given
       Helper.create('#el');
 
@@ -314,29 +314,31 @@ describe('#cancel', function () {
       expect(cancel).toHaveClass(raty.opt.cancelClass);
     });
 
-    it('sets class replacing dot to hiphen', function () {
+    it('sets class replacing dot to hiphen', () => {
       // given
       Helper.create('#el');
 
       // when
       var raty = new Raty(document.querySelector('#el'), { cancelButton: true, starType: 'i' }).init();
 
       // then
-      expect(raty.element.querySelectorAll('.raty-cancel')).toHaveClass('cancel-off-png');
+      raty.element.querySelectorAll('.raty-cancel').forEach((element) => {
+        expect(element).toHaveClass('cancel-off-png');
+      });
     });
 
-    it('does not set "src" attribute', function () {
+    it('does not set "src" attribute', () => {
       // given
       Helper.create('#el');
 
       // when
       var raty = new Raty(document.querySelector('#el'), { cancelButton: true, starType: 'i' }).init();
 
       // then
-      expect(raty.element.querySelectorAll('.raty-cancel')).not.toHaveProp('src');
+      expect(raty.element.querySelectorAll('.raty-cancel')).not.toHaveProperty('src');
     });
 
-    it('sets "data-alt" attribute', function () {
+    it('sets "data-alt" attribute', () => {
       // given
       Helper.create('#el');
 
@@ -347,15 +349,15 @@ describe('#cancel', function () {
       expect(raty.element.querySelector('.raty-cancel').getAttribute('data-alt')).toEqual('x');
     });
 
-    it('does not set "alt" attribute', function () {
+    it('does not set "alt" attribute', () => {
       // given
       Helper.create('#el');
 
       // when
       var raty = new Raty(document.querySelector('#el'), { cancelButton: true, starType: 'i' }).init();
 
       // then
-      expect(raty.element.querySelectorAll('.raty-cancel')).not.toHaveProp('alt');
+      expect(raty.element.querySelectorAll('.raty-cancel')).not.toHaveProperty('alt');
     });
   });
 });