[AngularJS + Unit Testing] Testing a component with requiring ngModel

The component test:

复制代码
describe('The component test', () => {
    let component, $componentController, $controller, $injector, $scope;

    beforeEach(module("componennts.module"));
    beforeEach(inject((_$componentController_, _$controller_, _$injector_, _$rootScope_) => {
        $componentController = _$componentController_;
        $controller = _$controller_;
        $injector = _$injector_;
        $scope = _$rootScope_.$new();
    }));

    describe('Controller', () => {
        it('should have ng-model with the correct binding', () => {    
            let locals = {
                $scope: $scope,
                $element: angular.element('<my-component ng-model="value"></my-component>'),
                $attrs: { ngModel: 'value' }
            };
            locals.$scope.value = [1];
            let ngModelController = $injector.get('ngModelDirective')[0].controller;
            let ngModelInstance = $controller(ngModelController, locals);
            $scope.$digest();
            component = $componentController('myComponent', null, { ngModel: ngModelInstance });
            component.$onInit();
            expect(component).toBeDefined();
            expect(component._selectedValues).toEqual([1]); // _selectedValues = ngModel.$viewValue
        });
    });
});
复制代码

 

posted @   Zhentiw  阅读(257)  评论(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工具
历史上的今天:
2016-11-14 [AngularJS NG-redux] Handle Asynchronous Operations with Middleware
2016-11-14 [AngualrJS NG-redux] Map State and Dispatchers to Redux
2016-11-14 [Scss Flex] Reuse Flexbox Styles With A Sass Mixin
2015-11-14 [AngularJS] Use ng-model-options to limit $digest
2015-11-14 [Flux] Component / Views
2015-11-14 [Flux] Stores
2014-11-14 [RSpec] LEVEL 2 CONFIGURATION & MATCHERS
点击右上角即可分享
微信分享提示