perf: improve jasmine testing

All tests are running now under 10 sec! Also the tests can be watched visually with the command "npx jasmine-browser-runner serve". This is a huge performance improvement and allows much faster testing.
materializecss · Aug 29, 2024 · 8d6166a · 8d6166a
1 parent a0b9204
commit 8d6166a
Show file tree

Hide file tree

Showing 14 changed files with 66 additions and 103 deletions.
diff --git a/spec/helpers/helper.js b/spec/helpers/helper.js
@@ -129,7 +129,10 @@ function XloadHtml(html) {
 }
 
 function XunloadFixtures() {
-  document.querySelectorAll('please-delete-me').forEach((el) => el.remove());
+  document.querySelectorAll('.please-delete-me').forEach((el) => el.remove());
+  //
+  document.querySelectorAll('.material-tooltip').forEach((el) => el.remove());
+  document.querySelectorAll('.dropdown-content').forEach((el) => el.remove());
 }
 
 beforeEach(() => {

diff --git a/spec/tests/autocomplete/autocompleteSpec.js b/spec/tests/autocomplete/autocompleteSpec.js
@@ -37,7 +37,6 @@ describe('Autocomplete Plugin', () => {
       ]
     });
   });
-
   afterEach(() => XunloadFixtures());
 
   describe('Autocomplete', () => {

diff --git a/spec/tests/chips/chipsSpec.js b/spec/tests/chips/chipsSpec.js
@@ -8,7 +8,6 @@ describe('Chips', () => {
 
   beforeEach(() => {
     XloadHtml(fixture);
-
     M.Chips.init(document.querySelector('.chips'));
     M.Chips.init(document.querySelector('.chips-initial'), {
       data: [
@@ -36,7 +35,6 @@ describe('Chips', () => {
       }
     });
   });
-
   afterEach(() => XunloadFixtures());
 
   describe('chips plugin', () => {

diff --git a/spec/tests/collapsible/collapsibleSpec.js b/spec/tests/collapsible/collapsibleSpec.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
 
-describe('Collapsible Plugin', () => {
+describe('Collapsible Plugin:', () => {
   let collapsible, accordion, popout, expandable, expandablePreselect;
 
   const fixture = `<ul class="collapsible expandable" data-collapsible="expandable">
@@ -70,7 +70,6 @@ describe('Collapsible Plugin', () => {
     expandablePreselect = document.querySelector('.expandable-preselected');
     accordion = document.querySelector('.accordion');
     popout = document.querySelector('.popout');
-
     M.Collapsible.init(collapsible, { inDuration: 0, outDuration: 0 });
     M.Collapsible.init(expandable, { accordion: false, inDuration: 0, outDuration: 0 });
     M.Collapsible.init(expandablePreselect, { accordion: false, inDuration: 0, outDuration: 0 });
@@ -79,7 +78,7 @@ describe('Collapsible Plugin', () => {
   afterEach(() => XunloadFixtures());
 
   describe('collapsible', () => {
-    it('should open all items, keeping all open', function (done) {
+    it('should open all items, keeping all open', (done) => {
       // Collapsible body height should be 0 on start when hidden.
       let headers = expandable.querySelectorAll('.collapsible-header');
       let bodies = expandable.querySelectorAll('.collapsible-body');

diff --git a/spec/tests/datepicker/datepickerSpec.js b/spec/tests/datepicker/datepickerSpec.js
@@ -14,7 +14,7 @@ describe('Datepicker Plugin', () => {
   afterEach(() => XunloadFixtures());
 
   describe('Datepicker', () => {
-    it('should open and close programmatically', function (done) {
+    it('should open and close programmatically', (done) => {
       const input = document.querySelector('#datepickerInput');
       const modal = document.querySelector('.datepicker-modal');
       expect(modal).toBeHidden('Should be hidden before datepicker input is focused.');
@@ -36,7 +36,7 @@ describe('Datepicker Plugin', () => {
       }, 400);
     });
 
-    it('can have a string format', function (done) {
+    it('can have a string format', (done) => {
       const input = document.querySelector('#datepickerInput');
       const today = new Date();
       M.Datepicker.init(input, { format: 'mm/dd/yyyy' }).open();
@@ -55,7 +55,7 @@ describe('Datepicker Plugin', () => {
       }, 400);
     });
 
-    it('can have a format function', function (done) {
+    it('can have a format function', (done) => {
       const input = document.querySelector('#datepickerInput');
       const today = new Date();
       const formatFn = (date) => `${date.getFullYear() - 100}-${date.getMonth() + 1}-99`;

diff --git a/spec/tests/dropdown/dropdownSpec.js b/spec/tests/dropdown/dropdownSpec.js
@@ -1,40 +1,34 @@
 /* eslint-disable no-undef */
 
-describe('Dropdown Plugin', () => {
+describe('Dropdown Plugin:', () => {
   const fixture = `<div class="row">
     <div class="input-field col s12">
-      <!-- Dropdown Trigger -->
       <a id="dropdownActivator" class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
 
-      <!-- Dropdown Structure -->
       <ul id='dropdown1' class='dropdown-content'>
         <li><a href="#!">one</a></li>
         <li><a href="#!">two</a></li>
         <li class="divider"></li>
         <li><a href="#!">three</a></li>
       </ul>
 
-      <!-- Dropdown Trigger -->
       <a id="dropdownBubble" class='dropdown-trigger btn' href='#' data-target='dropdown2'>
         <i class="material-icons left">arrow_drop_down</i>
         <span>Event Bubble!</span>
       </a>
 
-      <!-- Dropdown Structure -->
       <ul id='dropdown2' class='dropdown-content'>
         <li><a href="#!">one</a></li>
         <li><a href="#!">two</a></li>
         <li class="divider"></li>
         <li><a href="#!">three</a></li>
       </ul>
 
-      <!-- Dropdown Trigger -->
       <a id="dropdownDestroyTrigger" class='dropdown-trigger btn' href='#' data-target='dropdownDestroy'>
         <i class="material-icons left">arrow_drop_down</i>
         <span>Drop Me!</span>
       </a>
 
-      <!-- Dropdown Destroy  -->
       <ul id='dropdownDestroy' class='dropdown-content'>
         <li><a href="#!">one</a></li>
         <li><a href="#!">two</a></li>
@@ -51,16 +45,11 @@ describe('Dropdown Plugin', () => {
       outDuration: 0
     });
   });
-
   afterEach(() => XunloadFixtures());
 
   describe('Dropdown', () => {
     let normalDropdown;
 
-    // beforeEach(() => {
-    //   // browserSelect = $('select.normal');
-    // });
-
     it('should open and close programmatically', (done) => {
       const dropdown1 = document.querySelector('#dropdown1');
       normalDropdown = document.querySelector('#dropdownActivator');

diff --git a/spec/tests/fab/fabSpec.js b/spec/tests/fab/fabSpec.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
 
-describe('Fab', () => {
+describe('Fab Plugin:', () => {
   const fixture = `<div class="fixed-action-btn">
   <a class="btn-floating btn-large red">
     <i class="large material-icons">mode_edit</i>
@@ -42,24 +42,19 @@ describe('Fab', () => {
   afterEach(() => XunloadFixtures());
 
   describe('Floating Action Button', () => {
-    let normalFAB;
-    beforeEach(() => {
-      normalFAB = document.querySelector('.fixed-action-btn');
+    it('should open correctly', (done) => {
+      const normalFAB = document.querySelector('.fixed-action-btn');
       M.FloatingActionButton.init(normalFAB);
-    });
-
-    it('should open correctly', function (done) {
-      let ul = normalFAB.querySelector('ul');
-      let ulStyle = getComputedStyle(ul);
+      const ul = normalFAB.querySelector('ul');
+      const ulStyle = getComputedStyle(ul);
       expect(ulStyle.getPropertyValue('visibility')).toEqual(
         'hidden',
         'FAB menu div should be hidden initially'
       );
-
       setTimeout(() => {
         mouseenter(normalFAB);
         setTimeout(() => {
-          ulStyle = getComputedStyle(ul);
+          const ulStyle = getComputedStyle(ul);
           expect(ulStyle.getPropertyValue('visibility')).toEqual(
             'visible',
             'FAB menu did not appear after mouseenter.'

diff --git a/spec/tests/forms/formsSpec.js b/spec/tests/forms/formsSpec.js
@@ -65,7 +65,6 @@ describe('Forms:', () => {
   beforeEach(() => {
     XloadHtml(fixture);
     M.CharacterCounter.init(document.querySelector('#character-counter'));
-
     const inputs = document.querySelectorAll('input');
     inputs.forEach((input) => {
       //input.dispatchEvent(new Event('focus'));
@@ -74,7 +73,6 @@ describe('Forms:', () => {
       //input.blur();
     });
   });
-
   afterEach(() => XunloadFixtures());
 
   describe('CharacterCounter', () => {
@@ -105,24 +103,29 @@ describe('Forms:', () => {
       expect(el.clientHeight).toBeGreaterThan(pHeight);
     });
 
-    it('Programmatically initialized textarea resize', () => {
+    it('Programmatically initialized textarea resize', (done) => {
       const element = document.querySelector('#textarea');
       M.Forms.InitTextarea(element);
       const textareaHeight = element.clientHeight;
       element.value = MULTILINE_TEXT;
       keydown(element, 13);
-      expect(element.clientHeight).toBeGreaterThan(textareaHeight);
+      setTimeout(() => {
+        expect(element.clientHeight).toBeGreaterThan(textareaHeight);
+        done();
+      }, 10);
     });
 
-    it('Automatically initialized textarea resize', () => {
+    it('Automatically initialized textarea resize', (done) => {
       const event = new Event('DOMContentLoaded');
       document.dispatchEvent(event);
-
       const element = document.querySelector('#textarea');
       const textareaHeight = element.clientHeight;
       element.value = MULTILINE_TEXT;
       keydown(element, 13);
-      expect(element.clientHeight).toBeGreaterThan(textareaHeight);
+      setTimeout(() => {
+        expect(element.clientHeight).toBeGreaterThan(textareaHeight);
+        done();
+      }, 10);
     });
   });
 

diff --git a/spec/tests/modal/modalSpec.js b/spec/tests/modal/modalSpec.js
@@ -57,7 +57,6 @@ describe('Modal:', () => {
     modal2 = document.querySelector('#modal2');
     modal3 = document.querySelector('#modal3');
   });
-
   afterEach(() => XunloadFixtures());
 
   describe('Modals', () => {
@@ -103,7 +102,7 @@ describe('Modal:', () => {
       }, 10);
     });
 
-    it('Should have a dismissible option', function (done) {
+    it('Should have a dismissible option', (done) => {
       M.Modal.init(modal1, {
         dismissible: false,
         inDuration: 0,
@@ -125,7 +124,7 @@ describe('Modal:', () => {
       }, 10);
     });
 
-    it('Should have callbacks', function (done) {
+    it('Should have callbacks', (done) => {
       let readyTest = false;
       let completeTest = false;
       M.Modal.init(modal1, {

diff --git a/spec/tests/select/selectSpec.js b/spec/tests/select/selectSpec.js
@@ -61,7 +61,6 @@ describe('Select Plugin:', () => {
       dropdownOptions: { inDuration: 0, outDuration: 0 }
     });
   });
-
   afterEach(() => XunloadFixtures());
 
   describe('Select:', () => {
@@ -124,7 +123,7 @@ describe('Select Plugin:', () => {
       }, 10);
     });
 
-    it('should have pre-selected value', () => {
+    it('should have pre-selected value', (done) => {
       const elem = document.querySelector('select.normal');
       const instance = M.FormSelect.getInstance(elem);
       const input = instance.wrapper.querySelector('input.select-dropdown');
@@ -139,6 +138,7 @@ describe('Select Plugin:', () => {
           firstOption.getAttribute('aria-selected'),
           'First item should be selected to assistive technologies.'
         );
+        done();
       }, 10);
     });
 
@@ -279,7 +279,7 @@ describe('Select Plugin:', () => {
       }, 10);
     });
 
-    it('should have multiple pre-selected values', () => {
+    it('should have multiple pre-selected values', (done) => {
       const elem = document.querySelector('select.multiple');
       const instance = M.FormSelect.getInstance(elem);
       const input = instance.wrapper.querySelector('input.select-dropdown');
@@ -288,6 +288,7 @@ describe('Select Plugin:', () => {
         .join(', ');
       setTimeout(() => {
         expect(input.value).toEqual(text, 'Value should equal preselected options.');
+        done();
       }, 10);
     });
   });

diff --git a/spec/tests/sidenav/sidenavSpec.js b/spec/tests/sidenav/sidenavSpec.js
@@ -53,7 +53,6 @@ describe('Sidenav Plugin', () => {
       const overlay = document.querySelectorAll('.sidenav-overlay');
       const dragTarget = document.querySelectorAll('.drag-target');
       let sidenavRect = normalSidenav.getBoundingClientRect();
-
       expect(dragTarget.length).toEqual(1, 'Should generate only one dragTarget.');
       expect(overlay.length).toEqual(1, 'Should generate only one overlay.');
       expect(sidenavRect.left).toEqual(
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,7 +37,6 @@ describe('Autocomplete Plugin', () => { @@
           ]
         });
       });
       afterEach(() => XunloadFixtures());
       describe('Autocomplete', () => {
@@ Expand Down @@