title: Angular UI router doesn't process the resolve function when i use async/await feature?
body: <p>I've been trying to render certain template related to a state and component according to this <a href="https://ui-router.github.io/guide/ng1/route-to-component" rel="noreferrer">article</a></p>
  
  <p>In my project running under dev-server it all works fine and when I execute <code>$state.go("home")</code> the component template is loaded how I expect but when I do this in a testing environment, this doesn't work. </p>
  
  <p>Before, in testing, when I use the "old way" using "template" instead "component" with ui-router, execute <code>$rootScope.$digest()</code> was enough for add the template inside the <code>&lt;div ui-view&gt;&lt;/div&gt;</code> but using this new way this doesn't work anymore.</p>
  
  <p><strong>What am I doing wrong?</strong></p>
  
  <p><strong>Edit</strong>: I've been trying to deeply understand the problem and I see that the problem is related to the HTTP request that was done. Maybe it's related to the way that my promise resolves on the resolve callback using async/await. Please check the Service:</p>
  
  <p><strong>Service</strong>
  <div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class TodoService {
      constructor($http, BASE_URL) {
          this.http = $http;
          this.url = `${BASE_URL}/todos`
      }
      async getTodos() {
          const apiResponse = await this.http.get(this.url)
          return apiResponse.data.todos
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Router</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import '@uirouter/angularjs'
  
  export function routes($stateProvider, $locationProvider) {
      $locationProvider.html5Mode({
          enabled: true,
          requireBase: false,
          rewriteLinks: true,
      })
  
      $stateProvider
          .state("home", {
              url: "/",
              component: "todoList",
              resolve: {
                  todosList: TodoService =&gt; TodoService.getTodos()
              }
          })
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Test</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { routes } from "routes"
  import { TodoListComponent } from "components/todoList.component"
  import { TodoService } from "services/todo.service"
  
  describe("TodoListComponent rendering and interaction on '/' base path", () =&gt; {
      let componentDOMelement
      let stateService
  
      beforeAll(() =&gt; {
          angular
              .module("Test", [
                  "ui.router"
              ])
              .config(routes)
              .constant("BASE_URL", "http://localhost:5000/api")
              .component("todoList", TodoListComponent)
              .service("TodoService", TodoService)
              //I enable this for better logs about the problem
              .run(['$rootScope','$trace', function($rootScope, $trace) {
                 $trace.enable("TRANSITION")
               }])
      })
      beforeEach(angular.mock.module("Test"))
  
      beforeEach(inject(($rootScope, $compile, $state, $httpBackend) =&gt; {
          //build the scene
          //1st render the root element of scene: We needs a router view for load the base path
          let scope = $rootScope.$new()
          componentDOMelement = angular.element("&lt;div ui-view&gt;&lt;/div&gt;")
  
          $compile(componentDOMelement)(scope)
          scope.$digest()
          
           document.body.appendChild(componentDOMelement[0]) //This is a hack for jsdom before the $rootScope.$digest() call
          //2nd let's create a fake server for intercept the http requests and fake the responses
          const todosResponse = require(`${__dirname}/../../stubs/todos_get.json`)
          $httpBackend
              .whenGET(/.+\/todos/)
              .respond((method, url, data, headers, params) =&gt; {
                  return [200, todosResponse]
              })
  
          //3rd Let's generate the basic scenario: Go at home state ("/" path)
          $state.go("home")
          $rootScope.$digest()
          $httpBackend.flush()
      }))
  
      it("Should be render a list", () =&gt; {
          console.log("HTML rendered")
          console.log(document.querySelectorAll("html")[0].outerHTML)
      })
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>The HTML result that not rendering</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  @charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate) {
    display:none !important;
  }
  ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{
    position:absolute;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;!-- uiView: --&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also, I traced the stateChange before the HTML:</p>
  
  <pre><code>console.log node_modules/@uirouter/core/_bundles/ui-router-core.js:1276
      Transition #0-0: Started  -&gt; "Transition#0( ''{} -&gt; 'home'{} )"
  
  console.log node_modules/@uirouter/core/_bundles/ui-router-core.js:1282
      Transition #1-0: Ignored  &lt;&gt; "Transition#1( ''{} -&gt; 'home'{} )"
  
  console.log node_modules/@uirouter/core/_bundles/ui-router-core.js:1313
      Transition #1-0: &lt;- Rejected "Transition#1( ''{} -&gt; 'home'{} )", reason: Transition Rejection($id: 0 type: 5, message: The transition was ignored, detail: "undefined")
  </code></pre>
  
  <p>I see a problem in a transition but no reason was given.</p>
  
  <p>========================================================================</p>
  
  <p><strong>Edit 2</strong>
  <strong>Finally we found the problem but I can't figure out the real problem</strong>. I created a branch in my project for showing the problem. This it's related to <code>async/await</code> javascript feature:</p>
  
  <pre><code>export class TodoService {
      constructor($http, BASE_URL) {
          this.http = $http;
          this.url = `${BASE_URL}/todos`
      }
      //Interchange the comment on the getTodos method and run `npm run tdd` for see the problem:
      //When async/await doesn't used, the html associated to the resolve in the
      // "/" route that used this service, the promise was resolved that expected.
      //The idea for this branch it's research about the problem and propose a way
      //for we can use async/await on the production code and on the testing environment
      async getTodos() {
          const apiResponse = await this.http.get(this.url)
          return apiResponse.data.todos
      }
      // getTodos() {
      //     return this.http.get(this.url).then(res =&gt; res.data.todos)
      // }
  }
  </code></pre>
  
  <p><a href="https://github.com/gpincheiraa/angularjs-tdd-jest/blob/async/await-integration-doesnt-work/src/services/todo.service.js" rel="noreferrer">The repository</a></p>
  
  <p>So my new Questions are:</p>
  
  <ul>
  <li><strong>Why the way that I use the async/await functionality it's not compatible with the ui-router resolve on testing environment but in production code it works?</strong></li>
  <li><strong>Maybe it's related to $httpBackend.flush() call?</strong></li>
  </ul>
  
  <p><strong>Edit 3</strong>
  The issue <a href="https://github.com/angular-ui/ui-router/issues/3522" rel="noreferrer">3522</a> reported in angular UI router repository</p>