feat(components/tiles): add inline help support for tile dashboard (#563)

* feat(components/tiles): add inline help support for tile dashboard

* Add providers to tests

* Add coverage

Author: johnhwhite

apps/e2e/tiles-storybook/project.json

@@ -7,6 +7,7 @@
       "executor": "@angular-devkit/build-angular:browser",
       "outputs": ["{options.outputPath}"],
       "options": {
+        "allowedCommonJsDependencies": ["dragula", "ng2-dragula"],
         "outputPath": "dist/apps/e2e/tiles-storybook",
         "index": "apps/e2e/tiles-storybook/src/index.html",
         "main": "apps/e2e/tiles-storybook/src/main.ts",

apps/e2e/tiles-storybook/src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Route, RouterModule } from '@angular/router';
 
 import { AppComponent } from './app.component';
@@ -21,6 +22,7 @@ if (routes.length > 0 && routes.findIndex((r) => r.path === '') === -1) {
   declarations: [AppComponent],
   imports: [
     BrowserModule,
+    NoopAnimationsModule,
     RouterModule.forRoot(routes, { initialNavigation: 'enabledBlocking' }),
   ],
   bootstrap: [AppComponent],

apps/e2e/tiles-storybook/src/app/tile-dashboard/tile-dashboard.component.spec.ts

@@ -1,4 +1,9 @@
-import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { TileDashboardComponent } from './tile-dashboard.component';
@@ -33,9 +38,8 @@ describe('TileDashboardComponent', () => {
 
   it('should create', fakeAsync(() => {
     expect(component).toBeTruthy();
-    fixture.detectChanges();
-    fixture.whenStable().then(() => {
-      expect(component.ready$.getValue()).toBeTruthy();
-    });
+    component.ngAfterViewInit();
+    tick();
+    expect(component.ready$.getValue()).toBeTruthy();
   }));
 });

apps/e2e/tiles-storybook/src/app/tile-dashboard/tile-dashboard.component.ts

@@ -5,6 +5,7 @@ import { BehaviorSubject } from 'rxjs';
 
 import { Tile1Component } from './tile1/tile1.component';
 import { Tile2Component } from './tile2/tile2.component';
+import { TileParameters } from './tile-parameters.token';
 
 @Component({
   selector: 'app-tile-dashboard',
@@ -17,10 +18,54 @@ export class TileDashboardComponent implements AfterViewInit {
       {
         id: 'tile1',
         componentType: Tile1Component,
+        providers: [
+          {
+            provide: TileParameters,
+            useValue: {
+              tileName: 'Tile 1',
+              showInlineHelp: false,
+            },
+          },
+        ],
       },
       {
         id: 'tile2',
         componentType: Tile2Component,
+        providers: [
+          {
+            provide: TileParameters,
+            useValue: {
+              tileName: 'Tile 2',
+              showInlineHelp: false,
+            },
+          },
+        ],
+      },
+      {
+        id: 'tile3',
+        componentType: Tile1Component,
+        providers: [
+          {
+            provide: TileParameters,
+            useValue: {
+              tileName: 'Tile 3',
+              showInlineHelp: true,
+            },
+          },
+        ],
+      },
+      {
+        id: 'tile4',
+        componentType: Tile2Component,
+        providers: [
+          {
+            provide: TileParameters,
+            useValue: {
+              tileName: 'Tile 4',
+              showInlineHelp: true,
+            },
+          },
+        ],
       },
     ],
     layout: {
@@ -34,6 +79,14 @@ export class TileDashboardComponent implements AfterViewInit {
             id: 'tile1',
             isCollapsed: true,
           },
+          {
+            id: 'tile3',
+            isCollapsed: true,
+          },
+          {
+            id: 'tile4',
+            isCollapsed: true,
+          },
         ],
       },
       multiColumn: [
@@ -43,6 +96,14 @@ export class TileDashboardComponent implements AfterViewInit {
               id: 'tile1',
               isCollapsed: true,
             },
+            {
+              id: 'tile3',
+              isCollapsed: true,
+            },
+            {
+              id: 'tile4',
+              isCollapsed: true,
+            },
           ],
         },
         {

apps/e2e/tiles-storybook/src/app/tile-dashboard/tile-dashboard.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { SkyHelpInlineModule } from '@skyux/indicators';
 import { SkyTilesModule } from '@skyux/tiles';
 
 import { Tile1Component } from './tile1/tile1.component';
@@ -10,7 +11,12 @@ import { TileDashboardComponent } from './tile-dashboard.component';
 const routes: Routes = [{ path: '', component: TileDashboardComponent }];
 @NgModule({
   declarations: [TileDashboardComponent, Tile1Component, Tile2Component],
-  imports: [CommonModule, RouterModule.forChild(routes), SkyTilesModule],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    SkyTilesModule,
+    SkyHelpInlineModule,
+  ],
   exports: [TileDashboardComponent],
 })
 export class TileDashboardModule {}

apps/e2e/tiles-storybook/src/app/tile-dashboard/tile-parameters.token.ts

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+
+import { TileParametersType } from './tile-parameters.type';
+
+export const TileParameters = new InjectionToken<TileParametersType>(
+  'TileParameters'
+);

apps/e2e/tiles-storybook/src/app/tile-dashboard/tile-parameters.type.ts

@@ -0,0 +1,4 @@
+export type TileParametersType = {
+  tileName: string;
+  showInlineHelp: boolean;
+};

apps/e2e/tiles-storybook/src/app/tile-dashboard/tile1/tile1.component.html

@@ -1,5 +1,11 @@
 <sky-tile (settingsClick)="tileSettingsClick()">
-  <sky-tile-title> Tile 1 </sky-tile-title>
+  <sky-tile-title>
+    {{ tileParameters.tileName }}
+    <sky-help-inline
+      *ngIf="tileParameters.showInlineHelp"
+      class="sky-control-help"
+    ></sky-help-inline>
+  </sky-tile-title>
   <sky-tile-summary> $123.4m </sky-tile-summary>
   <sky-tile-content>
     <sky-tile-content-section> Section 1 </sky-tile-content-section>

apps/e2e/tiles-storybook/src/app/tile-dashboard/tile1/tile1.component.spec.ts

@@ -2,14 +2,15 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { TileDashboardModule } from '../tile-dashboard.module';
+import { TileParameters } from '../tile-parameters.token';
 
 import { Tile1Component } from './tile1.component';
 
 describe('Tile1Component', () => {
   let component: Tile1Component;
   let fixture: ComponentFixture<Tile1Component>;
 
-  beforeEach(async () => {
+  beforeEach(() => {
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
       value: jest.fn().mockImplementation((query) => ({
@@ -24,12 +25,19 @@ describe('Tile1Component', () => {
       })),
     });
 
-    await TestBed.configureTestingModule({
+    TestBed.configureTestingModule({
       imports: [NoopAnimationsModule, TileDashboardModule],
-    }).compileComponents();
-  });
+      providers: [
+        {
+          provide: TileParameters,
+          useValue: {
+            tileName: 'Test Tile',
+            showInlineHelp: false,
+          },
+        },
+      ],
+    });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(Tile1Component);
     component = fixture.componentInstance;
     fixture.detectChanges();

apps/e2e/tiles-storybook/src/app/tile-dashboard/tile1/tile1.component.ts

@@ -1,11 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+
+import { TileParameters } from '../tile-parameters.token';
+import { TileParametersType } from '../tile-parameters.type';
 
 @Component({
   selector: 'app-tile1',
   templateUrl: './tile1.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Tile1Component {
+  constructor(
+    @Inject(TileParameters) public tileParameters: TileParametersType
+  ) {}
+
   public tileSettingsClick() {
     console.log('Tile settings clicked!');
   }