jkyoutsey

<my-child [item]="items"
          (clicked)="onClick($event)">
</my-child>

jkyoutsey

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ MyParentComponent ],
    schemas: [ NO_ERRORS_SCHEMA ]
  }).compileComponents();
}));

jkyoutsey

:host {
  /*
   * Ignore this smart-component wrapper, allowing us to position dumb child components
   * in the global CSS Grid layout!
   * Not supported in IE or Edge at all!
   * https: //caniuse.com/#search=display%3A%20contents
   */
  display: contents;
}

jkyoutsey

<app-a></app-a>
<app-b></app-b>

jkyoutsey

app-c {
  grid-area: purple;
}

jkyoutsey

<app-d></app-d>
<app-c></app-c>

jkyoutsey

app-root {
  padding: 1em;
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'blue green purple';

jkyoutsey

  it('can route if unguarded', () => {
    // Mock GuardedComponent.isGuarded = false, which returns true from canActivate()
    mockComponent.returnValue = true;
    expect(service.canDeactivate(mockComponent)).toBeTruthy();
  });

  it('will route if guarded and user accepted the dialog', () => {
    // Mock the behavior of the GuardedComponent:
    const subject$ = new Subject<boolean>();
    mockComponent.returnValue = subject$.asObservable();

jkyoutsey

describe('CanDeactivateGuardService', () => {
  let mockComponent: MockComponent;
  let service: CanDeactivateGuardService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        CanDeactivateGuardService,
        MockComponent
      ]

jkyoutsey

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { GuardedComponent } from './guarded/guarded.component';
import { CanDeactivateGuarded } from './can-deactivate-guarded';

@Injectable({
  providedIn: 'root'
})
export class CanDeactivateGuardService implements CanDeactivate<CanDeactivateGuarded> {
  canDeactivate(component: CanDeactivateGuarded) {