Angular 1.5 Component Test

hello-panel.component.js

'use strict';

angular.module('myHelloModule', [])
  .component('helloPanel', {
    bindings: {
      title: '@',
      body: '<'
    },
    templateUrl: 'app/hello-panel.tpl.html',
    controller: function() {
      this.opened = true;
      this.toggle = function() {
        this.opened = !this.opened;
      }
    }
  });

hello-panel.spec.js

"use strict";

describe('helloPanel', function () {

  beforeEach(module('myHelloModule'));
  beforeEach(module('templates'));

  var element;
  var scope;
  var titlebar;
  var controller;

  beforeEach(inject(function($rootScope, $compile){
    scope = $rootScope.$new();
    element = angular.element('<hello-panel title="{{title}}" body="body"></hello-panel>');
    element = $compile(element)(scope);
    scope.title = 'AngularJS';
    scope.body = 'bla bla';
    scope.$apply();

    titlebar = element.find('h1');
    controller = element.controller('helloPanel');
  }));


  describe('when passing properties', function () {
    it('should render the title', function() {
      expect(titlebar.text()).toBe('AngularJS');
    });

    it('should expose opened and be true', function() {
      expect(controller.opened).toBeDefined();
      expect(controller.opened).toBe(true);
    });

    it('should update the rendered text when the parent scope changes', function() {
      scope.title = 'Angular2';
      scope.body = 'mytext';
      scope.$apply();
      expect(titlebar.text()).toBe('Angular2');
      var body = element[0].querySelector('.body');
      expect(body.innerHTML).toBe(scope.body);
    });
  });




  describe('when toggling', function () {
    it('should update opened properties', function() {
      controller.toggle();
      expect(controller.opened).toBe(false);
      controller.toggle();
      expect(controller.opened).toBe(true);
    });

    it('should invoke toggle() when click the titlebar', function() {
      expect(controller.opened).toBeDefined();
      expect(controller.opened).toBe(true);
      titlebar.triggerHandler('click');
      expect(controller.opened).toBe(false);
    });

    it('should update opened property when toggle() is invoked', function() {
      expect(controller.opened).toBeDefined();
      expect(controller.opened).toBe(true);
      spyOn(controller, 'toggle').and.callThrough();
      controller.toggle();
      expect(controller.toggle).toHaveBeenCalled();
      expect(controller.opened).toBe(false);
    });

    it('should add an hidden class when panel is closed', function() {
      controller.opened = false;
      var body = element[0].querySelector('.body');
      scope.$apply();
      var hasClass = angular.element(body).hasClass('hidden');
      expect(hasClass).toBe(true);
    });
  });
});

hello-panel.tpl.html

<div>
  <h1 ng-click="$ctrl.toggle()">{{ $ctrl.title }}</h1>
  <div class="body"
    ng-class="{'hidden': !$ctrl.opened}">{{ $ctrl.body }}</div>
</div>