单元测试自定义指令

Question

我使用的是角形材质，并且有一个带有mat-checkbox的表格。

该复选框上方有使用条款，用户必须将使用条款滚动到底部才能启用默认情况下禁用的mat-复选框。

问题是使用[disabled]指令发送消息（使用ts blablabla必须使用指令是不好的。）

我的解决方案是创建专用指令：

export class MyDisabledDirective {
 @Input() set myDisabled(condition: boolean) {
    const input = this.ngControl.control;
    condition ? input.disable() : input.enable();
  }

  constructor( private ngControl: NgControl ) {
  }
}

好的，很简单。

现在我需要对该指令进行单元测试，但这似乎是不可能的，我尝试的任何方法都不起作用。

现在规格如下：

@Component({
  selector: fake-component',
  template: `
    <button [myDisabled]="condition">Testing</button>
  `,
})
class FakeComponent {
  condition = true;
}

describe('DisabledDirective', () => {
  let component: FakeComponent;
  let fixture: ComponentFixture<FakeComponent>;
  let button: DebugElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [FakeComponent, MyDisabledDirective],
      providers: [NgControl],
    });
    fixture = TestBed.createComponent(FakeComponent);
    component = fixture.componentInstance;
    button = fixture.debugElement.query(By.css('button'));
  });

  it('should disable if the condition is true', () => {
    component.condition = true;
    expect(button.nativeElement.disabled).toBeTruthy();
  });

  it('should enable if the condition is false', () => {
    component.condition = true;
    expect(button.nativeElement.disabled).toBeFalsy();
  });
});

它不起作用，并且 button.nativeElement.disabled 每次都为假。 而且我想知道我尝试进行测试的方式是否很好。

希望您能帮助我，

console.log：