stub DOM element in jasmine, angularjs

Question

I recently have start using Jasmine, and I have a weird situation. I am testing a function which does a DOM manipulation with another function call. Jasmine is throwing an error by saying that elem.className is not a constructor. Here is the structure of my code:

Controller code:

function resetElem(elem) {
  elem.classList.remove(/some string/);
}

function a() {
  resetElem(document.getElementsByClassName('xx')[0])
}

Jasmine:

var elem;

beforeEach(inject(function($rootScope, $controller, $q) {
  deferred = $q.defer();
  scope = $rootScope.$new();

  mockHTMLElements(); 
  createController($controller);
}));

function mockHTMLElements() {
  /* //This was the other method that I tried.
    jasmine.spyOn(document, 
    'getElementsByClassName').and.CallFake(function(name) {
      var el;
      if (!elems[name]) {
        el = document.createElement('div');
        el.className = name;

        elems[name] = el;
      }

      return [elems[name]];
    });
  */

  elems['preview-promo'] = document.createElement('div');
  elems['preview-promo'].className="preview-promo";

  elems['create-promo'] = document.createElement('div');
  elems['create-promo'].className="create-promo";

  elem = {
    classList : { 
      add : jasmine.createSpy('add'),
      remove : jasmine.createSpy('remove'),
    },
    className : 'test'
  };
}

it('tests the a function', function() {
  // vm is ref of this of controller
  vm.a(true);
  ...some other tests
});

Console returns

TypeError: undefined is not an object (evaluating 'elem.classList')

Not sure how to make this right.

Alex Pollan · Accepted Answer · 2017-04-15 22:52:46Z

1

It's difficult to give you a good answer with the information provided.

As a general rule avoid manipulating the DOM from a controller. Create a directive instead, that way you'll have access to the DOM element and it will make your tests easier/more natural to write.

answered Apr 15, 2017 at 22:52

Alex Pollan

8735 silver badges13 bronze badges

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

5 Comments

Bharat Soni Over a year ago

I am conditionally adding a class progress when network request is made. I am not sure if making a directive will work. How will I call directive's link function conditionally?

Alex Pollan Over a year ago

You won't. Using bindings you could control the CSS class from the current scope.

Bharat Soni Over a year ago

will give it a shot.

Bharat Soni Over a year ago

so, directive is more like event binders in angular?

Alex Pollan Over a year ago

Nope, please refer to the angularJS docs for more info: docs.angularjs.org/guide/directive

Collectives™ on Stack Overflow

stub DOM element in jasmine, angularjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related