import { Component , NO_ERRORS_SCHEMA } from '@angular/core' ; import { TestBed , async as asyncMethod } from '@angular/core/testing' ; import { FeatureToggleProviderComponent } from './ngx-feature-toggle-provider.component' ; import { FeatureToggleDirective } from './ngx-feature-toggle.directive' ; import { set , FeatureToggleServiceConfig } from 'feature-toggle-service' ; @ Component ( { selector : 'kp-container' , template : `
    <div>
      <feature-toggle-provider [features]="featureToggleData">
        <div class="feature-toggle-component" *featureToggle="'enableFirstText'">
          <p>Enabled content</p>
          <div class="feature-toggle-component" *featureToggle="'enableSecondText'">
            Disabled content
          </div>
        </div>
      </feature-toggle-provider>
    </div>
  ` , } ) class ContainerComponent { featureToggleData : FeatureToggleServiceConfig = { enableFirstText : true , enableSecondText : false , } ; } describe ( 'Component: FeatureToggleProviderComponent' , ( ) => { let fixture ; let nativeElement ; const stub = { } ; beforeEach ( asyncMethod ( ( ) => { set ( { enableFirstText : true } ) ; fixture = TestBed . configureTestingModule ( { declarations : [ ContainerComponent , FeatureToggleProviderComponent , FeatureToggleDirective ] , schemas : [ NO_ERRORS_SCHEMA ] , } ) . createComponent ( ContainerComponent ) ; nativeElement = fixture . nativeElement ; fixture . detectChanges ( ) ; } ) ) ; afterEach ( ( ) => { set ( { enableFirstText : false } ) ; } ) ; it ( 'should render the enabled children content' , ( ) => { const elementText = fixture . nativeElement . querySelectorAll ( '.feature-toggle-component' ) [ 0 ] . innerText ; expect ( elementText ) . toContain ( 'Enabled content' ) ; } ) ; it ( 'should NOT render the disabled content' , ( ) => { const elementText = fixture . nativeElement . querySelectorAll ( '.feature-toggle-component' ) [ 0 ] . innerText ; expect ( elementText ) . not . toContain ( 'Disabled content' ) ; } ) ; } ) ;