Угловой 2+ с жасминовым тестированием: [ngClass] = «methodName (configObj)» проблема

Question

Я прочитал весь документ тестирования angular.io, нашел ключевые слова и использовал расширенный поиск здесь, в S.O. но не нашел ничего применимого к моему делу. Я новичок в модульном тестировании, поэтому, возможно, у меня пока нет терминологии. Если это дубликат, просто укажите мне правильное направление, пожалуйста.

Предвещая: мой вопрос

A.) Является ли angular / jasmine способным проверять динамические параметры из вызовов метода шаблона.

или еще ...

B.) Как бы вы высмеивали передачу параметров в метод во время каждого fixture.detectChanges ()?

Вот ситуация и код ошибки ...

<generic-element 
  *ngFor=”let recordObj of recordsArray” 
  [ngClass]=”doSetClasses(recordObj)”
></generic-element>

Итак, у меня есть шаблон компонента, в котором элемент динамически получает свои классы, назначенные с помощью метода. Этот метод берет объект (извлеченный из списка через директиву ngFor) и проверяет его, чтобы определить имена классов, которые он должен возвращать в шаблон. Я предпочитаю присваивать с помощью метода для действительно подробных присваиваний, потому что я стараюсь сохранить свою логику в файле машинописного текста и структуру в HTML…., Насколько это возможно, по крайней мере.

Мои очень простые модульные тесты не выполняются, потому что «Невозможно прочитать свойство 'id' из undefined» (в этом случае undefined означает, что recordObj передается в метод doSetClasses () из шаблона. Я изолировал его от этого, потому что если я просто перезаписать и удалить содержимое метода doSetClasses в тестовой среде, где все проходит, например:

beforeEach {
   ...
   component.doSetClasses = function() { return; } as any;
}

Теперь, если я оставлю метод doSetClasses как есть, я заметил, что если я не вызываю fixture.detectChanges (), он также проходит. Поэтому моя проблема, по-видимому, заключается в следующем: методы тестирования, которые вызываются из шаблона и которые также имеют параметры, включенные в шаблон, во время цикла обнаружения изменений / дайджеста.

Мой вопрос

A.) Является ли angular / jasmine способным проверять динамические параметры из вызовов метода шаблона.

или еще ...

B.) Как бы вы посмеялись над передачей параметра в метод во время каждого fixture.detectChanges () в тестовой среде?

Опять же, если это дубликат, просто укажите мне правильное направление, пожалуйста.

Заранее спасибо за любую помощь, предложения, рекомендации. Очень ценится.

Answer 1

Я столкнулся с подобной проблемой сегодня.Вызов fixture.detectChanges(), кажется, вызывает вызов функции, упомянутой в ngClass.

Я хочу вызвать validateField, который назначит класс Bootstrap элементу управления

HTML

<form class="form-inline" [formGroup]="loginForm" (ngSubmit)="signInUser()" novalidate>
            <input type="text" id="username" class="form-control" placeholder="username" formControlName="userName" [ngClass]="validateField('userName')" required>
            <input type="password" id="password" class="form-control" placeholder="password" formControlName="password" [ngClass]="validateField('password')" required>
...

Функция validateField в .ts равна

/*

  This function will eventually return object of type depending on whether the field is valid or not, set Bootstrap's css
   {
      'is-invalid': true or false, // if fieldvalid returns false i.e. field is not valid then we want has-error css. So set it to true (opp. of fieldValid)
      'is-valid': true or false //if fieldvalid returns true i.e. field is valid then we want has-success css. So set it to true (value of fieldValid)
   }
   */
  validateField(field:string){
   // console.log("validating field: " +field)
    return this.helper.validateField(this.loginForm,field);
  }

Моя spec равна

fit('it should validate that the data in username and password field has correct format',()=>{
    let navComponent = component;
    let helperService = TestBed.get(HelperService);
    spyOn(helperService,'validateField');
    let formControls = navComponent.loginForm.controls;
    let email = 'test@test.com';
    let password = 'testpassword';
    formControls['userName'].setValue(email);
    fixture.detectChanges(); //<-- THIS SEEM TO TRIGGER THE CALLING OF VALIDATION FUNCTION
    expect(helperService.validateField).toHaveBeenCalledWith(navComponent.loginForm,'userName');
    formControls['password'].setValue(password);
    fixture.detectChanges();//<-- THIS SEEM TO TRIGGER THE CALLING OF VALIDATION FUNCTION
    expect(helperService.validateField).toHaveBeenCalledWith(navComponent.loginForm,'password');

  });

Answer 2

После нескольких дней отсутствия ответов, комментариев или вопросов, похоже, что никаких рекомендаций не будет представлено.Поэтому для любого, кто может столкнуться с подобной проблемой в будущем, я пришел к следующему:

1. Я не верю, что есть способ органически иметь [ngClass] = "doSetClasses (recordObj) ", который вызывается каждый цикл дайджеста, динамически получая его параметры из * ngFor, работает в модульном тесте, поэтому мне пришлось его смоделировать.
2. В тестовой среде создайте копию метода doSetClasses ().
3. Затем удалите содержимое исходного метода doSetClasses (), чтобы он все еще мог вызываться кодом / другими тестами, но в итоге ничего не делал.
4. При тестировании фактического использованиясамого doSetClasses, используйте вместо этого копию и смоделируйте сценарий.

У меня нет доступа к моему коду в данный момент, но вот сокращение:

beforeEach() {
  //Create a copy to use in controlled scenarios
  const doSetClassesCopy = doSetClasses;
  //Then strip out contents so it can be called but does not error during testing
  doSetClasses = function() { return; } as any;
}

...
(The Test)
  //Now mock it's performance with params from template's *ngFor directive
  const simulatedParamsFromTemplate = { value: 'whatever' } as recordObj;
  const outcome = doSetClassesCopy(simulatedParamsFromTemplate);
  expect(outcome).toBe('Whatever I expect.');

Если кто-либоУ меня есть лучшее решение или предложение, которое мне было бы интересно услышать.Спасибо.