Angular HostBinding testing for css class

Question

I have a wrapper with a loading, an error display and the actual content. Depending on some inputs I want to show one or another.

I want to test if given any error a 'centered__holder' class is added

The component:

@Component({
  selector: 'sd-ui-state-wrapper',
  templateUrl: './ui-state-wrapper.component.html',
  styleUrls: ['./ui-state-wrapper.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UIStateWrapperComponent implements OnChanges {
  @Input() isLoading: boolean;
  @Input() errors: string[] | undefined;
  @HostBinding('class.centered__holder') centeredCss: boolean = false;

  [...]

  ngOnChanges(): void {
    this.centeredCss = this.isLoading || this.errors !== undefined && this.errors.length > 0;
  }
}

The test:

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

beforeEach(() => {
  fixture = TestBed.createComponent(UIStateWrapperComponent);
  component = fixture.componentInstance;
  component.errors = errorMock;
  fixture.detectChanges();
}));

it('should add centered__holder class', async (done) => {
  component.ngOnChanges();
  fixture.whenStable()
    .then(() => {
      console.log(fixture.debugElement.classes.centered__holder);
      console.log(component.centeredCss);

      expect(fixture.debugElement.classes.centered__holder)
        .toBeTruthy();
      done();
    });
});

But the console shows: true, false I've also tried with fixture.whenRenderingDone()

How can I wait for HostBinding class to be applied?

evanjmg · Accepted Answer · 2020-07-01 14:38:58Z

4

fixture.nativeElement.classList.contains('centered__holder') should be what you are looking for. There's more on the fixture as well for other bound properties.

answered Jul 1, 2020 at 14:38

evanjmg

3,7981 gold badge16 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular HostBinding testing for css class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related