如何在Angular -cli 4单元测试中从输入模拟key up事件

在Angular CLI 4单元测试中，可以通过模拟键盘事件来触发输入框的keyup事件。以下是一个示例代码：

首先，确保你已经安装了Angular CLI，并创建了一个Angular项目。
打开你要进行单元测试的组件的.spec.ts文件。
导入必要的依赖：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

在describe块中，声明组件和fixture变量：

let component: YourComponent;
let fixture: ComponentFixture<YourComponent>;

在beforeEach块中，配置测试环境：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ YourComponent ]
  })
  .compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

在it块中，编写测试用例：

it('should trigger keyup event on input', () => {
  const inputElement: DebugElement = fixture.debugElement.query(By.css('input')); // 获取输入框元素
  const inputNativeElement: HTMLInputElement = inputElement.nativeElement; // 获取输入框的原生DOM元素

  spyOn(component, 'onKeyUp'); // 监听组件中的onKeyUp方法

  inputNativeElement.value = 'test value'; // 设置输入框的值
  inputNativeElement.dispatchEvent(new Event('keyup')); // 模拟keyup事件

  fixture.detectChanges();

  expect(component.onKeyUp).toHaveBeenCalled(); // 验证onKeyUp方法是否被调用
});

在上述代码中，我们首先通过fixture.debugElement.query(By.css('input'))获取到输入框的DebugElement对象，然后通过inputElement.nativeElement获取到输入框的原生DOM元素。接着，我们使用spyOn方法监听组件中的onKeyUp方法。然后，我们设置输入框的值，并通过dispatchEvent方法模拟keyup事件的触发。最后，我们使用expect语句验证onKeyUp方法是否被调用。

这是一个简单的示例，你可以根据自己的实际情况进行修改和扩展。关于Angular单元测试的更多信息，你可以参考Angular官方文档。