import { Component , DebugElement } from "@angular/core" ; import { ComponentFixture , TestBed } from "@angular/core/testing" ; import { NgxPopperjsDirective } from "./ngx-popperjs.directive.js" ; import { By } from "protractor" ; @ Component ( { template : `
        <popper-content #myPopperContent><p class="pop-lucky-font">Popcorn</p></popper-content>
        <img alt="Popcorn box" src="assets/images/popcorn-box.svg"
             [popper]="myPopperContent"
             (popperOnUpdate)="onPopperUpdate($event)"
             [popperShowOnStart]="true"
             popperTrigger="click"
             popperPlacement="top"
             class="pop-popcorn-box">
    ` } ) class NgxPopperjsDirectiveTestComponent { private _updateFired : boolean = ! 1 ; onPopperUpdate ( $event ) { this . _updateFired = ! ! $event ; } } let fixture ; let poppers ; beforeEach ( ( ) => { fixture = TestBed . configureTestingModule ( { declarations : [ NgxPopperjsDirective , NgxPopperjsDirectiveTestComponent ] } ) . createComponent ( NgxPopperjsDirectiveTestComponent ) ; fixture . detectChanges ( ) ; poppers = fixture . debugElement . queryAll ( By . directive ( NgxPopperjsDirective ) ) ; } ) ; it ( "should have one popper element" , ( ) => { expect ( poppers . length ) . toBe ( 1 ) ; } ) ; it ( "should have popper sibling" , ( ) => { const popperContent = poppers [ 0 ] . nativeElement . parentElement . querySelector ( "popper-content" ) ; expect ( popperContent ) . not . toBeNull ( ) ; } ) ; it ( "should show popper on start" , async ( ) => { const popperContent = poppers [ 0 ] . nativeElement . parentElement . querySelector ( ".ngxp__container" ) ; if ( ! popperContent ) { return ! 1 ; } const popperText = popperContent . querySelector ( ".ngxp__inner" ) . innerText ; expect ( popperText . trim ( ) ) . toEqual ( "Popcorn" ) ; } ) ;