Skip to content

Instantly share code, notes, and snippets.

@renevall
Created January 27, 2017 05:52
Show Gist options
  • Save renevall/24e980c2a8442d9daaf187debd2d4369 to your computer and use it in GitHub Desktop.
Save renevall/24e980c2a8442d9daaf187debd2d4369 to your computer and use it in GitHub Desktop.
Testing Dialog having it in a shared module
<h1 md-dialog-title>Would you like to order pizza?</h1>
<md-dialog-actions>
<button (click)="dialogRef.close('yes')">Yes</button>
<button md-dialog-close>No</button>
</md-dialog-actions>
import { Component, OnInit } from '@angular/core';
import { MdDialogRef } from '@angular/material';
@Component({
selector: 'app-confirm-dialog',
templateUrl: './confirm-dialog.component.html',
styleUrls: ['./confirm-dialog.component.scss']
})
export class ConfirmDialogComponent implements OnInit {
constructor(public dialogRef: MdDialogRef<ConfirmDialogComponent>) { }
ngOnInit() {
}
}
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { By, BrowserModule } from '@angular/platform-browser';
import { DebugElement, NgModule } from '@angular/core';
import { MdDialogModule, MdDialog, OverlayContainer, MaterialModule } from '@angular/material';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { ConfirmDialogComponent } from './confirm-dialog.component';
import { SharedModule } from '../shared.module';
@NgModule({
declarations: [ConfirmDialogComponent],
exports: [ConfirmDialogComponent],
entryComponents: [ConfirmDialogComponent],
imports: [MdDialogModule],
})
class DialogTestModule { }
describe('ConfirmDialogComponent', () => {
let component: ConfirmDialogComponent;
let dialog: MdDialog;
let overlayContainerElement: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [DialogTestModule, MdDialogModule.forRoot()],
providers: [
{
provide: OverlayContainer, useFactory: () => {
overlayContainerElement = document.createElement('div');
return { getContainerElement: () => overlayContainerElement };
}
}
],
})
.compileComponents();
}));
beforeEach(() => {
dialog = TestBed.get(MdDialog);
let dialogRef = dialog.open(ConfirmDialogComponent);
component = dialogRef.componentInstance;
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { AuthService } from './shared/auth.service';
import { AlertService } from './shared/alert.service';
import { ToolbarService } from './shared/toolbar.service';
// Material
import { MaterialModule } from '@angular/material';
// Layout
import { FlexLayoutModule } from '@angular/flex-layout';
// Shared
import { SharedModule } from './shared/shared.module';
// Auth
import { AuthModule } from './auth/auth.module';
// Admin
import { AdminModule } from './admin/admin.module';
// Covalent
import { CovalentDataTableModule } from '@covalent/core';
import 'hammerjs';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MaterialModule.forRoot(),
FlexLayoutModule.forRoot(),
SharedModule,
routing,
HomeModule,
LawModule,
AuthModule,
AdminModule,
CovalentDataTableModule.forRoot(),
],
providers: [MenuService, AlertService, AuthService, ToolbarService],
bootstrap: [AppComponent]
})
export class AppModule { }
import { NgModule, } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TitleCasePipe, TruncatePipe } from './';
// Material
import { MaterialModule } from '@angular/material';
// Layout
import { FlexLayoutModule } from '@angular/flex-layout';
import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
// Covalent
import { CovalentDataTableModule } from '@covalent/core';
@NgModule({
imports: [CommonModule, MaterialModule, FormsModule, FlexLayoutModule, CovalentDataTableModule, ReactiveFormsModule],
exports: [TitleCasePipe, TruncatePipe, MaterialModule, FormsModule, FlexLayoutModule, CovalentDataTableModule, ReactiveFormsModule],
declarations: [TitleCasePipe, TruncatePipe, ConfirmDialogComponent],
entryComponents: [ConfirmDialogComponent],
providers: [],
})
export class SharedModule { }
@merlosy
Copy link

merlosy commented Mar 3, 2017

Small change (maybe) in recent version that cost me a few hairs: md-dialog-actionsis actually a directive.
My tests failed until I did this:

<h1 md-dialog-title>Would you like to order pizza?</h1>
<div md-dialog-actions>
    <button md-button (click)="dialogRef.close('yes')">Yes</button>
    <button md-raised-button md-dialog-close>No</button>
</div>

@stephengeorgewest-navitaire

MaterialModule.forRoot() complained for me ("forRoot doesn't exist... something, something"). It worked when skipped any mention of it in main.module.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment