Jak wywołać zmianę Ng w teście dyrektywy w AngularJS

Question

Mam następującą dyrektywę AngularJS, która tworzy element input. Wejście ma atrybut ng-change, który uruchamia funkcję doIt(). W jednostce testowej mojej dyrektywy chcę sprawdzić, czy funkcja doIt jest wywoływana, gdy użytkownicy zmieniają dane wejściowe. Ale test nie przechodzi. Chociaż działa w przeglądarce podczas testowania ręcznego.

dyrektywa:

... 
template: "<input ng-model='myModel' ng-change='doIt()' type='text'>" 

Test:

el.find('input').trigger('change') // Dos not trigger ng-change 

żywo demo (ng-change): http://plnkr.co/edit/0yaUP6IQk7EIneRmphbW?p=preview

---

Teraz, test przechodzi jeżeli ręcznie powiązać change imprezę zamiast użycia atrybutu ng-change.

template: "<input ng-model='myModel' type='text'>", 
link: function(scope, element, attrs) { 
    element.bind('change', function(event) { 
    scope.doIt(); 
    }); 
} 

żywo demo (wiązanie ręczne): http://plnkr.co/edit/dizuRaTFn4Ay1t41jL1K?p=preview

---

Czy istnieje sposób na wykorzystanie ng-change i uczynić go testować? Dziękuję Ci.

Answer 1

Od komentarz wyjaśniający:

Wszystko co chcę robić w teście dyrektywy jest, aby sprawdzić, doIt jest wywoływana, gdy użytkownik zmieni wejście.

, czy ekspresja wskazany przez ng-change jest prawidłowo ocenić, czy nie jest tak naprawdę odpowiedzialność dyrektywy ngModel, więc nie jestem pewien, że mogę przetestować go w ten sposób; zamiast tego ufałbym, że dyrektywy ngModel i ngChange zostały poprawnie zaimplementowane i przetestowane, aby wywoływać określoną funkcję, i po prostu przetestuj, czy wywołanie samej funkcji wpływa na dyrektywę w prawidłowy sposób. Do obsługi scenariusza pełnego wykorzystania można użyć testu end-to-end lub integracji.

Powiedział, że można zdobyć instancji ngModelController który napędza zmiany zwrotnego ngModel i ustawić wartość widok siebie:

it('trigger doIt', function() { 
    var ngModelController = el.find('input').controller('ngModel'); 
    ngModelController.$setViewValue('test'); 
    expect($scope.youDidIt).toBe(true); 
}); 

Jak powiedziałem, choć czuję, jak to jest dotarcie zbyt daleko do obowiązków w zakresie ngModel, przełamywania czarnego boksu, jaki otrzymujesz dzięki dyrektywom, które są naturalnie składalne.

Przykład: http://plnkr.co/edit/BaWpxLuMh3HvivPUbrsd?p=preview

---

[Aktualizacja]

Po rozglądając się na źródło angularjs, stwierdziliśmy, że dodaje się również działa:

it('trigger doIt', function() { 
    el.find('input').trigger('input'); 
    expect($scope.youDidIt).toBe(true); 
}); 

Wygląda na to, wydarzenie jest inne w niektórych przeglądarkach; input wydaje się działać w Chrome.

Przykład: http://plnkr.co/edit/rbZ5OnBtKMzdpmPkmn2B?p=preview

Oto relevant AngularJS code, która korzysta z usługi $sniffer aby dowiedzieć się, które wydarzenie do wyzwalania:

changeInputValueTo = function(value) { 
    inputElm.val(value); 
    browserTrigger(inputElm, $sniffer.hasEvent('input') ? 'input' : 'change'); 
}; 

Nawet uwzględniając to, że nie jestem pewien, czy przetestować dyrektywy w ten sposób.

Answer 2

Szukałem tej prostej linii przez długie godziny. Po prostu to zapisz tutaj.

Jak wybrać wartość z html-select, używając Karmy, a więc czy działa funkcja ng-change?

HTML:

Controller lub dyrektywa JS:

$scope.itemTypes = [{name: 'Some name 1', value: 'value_1'}, {name: 'Some name 2', value: 'value_2'}] 

    $scope.itemTypeSelected = function() { 
    console.log("Yesssa !!!!"); 
    }; 

Karma Test fragment:

angular.element(element.find("#selectedItemType")[0]).val('value_1').change(); 
    console.log("selected model.selectedItemType", element.isolateScope().model.selectedItemType); 

konsoli:

'Yesssa !!!!' 
'selected model.selectedItemType', 'value_1' 

Answer 3

I googled "Kątowa dyrektywa wyzwalacza ng-zmiany", a to pytanie StackOverflow było najbliżej do czegokolwiek przydatnego, więc odpowiem "Jak wywołać zmianę Ng w dyrektywie", ponieważ inni są zobowiązani do wylądowania na tej stronie i nie wiem, jak inaczej podać te informacje.

Wewnątrz funkcji łącza w sprawie dyrektywy, to wywołać funkcję ng-change na elemencie:

element.controller('ngModel').$viewChangeListeners[0](); 

element.trigger("change") i element.trigger("input") nie działa dla mnie, ani nic innego nie udało mi się znaleźć w Internecie.

Jako przykład uruchamiając NG-zmiany na rozmycie:

wpModule.directive('triggerChangeOnBlur', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      element.on('blur', function() { 
       element.controller('ngModel').$viewChangeListeners[0](); 
      }); 
     } 
    }; 
}]); 

Przykro mi, że nie jest to bezpośrednio odpowiadając na pytanie OP. Będę więcej niż szczęśliwy, aby podjąć rozsądną radę, gdzie i jak udostępnić te informacje.

Answer 4

prosty i działa w jednostce testowej env:

spyOn(self, 'updateTransactionPrice'); 


var el = compile('<form name="form" latest novalidate json-schema="main.schema_discount" json-schema-model="main._data"><input type="text" ng-model="main._data.reverse_discount" ng-class="{ \'form-invalid\': form.reverse_discount.$invalid }" ng-change="main.transactionPrice(form);" name="reverse_discount" class="form-control-basic" placeholder="" ng-disabled="!main.selectedProduct.total_price"></form>')(scope); 
el.find('input').triggerHandler('change'); 

expect(self.updateTransactionPrice).toHaveBeenCalled(); 

Answer 5

starali się uzyskać to do pracy, ale nie w każdej próbie. W końcu doszedłem do wniosku, że moim problemem jest opcja ng-model-options z ustawieniem debounce na onUpdate.

Jeśli masz wadę, upewnij się, że opróżniłeś usługę $ timeout. W makiety kątowej ta usługa limitu czasu została rozszerzona o operację flush, która obsługuje wszystkie niespełnione żądania/akcje.

var tobetriggered = angular.element(element[0].querySelector('.js-triggervalue')); 
    tobetriggered.val('value'); 
    tobetriggered.trigger('change'); 
    $timeout.flush();