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

Question

I am trying to verify that whenever dynamicValue is not null, the DOM loads the ng-template and displays the correct content;我试图验证只要 dynamicValue 不是 null，DOM 就会加载 ng-template 并显示正确的内容； however, whenever I try to find the ng-template-element inside of my.html it is always null.但是，每当我尝试在 my.html 中找到 ng-template-element 时，它总是 null。

area-display-selection.component.html区域显示选择.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>

area-display-selection.component.ts区域显示选择.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)
    );
  }

}

area-display-selection-component.spec.ts区域显示选择组件.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

I think this is to be expected.我认为这是可以预料的。 If I am not mistaken, the ng-template tag does not render.如果我没记错的话， ng-template标签不会呈现。

Try the following:尝试以下操作：

// 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();

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

问题描述

1 个解决方案

解决方案1
1 2023-01-31 13:40:22

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

问题描述

1 个解决方案

解决方案1 1 2023-01-31 13:40:22

解决方案1
1 2023-01-31 13:40:22