Fixed bug where tile was not rendered properly when a parent used OnPush change detection strategy

src/modules/testing/matchers.ts

@@ -17,8 +17,8 @@ let skyMatchers: jasmine.CustomMatcherFactories = {
         result.pass = getComputedStyle(el).display !== 'none';
 
         result.message = result.pass ?
-          'Expected element to not be visible' :
-          'Expected element to be visible';
+          'Expected element to not be visible.' :
+          'Expected element to be visible.';
 
         return result;
       }
@@ -42,8 +42,8 @@ let skyMatchers: jasmine.CustomMatcherFactories = {
         result.pass = actualText === expectedText;
 
         result.message = result.pass ?
-          'Expected element\'s inner text not to be ' + expectedText :
-          'Expected element\'s inner text to be ' + expectedText;
+          `Expected element's inner text not to be '${expectedText}'.` :
+          `Expected element's inner text '${actualText}' to be '${expectedText}'.`;
 
         return result;
       }
@@ -65,8 +65,8 @@ let skyMatchers: jasmine.CustomMatcherFactories = {
         result.pass = el.classList.contains(expectedCls);
 
         result.message = result.pass ?
-          'Expected element not to have CSS class ' + expectedCls :
-          'Expected element to have CSS class ' + expectedCls;
+          `Expected element not to have CSS class ${expectedCls}.` :
+          `Expected element to have CSS class ${expectedCls}.`;
 
         return result;
       }
@@ -91,8 +91,8 @@ let skyMatchers: jasmine.CustomMatcherFactories = {
               }
 
               result.message += result.pass ?
-                'Expected element not to have CSS style ' + p + ': ' + expectedStyle :
-                'Expected element to have CSS style ' + p + ': ' + expectedStyle;
+                `Expected element not to have CSS style '${p}: ${expectedStyle}'.` :
+                `Expected element to have CSS style '${p}: ${expectedStyle}'.`;
             }
           }
         }
@@ -113,8 +113,8 @@ let skyMatchers: jasmine.CustomMatcherFactories = {
         result.pass = !!el;
 
         result.message = result.pass ?
-          'Expected element not to exist' :
-          'Expected element to exist';
+          'Expected element not to exist.' :
+          'Expected element to exist.';
 
         return result;
       }

src/modules/tiles/tile-dashboard/fixtures/index.ts

@@ -2,6 +2,7 @@ export { MockDragulaService } from './mock-dragula.service';
 export { Tile1TestComponent } from './tile1.component.fixture';
 export { Tile2TestComponent } from './tile2.component.fixture';
 export { TileDashboardTestComponent } from './tile-dashboard.component.fixture';
+export { TileDashboardOnPushTestComponent } from './tile-dashboard-on-push.component.fixture';
 export { TileTestContext } from './tile-context.fixture';
 export { MockTileDashboardService } from './mock-tile-dashboard.service';
 export { SkyTileDashboardFixturesModule } from './tile-dashboard-fixtures.module';

src/modules/tiles/tile-dashboard/fixtures/tile-dashboard-fixtures.module.ts

@@ -5,12 +5,14 @@ import { SkyTilesModule } from '../..';
 import { Tile1TestComponent } from './tile1.component.fixture';
 import { Tile2TestComponent } from './tile2.component.fixture';
 import { TileDashboardTestComponent } from './tile-dashboard.component.fixture';
