Angular 2 Tests - Get Dom Element Styles

Angular 2 tests - get DOM element styles

For anyone stumbling upon this example, the solution for this specific issue with display is the hidden property on the debugElement. It will contain true if the element is hidden and false otherwise.

Access inline style of an element in Angular unit test

So people already talk about the solution and here is my thought.

Why bothering about the '50%' number though.

If your point is to test the width of '.buy' class to be 50% of something

we just simply

it('element with buy class should have width equal 50% of parent element', () => {})

and your test case could be(let me assume that you have a parent class)

<div class="parent"><span class="buy" style="width: 50%;"></span></div>

const debugElm = fixture.debugElement;
const htmlElm = debugElm.nativeElement;
const parent = htmlElm.querySelector('.parent');
const buyBar = htmlElm.querySelector('.buy');

const parentStyle = getComputedStyle(parent);
const barStyle = getComputedStyle(buyBar);
expect(barStyle.width / parentStyle.width).toEqual(0.5);

Here I'm just reuse the code of others above so not so sure the expect function could work. but I think this could be a workaround for your test case.

How to get Angular 2 element through class name in Jasmine

You use By.css to pass a css selector. So any selector you can use with css, you can use with By.css. And a selector for a class is simply .classname (with period).

By.css('.classname')          // get by class name
By.css('input[type=radio]')   // get input by type radio
By.css('.parent .child')      // get child who has a parent

These are just some example. If you know css, then you should know how to use selectors.

EDIT:
To use By.css() be sure to import { By } from '@angular/platform-browser';

Angular2 testing - Get element by Id

You can also use by.css

de = fixture.debugElement.query(By.css('#theid'));

How to access nativeElement attribute using debugeElement in angular unit test

You need to update the view after setting the component.comment = ''.
Add fixture.detectChanges() call before querying for your element and making the assertions.

fit('should  be disabled when comment is empty', () => {
      component.comment = '';

      fixture.detectChanges() // <-- add this to update the view

      addCommentBtn = fixture.debugElement.query(By.css('button.addCommentBtn'));

      // this asserts that button matches <button disabled>Hello</button>    
      expect(addCommentBtn.nativeElement.getAttribute('disabled')).toEqual('');

      // this asserts that button matches <button>Hello</button>          
      expect(addCommentBtn.nativeElement.getAttribute('disabled')).toEqual(null);
    }
});

It's worth noting that you can inspect the DebugElement without accessing the nativeElement.

How to properly detect a change in computed style property with Angular 2?

Why isn't the ngAfterViewChecked called when the rendering leads to new computed style properties?

The Angular framework does not detect changes in the computed style of DOM elements, at least not when they are caused by the rendering engine of the browser. Consequently, the ngAfterViewChecked hook will not be called in such cases.

Why does it work when using setTimeout?

As explained in Michael Palmer's answer, the setTimeout causes Angular to become aware of an asynchronous process that might cause a change. Therefore, the ngAfterViewChecked hook is called after the timeout function has been performed. Angular does not try to check what exactly is done in the setTimeout function and whether or not this is something that actually affects the view. Obviously, this would be quite hard ti implement and probably not worth the effort. Instead, Angular calls the ngAfterViewChecked hook just in case something has happened in the asynchronous process that affects the view.

What is the Angular way to listen to computed style changes?

There seems to be no other way than using setTimeout in order to watch changes in the computed style of DOM elements.

Angular2 unit testing - why nativeElement has empty CSSStyleDeclaration

I've had similar problem in runtime (not tests).
Style property is static and based on initial style attribute on html element so this is not updated dynamically.
Solution is to use Window.getComputedStyle(). This function calculates (current!) styles from stylesheets.

How do I unit test if an element is visible when the *ngIf directive is used using Jasmine in Angular

If the element is hidden, then it wont be rendered inside the dom.

You can check

expect(fixture.debugElement.query(By.css('.header'))).toBeUndefined();

EDIT : toBeNull() works better in the above case

expect(fixture.debugElement.query(By.css('.header'))).toBeNull();

And also you have a syntax error while fetching the button element. nativeElement is not a function.

Change it this way :

const button = fixture.debugElement.query(By.css('button')).nativeElement;

---

Related Topics