测试组件的 @input()

Question

我正在尝试在我的导航栏组件中测试此输入，但由于某种原因我收到空值。我的子组件和父组件的代码设计如下：

<nav >
  <ol >
    <li  *ngFor="let item of links; let i = index" js-selector="link--all">
    </li>
    
  </ol>
</nav>

@Component({
  selector: 'child',
  templateUrl: '.child.html',
})
export class ChildComponent {
 
  @Input() links:any[];
}

那么父级会是这样的:

<div class="page-header">
      <child
        *ngIf="someCondition"
        [links]="links"
      ></child>
</div>

@Component({
  selector: 'parent',
  templateUrl: 'parent.html',
})
export class ParentComponent implements OnInit {

public someCondition :boolean

constructor(){
someCondition=true
}

ngOnInit(): void {
   
    this.linkConformer();
}

linkConformer():void{
this.links=['s','u','v']
}

然后设置child和parent，这个想法是测试child和它传递给parent时携带的输入值。为此，我只是设置了这个：

const linksMock: any[] =[ 1,2,3,];

describe('CHildbComponent', () => {
  let component: ChildComponent;
  let fixture: ComponentFixture<ChildComponent>;
  let class: ChildTemplate;

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [ChildComponent],
        imports: [RouterTestingModule],
      }).compileComponents();
      fixture = TestBed.createComponent(ChildComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
      class = new ChildTemplate();
    })
  );

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

  describe('When links are available', () => {
    it('Should shown links content ', () => {
      component.links = linksMock;

      fixture.detectChanges();

      expect(class.links()).toBe(linksMock);
    });
  });

  class ChildTemplate {
    private _el: HTMLElement;

    constructor() {
      this._el = fixture.nativeElement;
    }

    links(): HTMLElement {
      return this._el.querySelector('[js-selector="link-all"]');
    }
  }
});

但是出于某种原因，这个简单的测试我收到的错误是：

Expected: [ 1,2,3,]
Received: null

有人可以改进这种简陋的方法吗？

Answer 1

按如下方式调整您的代码

beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [ChildComponent],
        imports: [RouterTestingModule],
      }).compileComponents();
      fixture = TestBed.createComponent(ChildComponent);
      component = fixture.componentInstance;
      component.links = linksMock; // put this here
      fixture.detectChanges();
      class = new ChildTemplate();
    })
  );

注意 ngOnInit 在您的“it”块运行之前被调用，因此出现了问题。我相信 ngOnInit 是在您第一次调用 fixture.detectChanges() 时调用的，您在 beforeEach 块中调用它。

测试组件的 @input()

Testing an @input() of a component

unit-testing

parent-child

jestjs

angular