uirouter nested demo

nested.demo.spec.js

import uiRouter from "@uirouter/angularjs";

const { module } = angular.mock;

class parentctrl {
  constructor() {
    console.log("parent constructor");
  }
  $onInit() {
    console.log("parent onInit");
  }
}

class childctrl {
  constructor() {
    console.log("child constructor");
  }
  $onInit() {
    console.log("child onInit");
  }
}

class grandchildctrl {
  constructor() {
    console.log("grandchild constructor");
  }
  $onInit() {
    console.log("grandchild onInit");
  }
}

describe.only("a", () => {
  beforeEach(module(
    angular.module("authTestApp", [
      uiRouter
    ])
    .component("parent", {
      template: "<ui-view></ui-view>",
      controller: parentctrl
    })
    .component("child", {
      template: "<ui-view></ui-view>",
      controller: childctrl
    })
    .component("grandchild", {
      template: "<p></p>",
      controller: grandchildctrl
    })
    .config(($stateProvider) => {
      $stateProvider
      .state("parent", {
        url: "/parent",
        redirectTo: (trans) => {
          console.log("parent redirect");
          return;
        },
        resolve: {
          bla: () => {
            console.log("parent resolve");
            return {};
          }
        },
        component: "parent"
      })
      .state("parent.child", {
        url: "/child",
        redirectTo: (trans) => {
          console.log("child redirect");
          return;
        },
        resolve: {
          bla: () => {
            console.log("child resolve");
            return {};
          }
        },
        component: "child"
      })
      .state("parent.child.grandchild", {
        url: "/grandchild",
        redirectTo: (trans) => {
          console.log("grandchild redirect");
          return;
        },
        resolve: {
          bla: () => {
            console.log("grandchild resolve");
            return {};
          }
        },
        component: "grandchild"
      });
    })
    .name
  ));

  it("goes to grandchild", () => {
    inject(($state, $rootScope, $compile) => {
      $state.go("parent.child.grandchild");
      $rootScope.$apply();
      expect($state.current.name).to.equal("parent.child.grandchild");
      let el = $compile(angular.element("<div><ui-view></ui-view></div>"))($rootScope.$new());
      console.log(el.html())
    });
  });
});