Angular testing with Jasmine can't compare html node

Question

I am building directive tests in Angular using Jasmine. I have a small example test which looks like this:

it("should compare html node", inject( function ($compile, $rootScope) {
  var elm = angular.element('<input>');
  elm = $compile(elm)($scope);
  $scope.$digest();
  console.log('btn', elm); // output: '<input class="ng-scope">'
  expect(elm).toBe('<input class="ng-scope">');

  expect(elm[0]).toBe('<input class="ng-scope">'); // these also fail
  expect(elm.html()).toBe('<input class="ng-scope">'); // ""
}));

So I get the expected output to the console, but Jasmine complains with an error Expected { length: 1, 0: HTMLNode } to be '<input class="ng-scope">'

I have also tried using elm[0] which gives the same error and elm.html() but that just returns an empty string. How can I compare the HTML Node with the string correctly?

NB I know this is an unrealistic test, but I just want to demo my current issue.

Answer 1

So the elm is an angular.element which is a jqLite object. As you point out you can use elm[0] to get the actual dom element. Then you can access the html of the node by accessing the field .outerHTML. So our final solution is to use

elm[0].outerHTML