test(collapsible): fix tests

sass/components/_collapsible.scss

@@ -47,7 +47,7 @@
 }
 
 .collapsible-body {
-  display: none;
+  max-height: 0;
   border-bottom: 1px solid $collapsible-border-color;
   box-sizing: border-box;
   padding: 0 2rem;

src/collapsible.ts

@@ -65,13 +65,18 @@ export class Collapsible extends Component<CollapsibleOptions> {
     this._headers = Array.from(this.el.querySelectorAll('li > .collapsible-header'));
     this._headers.forEach(el => el.tabIndex = 0);
     this._setupEventHandlers();
-    // Open first active
+
+    // Open active
     const activeBodies: HTMLElement[] = Array.from(this.el.querySelectorAll('li.active > .collapsible-body'));
     if (this.options.accordion)
-      if (activeBodies.length > 0)
-        activeBodies[0].style.display = 'block'; // Accordion
-    else
-      activeBodies.forEach(el => el.style.display = 'block'); // Expandables
+      if (activeBodies.length > 0) {
+        // Accordion => open first active only
+        this._setExpanded(activeBodies[0]);
+      }
+    else {
+      // Expandables => all active
+      activeBodies.forEach(el => this._setExpanded(el));
+    }
   }
 
   static get defaults(): CollapsibleOptions {
@@ -141,15 +146,17 @@ export class Collapsible extends Component<CollapsibleOptions> {
     }
   }
 
+  private _setExpanded(li: HTMLElement): void {
+    li.style.maxHeight = li.scrollHeight + "px";
+  }
+
   _animateIn(index: number) {
     const li = <HTMLLIElement>this.el.children[index];
     if (!li) return;
     const body: HTMLElement = li.querySelector('.collapsible-body');
-    body.style.display = 'block';
-    body.style.maxHeight = '0';
     const duration = this.options.inDuration; // easeInOutCubic
     body.style.transition = `max-height ${duration}ms ease-out`;
-    body.style.maxHeight = body.scrollHeight + "px";
+    this._setExpanded(body);
     setTimeout(() => {
       if (typeof this.options.onOpenEnd === 'function') {
         this.options.onOpenEnd.call(this, li);

src/modal.ts

@@ -103,7 +103,6 @@ export class Modal extends Component<ModalOptions> {
     this.isOpen = false;
     this.id = this.el.id;
     this._openingTrigger = undefined;
-    console.log("create new overlay");
     this._overlay = document.createElement('div');
     this._overlay.classList.add('modal-overlay');
     this.el.tabIndex = 0;

tests/spec/collapsible/collapsibleSpec.js

@@ -1,5 +1,5 @@
-describe( "Collapsible Plugin", function () {
-  var collapsible, accordion, popout, expandable, expandablePreselect;
+describe('Collapsible Plugin', function() {
+  let collapsible, accordion, popout, expandable, expandablePreselect;
 
   beforeEach(async function() {
     await XloadFixtures(['collapsible/collapsible.html']);
@@ -9,22 +9,24 @@ describe( "Collapsible Plugin", function () {
     accordion = document.querySelector('.accordion');
     popout = document.querySelector('.popout');
     M.Collapsible.init(collapsible);
-    M.Collapsible.init(expandable, {accordion: false});
-    M.Collapsible.init(expandablePreselect, {accordion: false});
+    M.Collapsible.init(expandable, { accordion: false });
+    M.Collapsible.init(expandablePreselect, { accordion: false });
   });
-  afterEach(function(){
+  afterEach(function() {
     XunloadFixtures();
   });
 
-  describe( "collapsible", function () {
-
-    it("should open all items, keeping all open", function (done) {
+  describe('collapsible', function() {
+    it('should open all items, keeping all open', function(done) {
       // Collapsible body height should be 0 on start when hidden.
       let headers = expandable.querySelectorAll('.collapsible-header');
       let bodies = expandable.querySelectorAll('.collapsible-body');
 
       for (let i = 0; i < bodies.length; i++) {
-        expect(bodies[i]).toBeHidden('because collapsible bodies should be hidden initially.'); //TODO replace with alternative for deprecated jasmine-jquery
+        expect(bodies[i]).hasMaxHeightZero(
+          'because collapsible bodies should be hidden initially.'
+        );
+        //TODO replace with alternative for deprecated jasmine-jquery
       }
 
       // Collapsible body height should be > 0 after being opened.
@@ -34,28 +36,37 @@ describe( "Collapsible Plugin", function () {
 
       setTimeout(function() {
         for (let i = 0; i < bodies.length; i++) {
-          expect(bodies[i]).toBeVisible('because collapsible bodies not visible after being opened.'); //TODO replace with alternative for deprecated jasmine-jquery
+          expect(bodies[i]).notHasMaxHeightZero(
+            'because collapsible bodies not visible after being opened.'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
         }
         done();
       }, 400);
     });
 
-    it("should allow preopened sections", function () {
+    it('should allow preopened sections', function() {
       let bodies = expandablePreselect.querySelectorAll('.collapsible-body');
 
       for (let i = 0; i < bodies.length; i++) {
         let headerLi = bodies[i].parentNode;
 
         if (i === 1) {
-          expect(headerLi).toHaveClass('active', 'because collapsible header should have active class to be preselected.'); //TODO replace with alternative for deprecated jasmine-jquery
-          expect(bodies[i]).toBeVisible('because collapsible bodies should be visible if preselected.'); //TODO replace with alternative for deprecated jasmine-jquery
+          expect(headerLi).toHaveClass(
+            'active',
+            'because collapsible header should have active class to be preselected.'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
+          expect(bodies[i]).notHasMaxHeightZero(
+            'because collapsible bodies should be visible if preselected.'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
         } else {
-          expect(bodies[i]).toBeHidden('because collapsible bodies should be hidden initially.'); //TODO replace with alternative for deprecated jasmine-jquery
+          expect(bodies[i]).hasMaxHeightZero(
+            'because collapsible bodies should be hidden initially.'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
         }
       }
     });
 
-    it("should open and close programmatically with callbacks", function(done) {
+    it('should open and close programmatically with callbacks', function(done) {
       let openCallback = false;
       let closeCallback = false;
       M.Collapsible.init(expandable, {
@@ -73,91 +84,115 @@ describe( "Collapsible Plugin", function () {
       expect(closeCallback).toEqual(false, 'because close callback not yet fired');
 
       for (let i = 0; i < bodies.length; i++) {
-        expect(bodies[i]).toBeHidden('because collapsible bodies should be hidden initially.'); //TODO replace with alternative for deprecated jasmine-jquery
+        //TODO replace with alternative for deprecated jasmine-jquery
+        expect(bodies[i]).hasMaxHeightZero(
+          'because collapsible bodies should be hidden initially.'
+        );
         let collapsibleInstance = M.Collapsible.getInstance(bodies[i].parentNode.parentNode);
         collapsibleInstance.open(i);
       }
-      expect(openCallback).toEqual(true, 'because open callback fired');
 
+      expect(openCallback).toEqual(true, 'because open callback fired');
 
       setTimeout(function() {
         for (let i = 0; i < bodies.length; i++) {
-          expect(bodies[i]).toBeVisible('because collapsible bodies should be visible after being opened.'); //TODO replace with alternative for deprecated jasmine-jquery
+          expect(bodies[i]).notHasMaxHeightZero(
+            'because collapsible bodies should be visible after being opened.'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
           M.Collapsible.getInstance(bodies[i].parentNode.parentNode).close(i);
-        };
+        }
         expect(closeCallback).toEqual(true, 'because close callback fired');
 
-
         setTimeout(function() {
           for (let i = 0; i < bodies.length; i++) {
-            expect(bodies[i]).toBeHidden('because collapsible bodies should be hidden after close.'); //TODO replace with alternative for deprecated jasmine-jquery
-          };
+            expect(bodies[i]).hasMaxHeightZero(
+              'because collapsible bodies should be hidden after close.'
+            ); //TODO replace with alternative for deprecated jasmine-jquery
+          }
 
           done();
         }, 400);
       }, 400);
     });
   });
 
-  describe( "accordion", function () {
-
-    it("should open first and second items, keeping only second open", function (done) {
+  describe('accordion', function() {
+    it('should open first and second items, keeping only second open', function(done) {
       // Collapsible body height should be 0 on start when hidden.
       let firstHeader = accordion.querySelector('.collapsible-header');
       let firstBody = accordion.querySelector('.collapsible-body');
       let secondHeader = accordion.querySelectorAll('.collapsible-header')[1];
       let secondBody = accordion.querySelectorAll('.collapsible-body')[1];
-      expect(firstBody).toBeHidden('because accordion bodies should be hidden initially.');
-      expect(secondBody).toBeHidden('because accordion bodies should be hidden initially.');
+
+      expect(firstBody).hasMaxHeightZero('because accordion bodies should be hidden initially.');
+      expect(secondBody).hasMaxHeightZero('because accordion bodies should be hidden initially.');
 
       // Collapsible body height should be > 0 after being opened.
       firstHeader.click();
 
       setTimeout(function() {
-        expect(firstBody).toBeVisible('because accordion bodies not visible after being opened.');
+        expect(firstBody).notHasMaxHeightZero(
+          'because accordion bodies not visible after being opened.'
+        );
         click(secondHeader);
 
         setTimeout(function() {
-          expect(firstBody).toBeHidden('because accordion bodies should be hidden when another item is opened.');
-          expect(secondBody).toBeVisible('because accordion bodies not visible after being opened.');
+          expect(firstBody).hasMaxHeightZero(
+            'because accordion bodies should be hidden when another item is opened.'
+          );
+          expect(secondBody).notHasMaxHeightZero(
+            'because accordion bodies not visible after being opened.'
+          );
           done();
         }, 400);
       }, 200);
-
     });
   });
 
-  describe( "popout", function () {
-
-    it("should open first and popout", function (done) {
+  describe('popout', function() {
+    it('should open first and popout', function(done) {
       // Collapsible body height should be 0 on start when hidden.
       let listItems = popout.querySelectorAll('li');
       let firstHeader = popout.querySelector('.collapsible-header');
       let firstBody = popout.querySelector('.collapsible-body');
-      expect(firstBody).toBeHidden('because accordion bodies should be hidden initially.');
+
+      expect(firstBody).hasMaxHeightZero('because accordion bodies should be hidden initially.');
 
       // Expect margin to be > 0 because not popped out.
       for (let i = 0; i < listItems.length; i++) {
         let listItemStyles = getComputedStyle(listItems[i]);
         let marginLeft = parseInt(listItemStyles.getPropertyValue('margin-left'));
         let marginRight = parseInt(listItemStyles.getPropertyValue('margin-right'));
-        expect(marginLeft).toBeGreaterThan(0, 'because closed popout items should have horizontal margins.');
-        expect(marginRight).toBeGreaterThan(0, 'because closed popout items should have horizontal margins.');
-      };
+        expect(marginLeft).toBeGreaterThan(
+          0,
+          'because closed popout items should have horizontal margins.'
+        );
+        expect(marginRight).toBeGreaterThan(
+          0,
+          'because closed popout items should have horizontal margins.'
+        );
+      }
 
       // expect margin to be 0 because popped out.
       click(firstHeader);
       setTimeout(function() {
         let firstStyles = getComputedStyle(listItems[0]);
         let firstMarginLeft = parseInt(firstStyles.getPropertyValue('margin-left'));
         let firstMarginRight = parseInt(firstStyles.getPropertyValue('margin-right'));
-        expect(firstMarginLeft).toEqual(0, 'because opened popout items should have no horizontal margins.');
-        expect(firstMarginRight).toEqual(0, 'because opened popout items should have no horizontal margins.');
-        expect(firstBody).toBeVisible('because accordion bodies not visible after being opened.');
+        expect(firstMarginLeft).toEqual(
+          0,
+          'because opened popout items should have no horizontal margins.'
+        );
+        expect(firstMarginRight).toEqual(
+          0,
+          'because opened popout items should have no horizontal margins.'
+        );
+        expect(firstBody).notHasMaxHeightZero(
+          'because accordion bodies not visible after being opened.'
+        );
 
         done();
       }, 400);
-
     });
   });
 });