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();
        });
      });
  • 相关阅读:
    C#读物
    那些健康手环真的值得买么?
    书籍推荐系列之一 -- 《凤凰项目:一个IT运维的传奇故事》
    测试
    HDU-2024 C语言合法标识符
    HDU-4548 美素数
    求最大流dinic算法模板
    最小费用最大流模板理解
    网络流初步——增广路代码的分析
    最短路的另外两种算法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5854379.html
Copyright © 2011-2022 走看看