Clean changes ready for pr

Author: tomelsj

package.json

@@ -31,6 +31,7 @@
   "engine": "node >= 6",
   "devDependencies": {
     "autoprefixer": "^7.1.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "grunt": "^1.0.1",
     "grunt-babel": "^6.0.0",
@@ -40,8 +41,9 @@
     "grunt-contrib-clean": "^1.1.0",
     "grunt-contrib-compress": "^1.4.1",
     "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-connect": "^3.0.0",
     "grunt-contrib-jade": "^1.0.0",
-    "grunt-contrib-jasmine": "^1.1.0",
+    "grunt-contrib-jasmine": "^2.2.0",
     "grunt-contrib-uglify": "^3.0.1",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-notify": "^0.4.5",
@@ -51,8 +53,7 @@
     "grunt-sass": "^2.0.0",
     "grunt-text-replace": "^0.4.0",
     "husky": "^0.14.3",
-    "jasmine": "^2.6.0",
-    "jasmine-jquery": "^2.1.1",
+    "jasmine": "^3.6.0",
     "jquery": "^3.2.1",
     "lint-staged": "^7.0.5",
     "node-archiver": "^0.3.0",

tests/spec/autocomplete/autocompleteSpec.js

@@ -1,8 +1,10 @@
 describe("Autocomplete Plugin", function () {
-  beforeEach(function(done) {
-    loadFixtures('autocomplete/autocompleteFixture.html');
+  beforeEach(async function(done) {
+    await XloadFixtures(['autocomplete/autocompleteFixture.html']);
     setTimeout(function() {
-      $('input.autocomplete').autocomplete({
+      M.Autocomplete.init(
+        document.querySelectorAll('input.autocomplete'),
+        {
         data: {
           "Apple": null,
           "Microsoft": null,
@@ -12,87 +14,86 @@ describe("Autocomplete Plugin", function () {
       done();
     }, 400);
   });
+  afterEach(function(){
+    XunloadFixtures();
+  });
 
   describe("Autocomplete", function () {
-    // var browserSelect, normalInput, normalDropdown;
+    // let browserSelect, normalInput, normalDropdown;
 
     // beforeEach(function() {
     //   browserSelect = $('select.normal');
     // });
 
     it("should work with multiple initializations", function (done) {
-      var $normal = $('#normal-autocomplete');
-      var $parent = $normal.parent();
+      let normal = document.querySelector('#normal-autocomplete');
       setTimeout(function() {
-        $normal.autocomplete({ data: {"hi": null} });
-        $normal.autocomplete({ data: {"hi": null} });
-        $normal.autocomplete({ data: {"hi": null} });
-        $normal.autocomplete({
+        M.Autocomplete.init(normal, { "hi": null });
+        M.Autocomplete.init(normal, { "hi": null });
+        M.Autocomplete.init(normal, { "hi": null });
+        M.Autocomplete.init(normal, {
           data: {
             "Apple": null,
             "Microsoft": null,
             "Google": 'http://placehold.it/250x250'
           }
         });
 
-        var $autocompleteEl = $parent.find('.autocomplete-content');
+        let autocompleteEl = normal.parentNode.querySelectorAll('.autocomplete-content');
 
-        expect($autocompleteEl.length).toEqual(1, 'Should dynamically generate autocomplete structure.');
+        expect(autocompleteEl.length).toEqual(1, 'Should dynamically generate autocomplete structure.');
         done();
       }, 400);
     });
 
     it("should limit results if option is set", function (done) {
-      var $limited = $('#limited-autocomplete');
-      var data = {};
-      for (var i = 100; i >= 0; i--) {
-        var randString = 'a' + Math.random().toString(36).substring(2);
+      let limited = document.querySelector('#limited-autocomplete');
+      let data = {};
+      for (let i = 100; i >= 0; i--) {
+        let randString = 'a' + Math.random().toString(36).substring(2);
         data[randString] = null;
       }
 
-      $limited.autocomplete({
-        data: data,
-        limit: 20
-      });
+      let limitedInstance = M.Autocomplete.getInstance(limited);
+      limitedInstance.updateData(data);
+      limitedInstance.options.limit = 20;
 
-      $limited.focus();
-      $limited.val('a');
-      keyup($limited[0], 65);
+      focus(limited);
+      limited.value = 'a';
+      keyup(limited, 65);
 
       setTimeout(function() {
-        var $autocompleteEl = $(M.Autocomplete.getInstance($limited[0]).container);
-        expect($autocompleteEl.children().length).toEqual(20, 'Results should be at max the set limit');
+        let autocompleteEl = limitedInstance.container;
+        expect(autocompleteEl.children.length).toEqual(20, 'Results should be at max the set limit');
         done();
       }, 200);
 
     });
 
     it("should open correctly from typing", function (done) {
-      var $normal = $('#normal-autocomplete');
-      var $parent = $normal.parent();
-      var $autocompleteEl = $normal.parent().find('.autocomplete-content');
+      let normal = document.querySelector('#normal-autocomplete');
+      let autocompleteEl = normal.parentNode.querySelector('.autocomplete-content');
 
-      $normal.focus();
-      $normal.val('e');
-      keyup($normal[0], 69);
+      focus(normal);
+      normal.value = 'e';
+      keyup(normal, 69);
 
       setTimeout(function() {
-        expect($autocompleteEl.children().length).toEqual(2, 'Results should show dropdown on text input');
+        expect(autocompleteEl.children.length).toEqual(2, 'Results should show dropdown on text input');
         done();
       }, 200);
     });
 
   it("should open correctly from keyboard focus", function (done) {
-      var $normal = $('#normal-autocomplete');
-      var $parent = $normal.parent();
-      var $autocompleteEl = $normal.parent().find('.autocomplete-content');
+      let normal = document.querySelector('#normal-autocomplete');
+      let autocompleteEl = normal.parentNode. querySelector('.autocomplete-content');
 
-      $normal.val('e');
-      keyup($normal[0], 9);
-      focus($normal[0]);
+      normal.value = 'e';
+      keyup(normal, 9);
+      focus(normal);
 
       setTimeout(function() {
-        expect($autocompleteEl.children().length).toEqual(2, 'Results should show dropdown on text input');
+        expect(autocompleteEl.children.length).toEqual(2, 'Results should show dropdown on text input');
         done();
       }, 200);
     });

tests/spec/cards/cardsSpec.js

@@ -1,34 +1,38 @@
 describe( "Cards", function () {
-  var reveal;
+  beforeEach(async function() {
+    await XloadFixtures(['cards/cardsFixture.html']);
+  });
 
-  beforeEach(function() {
-    loadFixtures('cards/cardsFixture.html');
+  afterEach(function(){
+    XunloadFixtures();
   });
 
   describe("reveal cards", function () {
-    var revealCard;
+    let revealCard;
 
     beforeEach(function() {
-      revealCard = $('.card.reveal');
+      revealCard = document.querySelector('.card.reveal');
     });
 
     it("should have a hidden card-reveal", function (done) {
-      var revealDiv = revealCard.find('.card-reveal');
-      var activator = revealCard.find('.activator');
+      let revealDiv = revealCard.querySelector('.card-reveal');
+      let activator = revealCard.querySelector('.activator');
 
       expect(revealDiv).toBeHidden('reveal div should be hidden initially');
 
       setTimeout(function() {
-        activator.click();
+        click(activator);
 
         setTimeout(function() {
           expect(revealDiv).toBeVisible('reveal did not appear after activator was clicked.');
 
           // Check revealDiv covers reveal card.
-          expect(revealDiv.outerWidth()).toEqual(revealCard.outerWidth(), 'activator was not as wide as reveal card.');
-          expect(revealDiv.outerHeight()).toEqual(revealCard.outerHeight(), 'activator was not as high as reveal card.');
-          expect(revealDiv.offset().top).toEqual(revealCard.offset().top, 'activator was not as in the same y as reveal card.');
-          expect(revealDiv.offset().left).toEqual(revealCard.offset().left, 'activator was not as in the same x as reveal card.');
+          let revealDivPositions = revealDiv.getBoundingClientRect();
+          let revealCardPositions = revealCard.getBoundingClientRect();
+          expect(revealDivPositions.width).toEqual(revealCardPositions.width, 'activator was not as wide as reveal card.');
+          expect(revealDivPositions.height).toEqual(revealCardPositions.height, 'activator was not as high as reveal card.');
+          expect(revealDivPositions.top).toEqual(revealCardPositions.top, 'activator was not as in the same y as reveal card.');
+          expect(revealDivPositions.left).toEqual(revealCardPositions.left, 'activator was not as in the same x as reveal card.');
 
           done();
         }, 400);
@@ -38,64 +42,78 @@ describe( "Cards", function () {
   });
 
   describe("image cards", function () {
-    var imageCard;
+    let imageCard;
 
     beforeEach(function() {
-      imageCard = $('.card.image');
+      imageCard = document.querySelector('.card.image');
     });
 
     it("should have an image that fills to full width of card", function () {
-      var image = imageCard.find('.card-image > img');
+      let image = imageCard.querySelector('.card-image > img');
+      let imagePositions = image.getBoundingClientRect();
+      let imageCardPositions = imageCard.getBoundingClientRect();
 
-      expect(image.outerWidth()).toEqual(imageCard.outerWidth(), 'image does not fill width of card');
-      expect(image.offset().top).toEqual(imageCard.offset().top, 'image was not as in the same y as card.');
+      expect(imagePositions.width).toEqual(imageCardPositions.width, 'image does not fill width of card');
+      expect(imagePositions.top).toEqual(imageCardPositions.top, 'image was not as in the same y as card.');
     });
   });
 
 
   describe("sized cards", function () {
-    var small, medium, large;
+    let small, medium, large;
 
     beforeEach(function() {
-      small = $('.card.small');
-      medium = $('.card.medium');
-      large = $('.card.large');
+      small = document.querySelector('.card.small');
+      medium = document.querySelector('.card.medium');
+      large = document.querySelector('.card.large');
     });
 
     it("should have small card dimensions", function () {
-      var cardImage = small.find('.card-image');
-      var cardContent = small.find('.card-content');
-      var cardAction = small.find('.card-action');
-
-      expect(small.outerHeight()).toEqual(300, 'small card should be 300px high');
-      expect(cardImage.outerHeight()).toBeLessThan(181, 'small image should be <= 180px or 60% high');
-      expect(cardContent.outerHeight()).toBeLessThan(121, 'small content should be <= 120px or 40% high');
-      expect(cardAction.offset().top + cardAction.outerHeight())
-        .toEqual(small.offset().top + small.outerHeight(), 'small action should be at bottom of card');
+      let cardImage = small.querySelector('.card-image');
+      let cardContent = small.querySelector('.card-content');
+      let cardAction = small.querySelector('.card-action');
+      let smallRect = small.getBoundingClientRect();
+      let cardImageRect = cardImage.getBoundingClientRect();
+      let cardContentRect = cardContent.getBoundingClientRect();
+      let cardActionRect = cardAction.getBoundingClientRect();
+
+      expect(smallRect.height).toEqual(300, 'small card should be 300px high');
+      expect(cardImageRect.height).toBeLessThan(181, 'small image should be <= 180px or 60% high');
+      expect(cardContentRect.height).toBeLessThan(121, 'small content should be <= 120px or 40% high');
+      expect(cardActionRect.top + cardActionRect.height)
+        .toEqual(smallRect.top + smallRect.height, 'small action should be at bottom of card');
     });
 
     it("should have medium card dimensions", function () {
-      var cardImage = medium.find('.card-image');
-      var cardContent = medium.find('.card-content');
-      var cardAction = medium.find('.card-action');
-
-      expect(medium.outerHeight()).toEqual(400, 'medium card should be 400px high');
-      expect(cardImage.outerHeight()).toBeLessThan(241, 'medium image should be <= 240 or 60% high');
-      expect(cardContent.outerHeight()).toBeLessThan(161, 'medium content should be <= 160px or 40% high');
-      expect(cardAction.offset().top + cardAction.outerHeight())
-        .toEqual(medium.offset().top + medium.outerHeight(), 'medium action should be at bottom of card');
+      let cardImage = medium.querySelector('.card-image');
+      let cardContent = medium.querySelector('.card-content');
+      let cardAction = medium.querySelector('.card-action');
+      let mediumRect = medium.getBoundingClientRect();
+      let cardImageRect = cardImage.getBoundingClientRect();
+      let cardContentRect = cardContent.getBoundingClientRect();
+      let cardActionRect = cardAction.getBoundingClientRect();
+
+      expect(mediumRect.height).toEqual(400, 'medium card should be 400px high');
+      expect(cardImageRect.height).toBeLessThan(241, 'medium image should be <= 240 or 60% high');
+      expect(cardContentRect.height).toBeLessThan(161, 'medium content should be <= 160px or 40% high');
+      expect(cardActionRect.top + cardActionRect.height)
+        .toEqual(mediumRect.top + mediumRect.height, 'medium action should be at bottom of card');
     });
 
     it("should have large card dimensions", function () {
-      var cardImage = large.find('.card-image');
-      var cardContent = large.find('.card-content');
-      var cardAction = large.find('.card-action');
-
-      expect(large.outerHeight()).toEqual(500, 'large card should be 500px high');
-      expect(cardImage.outerHeight()).toBeLessThan(301, 'large image should be <= 300 or 60% high');
-      expect(cardContent.outerHeight()).toBeLessThan(201, 'large content should be <= 200 or 40% high');
-      expect(cardAction.offset().top + cardAction.outerHeight())
-        .toEqual(large.offset().top + large.outerHeight(), 'large action should be at bottom of card');
+      let cardImage = large.querySelector('.card-image');
+      let cardContent = large.querySelector('.card-content');
+      let cardAction = large.querySelector('.card-action');
+      let largeRect = large.getBoundingClientRect();
+      let cardImageRect = cardImage.getBoundingClientRect();
+      let cardContentRect = cardContent.getBoundingClientRect();
+      let cardActionRect = cardAction.getBoundingClientRect();
+
+      expect(largeRect.height).toEqual(500, 'large card should be 500px high');
+      expect(cardImageRect.height).toBeLessThan(301, 'large image should be <= 300 or 60% high');
+      expect(cardContentRect.height).toBeLessThan(201, 'large content should be <= 200 or 40% high');
+      expect(cardActionRect.top + cardActionRect.height)
+        .toEqual(largeRect.top + largeRect.height, 'large action should be at bottom of card');
     });
   });
 

tests/spec/carousel/carouselSpec.js

@@ -1,7 +1,10 @@
 describe("Carousel", function () {
 
-  beforeEach(function() {
-    loadFixtures('carousel/carouselFixture.html');
+  beforeEach(async function() {
+    await XloadFixtures(['carousel/carouselFixture.html']);
+  });
+  afterEach(function(){
+    XunloadFixtures();
   });
 
   describe("carousel plugin", function () {
@@ -10,17 +13,19 @@ describe("Carousel", function () {
     // });
 
     it("No wrap next and prev should not overflow", function (done) {
-      $noWrap = $('#slider-no-wrap').carousel({ noWrap: true });
-      $noWrap.carousel('prev');
+      let noWrap = M.Carousel.init(
+        document.querySelector('#slider-no-wrap'), { noWrap: true }
+      );
+      noWrap.prev();
 
-      expect($noWrap[0].M_Carousel.center).toEqual(0, 'Prev should do nothing');
+      expect(noWrap.center).toEqual(0, 'Prev should do nothing');
 
-      $noWrap.carousel('set', 3);
+      noWrap.set(3);
       setTimeout(function() {
-        $noWrap.carousel('next');
+        noWrap.next();
 
         setTimeout(function() {
-          expect($noWrap[0].M_Carousel.center).toEqual(3, 'Next should do nothing');
+          expect(noWrap.center).toEqual(3, 'Next should do nothing');
 
           done();
         }, 400);