Angular 如何用 Jest 测试三元运算符

Question

我有这段代码，我想用三元运算符测试 headerBackBtn this.headerBackBtnLabel ? true : false;。

@Component({
    selector: 'app-page-header',
    templateUrl: './page-header.component.html',
    styleUrls: ['./page-header.component.scss']
})
export class PageHeaderComponent {
    @Input() actions: IIcon[] = [];

    @Input() title!: string;

    @Input() headerBackBtnLabel = '';

    @Input() headerBackBtn = this.headerBackBtnLabel ? true : false; //◄◄◄

    @Output() actionClickName = new EventEmitter();

    actionClick(actionName: string): void {
        this.actionClickName.emit(actionName);
    }
}

我有这个测试▼，但仍然测试覆盖显示我没有覆盖三元分支（见img）

    it('should render header back button element when there is BackBtnLabel', () => {
        component.headerBackBtnLabel = 'Any Button Label';
        component.headerBackBtn = Boolean(component.headerBackBtnLabel);
        fixture.detectChanges();
        const compiledElement = fixture.debugElement.query(
            By.css('.action-btn-label')
        );

        expect(component.headerBackBtn).toEqual(true);
        expect(compiledElement).toBeTruthy();
    });

如何解决这个问题？我搜索并尝试了很多但仍然无法解决：/

我可以使用 @Input() headerBackBtn = Boolean(this.headerBackBtnLabel) 避免分支，但这不是解决方法，只是一种解决方法...

Answer 1

我看到了 2 种方法：

在html模板中使用!!语法

如果值为非空，您想将属性替换为 true，如果值为空，则要将 false 替换。双重否定语法可以做到这一点。

第一个否定将反转值并将其转换为布尔值。
第二个否定将 re-invert 值并将其保留为布尔值

<div *ngIf="!!headerBackBtnLabel"> Display the button</div>

在输入中使用setter语法

像这样：

headerBackBtn: boolean
_headerBackBtnLabel: string

@Input() set headerBackBtnLabel(label: string) {
  this._headerBackBtnLabel = label;
  this.headerBackBtn = !!label;
}

Answer 2

正如@jonrsharpe 和@Arnaud Denoyelle 提到的，代码存在一些问题。我已经检查过并且我同意@jonrsharpe“真正的分支是不可到达的”。当 @Input() headerBackBtnLabel 被更新时，它不会更新 @Input() headerBackBtn 的默认值，因此 headerBackBtn 保持假，直到它的 @Input 没有被 true 直接改变。

Angular 如何用 Jest 测试三元运算符

How to test a ternary operator with Jest in Angular

angular

unit-testing

jestjs

ts-jest