title: How to unit test (with angular 5) a component that depends on the height of an element?
body: <p>I have a component with an input <code>fsElement</code>. this <code>fsElement</code> is supposed to be the id of any html element. Then my component uses this provided id to get the height of the element. Here is the relevant code:</p>
  
  <pre><code>export class BotaoTelaCheiaComponent implements OnInit {
  
    @Input() fsElement:string;
  
    private _originalHeight: number;
  
    constructor() { }
  
    ngOnInit() {}
  
    ngAfterViewInit() {
  
      this._originalHeight = document.getElementById(this.fsElement).clientHeight; 
  
    }
  
  }
  </code></pre>
  
  <p>when I run  <code>ng test</code> it fails with <code>TypeError: Cannot read property 'clientHeight' of null</code>. I am just runing the standard test that angular cli generates:</p>
  
  <pre><code>describe('BotaoTelaCheiaComponent', () =&gt; {
    let component: BotaoTelaCheiaComponent;
    let fixture: ComponentFixture&lt;BotaoTelaCheiaComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ BotaoTelaCheiaComponent ]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(BotaoTelaCheiaComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>How do I rewrite this test or my component so it passes?</p>