mercredi 29 avril 2015

How to test the template of an Ionic modal?

I'd like to test the template of an Ionic modal. The problem is that I cannot access the template through the modal. I figured out a workaround and it works, but it must be other solution.

I solved this in the following way:

Created a mock Angular directive using the modal's template, because you can test a directive quite easily. Here is my test, using karma, mocha, chai and chai-jquery plugin:

'use strict';

describe('Directive: noteList', function () {
  var $compile;
  var scope;
  var mockDirective;

  angular.module('simpleNote').directive('mockNewNoteModal', function () {
    return {
      resrict: 'E',
      templateUrl: 'scripts/new-note/new-note-modal.html'
    };
  });

  beforeEach(module('simpleNote'));

  beforeEach(module('templates')); // module from ngHtml2JsPreprocessor karma task

   beforeEach(inject(function (_$compile_, _$rootScope_) {
     $compile = _$compile_;
     scope = _$rootScope_.$new();
     mockDirective = $compile('<mock-new-note-modal></mock-new-note-modal>')(scope);
     scope.$digest();
     angular.element(document).find('body').append(mockDirective); // for rendering css
  }));

  describe('Test the template of newNoteModal', function () {
    it('should have a class modal', function () {
      expect(mockDirective.find('div')).to.have.class('modal');
    });
  });
});

It would be great if you could test the modal straight. Or if it is not possible, is there any way to test any html template without creating a mock directive?

Sorry but I haven't had the 10 reputation to insert the links I'd like to, so I insert them as plain text:

karma: http://ift.tt/1cX2Gbq

mocha: http://ift.tt/1bVH9AJ

chai: chaijs.com/

chai-jquery: http://ift.tt/1rngKvQ

1 commentaire:

  1. It would be great if you placed the link of the original question:

    http://stackoverflow.com/questions/29954669/how-to-test-the-template-of-an-ionic-modal

    RépondreSupprimer