>

각 CLI 프로젝트가 설정되어 있습니다. <md-card> 와 같은 각도 재료 구성 요소를 사용하는 양식을 만들었습니다. .

각도 문서 .

이것은 내 컴포넌트 템플릿입니다 :

<md-card [ngClass]="'dialog-card'">
<md-card-title [ngClass]="'dialog-title'">
    {{title}}
</md-card-title>
<md-card-content>
    <form (ngSubmit)="login()" #loginForm="ngForm">
        <md-input-container class="md-block">
            <input md-input [(ngModel)]="user.email" 
                name="userEmail" type="email" placeholder="Email" 
                ngControl="userEmail" 
            required>
        </md-input-container>
        <br>
        <md-input-container class="md-block">
            <input md-input [(ngModel)]="user.password" 
                name="userPassword" type="password" placeholder="Password" 
                ngControl="userPassword" 
            required>
        </md-input-container>
        <br>
        <tm-message msgText="Wrong username or password" *ngIf="showError"></tm-message>
        <br>

        <button md-button type="submit" [disabled]="!loginForm.form.valid">Login</button>
        <p (click)="openForgotPasswordModal()">Forgot Password?</p>
    </form>
</md-card-content>

이것은 나의 업장 사양입니다 :

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';
import { MaterialModule, MdDialogRef, MdDialog  } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { TmLoginComponent } from './tm-login.component';
import { TmMessageComponent } from '../../shared/components/tm-message.component';
import { UserAuthenticationService } from '../login/user-authentication.service';
describe('TmLoginComponent (inline template)', () => {
let comp: TmLoginComponent;
let fixture: ComponentFixture < TmLoginComponent > ;
let de: DebugElement;
let el: HTMLElement;
beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [TmLoginComponent, TmMessageComponent], // declare the test component
        imports: [MaterialModule, FormsModule,
            RouterTestingModule.withRoutes(
                [{
                    path: 'login',
                    component: TmLoginComponent
                }, ])
        ],
        providers: [UserAuthenticationService],
    });
    fixture = TestBed.createComponent(TmLoginComponent);
    comp = fixture.componentInstance; // TmLoginComponent test instance
    // query for the title <h1> by CSS element selector
    de = fixture.debugElement.query(By.css('.title'));
    el = de.nativeElement;
});
    it('should display original title', () => {
        fixture.detectChanges();
        expect(el.textContent).toContain(comp.title);
    });
});

이제 제목이 제대로 표시되는지 기본 단위 테스트를 실행하려고합니다.

그러나 재료 별 오류가 많이 발생합니다. 좋아요

No provider for MdDialog.

링크를 클릭하면 md 대화 상자가 열립니다. 이 코드는 (꽤 긴) .ts 파일에 있지만 여기서는 문제가되지 않습니다.

테스트 베드에서 MdDialog를 어디에 추가합니까? 제공자에 추가하면 "오버 레이더 제공자 없음"이라는 오류가 발생합니다. 문제를 해결하는 방법을 모르겠습니다.

시작할 때 모든 재료 구성 요소를 포함하도록 카르마를 구성 할 수있는 방법이 있습니까?

감사합니다.

  • 답변 # 1

    forRoot() 에 전화하여 모든 제공자를 제공합니다  모듈에서

    imports: [ MaterialModule.forRoot() ]
    
    

    2.0.0-beta.4 버전  그리고 나중에 ( forRoot 이후  메소드가 제거되었습니다) :

    imports: [ MaterialModule ]
    
    

    2.0.0-beta.11 버전  나중에 MaterialModule 이후  테스트 케이스에 필요한 모듈을 직접 가져와야합니다.

    imports: [ MatButtonModule, MatDialogModule ]
    
    

  • 답변 # 2

    현재의 기술은 MaterialModule 와 같이 앵귤러 머티리얼 모듈의 개별 수입을 요구합니다  더 이상 사용되지 않으며 2.0.0-beta.11에서 제거되었습니다.

    import {
        MatButtonModule,
        MatIconModule
    } from '@angular/material';
    
    

    그런 다음 TestBed 구성에서 가져 오기와 동일한 목록을 추가하십시오.

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ ... ],
            imports: [
                MatButtonModule,
                MatIconModule,
                ...
            ],
            providers: [ ... ]
        })
            .compileComponents();
    }));
    
    

  • 답변 # 3

    오늘도이 문제로 어려움을 겪고 있으며 자스민의 공급자를 사용하여 필요한 클래스를 직접 조롱해야합니다. 번거롭고 더 좋은 방법이 있었지만 더 이상 오류가 없어야합니다 ...

    누군가 더 좋은 아이디어가 있다면, 나머지 지역 사회를 밝히십시오!

    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
    import { AlertDialogComponent } from './alert-dialog.component';
    import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
    describe('AlertDialogComponent', () => {
      let component: AlertDialogComponent;
      let fixture: ComponentFixture<AlertDialogComponent>;
      beforeEach(async(() => {
        TestBed.configureTestingModule({
          imports: [MatDialogModule],
          declarations: [AlertDialogComponent],
          providers: [
            {
              provide: MatDialogRef, useValue: {}
            },
            {
              provide: MAT_DIALOG_DATA, useValue:{}
            }
         ],
        }).compileComponents();
      }));
    
    

관련 자료

  • 이전 javascript - 플래시를 사용하지 않고 선택한 텍스트를 클립 보드에 복사 - 크로스 브라우저 여야합니다
  • 다음 컨테이너를 시작하지 않고 도커 이미지를 rootfs로 내보내는 방법은 무엇입니까?