NullinjectorError：没有MatDialogRef提供程序！角测试

Question

我是angular和jhipster的新手，我已经编辑了登录组件，添加了formbuilder和MatDialogRef，并更新了单元测试：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
/* Other imports */

@Component({
  selector: 'jhi-login-modal',
  templateUrl: './login.component.html',
  styleUrls: ['login.scss']
})
export class JhiLoginModalComponent implements OnInit {
  authenticationError: boolean;
  hide = true;
  loginForm: FormGroup;

  constructor(
    private readonly eventManager: JhiEventManager,
    private readonly loginService: LoginService,
    private readonly stateStorageService: StateStorageService,
    private readonly router: Router,
    private readonly fb: FormBuilder,
    private readonly dialogRef: MatDialogRef<JhiLoginModalComponent>
  ) {}

  ngOnInit(): void {
    this.loginForm = this.fb.group({
      username: ['', Validators.required],
      password: ['', Validators.required],
      rememberMe: true
    });
  }
 /* Rest of code */
}

import {ComponentFixture, TestBed, async, inject, fakeAsync, tick} from '@angular/core/testing';
import {FormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
import {JhiEventManager} from 'ng-jhipster';
import {JhiLoginModalComponent} from 'app/shared/login/login.component';
import {StateStorageService} from 'app/core/auth/state-storage.service';
import {BatimentTestModule} from '../../../test.module';
import {MockLoginService} from '../../../helpers/mock-login.service';
import {MockStateStorageService} from '../../../helpers/mock-state-storage.service';
import {MatDialogModule, MatDialogRef} from '@angular/material/dialog';


describe('Component Tests', () => {
  describe('LoginComponent', () => {
    let comp: JhiLoginModalComponent;
    let fixture: ComponentFixture<JhiLoginModalComponent>;
    // create new instance of FormBuilder
    const formBuilder: FormBuilder = new FormBuilder();
    let mockLoginService: any;
    let mockStateStorageService: any;
    let mockRouter: any;
    let mockEventManager: any;
    let mockActiveModal: any;

    beforeEach(async(() => {
      TestBed.configureTestingModule({
        imports: [BatimentTestModule, ReactiveFormsModule, MatDialogModule],
        declarations: [JhiLoginModalComponent],
        providers: [
          {
            provide: LoginService,
            useClass: MockLoginService
          },
          {
            provide: StateStorageService,
            useClass: MockStateStorageService
          },
          {
            provide: FormBuilder,
            useValue: formBuilder
          },
          {provide: MatDialogRef,
            useValue: {}}
        ]
      })
        .overrideTemplate(JhiLoginModalComponent, '')
        .compileComponents();
    }));

    beforeEach(() => {
      fixture = TestBed.createComponent(JhiLoginModalComponent);
      comp = fixture.componentInstance;
      console.log(comp);
      comp.loginForm = formBuilder.group({
        username: ['', Validators.required],
        password: ['', Validators.required],
        rememberMe: true
      });
      comp.ngOnInit();
      fixture.detectChanges();
      mockLoginService = fixture.debugElement.injector.get(LoginService);
      mockStateStorageService = fixture.debugElement.injector.get(StateStorageService);
      mockRouter = fixture.debugElement.injector.get(Router);
      mockEventManager = fixture.debugElement.injector.get(JhiEventManager);
      mockActiveModal = fixture.debugElement.injector.get(NgbActiveModal);
    });

    it('should authenticate the user upon login when previous state was set', inject(
      [],
      fakeAsync(() => {
        // GIVEN
        const credentials = {
          username: 'admin',
          password: 'admin',
          rememberMe: true
        };

        comp.loginForm.patchValue({
          username: 'admin',
          password: 'admin',
          rememberMe: true
        });
        mockLoginService.setResponse({});
        mockStateStorageService.setResponse('admin/users?page=0');

        // WHEN/
        comp.login();
        tick(); // simulate async

        // THEN
        expect(comp.authenticationError).toEqual(false);
        expect(mockActiveModal.dismissSpy).toHaveBeenCalledWith('login success');
        expect(mockEventManager.broadcastSpy).toHaveBeenCalledTimes(1);
        expect(mockLoginService.loginSpy).toHaveBeenCalledWith(credentials);
        expect(mockStateStorageService.getUrlSpy).toHaveBeenCalledTimes(1);
        expect(mockStateStorageService.storeUrlSpy).toHaveBeenCalledWith(null);
        expect(mockRouter.navigateByUrlSpy).toHaveBeenCalledWith('admin/users?page=0');
      })
    ));
 /* Other tests */
});

Answer 1

在构造函数中使用MatDialogRef，因此应该在spec.ts中添加provider

        providers: [
        {provide: MatDialogRef, useValue: {}},
        {provide: MAT_DIALOG_DATA, useValue: []},
    ]

完整代码

import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material';
//...

    beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [JhiLoginModalComponent],
        imports: [
            TranslateModule.forRoot(),
            MatDialogModule,
            BrowserDynamicTestingModule
        ],
        providers: [
            {provide: MatDialogRef, useValue: {}},
            {provide: MAT_DIALOG_DATA, useValue: []},
        ]
    })
        .compileComponents();
}));