zoukankan      html  css  js  c++  java
  • [AngularJS] Test an Angular Component with $componentController

    Traditionally you had to create DOM elements to test a directive but by shifting our focus to components, writing unit tests got a lot easier using $componentControllerwithin ngMocks. We can now test our component's controller with an easy to use API that does not require us to spin up any DOM elements to do so. In this lesson, we will see how our ES6 tests are transpiled, learn how to test a component using$componentController and talk about how to simulate lifecycle hooks.

    Controller:

    class CategoriesController {
      constructor(CategoriesModel) {
        'ngInject';
    
        this.CategoriesModel = CategoriesModel;
      }
    
      $onInit() {
        this.CategoriesModel.getCategories()
          .then(result => this.categories = result);
      }
    
      onCategorySelected(category) {
        this.CategoriesModel.setCurrentCategory(category);
      }
    
      isCurrentCategory(category) {
        return this.CategoriesModel.getCurrentCategory() &&
          this.CategoriesModel.getCurrentCategory().id === category.id;
      }
    }
    
    export default CategoriesController;

    Test:

    import CategoriesModule from './categories';
    import CategoriesController from './categories.controller';
    import CategoriesComponent from './categories.component';
    import CategoriesTemplate from './categories.html';
    
    describe('Categories', () => {
      let component, $componentController, CategoriesModel;
    
      beforeEach(() => {
        window.module('categories');
    
        window.module($provide => {
          $provide.value('CategoriesModel', {
            getCategories: () => {
              return {
                then: () => {}
              };
            }
          });
        });
      });
    
      beforeEach(inject((_$componentController_, _CategoriesModel_) => {
        CategoriesModel = _CategoriesModel_;
        $componentController = _$componentController_;
      }));
    
      describe('Module', () => {
        it('is named correctly', () => {
          expect(CategoriesModule.name).toEqual('categories');
        });
      });
    
      describe('Controller', () => {
        it('calls CategoriesModel.getCategories immediately', () => {
          spyOn(CategoriesModel, 'getCategories').and.callThrough();
    
          component = $componentController('categories', {
            CategoriesModel
          });
          component.$onInit();
    
          expect(CategoriesModel.getCategories).toHaveBeenCalled();
        });
      });
  • 相关阅读:
    mysql自定义函数
    MYSQL常见运算符和函数
    PHP魔术方法和魔术变量总结
    魔术常量(Magic constants)
    常量和静态变量会先载入内存后在进行执行php代码
    php IP转换整形(ip2long)
    面试题1
    Java 通过 BufferReader 实现 文件 写入读取 示例
    UVA 2039 Pets(网络流)
    [置顶] Android框架攻击之Fragment注入
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5854379.html
Copyright © 2011-2022 走看看