Wait updates (#579)

* Start work for wait with absolute element

#546

* Add semi-transparent background for wait component

#545

* Ensure wait service can work in Angular lifecycle

#529

* fix unit tests

* update screenshots for new wait

src/app/components/wait/wait-demo.component.html

@@ -10,5 +10,3 @@
 <button type="button" class="sky-btn sky-btn-primary" (click)="showPageWait(true)">Show page wait</button>
 
 <button type="button" class="sky-btn sky-btn-primary" (click)="showPageWait(false)">Show non-blocking page wait</button>
-
-

src/modules/wait/fixtures/wait.component.visual-fixture.html

@@ -4,11 +4,24 @@
 
 <button type="button" style="margin-bottom: 10px;" class="sky-btn sky-btn-primary sky-test-non-blocking" (click)="isNonBlocking = !isNonBlocking">Toggle Full page</button>
 
-<div id="screenshot-wait" style="width: 500px; height: 1000px">
+<div id="screenshot-wait" style="width: 500px; height: 500px">
   <div style="height: 200px; width: 200px">
     Wait inside this element with text
     <sky-wait [isWaiting]="isWaiting" [isFullPage]="isFullPage" [isNonBlocking]="isNonBlocking">
     </sky-wait>
   </div>
 
 </div>
+
+<div id="screenshot-wait-absolute" style="height: 200px; width: 200px; margin-top: 10px;">
+
+  <sky-wait [isWaiting]="isWaiting">
+  </sky-wait>
+
+  <div>
+    <p style="position:absolute; background-color: red">
+    A large area that can be waited with the <code>sky-wait</code> directive.
+    </p>
+  </div>
+
+</div>

src/modules/wait/wait.component.scss

@@ -8,6 +8,7 @@
   left: 0;
   bottom: 0;
   background-color: $sky-wait-mask-color;
+  z-index: $sky-page-wait-z-index;
 }
 
 .sky-wait-mask-loading-fixed {

src/modules/wait/wait.component.visual-spec.js

@@ -12,6 +12,17 @@ describe('wait component', function () {
       });
   });
 
