Изменение размера окна тестирования по директиве Angular - размеры окна не определены после события resize - PullRequest
Новая
       35

Изменение размера окна тестирования по директиве Angular - размеры окна не определены после события resize

0 голосов
/ 20 февраля 2019

У меня есть директива, которая изменяет высоту текста в элементе при изменении размера окна: 

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


@Directive({selector: '[fittext]'})
export class FittextDirective {

  constructor(private element: ElementRef, private renderer: Renderer2) { }

  public changeFontSize(): void {
    const htmlElement: HTMLElement = this.element.nativeElement;
    const elemDims = htmlElement.getBoundingClientRect();
    const height = elemDims.height;
    // Set new font size on element
    this.renderer.setStyle(htmlElement, 'font-size', `${height / 2}px`);
  }

  @HostListener('window:resize')
  public onResize(): void {
    this.changeFontSize();
  }

}

И я пытаюсь протестировать его, используя пользовательский компонент-обертку и отправляя событие изменения размера в окне. 

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FittextDirective } from './fittext.directive';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { By } from '@angular/platform-browser';


@Component({
  template: `
    <div #div fittext>{{ text }}</div>
    <style>
      div {
        height: 100vh;
        width: 100vw;
        font-size: 100%;
      }
    </style>
  `
})
class TestComponent {
  @ViewChild('div') div: ElementRef;
  public text: string = 'This is test string';
}


describe('FittextDirective', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;

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

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

  fit('should trigger on resize', () => {
    const {height, width} = component.div.nativeElement.getBoundingClientRect();
    const fontSize = component.div.nativeElement.style.fontSize;
    window.dispatchEvent(new Event('resize'));
    fixture.detectChanges()

    const resizedElement = fixture.debugElement.query(By.directive(FittextDirective));
    const {newHeight, newWidth} = resizedElement.nativeElement.getBoundingClientRect();
    const newFontSize = resizedElement.nativeElement.style.fontSize;

    expect(newHeight).not.toEqual(height);
    expect(newWidth).not.toEqual(width);
    expect(newFontSize).not.toEqual(fontSize);
  });
});

Однако тесты сообщают, что размеры шрифта равны '', а высота и ширина после изменения размера (т. Е. newHeight и newWidth) равны undefined.Почему размер шрифта является пустой строкой, хотя размер шрифта должен соответствовать размеру div?И почему высота и ширина после изменения размера окна не определены?Я использую хром без головы для тестирования, поэтому я не могу использовать метод window.resizeTo(width, height).

Редактировать 1: После предложения Alex K я изменил newHeight и newWidth to: 

const newHeight = resizedElement.nativeElement.getBoundingClientRect().height;
const newWidth = resizedElement.nativeElement.getBoundingClientRect().width;

Однако, похоже, что после события изменения размера окна не изменяется (я получаю сообщение об ошибке Expected 600 not to equal 600. и Expected 785 not to equal 785.).Я также изменил стиль между тегами на стиль в атрибуте компонента, то есть атрибуте styles, но, тем не менее, сообщается, что fontSize равен '' (или любому стилю в этом отношении).

Редактировать 2: По какой-то странной причине стили могут быть получены только с помощью window.getComputedStyle() (см. this ).Теперь я получаю размер шрифта, но он не изменяется после изменения размера. 

const styles = window.getComputedStyle(element.nativeElement);
const fontSize = styles.fontSize;
...
const newStyles = window.getComputedStyle(resizedElement.nativeElement);
const newFontSize = newStyles.fontSize;

Редактировать 3: Как и предполагалось, я подделал размеры с spyOn, однако, это не меняет размер шрифтов. 

spyOn(component.div.nativeElement, 'getBoundingClientRect')
  .and.returnValue({height: height / 2, width: width / 2});

window.dispatchEvent(new Event('resize'));
fixture.detectChanges()
...