click dispatchEvent не запускает угловую директиву 6 во время модульного тестирования в Jasmine / Karma - PullRequest
Новая
       10

click dispatchEvent не запускает угловую директиву 6 во время модульного тестирования в Jasmine / Karma

0 голосов
/ 22 ноября 2018

Это моя директива.Это директива для расширенного текста, который используется в html-файле в поле [innerHtml]. 

import { Directive, ElementRef } from '@angular/core';
import { Router } from '@angular/router';

@Directive({
  selector: '[appRichTextLink]'
})  

export class RichTextLinkDirective { 
  rawHTML: string;
  checkRouter = false;
  checkLink = false;
  constructor(public elem: ElementRef, private router: Router) {
    setTimeout(() => {
      if (this.elem.nativeElement.querySelectorAll) {
        const routerLinks: any[] = this.elem.nativeElement.querySelectorAll("[href]");
        const ref = this;
        if (routerLinks.length > 0) {
          for (let i = 0; i < routerLinks.length; i++) {
            routerLinks[i].addEventListener('click', function(e) {
              const hrefValue: string = this.getAttribute('href').toString();
              if (hrefValue !== "" && hrefValue !== "#" && hrefValue.indexOf('http://') === -1
                && hrefValue.indexOf('https://') === -1 && hrefValue.indexOf('//') === -1) {
                e.preventDefault();
                ref.router.navigate([hrefValue]);
              } else {
                window.open(hrefValue); 
                e.preventDefault();
                this.checkLink = true;
              }
            });
          }
        }
      }
    }, 2000);
  }
}
}

=============

Это мой юнит тест.Когда событие отправки запускает, URL-адрес изменяется и тест завершается, выдавая ошибку - «VM435 main.js: 946 GET http://localhost:9876/test 404 (не найдено)».Пожалуйста, помогите 

import { RichTextLinkDirective } from './rich-text-link.directive';
import { Component, DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser'
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { fakeAsync, tick } from '@angular/core/testing';
import { AppComponent } from 'src/app/app.component';
import { routes } from '../../app-routing.module'
import { from } from 'rxjs';
import {Location} from '@angular/common';
import { Router } from '@angular/router';


@Component({
  template: `<p appRichTextLink type="text" [innerHtml]="richText1"></p>`
})
class TestingComponent {
  richText1 = "<!DOCTYPE html> THIS IS A TEST COMPONENT<a href=\"/test\">test</a><a href=\"https://www.google.com\">shop products</a>.";
}

describe('RichTextLinkDirective', () => {

  let fixture: ComponentFixture<TestingComponent>;
  let appFixture: ComponentFixture<AppComponent>;

  let directive: RichTextLinkDirective;
  let debugElement: DebugElement;

  let router: Router;
  let location: Location;
  //let hrefElements: any[];
  beforeAll(() => {
    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
  });

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes(routes)],
      declarations: [TestingComponent, RichTextLinkDirective, AppComponent],
    })
      .compileComponents();
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(TestingComponent);
    appFixture = TestBed.createComponent(AppComponent);

    debugElement = fixture.debugElement.query(By.directive(RichTextLinkDirective));
    directive = debugElement.injector.get<RichTextLinkDirective>(RichTextLinkDirective);

    router = TestBed.get(Router);
    location = TestBed.get(Location);

    fixture.detectChanges(); 
  });

  it('should create an instance', () => {
    const directive1 = new RichTextLinkDirective(null, null);
    expect(directive1).toBeTruthy();
  });

  it('should route to the desired link', fakeAsync(() => {
      const event = new MouseEvent('click', { bubbles: true, cancelable: true });
      tick(2000);
      const spy  = spyOn(TestBed.get(Router), 'navigate');
      directive.elem.nativeElement.querySelectorAll("[href]")[0].dispatchEvent(event);
      fixture.detectChanges(); 
      expect(spy).toHaveBeenCalledWith(['/test']); 
    }));
});
...