mardi 6 octobre 2015

Angular- test filter inside directive with no application logic

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

  1. User enters in text inside the q-models-filter-box input area and it correspondingly updates the filter-value ngModel.
  2. Since the ngModel has undergone a state change, Angular fires off a refresh of the ng-repeat div in the main view, applying the updated filter.value state 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