Tuesday, August 27, 2019

How do I unit test an Angular component that has Angular Materials in it.

In the imports in the test use ReactiveFormsModule (and maybe BrowserAnimationsModule too).

 
 

Addendum 9/7/2019: I think it might be MaterialModule that you have to loop in.

 
 

Addendum 9/10/2019: MaterialModule herein, which I saw in a friend's application, is likely something that only exists in her application. That module probably imports a great deal of things from '@angular/material' such as: MatInputModule, MatGridListModule, MatTooltipModule, MatBadgeModule, MatButtonModule, MatDialogModule, MatToolbarModule, MatSidenavModule, MatIconModule, MatListModule, MatCardModule, MatProgressBarModule, MatPaginatorModule, MatSortModule, MAT_DIALOG_DEFAULT_OPTIONS, MatProgressSpinnerModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule, MatCheckboxModule, MatRadioModule, MatExpansionModule, MatAutocompleteModule, MatSnackBarModule, MatTableModule, and MatStepperModule. In other words, you need to import that thing from '@angular/material' that your particular module really needs to not break. Everything but MAT_DIALOG_DEFAULT_OPTIONS fills the list of imports and exports at MaterialModule. This has some notes on MAT_DIALOG_DEFAULT_OPTIONS and the hasBackdrop option for example sets or prevents a transparent background behind a modal. MAT_DIALOG_DEFAULT_OPTIONS goes in the providers like so:

{ provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: true } }

No comments:

Post a Comment