单元测试在可重用的角度模态组件的属性绑定上失败。

时间:2018-01-23 21:12:09

标签: angular unit-testing karma-jasmine

我已经构建了一个可重复使用的Modal组件,它在ng服务上运行良好(在控制台中没有错误),但是当我运行测试时,我得到了错误"模板解析错误:无法解决绑定到' enableCancel'因为它不是“模态”的已知属性。"。为什么这不会影响我的财产绑定?

modal.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {

  @Input() enableClose
  @Input() modalTitle
  @Input() enableCancel
  @Input() modalWidth
  @Input() modalBody
  hideModal: boolean = false;


  constructor() { }

  ngOnInit() {
  }

  closeModal(){
    this.hideModal = true
  }

}

app.component.html

<modal 
[enableClose]=false 
[enableCancel]=true
[modalBody]=modalBody
modalWidth="narrow"
modalTitle="Title of modal">
</modal>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  enableClose: boolean;
  enableCancel: boolean;
  modalTitle: string;
  modalWidth: string;
  modalBody: string = "Duis ornare nibh ac risus ullamcorper porta. Nunc ultricies ultrices magna sit amet convallis. Nulla orci tellus, sollicitudin ac tincidunt imperdiet, pellentesque a sapien."
  title = 'app';
}

modal.component.spec

import { AppComponent } from './../app.component';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ModalComponent } from './modal.component';


describe('ModalComponent', () => {
  let component: ModalComponent;
  let fixture: ComponentFixture<ModalComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ 
        ModalComponent,
        AppComponent
      ]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

1 个答案:

答案 0 :(得分:0)

我通过将我的Modal组件导入app.component.spec.ts

解决了这个问题
subplot(list(pl.1,pl.2),nrows=1,shareX=F,shareY=F,titleX=T,titleY=T) %>% layout(showlegend=F)