[Unit Testing] Angular Test component with required

复制代码
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);
}
复制代码

 

posted @   Zhentiw  阅读(261)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示