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 there 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');
    });
  });
});

I figured out that there is a simpler way of testing a template with karma, using karma-jquery and chai-jquery plugin. You can grab the element of the template using jquery selectors like this:

expect($('div.modal').html()).to.contain('hello');

The problem with this approach is that you cannot focus on a given template, there may be collisions between elements, classes and id-s.

It would be great if you could test the modal straight. Or if it is not possible, is there any way to test a given 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: karma-runner.github.io/0.12/index.html

mocha: github.com/mochajs/mocha

chai: chaijs.com/

chai-jquery: chaijs.com/plugins/chai-jquery

I've checked the unit tests of the Ionic modal service, and found that if you want to test the DOM, you have an interface for this. For example, you can test the classes of your element like this:

expect(yourModalInstance.modalEl.classList.contains('modal')).to.equal(true)

But what about other DOM tests? How can you reach the raw template and the DOM of your modal? I've found that you can get the template through yourModalInstance.modalEl. But can I get the parsed template of the modal straight, without compiling it?

Fortunately you have a helper method, yourModalInstance.$el, and you can get the parsed dom through like this:

expect(yourModalInstance.$el.find('ion-header-bar')).to.have.class('secondary');

So the answer is yourModalInstance.$el, if you'd like to use jquery to test, and yourModalInstance.modalEl, if you want to test the raw template. In the long run, you don`t need the ugly mock directive to test the modal just an instance of your modal, which you can get from the controller where you instantiate it. Yay!