Animation unit tests (blackbaud#1339)

skyux-spa-visual-tests/src/app/colorpicker/colorpicker-visual.component.html

@@ -9,7 +9,7 @@
   </sky-colorpicker>
 </div>
 
-<div id="screenshot-colorpicker2">
+<div id="screenshot-colorpicker2" style="height:520px;padding:10px;">
   <sky-colorpicker #colorPickerExample2>
     <input
       [skyColorpickerInput]="colorPickerExample2"

skyux-spa-visual-tests/src/app/colorpicker/colorpicker.visual-spec.ts

@@ -24,7 +24,7 @@ describe('Colorpicker', () => {
         SkyVisualTest.moveCursorOffScreen();
         return SkyVisualTest.compareScreenshot({
           screenshotName: 'colorpicker-opened',
-          selector: '.sky-colorpicker-container',
+          selector: '#screenshot-colorpicker2',
           checkAccessibility: false
         });
       });

src/modules/animation/slide.spec.ts

@@ -0,0 +1,13 @@
+import { skyAnimationSlide } from './slide';
+
+describe('Animation slide', () => {
+  it('should define an animation trigger', () => {
+    const definitions: any = skyAnimationSlide.definitions;
+
+    expect(skyAnimationSlide.name).toEqual('skyAnimationSlide');
+    expect(definitions[0].name).toEqual('down');
+    expect(definitions[1].name).toEqual('up');
+    expect(definitions[2].expr).toEqual('up <=> down');
+    expect(definitions[2].animation.timings).toEqual('150ms ease-in');
+  });
+});

src/modules/animation/slide.ts

@@ -1,12 +1,13 @@
 import {
-  trigger,
+  animate,
+  AnimationEntryMetadata,
   state,
   style,
   transition,
-  animate
+  trigger
 } from '@angular/core';
 
-export default trigger('slide', [
+export const skyAnimationSlide = trigger('skyAnimationSlide', [
   state('down', style({
     overflow: 'hidden',
     height: '*'
@@ -19,4 +20,4 @@ export default trigger('slide', [
     'up <=> down',
     animate('150ms ease-in')
   )
-]) as any;
+]) as AnimationEntryMetadata;

src/modules/repeater/repeater-item.component.html

@@ -4,8 +4,8 @@
 >
 
   <div class="sky-repeater-item-left">
-    <sky-checkbox 
-      *ngIf="selectable" 
+    <sky-checkbox
+      *ngIf="selectable"
       class="sky-repeater-item-checkbox"
       [checked]="isSelected"
       [label]="'repeater_item_checkbox_label' | skyResources"
@@ -37,7 +37,7 @@ <h1 class="sky-repeater-item-title" #titleEl>
         </sky-chevron>
       </div>
     </header>
-    <div class="sky-repeater-item-content" [@slide]="slideDirection">
+    <div class="sky-repeater-item-content" [@skyAnimationSlide]="slideDirection">
       <ng-content select="sky-repeater-item-content"></ng-content>
     </div>
   </div>

src/modules/repeater/repeater-item.component.ts

@@ -1,13 +1,10 @@
 import {
-  animate,
   Component,
-  Input,
-  trigger,
-  state,
-  style,
-  transition
+  Input
 } from '@angular/core';
 
+import { skyAnimationSlide } from '../animation/slide';
+
 import { SkyRepeaterService } from './repeater.service';
 import { SkyLogService } from '../log/log.service';
 import { SkyCheckboxChange } from '../checkbox/checkbox.component';
@@ -16,20 +13,7 @@ import { SkyCheckboxChange } from '../checkbox/checkbox.component';
   selector: 'sky-repeater-item',
   styleUrls: ['./repeater-item.component.scss'],
   templateUrl: './repeater-item.component.html',
-  animations: [trigger('slide', [
-    state('down', style({
-      overflow: 'hidden',
-      height: '*'
-    })),
-    state('up', style({
-      overflow: 'hidden',
-      height: 0
-    })),
-    transition(
-      'up <=> down',
-      animate('150ms ease-in')
-    )
-  ])]
+  animations: [skyAnimationSlide]
 })
 export class SkyRepeaterItemComponent {
   public get isExpanded(): boolean {

src/modules/tiles/tile/tile.component.html

@@ -36,7 +36,7 @@ <h1 class="sky-tile-title">
       </div>
     </div>
   </header>
-  <div class="sky-tile-content" [@slide]="isCollapsed ? 'up' : 'down'">
+  <div class="sky-tile-content" [@skyAnimationSlide]="isCollapsed ? 'up' : 'down'">
     <ng-content select="sky-tile-content"></ng-content>
   </div>
 </section>

src/modules/tiles/tile/tile.component.ts

@@ -1,40 +1,22 @@
 import {
-  AfterViewInit,
-  animate,
   Component,
   ElementRef,
   EventEmitter,
   Input,
   Optional,
-  Output,
-  trigger,
-  state,
-  style,
-  transition
+  Output
 } from '@angular/core';
 
+import { skyAnimationSlide } from '../../animation/slide';
 import { SkyTileDashboardService } from '../tile-dashboard/tile-dashboard.service';
 
 @Component({
   selector: 'sky-tile',
   styleUrls: ['./tile.component.scss'],
   templateUrl: './tile.component.html',
-  animations: [trigger('slide', [
-    state('down', style({
-      overflow: 'hidden',
-      height: '*'
-    })),
-    state('up', style({
-      overflow: 'hidden',
-      height: 0
-    })),
-    transition(
-      'up <=> down',
-      animate('150ms ease-in')
-    )
-  ])]
+  animations: [skyAnimationSlide]
 })
-export class SkyTileComponent implements AfterViewInit {
+export class SkyTileComponent {
   public isInDashboardColumn = false;
 
   @Output()
@@ -59,15 +41,10 @@ export class SkyTileComponent implements AfterViewInit {
       this._isCollapsed = value;
     }
 
-    if (this.viewInitialized) {
-      this.slideForCollapsed(true);
-    }
-
     this.isCollapsedChange.emit(value);
   }
 
   private _isCollapsed = false;
-  private viewInitialized = false;
 
   constructor(
     public elementRef: ElementRef,
@@ -91,17 +68,4 @@ export class SkyTileComponent implements AfterViewInit {
   public chevronDirectionChange(direction: string) {
     this.isCollapsed = direction === 'down';
   }
-
-  public ngAfterViewInit() {
-    this.viewInitialized = true;
-
-    if (this.isCollapsed) {
-      this.slideForCollapsed(false);
-    }
-  }
-
-  private slideForCollapsed(animate: boolean) {
-    // let direction = this.isCollapsed ? 'up' : 'down';
-    // this.slideService.slide(this.elementRef, '.sky-tile-content', direction, animate);
-  }
 }