如何在 Angular 4 规范文件中模拟 nativeElement.focus()

Question

ElementRef我有一个使用下面定义的方法。

@ViewChild('idNaicsRef') idNaicsRef: ElementRef;

ElementRef然后使用 设置焦点.nativeElement.focus()。

该方法在运行规范时失败，提示“未定义是一个对象”

Answer 1

虽然 httpNick 的答案应该有效，但我最终向我团队中的一位架构师询问了这个问题，他引导我找到了一个稍微不同的解决方案，可能更简单一些。

describe(MyComponent.name, () => {

    let comp: MyComponent;

    describe('myFunction', () => {

        it('calls focus', () => {

            comp.idNaicsRef = {
                nativeElement: jasmine.createSpyObj('nativeElement', ['focus'])
            }

            comp.myFunction();

            expect(comp.idNaicsRef.nativeElement.focus).toHaveBeenCalled();
        });
    });

这个特定的示例只是测试该focus方法是否已被调用。这是我在测试我的方法时感兴趣的测试，但是您当然可以测试您想要的任何内容。关键是事先的设置（在向我展示之前这是难以捉摸的）。

Answer 2

这应该有效。这只是创建一个间谍对象，然后您可以用您想要的任何内容填充它，这样您甚至可以检查它是否在单元测试中被调用。

  import createSpyObj = jasmine.createSpyObj;
  comp.idNaicsRef = createSpyObj('idNaicsRef', ['nativeElement']);
  comp.idNaicsRef.nativeElement = { focus: () => { }};

comp是对您正在测试的组件的引用。

createSpyObj来自进口茉莉花