# How to write test case for front-end hack component in kibana plugin?

**URL:** <https://discuss.elastic.co/t/how-to-write-test-case-for-front-end-hack-component-in-kibana-plugin/149765>\
**Category:** Kibana\
**Created:** [September 25, 2018, 5:19am UTC](https://discuss.elastic.co/t/how-to-write-test-case-for-front-end-hack-component-in-kibana-plugin/149765 "2018-09-25T05:19:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Parth\_Kalaria](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/parth_kalaria/32/61450_2.png) [@Parth\_Kalaria](https://discuss.elastic.co/u/Parth_Kalaria)\
**Post date:** [September 25, 2018, 5:19am UTC](https://discuss.elastic.co/t/how-to-write-test-case-for-front-end-hack-component-in-kibana-plugin/149765/1 "2018-09-25T05:19:52Z")

</div>

I've resolved the above issue. But the question is I'm intercepting http request in hack component and adding additional headers. In test cases I'm sending one http backend request and expecting the headers I've added. But after debugging I've realized that when I'm sending backend request it is not coming to the config I've written in hack component. In fact it is not loading hack component at all as far as I know.

My hack component is something like:

```
uiModules
.get('kibana', ['angular-jwt'])
.config(['$httpProvider', 'jwtOptionsProvider', function Authenticate($httpProvider, jwtOptionsProvider) {
  var refreshPromise;

  jwtOptionsProvider.config({
    tokenGetter: ['$q', '$timeout', 'jwtHelper', function ($q, $timeout, jwtHelper) {
      // setting authentication header
  });

  $httpProvider.defaults.withCredentials = true;
  $httpProvider.interceptors.push('jwtInterceptor');
}]);

```

And my test case is something like

```
beforeach(function() {
  angular.mock.module('kibana')
  angular.mock.inject(function(_$http_, _$httpBackend_, _$timeout_) {
      $http = _$http_;
      $httpBackend = _$httpBackend_;
      $timeout = _$timeout_;
     });
  })
})

it('do something', function() {
   $httpBackend.expectGET('/api', function(headers) {
     //checking if header is coming
   }).respond(200, 'data');
   $http.get('/api').then(calling success spy);
})

```

But it is not even going in hack component. I think I missed to import hack component in test case. But don't know how to do it. Please guide.

---

<div class="post-metadata">

**Author:** ![christophilus](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/christophilus/32/42991_2.png) [@christophilus](https://discuss.elastic.co/u/christophilus)\
**Post date:** [September 28, 2018, 1:25pm UTC](https://discuss.elastic.co/t/how-to-write-test-case-for-front-end-hack-component-in-kibana-plugin/149765/2 "2018-09-28T13:25:18Z")

</div>

It's hard to say based on the code snippets you pasted. `$httpBackend` looks like it'd be undefined in your test case.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [October 26, 2018, 1:25pm UTC](https://discuss.elastic.co/t/how-to-write-test-case-for-front-end-hack-component-in-kibana-plugin/149765/3 "2018-10-26T13:25:19Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.