Unit testing css with angular

Question

Is there any way in which I could test say the height css property of an element?

I have a function that changes the height of a div and it would be nice to check in the tests that the function operates correctly...

ie:

<div #myDiv>Hello world</div>

@ViewChild('myDiv') myDiv: ElementRef;

myFunct() {
  this.myDiv.nativeElement.style.height = 500;
}

it('should increase div size', () => {
  // Here is where I get stuck...
});

Update

Implementing a test such as:

it('should return correct height of dropdown when initialised', () => {
    component.myFunct();

    expect(component.dropdown.nativeElement.style.height).toBe(34);
  });

results in a test failure with message:

Expected '' to be 500.

ランス · Accepted Answer · 2018-10-12 15:09:59Z

6

Something like this...

Exposed the myDiv publicly
Setup the testbed for the component (usually added by default)
Add

component.myFunct();

expect(component.myDiv.nativeElement.style.height).toBe(500);

answered Oct 12, 2018 at 15:09

ランス

6003 silver badges12 bronze badges

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

2 Comments

physicsboy Over a year ago

I had done something similar to this prior to posting the question. The problem I have when doing this, is that I get a failure and returned, Expected '' to be 34....

physicsboy Over a year ago

Ah I understand what is going on now. I was mixing myself up between nativeElement > style > height and nativeElement > clientHeight

Collectives™ on Stack Overflow

Unit testing css with angular

Update

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related