У меня есть этот код, и я хочу протестировать 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);
}
}
У меня есть этот тест ▼, но все же тестовое покрытие показывает, что я не покрываю тройную ветвь (см. изображение)
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)
, но это не исправление, а просто обходной путь...
Я вижу 2 способа сделать это:
!!
в шаблоне htmlВы хотите заменить свойство на true
, если значение не пусто, и false
, если значение пусто. Синтаксис двойного отрицания сделает это.
<div *ngIf = "!!headerBackBtnLabel"> Display the button</div>
Как это :
headerBackBtn: boolean
_headerBackBtnLabel: string
@Input() set headerBackBtnLabel(label: string) {
this._headerBackBtnLabel = label;
this.headerBackBtn = !!label;
}
Спасибо за ответ, но это обходной путь. Я хочу знать, как проверить тройное ветвление. Я уверен, что должен быть способ.
@ Дэн, похоже, ошибка в коде. Выглядит странно, что свойство headerBackBtn
зависит от headerBackBtnLabel
и в то же время может быть установлено через @Input
на компоненте. Есть ли смысл писать <app-component [headerBackBtnLabel] = "" [headerBackBtn] = "true">
. имхо, то, как это написано, вызывает неопределенное поведение, в зависимости от того, какое свойство оценивается первым. Проблема, с которой вы столкнулись, может исходить оттуда.
Бывают случаи, когда метка не нужна, но если указать [headerBackBtn] = "true", появится кнопка "Назад".
@Dan Проблема: есть случай, когда вы можете установить для headerBackBtn
значение true, и, поскольку данная метка пуста, headerBackBtn
вернется к false
(в зависимости от порядка выполнения @Input
): см. пример здесь. имхо, безопаснее просто принять @Input
как есть и не изменять их. Затем в шаблоне используйте *ngIf = "headerBackBtn || !!headerBackBtnLabel"
Теперь согласен, спасибо.
Как упоминали @jonrsharpe и @Arnaud Denoyelle, были некоторые проблемы с кодом. Я проверил и согласен с @jonrsharpe «Настоящая ветвь недоступна». Когда @Input() headerBackBtnLabel
обновляется, оно не обновляет значение @Input() headerBackBtn
по умолчанию, поэтому headerBackBtn
остается ложным до тех пор, пока не будет напрямую изменено с true
его @Input
.
В принципе, я не думаю, что это работает так, как вы думаете. Вы не соединяете эти два значения вместе, вы устанавливаете значение по умолчанию для одного на основе значения по умолчанию (пустая строка) другого. Истинная ветвь недоступна.