How to assert if an element exists in angular?

Question

I am writing a spec for a directive. As part of the testing, I need to assert if an element with a class exists inside my root directive component.

I have tried the following.

it('should have a loading div container', function() {
            var loadingDivContainer = element.find('.loading-div');
            expect(loadingDivContainer).to.exist;
        });

But this seems to pass in all the condition. I am using the following tech.

Angular 1.x, mocha, chai,

expect(loadingDivContainer.length).not.to.eql(0); – Brant Feb 28 '17 at 15:29 — Brant, Feb 28 '17 at 15:29

score 3 · Accepted Answer · answered Feb 28 '17 at 15:31

3

loadingDivContainer would be an empty array if it found no results, or have length if it did have results. So check length:

expect(loadingDivContainer.length).to.be(1);

or

expect(loadingDivContainer.length).not.to.be(0);

answered Feb 28 '17 at 15:31

Brant

1,764
11
18

score 0 · Answer 2 · answered Feb 28 '17 at 15:38

0

We found the answer.

var loadingDivContainer = element[0].querySelectorAll('.loading-div');
expect(loadingDivContainer.length).to.be(1);

answered Feb 28 '17 at 15:38

Makis papadopoulos

99
1
11

2

You should accept Brant's answer and, if needed, include your updated selector as a comment. Poor taste (in my opinion, of course) to post an answer which is essentiatlly the same as an earlier answer. – Lex Feb 28 '17 at 15:43
Thank you Lex, and I agree. – Brant Feb 28 '17 at 15:57
Yes is true but we wanted a different answer the point was on the element[0].querySelectorAll('.loading-div') because the find cannot see classes. Anyway is both true – Makis papadopoulos Feb 28 '17 at 16:04

How to assert if an element exists in angular?

2 Answers2