Testing directives in Ionic framework

Question

Testing directives in Ionic framework

I am trying to test directives in an app that uses Ionic framework (Angular) on a Testem server

describe('task lists', function () {
    var html, scope, element

    beforeEach(function () {
        angular.mock.module('app')
    })

    beforeEach

    beforeEach(inject(function ($rootScope, $compile) {
        html = angular.element('<ion-item ng-repeat="task in tasks">{{task.taskId}}</ion-item>')
        scope = $rootScope.$new()
        scope.tasks = [
            { taskId: 1}
            , { taskId: 2}
        ] 
        element = $compile(html)(scope)
        scope.$digest()
    }))

    it('should list the available tasks', function () {
        expect(element.find('li').count()).toBe(2)
        console.log(typeof element.find)
    })
})

But I am getting this error

task lists should list the available tasks.
    ✘ TypeError: 'undefined' is not a function (evaluating 'element.find('li').count()') in http://localhost:7357/tests/spec/directives/show_task_lists_spec.js (line 22)
        http://localhost:7357/tests/spec/directives/show_task_lists_spec.js:22:34
        execute@http://localhost:7357/testem/jasmine.js:1064:22
        next_@http://localhost:7357/testem/jasmine.js:2096:38
        start@http://localhost:7357/testem/jasmine.js:2049:13
        execute@http://localhost:7357/testem/jasmine.js:2376:19
        next_@http://localhost:7357/testem/jasmine.js:2096:38
        start@http://localhost:7357/testem/jasmine.js:2049:13
        execute@http://localhost:7357/testem/jasmine.js:2521:19
        next_@http://localhost:7357/testem/jasmine.js:2096:38
        http://localhost:7357/testem/jasmine.js:2086:23

angularjs
ionic-framework

Answer 1

This line causing the error.

element = $compile(html)(scope)

Specifically

$compile(html)

Is coming back as undefined when the beforeEach runs before the test. I believe there is something wrong with this line

html = angular.element('<ion-item ng-repeat="task in tasks">{{task.taskId}}</ion-item>')

You should use double quotes on the outside and single quotes on the inside. That is most likely your problem. It should look like this.

html = angular.element("<ion-item ng-repeat='task in tasks'>{{task.taskId}}</ion-item>")

Answer 2

The problem is with your test case.

element.find('li').count()

You should run find for an 'ion-item' instead of a 'li'. See below.

element.find('ion-item').count()