如何测试离子模态的模板？

Question

我想测试 Ionic modal 的模板。问题是我无法通过模式访问模板。我想出了一个解决方法并且它有效，但必须有其他解决方案。

我通过以下方式解决了这个问题：

使用模式的模板创建了一个模拟 Angular 指令，因为您可以 test a directive 非常容易。这是我的测试，使用 karma、mocha、chai 和 chai-jquery 插件：

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

我发现有一种使用 karma 测试模板的更简单方法，即使用 karma-jquery 和 chai-jquery 插件。您可以使用 jquery 选择器获取模板元素，如下所示：

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

这种方法的问题是您不能专注于给定的模板，元素类和 id-s 之间可能会发生冲突。

如果你能直接测试模态就好了。或者，如果不可能，是否有任何方法可以在不创建模拟指令的情况下测试给定的 html 模板？

抱歉，我没有 10 个声誉来插入我想要的链接，所以我将它们作为纯文本插入：

业力：业力-runner.github.io/0.12/index.html

摩卡咖啡：github.com/mochajs/mocha

柴：chaijs.com/

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

Answer 1

我检查了 Ionic 模态服务的 unit tests，发现如果你想测试 DOM，你有一个接口。例如，您可以像这样测试元素的类：

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

但是其他 DOM 测试呢？你如何到达原始模板和模态的 DOM？我发现您可以通过 yourModalInstance.modalEl 获取模板。但是我可以直接得到模态的解析模板，而不用编译吗？

幸运的是你有一个辅助方法，yourModalInstance.$el，你可以像这样得到解析的dom：

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

所以答案是 yourModalInstance.$el，如果你想使用 jquery 来测试，而 yourModalInstance.modalEl 如果你想测试原始模板。在长运行中，您不需要丑陋的 mock 指令来测试模态只是模态的一个实例，您可以从实例化它的控制器中获取它。耶！

如何测试离子模态的模板？

How to test the template of an Ionic modal?

javascript

tdd

modal-dialog

ionic-framework

ionic