I'm trying to write a unit test for a filtering directive that has no explicit logic inside the controller and instead relies on basic Angular filtering. I'm getting stuck at how to apply the filter inside ng-repeat to a mock models array.
I have a view
<q-models-filter ng-switch-when="filter"></q-models-filter>
<ul class="q-models-list" ng-class="{'tray': sharing}">
<li ng-repeat="model in models | filter:filter.value | orderBy : sort.property.prop : sort.property.ascending" ng-class="{'q-models-hoverable': !platform.iOs}">
<a href="#/model/{{model.id}}">{{model.name}}</a>
q-models-filter is a directive defined as
angular.module('qModels')
.directive('qModelsFilter', function(){
return {
controller: 'qcModelsFilter',
restrict: 'E',
replace: true,
templateUrl: 'modules/models/directives/models-filter.html'
};
})
with the corresponding template as
<div class="q-models-filter-panel">
<input type="text" class="q-models-filter-box" placeholder="Filter" ng-trim="true" ng-model="filter.value">
</div>
So, as you can see, the flow goes something like this
- User enters in text inside the
q-models-filter-boxinput area and it correspondingly updates thefilter-valuengModel. - Since the ngModel has undergone a state change, Angular fires off a refresh of the
ng-repeatdiv in the main view, applying the updatedfilter.valuestate to the models scope.
How can I test this, though? Currently I have the following Jasmine test
describe("Models Test: ", function ()
{
var models = [
{name : "ext_1", id : 1},
{name : "some model", id : 2},
{name : "genetics", id : 5},
{name : "multi-d", id : 8},
{name : "stats", id : 25}
],
rootScope,
scope;
beforeEach(module("qModels"));
beforeEach(inject(function($injector)
{
qsModels = $injector.get("qsModels");
rootScope = $injector.get("$rootScope");
scope = rootScope.$new();
var compile = $injector.get("$compile");
filterElement = '<input type="text" class="q-models-filter-box" placeholder="Filter" ng-trim="true" ng-model="filter.value">';
filterElement = compile(filterElement)(scope);
$scope.$digest();
};
it("Should apply filter to models scope", function ()
{
expect(scope.models.length).toBe(5);
expect(filterElement.eq(0).text()).toBe("");
});
});
Aucun commentaire:
Enregistrer un commentaire