ng-template在angular单元测试中是null

Question

我试图验证只要 dynamicValue 不是 null，DOM 就会加载 ng-template 并显示正确的内容； 但是，每当我尝试在 my.html 中找到 ng-template-element 时，它总是 null。

区域显示选择.component.html

<body><span data-testid="dynamic-value-span" *ngIf="dynamicValue; else noValue">{{configuration?.text | translate}}: {{dynamicValue}}</span>
<ng-template data-testid="no-value-template" #noValue>{{configuration.nothingSelectedText | translate}}</ng-template></body>

区域显示选择.component.ts

@Component({
  selector: 'analyse-area-display-selection',
  templateUrl: './area-display-selection.component.html',
  styleUrls: ['./area-display-selection.component.scss']
})
export class AreaDisplaySelectionComponent implements OnInit {

  private subscription: Subscription = new Subscription();
  public dynamicValue: string = undefined;
  @Input() configuration: SimpleSelectionConfig = undefined;

  constructor(private optionEventService: OptionEventService) { }

  ngOnInit(): void {
    this.subscription.add(
 this.optionEventService.getOptionEventByType(this.configuration.consumesOptionEvent)
    .subscribe((optionEvent: OptionEvent) => this.dynamicValue = optionEvent?.payload.value)
    );
  }

}

区域显示选择组件.spec.ts

describe('AreaDisplaySelectionComponent', () => {
let fixture: ComponentFixture<AreaDisplaySelectionComponent>;
let component: AreaDisplaySelectionComponent;
let optionEventService: OptionEventService;

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [
            AnalyseModule,
            BrowserAnimationsModule
        ],
        providers: [TranslateStore, NoopAnimationPlayer, OptionEventService]
    }).compileComponents();
    fixture = TestBed.createComponent(AreaDisplaySelectionComponent);
    optionEventService = TestBed.inject(OptionEventService);
    component = fixture.componentInstance;
});


it('ng template', () => {
    //not finished
    const simpleSelectionConfig: SimpleSelectionConfig = {
        consumesOptionEvent: '',
        nothingSelectedText: '',
        text: 'mockSimpleSelectionConfig'
    };

    component.configuration = simpleSelectionConfig;
    fixture.detectChanges();

    // expectText(fixture, 'no-value-template', 'mockSimpleSelectionConfig: dynamic');
    const element = fixture.debugElement.query(By.css('ng-template'));
    expect(element).toBeTruthy();
    });

});

Answer 1

我认为这是可以预料的。 如果我没记错的话， ng-template标签不会呈现。

尝试以下操作：

// Surround the content in a p tag with data test id
<ng-template data-testid="no-value-template" #noValue>
 <p data-testid="no-value">
  {{configuration.nothingSelectedText | translate}}
  </p>
</ng-template>


// !! Update your selector
const element = fixture.debugElement.query(By.css('p[data-testid="no-value"]'));
expect(element).toBeTruthy();