AngularJS 단위 테스트: ng-model

많은 구현 세부 사항에 대한 테스트를 피하기 위해 UI 요소를 사용하여 구성 요소를 테스트하고 싶었습니다.

그렇게 할 때 나는 입력에 직면했고 ng-model 변경 및 ng-change 이벤트를 트리거하기 위해 변경 이벤트를 트리거하는 방법을 쉽게 찾지 못했습니다.

내가 한 방법은 다음과 같습니다. (AngularJS가 더 이상 사용되지 않는다는 점을 감안할 때 이것은 늦은 것입니다. 하지만 언젠가는 AngularJS를 계속 사용할 수 있을 만큼 운이 좋은 유일한 사람은 아닐 것입니다.)

테스트 베이스

이 테스트에서는 angular-mocks 라이브러리를 사용합니다.

구성 요소를 인스턴스화하기 위해 le$compile를 사용합니다. 그런 다음 컴파일된 요소를 사용하여 구성 요소와 상호 작용합니다.

테스트를 더 쉽게 하기 위해 input를 직접 컴파일합니다. 입력이 있는 구성 요소를 컴파일하고 컴파일된 요소에서 JQuery.find(<selector>)를 호출하여 검색할 수 있습니다.

테스트 선언 및 어설션에 Jest 구문을 사용합니다.

require('angular');
require('angular-mocks');

describe('test', () => {
  let $rootScope;
  let $compile;
  let $timeout;

  beforeEach(inject((_$rootScope_, _$compile_, _$timeout_) => {
    $rootScope = _$rootScope_;
    $compile = _$compile_;
    $timeout = _$timeout_;
  }));

  // ...
});

간단한 ng-모델 테스트

이 테스트에서는 input 없이 간단한 ng-model-options 를 사용합니다.
ng-model 업데이트 및 ng-change 업데이트를 업데이트하기 위해 다음 JQuery 작업을 사용합니다.
- .val(<value>) 값 업데이트
- .triggerHandler('change') 입력의 change 이벤트 전송

it('Should trigger change ng-model value and trigger ng-change', () => {
  const scope = $rootScope.$new();
  scope.value = '';
  scope.onChange = jest.fn();

  const element = $compile('<input ng-model="value" ng-change="onChange()">')(scope);
  scope.$digest();

  element.val('test').triggerHandler('change');

  expect(scope.value).toBe('test');
  expect(scope.onChange).toHaveBeenCalled();
});

흐림에 대한 업데이트가 있는 ng-모델

이 테스트에서는 input와 함께 간단한 ng-model-options를 사용하여 입력blur 이벤트가 트리거될 때만 업데이트합니다.
blur 이벤트는 필드가 초점을 잃을 때 트리거됩니다.

입력이 채워질 때만 값을 사용한다는 것을 알고 있는 경우 값이 변경될 때마다 업데이트하는 것을 방지하는 데 사용할 수 있습니다.
ng-model 업데이트 및 ng-change 업데이트를 업데이트하기 위해 다음 JQuery 작업을 사용합니다.
- .val(<value>) 값 업데이트
- .triggerHandler('change') 입력의 change 이벤트 전송
- .triggerHandler('blur') 입력의 blur 이벤트 전송

it('Should trigger change ng-model value and trigger ng-change (update on blur)', () => {
  const scope = $rootScope.$new();
  scope.value = '';
  scope.onChange = jest.fn();

  const element = $compile('<input ng-model="value" ng-model-options="{ updateOn: \'blur\' }" ng-change="onChange()">')(scope);
  scope.$digest();

  element.val('test').triggerHandler('change').triggerHandler('blur');

  expect(scope.value).toBe('test');
  expect(scope.onChange).toHaveBeenCalled();
});

디바운스가 있는 ng-모델

이 테스트에서는 input 없이 간단한 ng-model-options 를 사용합니다.

디바운스 옵션은 주어진 시간 동안 값이 변경되지 않는 경우에만 값을 업데이트하는 데 사용할 수 있습니다.

이렇게 하면 너무 많은 이벤트를 피하면서 입력이 초점을 잃지 않더라도 최신 상태를 유지할 수 있습니다.

사용자가 입력하는 동안 제안을 표시하려는 검색 입력과 같은 요소에 유용할 수 있습니다. 그러나 매우 무거울 수 있기 때문에 모든 변경에 대해 계산을 수행하고 싶지는 않습니다.
ng-model 업데이트 및 ng-change 업데이트를 업데이트하기 위해 다음 JQuery 작업을 사용합니다.
- .val(<value>) 값 업데이트
- .triggerHandler('change') 입력의 change 이벤트 전송

그런 다음 코드가 디바운스 시간이 지난 것처럼 작동하도록 $timeout.flush()를 사용합니다.

it('Should trigger change ng-model value and trigger ng-change (debounce)', () => {
  const scope = $rootScope.$new();
  scope.value = '';
  scope.onChange = jest.fn();

  const element = $compile('<input ng-model="value" ng-model-options="{ debounce: 200 }" ng-change="onChange()">')(scope);
  scope.$digest();

  element.val('test').triggerHandler('change');
  $timeout.flush();

  expect(scope.value).toBe('test');
  expect(scope.onChange).toHaveBeenCalled();
});