Angular directive testing in requirejs project

Question

I am trying to test my directive, but before that I wanted to make sure everything is setup correctly. I am trying to test the following code but its not working. I am using require js in my project and till now I have been testing my controllers successfully.

    define([
  'angular',
  'angular-mocks',
  'Source/modules/common/directive/dynamic-forms/fields/index'
], function () {
  describe('Dynamic fields directive in app.dynamic-form-fields', function () {
    var scope, compile, element;
    beforeEach(
      module('app.dynamic-form-fields'));

    beforeEach(function () {
      inject(function ($rootScope, $compile) {
        element = angular.element('<div class="well span6">' +
          '<h3>Busdriver Albums:</h3>' +
          '<albums ng-repeat="album in albums" title="{{album.title}}">' +
          '</albums></div>');

        scope = $rootScope;

        scope.albums = [
          {
            'title': 'Memoirs of the Elephant Man'
          },
          {
            'title': 'Temporary Forever'
          }
        ];

        $compile(element)(scope);
        scope.$digest();
      });
    });

    it("should have the correct amount of albums in the list", function () {
      var list = element.find('li');
      expect(list.length).toBe(2);
    });
  });

})

Output = Expected 0 to be 2.

Answer 1

I am so sorry to ask this stupid question. The selector which is set in the expectation is not correct.

Proper html is produced

  <h3>Busdriver Albums:</h3>
<!-- ngRepeat: album in albums -->
<albums ng-repeat="album in albums" title="Memoirs of the Elephant Man" class="ng-scope"></albums><!-- end ngRepeat: album in albums -->
<albums ng-repeat="album in albums" title="Temporary Forever" class="ng-scope"></albums>
<!-- end ngRepeat: album in albums -->

I am really sorry.