angular - Angular如何使用嵌套的ng-template测试嵌套组件？

Question

我想在 Angular 中制作可重用和可扩展的组件，所以我关注了这篇文章：https ://medium.com/javascript-everyday/reusable-components-with-configurable-templates-in-angular-3c55741c97f3 。

它工作得很好，但是在编写测​​试时我遇到了麻烦。我无法从ng-templatewith内部访问任何 DOM 元素querySelector(...)- 我得到null.

<app-edit [dialogTitle]="'Edit'">

    <ng-template editTopLayout>
        <div fxLayout="row">
            <div fxFlex fxLayoutAlign="end center">
                <button id="btn-release" (click)="onRelease()" mat-stroked-button color="primary" [disabled]="buttonsDisabled">Release</button>
                <button id="btn-reject" (click)="onReject()" mat-stroked-button color="warn" [disabled]="buttonsDisabled">Reject</button>
                <button id="btn-cancel" (click)="onCancel()" mat-stroked-button [disabled]="buttonsDisabled">Cancel</button>
            </div>
            <div fxFlex="2"></div>
        </div>
    </ng-template>

</app-edit>

在上面的示例中，被测组件app-edit通过EditTopLayoutDirective.

我的目的是测试，单击某个按钮后是否执行了正确的操作，ng-template但正如我所说，fixture.querySelector(...)在测试中使用时，我得到null.

我可以访问里面的按钮ng-template以务实地单击它们吗？

编辑：这是测试文件

describe('MyTestedComponent', () => {
  let component: MyTestedComponent;
  let fixture: ComponentFixture<MyTestedComponent>;
  let fb = new FormBuilder();

  let configService: ConfigurationService;
  let eventEmitterSpy;
  let paymentServiceStub = {
    rejectPayments: jasmine.createSpy('rejectPayments'),
    releasePayments: jasmine.createSpy('releasePayments')
  };
  let dialogServiceStub = { confirmContinuation: jasmine.createSpy('confirmContinuation') };
  let configSpy;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        RouterTestingModule,
        DemoMaterialModule,
        FormsModule,
        ReactiveFormsModule,
        BrowserAnimationsModule
      ],
      declarations: [
        MyTestedComponent,
        EditComponent,
        MoneyComponent,
        EditTopLayoutDirective
      ],
      providers: [
        TemplateService,
        AccountService,
        AlertService,
        ConfigurationService,
        {
          provide: DialogService,
          useValue: dialogServiceStub
        },
        {
          provide: PaymentService,
          useValue: paymentServiceStub
        },
        {
          provide: FormBuilder,
          useValue: fb
        }
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyTestedComponent);
    component = fixture.componentInstance;
    eventEmitterSpy = spyOn(component.action, 'emit');
    component.payment = fakePayment;
    configService = TestBed.get(ConfigurationService);
    fixture.detectChanges();
  });

  afterEach(() => {
    eventEmitterSpy.calls.reset();
    dialogServiceStub.confirmContinuation.calls.reset();
    paymentServiceStub.rejectPayments.calls.reset();
    paymentServiceStub.releasePayments.calls.reset();

    if (configSpy != null && configSpy.configuration != null)
      configSpy.configuration.calls.reset();

  })
});

在测试文件中，我想做这样的事情（但得到null）：

fixture.debugElement.nativeElement.querySelector('#btn-release')

标签： angularnestedcomponentsng-template