+import { TileDashboardOnPushTestComponent } from './tile-dashboard-on-push.component.fixture';
 
 @NgModule({
   declarations: [
     Tile1TestComponent,
     Tile2TestComponent,
-    TileDashboardTestComponent
+    TileDashboardTestComponent,
+    TileDashboardOnPushTestComponent
   ],
   imports: [
     CommonModule,
@@ -19,7 +21,8 @@ import { TileDashboardTestComponent } from './tile-dashboard.component.fixture';
   exports: [
     Tile1TestComponent,
     Tile2TestComponent,
-    TileDashboardTestComponent
+    TileDashboardTestComponent,
+    TileDashboardOnPushTestComponent
   ],
   entryComponents: [
     Tile1TestComponent,

src/modules/tiles/tile-dashboard/fixtures/tile-dashboard-on-push.component.fixture.ts

@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+
+import { SkyTileDashboardComponent, SkyTileDashboardConfig } from '../../../tiles';
+import { Tile1TestComponent } from './tile1.component.fixture';
+import { Tile2TestComponent } from './tile2.component.fixture';
+
+import { TileTestContext } from './tile-context.fixture';
+
+@Component({
+  selector: 'sky-demo-app',
+  templateUrl: './tile-dashboard.component.fixture.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TileDashboardOnPushTestComponent {
+  @ViewChild(SkyTileDashboardComponent)
+  public dashboardComponent: SkyTileDashboardComponent;
+
+  public dashboardConfig: SkyTileDashboardConfig;
+
+  constructor() {
+    this.dashboardConfig = {
+      tiles: [
+        {
+          id: 'sky-test-tile-1',
+          componentType: Tile1TestComponent
+        },
+        {
+          id: 'sky-test-tile-2',
+          componentType: Tile2TestComponent,
+          providers: [
+            {
+              provide: TileTestContext,
+              useValue: {
+                id: 3
+              }
+            }
+          ]
+        }
+      ],
+      layout: {
+        singleColumn: {
+          tiles: [
+            {
+              id: 'sky-test-tile-2',
+              isCollapsed: false
+            },
+            {
+              id: 'sky-test-tile-1',
+              isCollapsed: true
+            }
+          ]
+        },
+        multiColumn: [
+          {
+            tiles: [
+              {
+                id: 'sky-test-tile-1',
+                isCollapsed: true
+              }
+            ]
+          },
+          {
+            tiles: [
+              {
+                id: 'sky-test-tile-2',
+                isCollapsed: false
+              }
+            ]
+          }
+        ]
+      }
+    };
+  }
+}

src/modules/tiles/tile-dashboard/fixtures/tile1.component.fixture.html

@@ -1,4 +1,4 @@
 <sky-tile (settingsClick)="tileSettingsClick()">
-  <sky-tile-title>Title</sky-tile-title>
+  <sky-tile-title>{{ title }}</sky-tile-title>
   <sky-tile-content>Content</sky-tile-content>
 </sky-tile>

src/modules/tiles/tile-dashboard/fixtures/tile1.component.fixture.ts

@@ -11,5 +11,7 @@ export class Tile1TestComponent {
   @ViewChild(SkyTileComponent)
   public tile: SkyTileComponent;
 
+  public title = 'Tile 1';
+
   public tileSettingsClick() { }
 }

src/modules/tiles/tile-dashboard/tile-dashboard.component.spec.ts

@@ -17,7 +17,8 @@ import {
   SkyTileDashboardFixturesModule,
   Tile1TestComponent,
   Tile2TestComponent,
-  TileDashboardTestComponent
+  TileDashboardTestComponent,
+  TileDashboardOnPushTestComponent
 } from './fixtures';
 
 describe('Tile dashboard component', () => {
@@ -309,4 +310,29 @@ describe('Tile dashboard component', () => {
       expect(tileComponentRef.instance.context.id).toBe(3);
     })
   );
+
+  it(
+    `should render tiles properly when the parent component's change detection strategy is OnPush`,
+    fakeAsync(() => {
+      let fixture = TestBed.createComponent(TileDashboardOnPushTestComponent);
+
+      fixture.detectChanges();
+      tick();
+
+      // For some reason we have to run change detection twice for the tile to actually render.
+      fixture.detectChanges();
+      tick();
+
+      let cmp = fixture.componentInstance;
+
+      let tileComponentRef = cmp
+        .dashboardComponent
+        .dashboardService
+        .getTileComponent('sky-test-tile-1');
+
+      let tileEl = tileComponentRef.location.nativeElement;
+
+      expect(tileEl.querySelector('.sky-tile-title')).toHaveText('Tile 1');
+    })
+  );
 });

src/modules/tiles/tile-dashboard/tile-dashboard.service.ts

@@ -215,6 +215,10 @@ export class SkyTileDashboardService {
     let componentRef = column.content.createComponent(factory, undefined, injector);
 
     this.addTileComponent(layoutTile, componentRef);
+
+    // Make sure the component is marked for changes in case the parent component uses
+    // the OnPush change detection strategy.
+    componentRef.changeDetectorRef.markForCheck();
   }
 
   private moveTilesToSingleColumn() {