$document.append($rootElement); null is not an object (evaluating context.createDocumentFragment)

Question

I'm following the migration exercise on the AngularJS docs, for input[checkbox], and it says to change

it('should update the model', inject(function($compile, $rootScope) {
  var inputElm = $compile('<input type="checkbox" ng-model="checkbox" />')($rootScope);

  inputElm[0].click(); // Or different trigger mechanisms, such as jQuery.trigger()
  expect($rootScope.checkbox).toBe(true);
});

into this:

it('should update the model', inject(function($compile, $rootScope, $rootElement, $document) {
  var inputElm = $compile('<input type="checkbox" ng-model="checkbox" />')($rootScope);

  $rootElement.append(inputElm);
  $document.append($rootElement);

  inputElm[0].click(); // Or different trigger mechanisms, such as jQuery.trigger()
  expect($rootScope.checkbox).toBe(true);
});

My set up was not like the first, however I tried to follow it as best I could.

An approximation of my set up is as such:

import { getInjector, getDirective, toBeChecked, clickOn } from './test-helper.js';
describe('testing a click', () => {
    let $rootElement = false;
    let $document = false;
    beforeEach( () => {
        const $injector = getInjector();
        $rootElement = $injector.get('$rootElement');
        $document = $injector.get('$document');
    });
    it('should click the input', () =>{
        const $directive = getDirective('directive-with-checkbox');
        const $checkbox = directive.find('input#uniq-id-of-checkbox');
        clickOn($checkbox, $rootElement, $document);
        expect($checkbox).toBeChecked()
    })
});

And the clickOn function:

export function clickOn($element, $rootElement, $document){
    const mouseClickEvent = document.createEvent('MouseEvent');
    if($element.prop('type') === 'checkbox' && $rootElement && $document) {
        $rootElement.append($element);
        $document.append($rootElement); //<--- breaks
     }
     mouseClickEvent.init('click');
     $element[0].dispatchEvent(mouseClickEvent);
}

My expectation is that the click event is transferred to a change which fires the checkbox.

My full error message is:

TypeError: null is not an object (evaluating 'context.createDocumentFragment') in filename.js

I can't figure out in what way my code differs from the example, to make it not work as expected.

This appears to be related to Why $(document).append() doesn't work in jQuery 1.9.1? but I'm bamboozled why the offical docs suggest doing document.append(....

When I change it from $document to document.body ($document has a body but doesn't seem to be found by jquery?) as suggested I can get the karma browser debugger to get past there but not the PhantomJS instance I'm running.

How do I actually get a click to toggle my checkbox?

$document.append($rootElement); null is not an object (evaluating context.createDocumentFragment)

0 Answers0