How to test a ternary operator with Jest in Angular

Issue

I have this code, and I want to test headerBackBtn with ternary operator 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);
    }
}

I have this test ▼, but still test coverage shows that I am not covering ternary branch (see 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();
    });

How to fix this? I searched and tried a lot but still failing to solve :/

I can avoid branching by using @Input() headerBackBtn = Boolean(this.headerBackBtnLabel) but this is not a fix but just a workaround...

Solution

As @jonrsharpe and @Arnaud Denoyelle mentioned there were some issues with code. I've checked and I agree with @jonrsharpe "The true branch is unreachable". When @Input() headerBackBtnLabel is updated it doesn't update @Input() headerBackBtn's default value, thus headerBackBtn stays false until not directly changed with true by its @Input.

Answered By - Dan