import { Component } from '@angular/core';
import { InputResizeDirective } from './input-resize.directive';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

@Component({
  template: `<div><input resize [(ngModel)]="value" /></div>`,
})
export class TestWrapperComponent {
  value: string;
  constructor() {}
}

fdescribe('Directive: InputResizeDirective', () => {
  let fixture: ComponentFixture<TestWrapperComponent>;
  let component: TestWrapperComponent;

  let inputEl: HTMLInputElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestWrapperComponent, InputResizeDirective],
    });

    fixture = TestBed.createComponent(TestWrapperComponent);
    component = fixture.componentInstance;
    inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
    component.value = '';

    fixture.detectChanges();
  });

  it('should resize when input value changes', () => {
    component.value = 'New Value';
    const oldAttribute = inputEl.size;

    fixture.detectChanges();
    const newAttribute = inputEl.size;

    expect(oldAttribute).not.toBe(newAttribute);
    expect(newAttribute).toEqual(component.value.length);
  });
});
