Как протестировать тернарный оператор с помощью Jest в Angular

У меня есть этот код, и я хочу протестировать 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();
    });

Как протестировать тернарный оператор с помощью Jest в Angular

Как это исправить? Я много искал и пробовал, но так и не смог решить :/

Я могу избежать ветвления, используя @Input() headerBackBtn = Boolean(this.headerBackBtnLabel), но это не исправление, а просто обходной путь...

В принципе, я не думаю, что это работает так, как вы думаете. Вы не соединяете эти два значения вместе, вы устанавливаете значение по умолчанию для одного на основе значения по умолчанию (пустая строка) другого. Истинная ветвь недоступна.

jonrsharpe 16.03.2022 17:41
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
1
32
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я вижу 2 способа сделать это:

  1. Используйте синтаксис !! в шаблоне html

Вы хотите заменить свойство на true, если значение не пусто, и false, если значение пусто. Синтаксис двойного отрицания сделает это.

  • Первое отрицание инвертирует значение и приводит его к логическому значению.
  • Второе отрицание повторно инвертирует значение и сохранит его как логическое значение.
<div *ngIf = "!!headerBackBtnLabel"> Display the button</div>
  1. Используйте синтаксис установщика на входе

Как это :

headerBackBtn: boolean
_headerBackBtnLabel: string

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

Спасибо за ответ, но это обходной путь. Я хочу знать, как проверить тройное ветвление. Я уверен, что должен быть способ.

Dan 16.03.2022 17:11

@ Дэн, похоже, ошибка в коде. Выглядит странно, что свойство headerBackBtn зависит от headerBackBtnLabel и в то же время может быть установлено через @Input на компоненте. Есть ли смысл писать <app-component [headerBackBtnLabel] = "" [headerBackBtn] = "true">. имхо, то, как это написано, вызывает неопределенное поведение, в зависимости от того, какое свойство оценивается первым. Проблема, с которой вы столкнулись, может исходить оттуда.

Arnaud Denoyelle 16.03.2022 17:16

Бывают случаи, когда метка не нужна, но если указать [headerBackBtn] = "true", появится кнопка "Назад".

Dan 16.03.2022 17:18

@Dan Проблема: есть случай, когда вы можете установить для headerBackBtn значение true, и, поскольку данная метка пуста, headerBackBtn вернется к false (в зависимости от порядка выполнения @Input): см. пример здесь. имхо, безопаснее просто принять @Input как есть и не изменять их. Затем в шаблоне используйте *ngIf = "headerBackBtn || !!headerBackBtnLabel"

Arnaud Denoyelle 16.03.2022 17:29

Теперь согласен, спасибо.

Dan 16.03.2022 18:14
Ответ принят как подходящий

Как упоминали @jonrsharpe и @Arnaud Denoyelle, были некоторые проблемы с кодом. Я проверил и согласен с @jonrsharpe «Настоящая ветвь недоступна». Когда @Input() headerBackBtnLabel обновляется, оно не обновляет значение @Input() headerBackBtn по умолчанию, поэтому headerBackBtn остается ложным до тех пор, пока не будет напрямую изменено с true его @Input.

Другие вопросы по теме