关于Angular Component changeDetection策略设置成OnPush的一个单元测试局限性

简介: 关于Angular Component changeDetection策略设置成OnPush的一个单元测试局限性

image.pngimage.pngimage.png

OnPush: 0

Use the CheckOnce strategy, meaning that automatic change detection is deactivated until reactivated by setting the strategy to Default (CheckAlways). Change detection can still be explicitly invoked. This strategy applies to all child directives and cannot be overridden.


注意:仍然可以显式触发。


Default: 1

Use the default CheckAlways strategy, in which change detection is automatic until explicitly deactivated.


我们甚至可以更改某个Component的change detection频率。


Detach change detector to limit how often check occurs

The following example defines a component with a large list of read-only data that is expected to change constantly, many times per second. To improve performance, we want to check and update the list less often than the changes actually occur. To do that, we detach the component’s change detector and perform an explicit local check every five seconds.


class DataListProvider {

 // in a real application the returned data will be different every time

 get data() {

   return [1, 2, 3, 4, 5];

 }

}


@Component({

 selector: 'giant-list',

 template: `

   

  • Data {{d}}
  •    `,

    })

    class GiantList {

     constructor(private ref: ChangeDetectorRef, public dataProvider: DataListProvider) {

       ref.detach();

       setInterval(() => {

         this.ref.detectChanges();

       }, 5000);

     }

    }


    @Component({

     selector: 'app',

     providers: [DataListProvider],

     template: `

       

       `,

    })

    class App {

    }

    Angular应用 changeDetection模式的设置框架代码

    根据关键字ChangeDetectionStrategy搜索即可。


    const createInject = makeMetadataFactory('Inject', (token) => ({ token }));

    const createInjectionToken = makeMetadataFactory('InjectionToken', (desc) => ({ _desc: desc, ɵprov: undefined }));

    const createAttribute = makeMetadataFactory('Attribute', (attributeName) => ({ attributeName }));

    const createContentChildren = makeMetadataFactory('ContentChildren', (selector, data = {}) => (Object.assign({ selector, first: false, isViewQuery: false, descendants: false }, data)));

    const createContentChild = makeMetadataFactory('ContentChild', (selector, data = {}) => (Object.assign({ selector, first: true, isViewQuery: false, descendants: true }, data)));

    const createViewChildren = makeMetadataFactory('ViewChildren', (selector, data = {}) => (Object.assign({ selector, first: false, isViewQuery: true, descendants: true }, data)));

    const createViewChild = makeMetadataFactory('ViewChild', (selector, data) => (Object.assign({ selector, first: true, isViewQuery: true, descendants: true }, data)));

    const createDirective = makeMetadataFactory('Directive', (dir = {}) => dir);

    var ViewEncapsulation;

    (function (ViewEncapsulation) {

       ViewEncapsulation[ViewEncapsulation["Emulated"] = 0] = "Emulated";

       ViewEncapsulation[ViewEncapsulation["Native"] = 1] = "Native";

       ViewEncapsulation[ViewEncapsulation["None"] = 2] = "None";

       ViewEncapsulation[ViewEncapsulation["ShadowDom"] = 3] = "ShadowDom";

    })(ViewEncapsulation || (ViewEncapsulation = {}));

    var ChangeDetectionStrategy;

    (function (ChangeDetectionStrategy) {

       ChangeDetectionStrategy[ChangeDetectionStrategy["OnPush"] = 0] = "OnPush";

       ChangeDetectionStrategy[ChangeDetectionStrategy["Default"] = 1] = "Default";

    })(ChangeDetectionStrategy || (ChangeDetectionStrategy = {}));

    const createComponent = makeMetadataFactory('Component', (c = {}) => (Object.assign({ changeDetection: ChangeDetectionStrategy.Default }, c)));

    const createPipe = makeMetadataFactory('Pipe', (p) => (Object.assign({ pure: true }, p)));

    const createInput = makeMetadataFactory('Input', (bindingPropertyName) => ({ bindingPropertyName }));

    const createOutput = makeMetadataFactory('Output', (bindingPropertyName) => ({ bindingPropertyName }));

    const createHostBinding = makeMetadataFactory('HostBinding', (hostPropertyName) => ({ hostPropertyName }));

    const createHostListener = makeMetadataFactory('HostListener', (eventName, args) => ({ eventName, args }));

    const createNgModule = makeMetadataFactory('NgModule', (ngModule) => ngModule);

    const createInjectable = makeMetadataFactory('Injectable', (injectable = {}) => injectable);


    //告诉Angular,你正在使用自定义元素

    const CUSTOM_ELEMENTS_SCHEMA = {

       name: 'custom-elements'

    };

    ```![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/20210213110729716.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2kwNDI0MTY=,size_16,color_FFFFFF,t_70)


    目录
    相关文章
    |
    2月前
    |
    监控 安全 Android开发
    【新手必读】Airtest测试Android手机常见的设置问题
    【新手必读】Airtest测试Android手机常见的设置问题
    |
    24天前
    |
    算法 异构计算
    m基于FPGA的电子钟verilog实现,可设置闹钟,包含testbench测试文件
    该文介绍了基于FPGA的电子钟设计,利用Vivado2019.2平台进行开发并展示测试结果。电子钟设计采用Verilog硬件描述语言,核心包括振荡器、分频器和计数器。时间显示为2个十进制格式,闹钟功能通过存储器和比较器实现,当当前时间等于设定时间时触发。文中给出了Verilog核心程序示例,展示了时钟信号、设置信号及输出的交互。
    21 2
    |
    4月前
    |
    移动开发 前端开发 JavaScript
    VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
    VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
    VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
    |
    3月前
    |
    Web App开发 UED 开发者
    谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
    谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
    36 1
    |
    6天前
    设置Open in Terminal快捷键Alt+Shift+Z,方便angular项目的各种命令输入(多任务状态下)
    设置Open in Terminal快捷键Alt+Shift+Z,方便angular项目的各种命令输入(多任务状态下)
    |
    3月前
    |
    测试技术 Python
    设置pycharm使用pytest执行测试用例时,输出print语句至控制台
    设置pycharm使用pytest执行测试用例时,输出print语句至控制台
    53 0
    |
    3月前
    |
    Web App开发 测试技术
    软件测试/测试开发|edge浏览器首页及新标签页设置
    软件测试/测试开发|edge浏览器首页及新标签页设置
    46 0
    |
    3月前
    |
    JavaScript
    Angular Component 内 set 关键字的使用
    Angular Component 内 set 关键字的使用
    24 0
    |
    4月前
    |
    Oracle Java 关系型数据库
    Generator【SpringBoot集成】代码生成+knife4j接口文档(2种模板设置、逻辑删除、字段填充 含代码粘贴可用)保姆级教程(注意事项+建表SQL+代码生成类封装+测试类)
    Generator【SpringBoot集成】代码生成+knife4j接口文档(2种模板设置、逻辑删除、字段填充 含代码粘贴可用)保姆级教程(注意事项+建表SQL+代码生成类封装+测试类)
    27 0
    |
    4月前
    |
    Java 测试技术
    【SpringBoot】 设置随机数据 用于测试用例
    【SpringBoot】 设置随机数据 用于测试用例
    25 0