+  it('should display wait on parent to block absolute item', function () {
+    return browser
+      .setupTest('/wait.html')
+      .click('.sky-test-wait')
+      .compareScreenshot({
+        screenshotName: 'wait_component_absolute',
+        selector: '#screenshot-wait-absolute',
+        checkAccessibility: true
+      });
+  });
+
   it('should display nonblocking wait on parent', function () {
     return browser
       .setupTest('/wait.html')

src/modules/wait/wait.service.spec.ts

@@ -1,7 +1,8 @@
 import {
   TestBed,
   inject,
-  fakeAsync
+  fakeAsync,
+  tick
 } from '@angular/core/testing';
 
 import {
@@ -71,97 +72,116 @@ describe('Wait service', () => {
   it('should add a blocking page wait when beginPageWait is called with isBlocking true',
     fakeAsync(() => {
     waitService.beginBlockingPageWait();
+    tick();
     applicationRef.tick();
 
     verifyBlockingPageWaitExists(true);
 
     waitService.beginBlockingPageWait();
+    tick();
     applicationRef.tick();
     verifyBlockingPageWaitExists(true);
 
     waitService.endBlockingPageWait();
+    tick();
     applicationRef.tick();
     verifyBlockingPageWaitExists(true);
 
     waitService.endBlockingPageWait();
+    tick();
     applicationRef.tick();
     verifyBlockingPageWaitExists(false);
 
   }));
 
   it('should add a nonblocking page wait when beginPageWait is called with isBlocking false',
-    () => {
+    fakeAsync(() => {
     waitService.beginNonBlockingPageWait();
+    tick();
     applicationRef.tick();
 
     verifyNonBlockingPageWaitExists(true);
 
     waitService.beginNonBlockingPageWait();
+    tick();
     applicationRef.tick();
     verifyNonBlockingPageWaitExists(true);
 
     waitService.endNonBlockingPageWait();
+    tick();
     applicationRef.tick();
     verifyNonBlockingPageWaitExists(true);
 
     waitService.endNonBlockingPageWait();
+    tick();
     applicationRef.tick();
     verifyNonBlockingPageWaitExists(false);
-  });
+  }));
 
-  it('do nothing if wait component not created and endPageWait is called', () => {
+  it('do nothing if wait component not created and endPageWait is called', fakeAsync(() => {
     waitService.endNonBlockingPageWait();
+    tick();
     applicationRef.tick();
     verifyNonBlockingPageWaitExists(false);
-  });
+  }));
 
-  it('not drop counts below zero', () => {
+  it('not drop counts below zero', fakeAsync(() => {
     waitService.beginNonBlockingPageWait();
+    tick();
     applicationRef.tick();
 
     verifyNonBlockingPageWaitExists(true);
 
     waitService.endNonBlockingPageWait();
+    tick();
     applicationRef.tick();
     verifyNonBlockingPageWaitExists(false);
 
     waitService.endNonBlockingPageWait();
+    tick();
     applicationRef.tick();
     verifyNonBlockingPageWaitExists(false);
 
     waitService.beginNonBlockingPageWait();
+    tick();
     applicationRef.tick();
 
     verifyNonBlockingPageWaitExists(true);
 
     waitService.endBlockingPageWait();
+    tick();
     applicationRef.tick();
     verifyBlockingPageWaitExists(false);
 
     waitService.beginBlockingPageWait();
+    tick();
     applicationRef.tick();
     verifyBlockingPageWaitExists(true);
-  });
+  }));
 
-  it('should clear appropriate waits when clearPageWait is called', () => {
+  it('should clear appropriate waits when clearPageWait is called', fakeAsync(() => {
     waitService.beginNonBlockingPageWait();
+    tick();
     applicationRef.tick();
 
     waitService.beginBlockingPageWait();
+    tick();
     applicationRef.tick();
 
     waitService.clearAllPageWaits();
+    tick();
     applicationRef.tick();
 
     verifyNonBlockingPageWaitExists(false);
     verifyBlockingPageWaitExists(false);
-  });
+  }));
 
-  it('should only clear waits if waitcomponent not created', () => {
+  it('should only clear waits if waitcomponent not created', fakeAsync(() => {
     waitService.clearAllPageWaits();
+    tick();
     applicationRef.tick();
 
     verifyNonBlockingPageWaitExists(false);
     verifyBlockingPageWaitExists(false);
-  });
+  }));
 });

src/modules/wait/wait.service.ts

@@ -55,16 +55,7 @@ export class SkyWaitService {
     }
   }
 
-  private beginPageWait(isBlocking: boolean) {
-    if (!SkyWaitService.waitComponent) {
-      let factory = this.resolver.resolveComponentFactory(SkyWaitPageComponent);
-
-      this.waitAdapter.addPageWaitEl();
-
-      let cmpRef = this.appRef.bootstrap(factory);
-
-      SkyWaitService.waitComponent = cmpRef.instance;
-    }
+  private setWaitComponentProperties(isBlocking: boolean) {
     if (isBlocking) {
       SkyWaitService.waitComponent.hasBlockingWait = true;
       SkyWaitService.pageWaitBlockingCount++;
@@ -74,6 +65,30 @@ export class SkyWaitService {
     }
   }
 
+  private beginPageWait(isBlocking: boolean) {
+    if (!SkyWaitService.waitComponent) {
+      /*
+          Dynamic component creation needs to be done in a timeout to prevent ApplicationRef from
+          crashing when wait service is called in Angular lifecycle functions.
+      */
+      setTimeout(() => {
+        let factory = this.resolver.resolveComponentFactory(SkyWaitPageComponent);
+
+        this.waitAdapter.addPageWaitEl();
+
+        let cmpRef = this.appRef.bootstrap(factory);
+
+        SkyWaitService.waitComponent = cmpRef.instance;
+
+        this.setWaitComponentProperties(isBlocking);
+      });
+
+    } else {
+      this.setWaitComponentProperties(isBlocking);
+    }
+
+  }
+
   private endPageWait(isBlocking: boolean) {
     if (SkyWaitService.waitComponent) {
       if (isBlocking) {

src/scss/_variables.scss

@@ -180,7 +180,7 @@ $sky-toolbar-min-height: 49px;
 
 // begin wait
 $sky-wait-color: $sky-color-blue !default;
-$sky-wait-mask-color: $sky-color-white !default;
+$sky-wait-mask-color: rgba(255, 255, 255, 0.7) !default;
 $sky-page-wait-z-index: 2000 !default;
 // end wait