测试 Templates, Partials & Views

测试目的

• 测试模板被设置并从服务端下载下来
• 测试模板分配到了正确的 controller
• 测试模板分配到了正确的 view 或者 include。

模板，是那些可以注入你 AngularJS 应用的，独立的 Html 代码，用来组成 View 的各部分。不管模板是通过 ngView来渲染，还是通过 ngInculde，模板 Html 代码应当能够简单方便的注入页面中。

View 和导入动作是通过 $templateCache 服务提供的缓存机制起作用的。因此如果你想 Mock 模板代码，那么只需要将 Html 添加到模板缓存对应的 templateUrl 缓存 Key 即可。

Midway 测试:

<!-- lang: js -->
//
// test/midway/templates/templatesSpec.js
//
describe("Midway: Testing Templates", function() {

  it("should load the template for the videos page properly",
    function(done) {

    var tester = ngMidwayTester('App');
    tester.visit('/videos?123', function() {
      var current = tester.inject('$route').current;
      var controller = current.controller;
      var template = current.templateUrl;
      expect(template).to.match(/templates\/views\/videos\/index_tpl\.html/);
      tester.destroy();
      done();
    });
  });

});

E2E测试:

<!-- lang: js -->
//
// test/e2e/templates/templatesSpec.js
//
describe("E2E: Testing Templates", function() {

  beforeEach(function() {
    browser().navigateTo('/');
  });

  it('should redirect and setup the videos page template on root', function() {
    browser().navigateTo('#/');
    expect(element('#ng-view').html()).toContain('youtube_listing');
  });

  it('should load the watched videos template into view', function() {
    browser().navigateTo('#/watched-videos');
    expect(element('#ng-view').html()).toContain('youtube_listing');
  });

  it('should load the watched video template into view', function() {
    browser().navigateTo('#/videos/123');
    expect(element('#ng-view').html()).toContain('profile');
  });

  it('should redirect back to the index page if anything fails', function() {
    browser().navigateTo('#/something/else');
    expect(element('#ng-view').html()).toContain('youtube_listing');
  });

});