Angular/Jasmine - Test HTML element inside ng-if

Question

I want to test the existence of an input that is inside an ng-if, without the ng-if the test passes perfectly but not with the ng-if which is normal since ng-if removes the element from the DOM.

Here is the ng-if

<div ng-ig="$ctrl.model.joineryTypes">
  <input type="" name="">
</div>

The test

import angular from 'angular'
import 'angular-mocks'

let scope
let rootScope
let compile
let htmlElement
let ctrl

fdescribe('roomsCommonForm', () => {
  beforeEach(() => {
    angular.mock.module('roomsCommonModule')
  })

  beforeEach(inject((_$compile_, _$rootScope_) => {
    rootScope = _$rootScope_
    compile = _$compile_
    scope = rootScope.$new()
    htmlElement = compile(`<rooms-common-form></rooms-common-form>`)(scope)
    rootScope.$digest()
  }))

  beforeEach(inject(($componentController) => {
    let bindings = {
      model: {}
    }
    ctrl = $componentController('roomsCommonForm', null, bindings)
  }))

  it('should contain one input', () => {
    const inputItem = htmlElement.get(0).querySelectorAll('input')
    expect(inputItem.length).toBe(1)
  })
})

How I can simulate that object $ctrl.model.joineryTypes ?

rrd · Accepted Answer · 2017-07-21 11:23:49Z

1

You can change your test slightly; first alter the original binding to include the joineryTypes:

let bindings = {
  model: {
    joineryTypes: false
  }
};

So now it's false, you'd just need to alter it in another test:

it('should look inside the ng-if', () => {
  ctrl.model.joineryTypes = true;
});

Then you should be able to reach inside the ng-if block.

answered Jul 21, 2017 at 11:23

rrd

5,9873 gold badges32 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

Angular/Jasmine - Test HTML element inside ng-if

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