Событие загрузки тестового изображения Angular 5

Question

Я работаю с angular 5, разрабатывая некоторые общие директивы для моего проекта, и у меня возникла проблема с директивой анимации изображений;код для этого следующий

import { Directive, ElementRef, HostListener, OnInit } from '@angular/core';

@Directive({
    selector: '[appImageAnimation]'
})
export class ImageAnimationDirective implements OnInit {

    image;
    dimensions;

    constructor(private elem: ElementRef) { }

    ngOnInit(): void {
        this.image = this.elem.nativeElement;
    }

    @HostListener('load')
    onImageLoad() {
        console.log('Image loaded!');
        this.dimensions = {
            width: this.image.naturalWidth,
            height: this.image.naturalHeight
        }
    }
}

Мне нужно проверить метод onImageLoad, который запускается событием загрузки изображения, у меня есть следующий файл теста

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

import { ImageAnimationDirective } from './image-animation.directive';

@Component({
    template: `
        <div className="cont-test-img">
            <img src="https://picsum.photos/800/450/?random"
                appImageAnimation />
        </div>
    `
})
class ImageTestComponent {
    constructor() {}
}

describe('ImageAnimationDirective', () => {
    let component: ImageTestComponent;
    let fixture: ComponentFixture<ImageTestComponent>;
    let debugElement: DebugElement;
    let directive: ImageAnimationDirective;
    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ImageTestComponent, ImageAnimationDirective]
        });
        fixture = TestBed.createComponent(ImageTestComponent);
        component = fixture.componentInstance;
    });

    it('should get dimensions', () => {
        debugElement = fixture.debugElement.query(By.directive(ImageAnimationDirective));
        directive = debugElement.injector.get(ImageAnimationDirective);
        spyOn(directive, 'onImageLoad').and.callThrough();
        expect(directive.dimensions.width).not.toEqual(0);
    });

});

Но этот тестне удалось, я не знаю, чего не хватает, или как лучше всего выполнить проверку теста, когда загружено изображение в ImageTestComponent

Я использую PhantomJS 2.1.1 в качестве тестового браузера.

Буду признателен за помощь, спасибо.

Answer 1

Недавно я тестировал подобную функциональность, и сначала я решил не загружать изображения из API, поскольку вызов http более подвержен ошибкам, чем загрузка статического тестового изображения.

Для загрузки статических изображений сначала необходимонастройте карму (я полагаю, что у вас есть в настройках тестирования) для обслуживания изображения, изменив karma.conf.js и добавив

files: [
  { pattern: './<PATH_TO_IMAGE_DIR>/**', watched: false, included:false, nocache:false, served:true }
]

, а затем отправив изображение в ваш тестовый пример, добавив /base перед указанным каталогом изображенийвыше и, конечно, добавить сам файл изображения.Ваша спецификация должна быть асинхронной с использованием функции jasmine done;что-то вроде этого:

it('should get dimensions', (done) => {
    debugElement = fixture.debugElement.query(By.directive(ImageAnimationDirective));
    directive = debugElement.injector.get(ImageAnimationDirective);
    fixture.detectChanges()

    // wait for a short time to make sure image is requested
    setTimeout(() => {
        expect(directive.dimensions.width).not.toEqual(0);
        done();
    }, 200);
});

, если вы решите не использовать статическое изображение, тогда, возможно, интервал должен быть немного больше.Я не проверял это, но оно должно работать