使用 cdkFocusInitial 运行材质对话框组件的开玩笑单元测试时，如何修复“[cdkFocusInitial]”不可聚焦警告？

Posted 2023-03-08

【中文标题】使用 cdkFocusInitial 运行材质对话框组件的开玩笑单元测试时，如何修复“[cdkFocusInitial]”不可聚焦警告？

【英文标题】：How do I fix the '[cdkFocusInitial]' is not focusable warning, when running jest unit test of a material dialog component with cdkFocusInitial?

【发布时间】：2020-03-11 18:24:21

【问题描述】：

我正在对材质对话框组件运行开玩笑的单元测试，其中我在对话框的输入元素上有cdkFocusInitial。这在运行应用程序时非常有效，但是当我在 Jest 中运行单元测试时出现以下错误：

console.warn node_modules/@angular/cdk/bundles/cdk-a11y.umd.js:1861
    Element matching '[cdkFocusInitial]' is not focusable. htmlInputElement 
      __zone_symbol__inputfalse: null,
      __zone_symbol__blurfalse: null,
      __zone_symbol__compositionstartfalse: null,
      __zone_symbol__compositionendfalse: null,
      __zone_symbol__focusfalse: null,
      __zone_symbol__animationstartfalse: null,
      [Symbol(SameObject caches)]: [Object: null prototype]  classList: DOMTokenList  
    

我试图在 stackblitz 中设置 jest 来重现，但我的组件本质上看起来与官方对话框示例非常相似。我已经克隆了example here，并添加了cdkFocusInitial。当您打开对话框时，焦点已按预期设置：

希望您能帮助找出我可以尝试修复/删除此警告的方法。

解决方法

在 beforeEach 函数中，我像这样模拟 console.warning：

 beforeEach(() => 
       // Removes "'[cdkFocusInitial]' is not focusable" warning when running tests
       console.warn = jest.fn();
    );

【问题讨论】：

你好。您找到解决方案了吗？我在使用 Angular 9 以及使用 Karma 和 Jasmine 运行测试时遇到了同样的问题。

仅发布的解决方法，模拟 console.warn 方法

【参考方案1】：

您需要模拟调用isFocusable 的InteractivityChecker 服务。

最简单的方法是在您的 TestBed 中重写 isFocusable 方法，如下所示：

    beforeEach(async(() => 
        TestBed.configureTestingModule(
            imports: [...],
            declarations: [...],
        )
            .overrideProvider(InteractivityChecker, 
                useValue: 
                    isFocusable: () => true, // This checks focus trap, set it to true to  avoid the warning
                ,
            )
            .compileComponents();
    ));

【讨论】：

很高兴我能帮上忙！不得不对源代码进行一些挖掘，以找出该错误是从哪里触发的