Javascript 如何在单元测试中注入Input（）？

所以我尝试对一个组件进行一些单元测试。但是我对Input（）参数有一些问题。然后特别是组件中的一个组件

所以我有这个组件：

export class EcheqDisplayComponent implements OnInit {
  echeq: EcheqSubmissionApi;


  constructor(
    private route: ActivatedRoute
  ) {
    this.echeq = this.route.snapshot.data['submission'];
  }

  ngOnInit() {
  }

  getAnswers(page: EcheqPageApi): any[] {
    return page.elements.map(element => this.echeq.answers[element.name]);
  }
}

以及模板：

<div class="echeq-display" *ngIf="echeq">
  <header class="echeq-display-header header">
    <div class="echeq-display-info">
      <h1 class="heading echeq-display-heading">
        {{ echeq.definition.title }}
      </h1>
      <div class="sub-heading echeq-display-subheading">
        <span class="echeq-display-creator">
          Toegekend door:
          {{ echeq.assignedByProfName ? echeq.assignedByProfName : 'Het Systeem' }}
        </span>
        <span class="echeq-display-date">{{
          echeq.definition.createdOnUtc | date: 'dd MMM'
        }}</span>
      </div>
    </div>
    <app-meta-box
      [metadata]="{
        numPages: echeq.definition.numPages,
        vPoints: echeq.definition.awardedVPoints
      }"
    ></app-meta-box>
  </header>
  <main class="echeq-display-questions body">
    <app-echeq-question
      *ngFor="let page of echeq.definition.pages; let i = index"
      [page]="page"
      [readonly]="true"
      [number]="i + 1"
      [answers]="getAnswers(page)"
    ></app-echeq-question>
  </main>
</div>

这是模拟类：

export class MockActivatedRoute {
  public snapshot = {
      data: {
         submission: {
           answers: {}
         }
      }
  };
}

我现在是这样的：

export class MetaData {
  numPages: number;
  vPoints: number;
}

@Component({
  selector: 'app-meta-box',
  templateUrl: './meta-box.component.html',
  styleUrls: ['./meta-box.component.scss']
})
export class MetaBoxComponent implements OnInit {
  @Input() metadata: MetaData;

  constructor() {}

  ngOnInit() {}

}

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EcheqDisplayComponent } from './echeq-display.component';
import { ParticipantEcheqModule } from '../../participant-echeq.module';
import { RouterModule, ActivatedRoute } from '@angular/router';
import { MockActivatedRoute } from 'src/app/shared/mocks/MockActivatedRoute';
import { MetaData } from '../meta-box/meta-box.component';

describe('EcheqDisplayComponent', () => {
  let component: EcheqDisplayComponent;
  let fixture: ComponentFixture<EcheqDisplayComponent>;
  const metaData: MetaData = new MetaData();
  // const metaDataInfo = fixture.debugElement.componentInstance;


  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ],
      providers: [
        { provide: ActivatedRoute, useValue: new MockActivatedRoute().withData({submission:{ answers:{} } }) }
      ],
      imports:[
        ParticipantEcheqModule
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EcheqDisplayComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  fit('should create component', () => {
    component.echeq = {
      definition: {
        title: 'test title',
        awardedVPoints: 0,
        numPages: 9
      }
   }
    expect(component).toBeTruthy();
  });
});

But then I get this error:

fit('should create component', () => {
    component.echeq = {
      definition: {
        title: 'test title',
        awardedVPoints: 0,
        numPages:9
      }
    } as EcheqSubmissionApi;
    expect(component).toBeTruthy();
  });

我现在是这样的：

export class MetaData {
  numPages: number;
  vPoints: number;
}

@Component({
  selector: 'app-meta-box',
  templateUrl: './meta-box.component.html',
  styleUrls: ['./meta-box.component.scss']
})
export class MetaBoxComponent implements OnInit {
  @Input() metadata: MetaData;

  constructor() {}

  ngOnInit() {}

}

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EcheqDisplayComponent } from './echeq-display.component';
import { ParticipantEcheqModule } from '../../participant-echeq.module';
import { RouterModule, ActivatedRoute } from '@angular/router';
import { MockActivatedRoute } from 'src/app/shared/mocks/MockActivatedRoute';
import { MetaData } from '../meta-box/meta-box.component';

describe('EcheqDisplayComponent', () => {
  let component: EcheqDisplayComponent;
  let fixture: ComponentFixture<EcheqDisplayComponent>;
  const metaData: MetaData = new MetaData();
  // const metaDataInfo = fixture.debugElement.componentInstance;


  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ],
      providers: [
        { provide: ActivatedRoute, useValue: new MockActivatedRoute().withData({submission:{ answers:{} } }) }
      ],
      imports:[
        ParticipantEcheqModule
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EcheqDisplayComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  fit('should create component', () => {
    component.echeq = {
      definition: {
        title: 'test title',
        awardedVPoints: 0,
        numPages: 9
      }
   }
    expect(component).toBeTruthy();
  });
});

But then I get this error:

fit('should create component', () => {
    component.echeq = {
      definition: {
        title: 'test title',
        awardedVPoints: 0,
        numPages:9
      }
    } as EcheqSubmissionApi;
    expect(component).toBeTruthy();
  });

但如果我运行单元测试，仍然会出现以下错误：

TypeError: Cannot read property 'numPages' of undefined

---

回答你的问题：

component.metadata=///无论您希望它是什么

您在

numPages:echeq.definition.numPages上有错误。Ended，
echeq
也未定义

您可以尝试：

component.echeq = {
   definition: {
     numPages: 9
   }
}

或者更好的方法是从
this.route.snapshot.data['submission']返回这个值so从
MockActivatedRoute

更新：

并更新
MockActivatedRoute
以允许动态参数：

export class MockActivatedRoute {
  snapshot = {
      data: {}
  };

  constructor(){}

  withData(data:any): MockActivatedRoute {
     this.snapchot.data = data;
     return this;
 }
}

因此，现在在您的测试中，您可以使用它：

{ provide: ActivatedRoute, useValue: new MockActivatedRoute().withData({submission:{ answers:{} } }) }

没问题。这是一个简单的过程：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [
      ],
      imports:[
        ParticipantEcheqModule,
        RouterTestingModule
      ]
    })
    .compileComponents();
  }));

测试中的元数据如何与组件相关？错误来自哪里？输入在哪里？给出一个答案。不清楚你认为这些片段之间有什么关联。我建议您阅读和理解，例如，您能否向我们展示您在测试中导入的MockActivatedRoute文件？您试图在正在创建的元数据对象中设置numpages，但这不会影响组件。通过注入的mockActivatedRoute的内容是数据将来自
定义：{title:'test title'，awardedpoints:0，numPages:9}因为EcheqSubmissionApi
我已经改进了我的答案，我没有时间解决这个问题。很抱歉