web-dev-qa-db-fra.com

Impossible de simuler l'événement de pression de touche dans Angular 2 test unitaire (Jasmine)

J'utilise une directive pour obtenir les données d'entrée utilisées comme texte de filtre.

voici mon écouteur hôte dans la directive:

@HostListener('input', ['$event.target.value'])
  public onChangeFilter(event: any): void {
    console.log('input event fired, value: ' + event);
    this.columnFiltering.filterString = event;
    this.filterChanged.emit({filtering: this.columnFiltering});
  }

ce code fonctionne parfaitement, je ne peux pas tester les mêmes unités.

Je me suis abonné à filterChanged EventEmitter, dans mon test unitaire pour vérifier la valeur.

J'ai essayé de simuler un événement de pression de touche pour changer la valeur et j'ai également essayé l'attribut de valeur des paramètres. Rien de tout cela ne fonctionne pour moi.

voici mon fichier spec:

describe('Table View', () => {
  let fixture: ComponentFixture<any>;
    let context: TableComponent;
   beforeEach(() => {
     TestBed.configureTestingModule({
          providers: [
            TableComponent,
          ],
          imports: [TableModule],
      });
      fixture = TestBed.createComponent(TableComponent);
      context = fixture.componentInstance;
    });
it('should allow filter', () => {
      const element = fixture.nativeElement;
      context.config = config;
      fixture.detectChanges();

      let tableChangeCount = 0;
      let tableEvent: any;
      context.tableChanged.subscribe((event: any) => {
        tableChangeCount++;
        tableEvent = event;
      });
      // Check if table exists
      let inputElement = element.querySelectorAll('tr')[1].querySelector('input');
    let e = new KeyboardEvent("keypress", {
            key: "a",
            bubbles: true,
            cancelable: true,
          });
          inputElement.dispatchEvent(e);
 });

});

J'ai essayé de définir la valeur:

let attrs = inputElement.attributes;
      inputElement.setAttribute('value', 'abc');
       for (let i = attrs.length - 1; i >= 0; i--) {
         // Attribute value is set correctly
         if (attrs[i].name === 'value') {
         console.log(attrs[i].name + "->" + attrs[i].value);
         }
       }

Quelqu'un peut-il m'aider, comment puis-je tester les mêmes unités?

unit-testingangularinputjasminekeypress
16
Akanksha Gaur

J'ai également eu du mal à simuler une pression de touche dans un test unitaire. Mais est tombé sur une réponse de Seyed Jalal Hosseini. C'est peut-être ce que vous recherchez.

Si vous essayez de simuler une pression sur une touche, vous pouvez déclencher un événement en appelant dispatchEvent(new Event('keypress')); sur l'élément.

Voici la réponse à laquelle je fais référence qui donne plus de détails: https://stackoverflow.com/a/37956877/40817

Si vous souhaitez définir la touche sur laquelle vous avez appuyé, vous pouvez également le faire.

const event = new KeyboardEvent("keypress",{
    "key": "Enter"
});
el.dispatchEvent(event);

Plus d'informations que je viens de rencontrer: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

30
bmd

Si vous souhaitez utiliser un code clé (ou "qui"), vous pouvez le faire:

// @HostListener('document:keypress')

const escapeEvent: any = document.createEvent('CustomEvent');
escapeEvent.which = 27;
escapeEvent.initEvent('keypress', true, true);
document.dispatchEvent(escapeEvent);
3
Steve Brush