[Unit Testing] Angular Test component with required
Angular with Component test Testing required unit
2023-09-14 09:00:54 时间
export default (ngModule) => { describe('Table Item component', () => { let $compile, directiveElem, directiveCtrl, $scope, state, parentElement; beforeEach(window.module(ngModule.name)); beforeEach(inject(function (_$compile_, _$rootScope_, _$state_) { $compile = _$compile_; $scope = _$rootScope_.$new(); state = _$state_; spyOn(state, 'go'); spyOn(state, 'transitionTo'); directiveElem = getCompiledElement(); directiveCtrl = directiveElem.controller('ttmdTableItem'); })); it('should have the controller defined', () => { expect(directiveCtrl).toBeDefined(); }); it('should have the parent controller defined', () => { expect(directiveCtrl.listCtrl).toBeDefined(); }); it('should include desktop item', () => { expect(directiveElem.find('ttmd-desktop-item').length).toEqual(1); }); it('should include mobile item', () => { console.log(parentElement); directiveElem = getCompiledElement(true); directiveCtrl = directiveElem.controller('ttmdTableItem'); $scope.$digest(); expect(directiveElem.find('ttmd-mobile-item').length).toEqual(1); }); function getCompiledElement(b) { $scope.item = { "serviceCode": "1-655-834-8324", "username": "Johann Homenick", "amount": "4.37", "dueDate": "2016-06-07T07:15:02.720Z" }; $scope.headers = [ 'id', 'number', 'username', 'amount', 'due date' ]; const mockParentController = { goMobile() { return b || false; } }; parentElement = angular.element('<div><ttmd-table-item item="item" headers="headers"><ttmd-actions></ttmd-table-item></div>'); parentElement.data('$ttmdTableController', mockParentController); const compiledDirective = $compile(parentElement)($scope) .find('ttmd-table-item'); $scope.$digest(); return compiledDirective; } }); };
------------------------
Child:
class TtmdTableItemController { constructor(ttMdTable) { this.ttMdTable = ttMdTable; } getSelectedItem(){ return this.item; } } const ttmdTableItemComponent = { bindings: { item: '=', headers: '<', hasTransclude: '<' }, transclude: true, replace: true, require: { 'listCtrl': '^ttmdTable' }, controller: TtmdTableItemController, controllerAs: 'vm', template: require('./table-item.html') }; export default (ngModule) => { ngModule.component('ttmdTableItem', ttmdTableItemComponent); }
parent:
class TtmdTableController { constructor(PaginationModel, $transclude) { .... } goMobile() { return this.model.goMobile(); } } const ttmdTableComponent = { bindings: { ... }, transclude: { 'actions': '?ttmdActions' }, controller: TtmdTableController, controllerAs: 'vm', template: require('./ttmd-table.html') }; export default (ngModule) => { ngModule.component('ttmdTable', ttmdTableComponent); }
相关文章
- 关于 Angular 里 module 和 Component 包含粒度的一个讨论
- Angular 结合 dygraphs 实现 annotation
- Angular HTTPClient API 在 SAP 电商云中的使用
- 使用 Angular 14 的 inject 函数优化对 Ngrx 的使用方式
- orbital angular momentum_omnidirectional
- 关于 Angular 应用的入口
- 关于 Angular 开发时对主流浏览器支持的话题
- Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
- Angular 4.0发布,致力于减小代码体积详解编程语言
- Oracle中利用WITH子句的使用(oracle中的with)
- 语句使用Oracle两个WITH语句实现数据查询(oracle两个with)
- angular简介和其特点介绍