Merge pull request #488 from folio-org/cl/block-and-unblock-mirage

Capability to block and unblock mirage server in test suite.

tests/custom-package-show-selection-test.js

@@ -1,4 +1,4 @@
-import { beforeEach, afterEach, describe, it } from '@bigtest/mocha';
+import { beforeEach, describe, it } from '@bigtest/mocha';
 import { expect } from 'chai';
 
 import { describeApplication } from './helpers';
@@ -38,26 +38,12 @@ describeApplication('CustomPackageShowSelection', () => {
     });
 
     describe('deselecting a custom package', () => {
-      beforeEach(function () {
-        /*
-         * The expectations in the convergent `it` blocks
-         * get run once every 10ms.  We were seeing test flakiness
-         * when a toggle action dispatched and resolved before an
-         * expectation had the chance to run.  We sidestep this by
-         * temporarily increasing the mirage server's response time
-         * to 50ms.
-         * TODO: control timing directly with Mirage
-         */
-        this.server.timing = 50;
+      beforeEach(() => {
         return PackageShowPage
           .dropDown.clickDropDownButton()
           .dropDownMenu.clickRemoveFromHoldings();
       });
 
-      afterEach(function () {
-        this.server.timing = 0;
-      });
-
       describe('canceling the deselection', () => {
         beforeEach(() => {
           return PackageShowPage.modal.cancelDeselection();
@@ -70,20 +56,17 @@ describeApplication('CustomPackageShowSelection', () => {
 
       describe('confirming the deselection', () => {
         beforeEach(function () {
-          this.server.timing = 50;
+          this.server.block();
           return PackageShowPage.modal.confirmDeselection();
         });
 
-        afterEach(function () {
-          this.server.timing = 0;
-        });
-
         it('indicates it is working to get to desired state', () => {
           expect(PackageShowPage.isSelecting).to.equal(true);
         });
 
         describe('when the request succeeds', () => {
-          beforeEach(() => {
+          beforeEach(function () {
+            this.server.unblock();
             return PackageShowPage
               .when(() => !PackageShowPage.isSelecting);
           });
@@ -111,23 +94,25 @@ describeApplication('CustomPackageShowSelection', () => {
           .dropDownMenu.clickRemoveFromHoldings();
       });
 
+      it('shows a confirmation dialog', () => {
+        expect(PackageShowPage.modal.isVisible).to.equal(true);
+      });
+
       describe('confirming the deselection', () => {
         beforeEach(() => {
           return PackageShowPage.modal.confirmDeselection();
         });
 
-        describe('when the request fails', () => {
-          it('reflect the desired state was not set', () => {
-            expect(PackageShowPage.isSelected).to.equal(true);
-          });
+        it('reflect the desired state was not set', () => {
+          expect(PackageShowPage.isSelected).to.equal(true);
+        });
 
-          it('indicates it is no longer working', () => {
-            expect(PackageShowPage.isSelecting).to.equal(false);
-          });
+        it('indicates it is no longer working', () => {
+          expect(PackageShowPage.isSelecting).to.equal(false);
+        });
 
-          it('shows the error as a toast', () => {
-            expect(PackageShowPage.toast.errorText).to.equal('There was an error');
-          });
+        it('shows the error as a toast', () => {
+          expect(PackageShowPage.toast.errorText).to.equal('There was an error');
         });
       });
     });

tests/helpers.js

@@ -37,6 +37,34 @@ export function describeApplication(name, setup, describe = window.describe) {
         setup: () => {
           this.server = startMirage(setup.scenarios);
           this.server.logging = false;
+
+          this.server.block = function block() {
+            let { pretender } = this;
+            let blocks = [];
+            let _handlerFor = pretender._handlerFor;
+            pretender._handlerFor = (...args) => {
+              return {
+                handler(request) {
+                  return new Promise((resolve, reject) => {
+                    blocks.push(() => {
+                      try {
+                        resolve(_handlerFor.apply(pretender, args).handler(request));
+                      } catch (error) {
+                        reject(error);
+                      }
+                    });
+                  });
+                }
+              };
+            };
+            this.block = () => { throw new Error('called block() when the mirage server is already blocked'); };
+            this.unblock = function unblock() {
+              pretender._handlerFor = _handlerFor;
+              blocks.forEach(unblocker => unblocker());
+              this.block = block;
+              delete this.unblock;
+            };
+          };
         },
 
         teardown: () => {

tests/package-selection-test.js

@@ -1,4 +1,4 @@
-import { beforeEach, afterEach, describe, it } from '@bigtest/mocha';
+import { beforeEach, describe, it } from '@bigtest/mocha';
 import { expect } from 'chai';
 
 import { describeApplication } from './helpers';
@@ -31,28 +31,19 @@ describeApplication('PackageSelection', () => {
 
     describe('successfully selecting a package title to add to my holdings', () => {
       beforeEach(function () {
-        /*
-         * The expectations in the convergent `it` blocks
-         * get run once every 10ms.  We were seeing test flakiness
-         * when a toggle action dispatched and resolved before an
-         * expectation had the chance to run.  We sidestep this by
-         * temporarily increasing the mirage server's response time
-         * to 50ms.
-         * TODO: control timing directly with Mirage
-         */
-        this.server.timing = 50;
+        this.server.block();
         return PackageShowPage.selectPackage();
       });
 
-      afterEach(function () {
-        this.server.timing = 0;
-      });
-
       it('indicates it is working to get to desired state', () => {
         expect(PackageShowPage.isSelecting).to.equal(true);
       });
 
       describe('when the request succeeds', () => {
+        beforeEach(function () {
+          return this.server.unblock();
+        });
+
         it('reflect the desired state was set', () => {
           expect(PackageShowPage.isSelected).to.equal(true);
         });
@@ -71,7 +62,8 @@ describeApplication('PackageSelection', () => {
       });
 
       describe('and deselecting the package', () => {
-        beforeEach(() => {
+        beforeEach(function () {
+          this.server.unblock();
           // many thanks to elrick for catching the need for
           // the `when` here
           return PackageShowPage
@@ -96,19 +88,19 @@ describeApplication('PackageSelection', () => {
 
         describe('confirming the deselection', () => {
           beforeEach(function () {
-            this.server.timing = 50;
+            this.server.block();
             return PackageShowPage.modal.confirmDeselection();
           });
 
-          afterEach(function () {
-            this.server.timing = 0;
-          });
-
           it('indicates it is working', () => {
             expect(PackageShowPage.isSelecting).to.equal(true);
           });
 
           describe('when the request succeeds', () => {
+            beforeEach(function () {
+              this.server.unblock();
+            });
+
             it('reflect the desired state was set', () => {
               expect(PackageShowPage.isSelected).to.equal(false);
             });
@@ -134,26 +126,29 @@ describeApplication('PackageSelection', () => {
     });
 
     describe('unsuccessfully selecting a package title to add to my holdings', () => {
+      let resolveRequest;
       beforeEach(function () {
-        this.server.put('/packages/:packageId', {
-          errors: [{
-            title: 'There was an error'
-          }]
+        this.server.put('/packages/:packageId', () => {
+          return new Promise((resolve) => {
+            resolveRequest = resolve;
+          });
         }, 500);
-
-        this.server.timing = 50;
         return PackageShowPage.selectPackage();
       });
 
-      afterEach(function () {
-        this.server.timing = 0;
-      });
-
       it('indicates it working to get to desired state', () => {
         expect(PackageShowPage.isSelecting).to.equal(true);
       });
 
       describe('when the request fails', () => {
+        beforeEach(() => {
+          resolveRequest({
+            errors: [{
+              title: 'There was an error'
+            }]
+          });
+        });
+
         it('reflect the desired state was not set', () => {
           expect(PackageShowPage.isSelected).to.equal(false);
         });

tests/resource-selection-test.js

@@ -1,4 +1,4 @@
-import { beforeEach, afterEach, describe, it } from '@bigtest/mocha';
+import { beforeEach, describe, it } from '@bigtest/mocha';
 import { expect } from 'chai';
 
 import { describeApplication } from './helpers';
@@ -47,14 +47,7 @@ describeApplication('ResourceSelection', () => {
 
     describe('successfully selecting a package title to add to my holdings via the drop down', () => {
       beforeEach(function () {
-        /*
-         We need to slow the timing in order for the animation to have to time
-         to run. Reason being in test the Mirage timing is set to 0 so
-         requests resolve immediately.
-         * TODO: control timing directly with Mirage
-        */
-
-        this.server.timing = 50;
+        this.server.block();
         return ResourcePage
           .dropDown.clickDropDownButton()
           .dropDownMenu.clickAddToHoldings();
@@ -73,6 +66,9 @@ describeApplication('ResourceSelection', () => {
       });
 
       describe('when the request succeeds', () => {
+        beforeEach(function () {
+          this.server.unblock();
+        });
         it('reflects the desired state was set', () => {
           expect(ResourcePage.isResourceSelected).to.equal('Selected');
         });
@@ -85,24 +81,10 @@ describeApplication('ResourceSelection', () => {
 
     describe('successfully selecting a package title to add to my holdings via add to holdings button', () => {
       beforeEach(function () {
-        /*
-         We need to slow the timing in order for the animation to have to time
-         to run. Reason being in test the Mirage timing is set to 0 so
-         requests resolve immediately.
-         * TODO: control timing directly with Mirage
-        */
-        this.server.timing = 50;
+        this.server.block();
         return ResourcePage.clickAddToHoldingsButton();
       });
 
-      afterEach(function () {
-        this.server.timing = 0;
-      });
-
-      it('reflects the desired state (Selected)', () => {
-        expect(ResourcePage.isResourceSelected).to.equal('Selected');
-      });
-
       it('indicates it is working to get to desired state', () => {
         expect(ResourcePage.isLoading).to.equal(true);
       });
@@ -112,6 +94,10 @@ describeApplication('ResourceSelection', () => {
       });
 
       describe('when the request succeeds', () => {
+        beforeEach(function () {
+          this.server.unblock();
+        });
+
         it('reflects the desired state was set', () => {
           expect(ResourcePage.isResourceSelected).to.equal('Selected');
         });