title: test event that grabs e.currentTarget in Angular using karma
body: <p>I've been trying to get this work for a lot of hours now. I want to test an <code>$scope.function</code> that makes an api call based on <code>target = e.currentTarget</code> and <code>input.val()</code> but I'm in a dead point right now.</p>
  <p>The question is, how can I simulate the <code>e.currentTarget</code> to make the test pass?</p>
  <p>If this isn't the correct approach, what do you recommend?</p>
  <p>I hope that there's a way, really. A lot of the functions I use have that &quot;if e.currentTarget = xxx&quot; behavior.</p>
  <p>Here's my controller, which works fine</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('myapp')
      .controller('myctrl', function($scope, $http) {
        var offset = 0;
        //search function
        var generalSearch = function(target) {
          $('.somediv').hide();
          if (target.hasClass('someclass') &amp;&amp; $scope.paginationNext == true) {
            dostuff
          }
          if (target.hasClass('someclass') &amp;&amp; $scope.paginationPrev == true) {
            dostuff
          }
          var getArtist = function (type='somevalue') {
            var query = $('#somediv').val();e
            var url = "someurl?query=" + query + '&amp;offset='+ offset +'&amp;limit=20&amp;type='+ type;
            if (query !== '' &amp;&amp; query !== null) {
              $http.get(url, {cache:true})
                .then(function(res) {
                  $scope.somevar = res.data;
                  if ($scope.result.length &gt; 0) {
                    $('#somediv').hide();
                    $('.somediv').show(); //shows results
                  }else {
                    $('#somediv').show();
                    $('.somep').text('').append("&lt;i class='fa fa-frown-o' aria-hidden='true'&gt;&lt;/i&gt; We couldn't find any artist nor album with that name");
                    setTimeout(
                      function() {
                        $('.somep').text('Your result will appear here');
                      }, 5000);
                  }
                  if (res.data.next !== null || res.data.albums.next !== null) {
                    $scope.paginationNext = true;
                  }else {
                    $scope.paginationNext = false;
                  }
                  if (res.data.previous !== null || res.data.albums.previous !== null) {
                    $scope.paginationPrev = true;
                  }else {
                    $scope.paginationPrev = false;
                  }
              }, function(error) {
                //if the user search more than once, and there's no results, this will show the magnify again
                $('#somediv').show(); 
              });
            }else {
              $('.somep').text('').append("ERROR: We can't find what you want if you don't tell us what it is");
              setTimeout(
                function() {
                  $('.somep').text('Your result will appear here');
                }, 5000);
            }     
          }
          getArtist();
        }
        $scope.startSearch = function Search(e) {    
          var target = $(e.currentTarget);
          generalSearch(target);
        }</code></pre>
  </div>
  </div>
  </p>
  <p>And here is my test, i thought i could use httpBackend with a template and a trigger to simulate the e.current target, but always got <code>TypeError: Cannot read property 'currentTarget' of undefined</code></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>describe('movie app tests', function () {
    var $controller;
    var $httpBackend;
    var $scope;
      var el, $compile, simpleHtml;
      
    beforeEach(module('spotify'));
    beforeEach(inject(function($rootScope, _$controller_, _$httpBackend_, $templateCache, _$compile_) {
      $controller = _$controller_;
      $scope = $rootScope.$new();
      $httpBackend = _$httpBackend_;
      $templateCache.put('./views/search/search.html', [
        '&lt;section class="searcher-container visiond-20" id="searcher"&gt;',
        ' &lt;form class="visiond-18 visiond-lg-8"&gt;',
        '     &lt;fieldset class="searcher-wrapper"&gt;',
        '         &lt;input type="text" id="artist" value="lamb of god"&gt;',
        '         &lt;button ng-click="startSearch($event)" type="submit" class="searcher-button visiond-13 visiond-lg-5" id="searchButton"&gt;search&lt;/button&gt; ',
        '     &lt;/fieldset&gt;',
        ' &lt;/form&gt;',
        '&lt;/section&gt;'
      ].join(''));
      $compile = _$compile_;
    }));
    describe('http tests (original example)', function() {
      it('should load user defined movies on search', function () {
        $controller('ctrlSearch', { $scope: $scope });
          simpleHtml = '&lt;div ng-search id="searcher-container"&gt;&lt;/div&gt;';
          el = $compile(angular.element(simpleHtml))($scope);
          $scope.$digest();
        var input = el.find('#artist');
        $scope.$apply(function() {
          angular.element(input).val('lamb of god');
        });
        el.find('.searcher-button').click();
        //$scope.startSearch();
        //$httpBackend.flush();
        //expect($scope.movies).toEqual(testData.query.starwars);
      });
    });
  });</code></pre>
  </div>
  </div>
  </p>
  <p>As you in use two to 3 elements as conditionals, I think I could follow another approach like, test if startSearch is launched and then test the other functions separately...</p>