@angular-wave/angular.ts 0.0.22 → 0.0.24

package/test/router/state-directives.spec.js

@@ -3,7 +3,8 @@ import { Angular } from "../../src/loader";
 import { publishExternalAPI } from "../../src/public";
 import { browserTrigger, wait } from "../test-utils";
 
-describe("uiStateRef", function () {
+describe("uiStateRef", () => {
+  window.location.hash = "#!";
   let el,
     el2,
     template,
@@ -59,7 +60,7 @@ describe("uiStateRef", function () {
 
   afterEach(() => (window.location.hash = "#!"));
 
-  describe("links with promises", function () {
+  describe("links with promises", () => {
     it("should update the href when promises on parameters change before scope is applied", async () => {
       const defer = $q.defer();
       el = jqLite(
@@ -77,6 +78,7 @@ describe("uiStateRef", function () {
   });
 
   function buildDOM() {
+    window.location.hash = "#";
     el = jqLite(
       '<a ui-sref="contacts.item.detail({ id: contact.id })">Details</a>',
     );
@@ -90,16 +92,16 @@ describe("uiStateRef", function () {
     scope.$digest();
   }
 
-  describe("links", function () {
+  describe("links", () => {
     beforeEach(() => buildDOM());
     afterEach(() => (window.location.hash = ""));
 
-    it("should generate the correct href", function () {
+    it("should generate the correct href", () => {
       expect(el.attr("href")).toBe("#/contacts/5");
       expect(el2.attr("href")).toBe("#");
     });
 
-    it("should update the href when parameters change", function () {
+    it("should update the href when parameters change", () => {
       expect(el.attr("href")).toBe("#/contacts/5");
       scope.contact.id = 6;
       scope.$apply();
@@ -151,6 +153,7 @@ describe("uiStateRef", function () {
       expect($stateParams.id).toBeUndefined();
     });
 
+    // TODO investigate further why this fails
     xit("should not transition states when alt-clicked", async () => {
       expect($state.current.name).toEqual("");
 
@@ -186,83 +189,86 @@ describe("uiStateRef", function () {
     });
 
     // // Test for #1031
-    // it('should allow passing params to current state',  async () => {
-    //   $state.go('other', { id: 'abc' });
-    //   $rootScope.$index = 'def';
-    //   $rootScope.$digest();
-
-    //   el = jqLite('<a ui-sref="{id: $index}">Details</a>');
-    //   $compile(el)($rootScope);
-    //   $rootScope.$digest();
-
-    //   expect($state.current.name).toBe('other');
-    //   expect($state.params).toEqual(expect.objectContaining({ id: 'abc' });
-    //   expect(el.attr('href')).toBe('#/other/def');
+    it("should allow passing params to current state", async () => {
+      $state.go("other", { id: "abc" });
+      $rootScope.$index = "def";
+      $rootScope.$digest();
 
-    //   triggerClick(el);
-    //   timeoutFlush();
-    //   $q.flush();
+      el = jqLite('<a ui-sref="{id: $index}">Details</a>');
+      $compile(el)($rootScope);
+      $rootScope.$digest();
 
-    //   expect($state.current.name).toBe('other');
-    //   expect($state.params).toEqual(expect.objectContaining({ id: 'def' });
+      expect($state.current.name).toBe("other");
+      expect($state.params.id).toEqual("abc");
+      expect(el.attr("href")).toBe("#/other/def");
 
-    //   $rootScope.$index = 'ghi';
-    //   $state.go('other.detail');
-    //   $rootScope.$digest();
+      browserTrigger(el, "click");
+      await wait(100);
+      expect($state.current.name).toBe("other");
+      expect($state.params.id).toEqual("def");
 
-    //   expect($state.current.name).toBe('other.detail');
-    //   expect($state.params).toEqual(expect.objectContaining({ id: 'def' });
+      $rootScope.$index = "ghi";
+      $state.go("other.detail");
+      $rootScope.$digest();
 
-    //   expect(el.attr('href')).toBe('#/other/ghi/detail');
+      expect($state.current.name).toBe("other.detail");
+      expect($state.params.id).toEqual("def");
 
-    //   triggerClick(el);
-    //   timeoutFlush();
-    //   $q.flush();
+      expect(el.attr("href")).toBe("#/other/ghi/detail");
 
-    //   expect($state.current.name).toBe('other.detail');
-    //   expect($state.params).toEqual(expect.objectContaining({ id: 'ghi' });
-    // });
+      browserTrigger(el, "click");
+      await wait(100);
+      expect($state.current.name).toBe("other.detail");
+      expect($state.params.id).toEqual("ghi");
+    });
 
-    // it('should allow multi-line attribute values when passing params to current state',  async () => {
-    //   $state.go('contacts.item.detail', { id: '123' });
-    //   $rootScope.$digest();
+    it("should allow multi-line attribute values when passing params to current state", async () => {
+      $state.go("contacts.item.detail", { id: "123" });
+      $rootScope.$digest();
 
-    //   el = jqLite('<a ui-sref="{\n\tid: $index\n}">Details</a>');
-    //   $rootScope.$index = 3;
-    //   $rootScope.$apply();
+      el = jqLite('<a ui-sref="{\n\tid: $index\n}">Details</a>');
+      $rootScope.$index = 3;
+      $rootScope.$apply();
 
-    //   $compile(el)($rootScope);
-    //   $rootScope.$digest();
-    //   expect(el.attr('href')).toBe('#/contacts/3');
-    // });
+      $compile(el)($rootScope);
+      $rootScope.$digest();
+      expect(el.attr("href")).toBe("#/contacts/3");
+    });
 
-    // it('should take an object as a parameter and update properly on digest churns',  async () => {
-    //   el = jqLite('<div><a ui-sref="contacts.item.detail(urlParams)">Contacts</a></div>');
-    //   template = $compile(el)($rootScope);
+    it("should take an object as a parameter and update properly on digest churns", async () => {
+      el = jqLite(
+        '<div><a ui-sref="contacts.item.detail(urlParams)">Contacts</a></div>',
+      );
+      template = $compile(el)($rootScope);
 
-    //   $rootScope.urlParams = { id: 1 };
-    //   $rootScope.$digest();
-    //   expect(jqLite(template[0].querySelector('a')).attr('href')).toBe('#/contacts/1');
+      $rootScope.urlParams = { id: 1 };
+      $rootScope.$digest();
+      expect(jqLite(template[0].querySelector("a")).attr("href")).toBe(
+        "#/contacts/1",
+      );
 
-    //   $rootScope.urlParams.id = 2;
-    //   $rootScope.$digest();
-    //   expect(jqLite(template[0].querySelector('a')).attr('href')).toBe('#/contacts/2');
-    // });
+      $rootScope.urlParams.id = 2;
+      $rootScope.$digest();
+      expect(jqLite(template[0].querySelector("a")).attr("href")).toBe(
+        "#/contacts/2",
+      );
+    });
   });
 
-  // describe('links in html5 mode', function () {
-  //   beforeEach(function () {
+  // TODO: Since this is HTML5 mode, we would want to test this with actual backend
+  // describe('links in html5 mode', () => {
+  //   beforeEach(() => {
   //     _locationProvider.html5Mode(true);
   //   });
 
   //   beforeEach(inject(buildDOM));
 
-  //   it('should generate the correct href', function () {
+  //   it('should generate the correct href', () => {
   //     expect(el.attr('href')).toBe('/contacts/5');
   //     expect(el2.attr('href')).toBe('');
   //   });
 
-  //   it('should update the href when parameters change', function () {
+  //   it('should update the href when parameters change', () => {
   //     expect(el.attr('href')).toBe('/contacts/5');
   //     scope.contact.id = 6;
   //     scope.$apply();
@@ -275,934 +281,902 @@ describe("uiStateRef", function () {
 
   //     triggerClick(el2);
   //     timeoutFlush();
-  //     $q.flush();
+  //     await wait(10);
 
   //     expect($state.current.name).toEqual('top');
   //     expect(obj($stateParams)).toEqual({});
   //   });
   // });
 
-  // describe('links with dynamic state definitions', function () {
-  //   let template, $state;
-
-  //   beforeEach(inject(function ($rootScope, $compile, _$state_) {
-  //     $state = _$state_;
-  //     el = jqLite(
-  //       '<a ui-sref-active="active" ui-sref-active-eq="activeeq" ui-state="state" ui-state-params="params">state</a>'
-  //     );
-  //     scope = $rootScope;
-  //     angular.extend(scope, { state: 'contacts', params: {} });
-  //     template = $compile(el)(scope);
-  //     scope.$digest();
-  //   });
+  describe("links with dynamic state definitions", () => {
+    let template;
 
-  //   it('sets the correct initial href', function () {
-  //     expect(jqLite(template[0]).attr('href')).toBe('#/contacts');
-  //   });
+    beforeEach(() => {
+      el = jqLite(
+        '<a ui-sref-active="active" ui-sref-active-eq="activeeq" ui-state="state" ui-state-params="params">state</a>',
+      );
+      scope = $rootScope;
+      Object.assign(scope, { state: "contacts", params: {} });
+      template = $compile(el)(scope);
+      scope.$digest();
+    });
 
-  //   it('updates to the new href', function () {
-  //     expect(jqLite(template[0]).attr('href')).toBe('#/contacts');
+    it("sets the correct initial href", () => {
+      expect(jqLite(template[0]).attr("href")).toBe("#/contacts");
+    });
 
-  //     scope.state = 'contacts.item';
-  //     scope.params = { id: 5 };
-  //     scope.$digest();
-  //     expect(jqLite(template[0]).attr('href')).toBe('#/contacts/5');
+    it("updates to the new href", () => {
+      expect(jqLite(template[0]).attr("href")).toBe("#/contacts");
 
-  //     scope.params.id = 25;
-  //     scope.$digest();
-  //     expect(jqLite(template[0]).attr('href')).toBe('#/contacts/25');
-  //   });
+      scope.state = "contacts.item";
+      scope.params = { id: 5 };
+      scope.$digest();
+      expect(jqLite(template[0]).attr("href")).toBe("#/contacts/5");
 
-  //   it('updates a linked ui-sref-active', inject(function ($timeout) {
-  //     function tick() {
-  //       scope.$digest();
-  //       try {
-  //         $timeout.flush();
-  //       } catch (error) {}
-  //     }
-  //     expect(template[0].className).not.toContain('active');
-  //     expect(template[0].className).not.toContain('activeeq');
-
-  //     $state.go('contacts');
-  //     tick();
-  //     expect(template[0].className).toContain('active activeeq');
-
-  //     scope.state = 'contacts.item';
-  //     scope.params = { id: 5 };
-  //     tick();
-  //     expect(template[0].className).not.toContain('active');
-  //     expect(template[0].className).not.toContain('activeeq');
-
-  //     $state.go('contacts.item', { id: -5 });
-  //     tick();
-  //     expect(template[0].className).not.toContain('active');
-  //     expect(template[0].className).not.toContain('activeeq');
-
-  //     $state.go('contacts.item', { id: 5 });
-  //     tick();
-  //     expect(template[0].className).toContain('active activeeq');
-
-  //     scope.state = 'contacts';
-  //     scope.params = {};
-  //     tick();
-  //     expect(template[0].className).toContain('active');
-  //     expect(template[0].className).not.toContain('activeeq');
-  //   });
+      scope.params.id = 25;
+      scope.$digest();
+      expect(jqLite(template[0]).attr("href")).toBe("#/contacts/25");
+    });
 
-  //   it('updates to a new href when it points to a new state', function () {
-  //     expect(jqLite(template[0]).attr('href')).toBe('#/contacts');
-  //     scope.state = 'other';
-  //     scope.params = { id: '123' };
-  //     scope.$digest();
-  //     expect(jqLite(template[0]).attr('href')).toBe('#/other/123');
-  //   });
+    it("updates a linked ui-sref-active", async () => {
+      expect(template[0].className).not.toContain("active");
+      expect(template[0].className).not.toContain("activeeq");
+
+      $state.go("contacts");
+      scope.$digest();
+      await wait(10);
+      expect(template[0].className).toContain("active activeeq");
+
+      scope.state = "contacts.item";
+      scope.params = { id: 5 };
+      scope.$digest();
+      await wait(10);
+      expect(template[0].className).not.toContain("active");
+      expect(template[0].className).not.toContain("activeeq");
+
+      $state.go("contacts.item", { id: -5 });
+      scope.$digest();
+      await wait(10);
+      expect(template[0].className).not.toContain("active");
+      expect(template[0].className).not.toContain("activeeq");
+
+      $state.go("contacts.item", { id: 5 });
+      scope.$digest();
+      await wait(10);
+      expect(template[0].className).toContain("active activeeq");
+
+      scope.state = "contacts";
+      scope.params = {};
+      scope.$digest();
+      await wait(10);
+      expect(template[0].className).toContain("active");
+      expect(template[0].className).not.toContain("activeeq");
+    });
 
-  //   // Test for #1031
-  //   it('should allow passing params to current state using empty ui-state', inject(function (
-  //     $compile,
-  //     $rootScope,
-  //     $state,
-  //     $q
-  //   ) {
-  //     $state.go('other', { id: 'abc' });
-  //     $rootScope.$index = 'def';
-  //     $rootScope.$digest();
-
-  //     el = jqLite('<a ui-state="" ui-state-params="{id: $index}">Details</a>');
-  //     $compile(el)($rootScope);
-  //     $rootScope.$digest();
-
-  //     expect($state.current.name).toBe('other');
-  //     expect($state.params).toEqual(expect.objectContaining({ id: 'abc' });
-  //     expect(el.attr('href')).toBe('#/other/def');
-
-  //     triggerClick(el);
-  //     timeoutFlush();
-  //     $q.flush();
+    it("updates to a new href when it points to a new state", () => {
+      expect(jqLite(template[0]).attr("href")).toBe("#/contacts");
+      scope.state = "other";
+      scope.params = { id: "123" };
+      scope.$digest();
+      expect(jqLite(template[0]).attr("href")).toBe("#/other/123");
+    });
 
-  //     expect($state.current.name).toBe('other');
-  //     expect($state.params).toEqual(expect.objectContaining({ id: 'def' });
+    it("should allow passing params to current state using empty ui-state", async () => {
+      $state.go("other", { id: "abc" });
+      $rootScope.$index = "def";
+      $rootScope.$digest();
 
-  //     $rootScope.$index = 'ghi';
-  //     $state.go('other.detail');
-  //     $rootScope.$digest();
+      el = jqLite('<a ui-state="" ui-state-params="{id: $index}">Details</a>');
+      $compile(el)($rootScope);
+      $rootScope.$digest();
 
-  //     expect($state.current.name).toBe('other.detail');
-  //     expect($state.params).toEqual(expect.objectContaining({ id: 'def' });
+      expect($state.current.name).toBe("other");
+      expect($state.params.id).toEqual("abc");
+      expect(el.attr("href")).toBe("#/other/def");
 
-  //     expect(el.attr('href')).toBe('#/other/ghi/detail');
+      browserTrigger(el, "click");
+      await wait(10);
 
-  //     triggerClick(el);
-  //     timeoutFlush();
-  //     $q.flush();
+      expect($state.current.name).toBe("other");
+      expect($state.params.id).toEqual("def");
 
-  //     expect($state.current.name).toBe('other.detail');
-  //     expect($state.params).toEqual(expect.objectContaining({ id: 'ghi' });
-  //   });
+      $rootScope.$index = "ghi";
+      $state.go("other.detail");
+      $rootScope.$digest();
 
-  //   it('retains the old href if the new points to a non-state', function () {
-  //     expect(jqLite(template[0]).attr('href')).toBe('#/contacts');
-  //     scope.state = 'nostate';
-  //     scope.$digest();
-  //     expect(jqLite(template[0]).attr('href')).toBe('#/contacts');
-  //   });
+      expect($state.current.name).toBe("other.detail");
+      expect($state.params.id).toEqual("def");
 
-  //   it('accepts param overrides', inject(function ($compile) {
-  //     scope.state = 'contacts.item';
-  //     scope.params = { id: 10 };
-  //     scope.$digest();
-  //     expect(jqLite(template[0]).attr('href')).toBe('#/contacts/10');
-  //   });
+      expect(el.attr("href")).toBe("#/other/ghi/detail");
 
-  //   it('accepts param overrides', inject(function ($compile) {
-  //     scope.state = 'contacts.item';
-  //     scope.params = { id: 10 };
-  //     scope.$digest();
-  //     expect(jqLite(template[0]).attr('href')).toBe('#/contacts/10');
+      browserTrigger(el, "click");
+      await wait(10);
 
-  //     scope.params.id = 22;
-  //     scope.$digest();
-  //     expect(jqLite(template[0]).attr('href')).toBe('#/contacts/22');
-  //   });
+      expect($state.current.name).toBe("other.detail");
+      expect($state.params.id).toEqual("ghi");
+    });
 
-  //   it('watches attributes', inject(function ($compile) {
-  //     el = jqLite('<a ui-state="{{exprvar}}" ui-state-params="params">state</a>');
-  //     template = $compile(el)(scope);
+    it("retains the old href if the new points to a non-state", () => {
+      expect(jqLite(template[0]).attr("href")).toBe("#/contacts");
+      scope.state = "nostate";
+      scope.$digest();
+      expect(jqLite(template[0]).attr("href")).toBe("#/contacts");
+    });
 
-  //     scope.exprvar = 'state1';
-  //     scope.state1 = 'contacts.item';
-  //     scope.state2 = 'other';
-  //     scope.params = { id: 10 };
-  //     scope.$digest();
-  //     expect(jqLite(template[0]).attr('href')).toBe('#/contacts/10');
+    it("accepts param overrides", () => {
+      scope.state = "contacts.item";
+      scope.params = { id: 10 };
+      scope.$digest();
+      expect(jqLite(template[0]).attr("href")).toBe("#/contacts/10");
+    });
 
-  //     scope.exprvar = 'state2';
-  //     scope.$digest();
-  //     expect(jqLite(template[0]).attr('href')).toBe('#/other/10');
-  //   });
+    it("accepts param overrides", () => {
+      scope.state = "contacts.item";
+      scope.params = { id: 10 };
+      scope.$digest();
+      expect(jqLite(template[0]).attr("href")).toBe("#/contacts/10");
 
-  //   if (angular.version.minor >= 3) {
-  //     it('allows one-time-binding on ng1.3+', inject(function ($compile) {
-  //       el = jqLite('<a ui-state="::state" ui-state-params="::params">state</a>');
+      scope.params.id = 22;
+      scope.$digest();
+      expect(jqLite(template[0]).attr("href")).toBe("#/contacts/22");
+    });
 
-  //       scope.state = 'contacts.item';
-  //       scope.params = { id: 10 };
-  //       template = $compile(el)(scope);
-  //       scope.$digest();
-  //       expect(jqLite(template[0]).attr('href')).toBe('#/contacts/10');
+    it("watches attributes", () => {
+      el = jqLite(
+        '<a ui-state="{{exprvar}}" ui-state-params="params">state</a>',
+      );
+      template = $compile(el)(scope);
+
+      scope.exprvar = "state1";
+      scope.state1 = "contacts.item";
+      scope.state2 = "other";
+      scope.params = { id: 10 };
+      scope.$digest();
+      expect(jqLite(template[0]).attr("href")).toBe("#/contacts/10");
+
+      scope.exprvar = "state2";
+      scope.$digest();
+      expect(jqLite(template[0]).attr("href")).toBe("#/other/10");
+    });
 
-  //       scope.state = 'other';
-  //       scope.params = { id: 22 };
+    it("allows one-time-binding on ng1.3+", () => {
+      el = jqLite('<a ui-state="::state" ui-state-params="::params">state</a>');
 
-  //       scope.$digest();
-  //       expect(jqLite(template[0]).attr('href')).toBe('#/contacts/10');
-  //     });
-  //   }
+      scope.state = "contacts.item";
+      scope.params = { id: 10 };
+      template = $compile(el)(scope);
+      scope.$digest();
+      expect(jqLite(template[0]).attr("href")).toBe("#/contacts/10");
 
-  //   it('accepts option overrides', inject(function ($compile, $timeout, $state) {
-  //     let transitionOptions;
+      scope.state = "other";
+      scope.params = { id: 22 };
 
-  //     el = jqLite('<a ui-state="state" ui-state-opts="opts">state</a>');
-  //     scope.state = 'contacts';
-  //     scope.opts = { reload: true };
-  //     template = $compile(el)(scope);
-  //     scope.$digest();
+      scope.$digest();
+      expect(jqLite(template[0]).attr("href")).toBe("#/contacts/10");
+    });
 
-  //     spyOn($state, 'go').and.callFake(function (state, params, options) {
-  //       transitionOptions = options;
-  //     });
+    it("accepts option overrides", async () => {
+      let transitionOptions;
 
-  //     triggerClick(template);
-  //     $timeout.flush();
+      el = jqLite('<a ui-state="state" ui-state-opts="opts">state</a>');
+      scope.state = "contacts";
+      scope.opts = { reload: true };
+      template = $compile(el)(scope);
+      scope.$digest();
 
-  //     expect(transitionOptions.reload).toEqual(true);
-  //     expect(transitionOptions.absolute).toBeUndefined();
-  //   });
+      spyOn($state, "go").and.callFake(function (state, params, options) {
+        transitionOptions = options;
+      });
 
-  //   describe('option event', function () {
-  //     it('should bind click event by default', inject(function ($compile, $state, $timeout) {
-  //       expect($state.current.name).toBe('top');
+      browserTrigger(template, "click");
+      await wait(10);
 
-  //       el = jqLite('<a ui-state="state"></a>');
+      expect(transitionOptions.reload).toEqual(true);
+      expect(transitionOptions.absolute).toBeUndefined();
+    });
 
-  //       scope.state = 'contacts';
-  //       $compile(el)(scope);
-  //       scope.$digest();
+    describe("option event", () => {
+      beforeEach(() => (window.location.hash = ""));
+      it("should bind click event by default", async () => {
+        expect($state.current.name).toBe("top");
 
-  //       triggerClick(el);
-  //       $timeout.flush();
+        el = jqLite('<a ui-state="state"></a>');
 
-  //       expect($state.current.name).toBe('contacts');
-  //     });
+        scope.state = "contacts";
+        $compile(el)(scope);
+        scope.$digest();
 
-  //     it('should bind single HTML events', inject(function ($compile, $state, $timeout) {
-  //       expect($state.current.name).toEqual('top');
+        browserTrigger(el, "click");
+        await wait(10);
 
-  //       el = jqLite('<input type="text" ui-state="state" ui-state-opts="{ events: [\'change\'] }">');
+        expect($state.current.name).toBe("contacts");
+      });
 
-  //       scope.state = 'contacts';
-  //       $compile(el)(scope);
-  //       scope.$digest();
+      it("should bind single HTML events", async () => {
+        expect($state.current.name).toEqual("top");
 
-  //       triggerHTMLEvent('change');
-  //       $timeout.flush();
+        el = jqLite(
+          '<input type="text" ui-state="state" ui-state-opts="{ events: [\'change\'] }">',
+        );
 
-  //       expect($state.current.name).toEqual('contacts');
-  //     });
+        scope.state = "contacts";
+        $compile(el)(scope);
+        scope.$digest();
 
-  //     it('should bind multiple HTML events', inject(function ($compile, $state, $timeout) {
-  //       expect($state.current.name).toEqual('top');
+        browserTrigger(el, "change");
+        await wait(10);
 
-  //       el = jqLite('<input type="text" ui-state="state" ui-state-opts="{ events: [\'change\', \'blur\'] }">');
+        expect($state.current.name).toEqual("contacts");
+      });
 
-  //       scope.state = 'contacts';
-  //       $compile(el)(scope);
-  //       scope.$digest();
+      it("should bind multiple HTML events", async () => {
+        expect($state.current.name).toEqual("top");
 
-  //       triggerHTMLEvent('change');
-  //       $timeout.flush();
-  //       expect($state.current.name).toEqual('contacts');
+        el = jqLite(
+          '<input type="text" ui-state="state" ui-state-opts="{ events: [\'change\', \'blur\'] }">',
+        );
 
-  //       $state.go('top');
-  //       scope.$digest();
+        scope.state = "contacts";
+        $compile(el)(scope);
+        scope.$digest();
 
-  //       expect($state.current.name).toEqual('top');
+        browserTrigger(el, "change");
+        await wait(10);
+        expect($state.current.name).toEqual("contacts");
 
-  //       triggerHTMLEvent('blur');
-  //       $timeout.flush();
-  //       expect($state.current.name).toEqual('contacts');
-  //     });
+        $state.go("top");
+        scope.$digest();
 
-  //     it('should bind multiple Mouse events', inject(function ($compile, $state, $timeout) {
-  //       expect($state.current.name).toEqual('top');
+        expect($state.current.name).toEqual("top");
 
-  //       el = jqLite('<a ui-state="state" ui-state-opts="{ events: [\'mouseover\', \'mousedown\'] }">');
+        browserTrigger(el, "blur");
+        await wait(10);
 
-  //       scope.state = 'contacts';
-  //       $compile(el)(scope);
-  //       scope.$digest();
+        expect($state.current.name).toEqual("contacts");
+      });
 
-  //       triggerMouseEvent('mouseover');
-  //       $timeout.flush();
-  //       expect($state.current.name).toEqual('contacts');
+      it("should bind multiple Mouse events", async () => {
+        expect($state.current.name).toEqual("top");
 
-  //       $state.go('top');
-  //       scope.$digest();
+        el = jqLite(
+          "<a ui-state=\"state\" ui-state-opts=\"{ events: ['mouseover', 'mousedown'] }\">",
+        );
 
-  //       expect($state.current.name).toEqual('top');
+        scope.state = "contacts";
+        $compile(el)(scope);
+        scope.$digest();
 
-  //       triggerMouseEvent('mousedown');
-  //       $timeout.flush();
-  //       expect($state.current.name).toEqual('contacts');
-  //     });
-  //   });
-  // });
+        browserTrigger(el, "mouseover");
+        await wait(10);
+        expect($state.current.name).toEqual("contacts");
 
-  // describe('forms', function () {
-  //   let el, scope;
+        $state.go("top");
+        scope.$digest();
 
-  //   beforeEach(inject(function ($rootScope, $compile) {
-  //     el = angular.element('<form ui-sref="contacts.item.detail({ id: contact.id })"></form>');
-  //     scope = $rootScope;
-  //     scope.contact = { id: 5 };
-  //     scope.$apply();
+        expect($state.current.name).toEqual("top");
 
-  //     $compile(el)(scope);
-  //     scope.$digest();
-  //   });
+        browserTrigger(el, "mousedown");
+        await wait(10);
+        expect($state.current.name).toEqual("contacts");
+      });
+    });
+  });
 
-  //   it('should generate the correct action', function () {
-  //     expect(el.attr('action')).toBe('#/contacts/5');
-  //   });
-  // });
+  describe("forms", () => {
+    let el, scope;
 
-  // describe('relative transitions', function () {
-  //   beforeEach(inject(function ($rootScope, $compile, $state) {
-  //     $state.transitionTo('contacts.item', { id: 5 });
-  //     el = angular.element('<a ui-sref=".detail">Details</a>');
-  //     scope = $rootScope;
-  //     scope.$apply();
+    beforeEach(() => {
+      el = jqLite(
+        '<form ui-sref="contacts.item.detail({ id: contact.id })"></form>',
+      );
+      scope = $rootScope;
+      scope.contact = { id: 5 };
+      scope.$apply();
 
-  //     $compile(el)(scope);
-  //     template = $compile(angular.element('<div><ui-view></ui-view><div>'))(scope);
-  //     scope.$digest();
-  //   });
+      $compile(el)(scope);
+      scope.$digest();
+    });
 
-  //   it('should work', inject(function ($state, $stateParams, $q, $timeout) {
-  //     triggerClick(el);
-  //     $timeout.flush();
-  //     $q.flush();
+    it("should generate the correct action", () => {
+      expect(el.attr("action")).toBe("#/contacts/5");
+    });
+  });
 
-  //     expect($state.$current.name).toBe('contacts.item.detail');
-  //     expect(obj($state.params)).toEqual({ id: 5 });
-  //   });
+  describe("relative transitions", () => {
+    beforeEach(() => {
+      $state.transitionTo("contacts.item", { id: 5 });
+      el = jqLite('<a ui-sref=".detail">Details</a>');
+      scope = $rootScope;
+      scope.$apply();
 
-  //   it('should resolve states from parent uiView', inject(function ($state, $stateParams, $q, $timeout) {
-  //     $state.transitionTo('contacts');
-  //     $q.flush();
+      $compile(el)(scope);
+      template = $compile(jqLite("<div><ui-view></ui-view><div>"))(scope);
+      scope.$digest();
+    });
 
-  //     const parentToChild = angular.element(template[0].querySelector('a.item'));
-  //     triggerClick(parentToChild);
-  //     $timeout.flush();
-  //     $q.flush();
-  //     expect($state.$current.name).toBe('contacts.item');
+    it("should work", async () => {
+      browserTrigger(el, "click");
+      await wait(10);
 
-  //     const childToGrandchild = angular.element(template[0].querySelector('a.item-detail'));
-  //     const childToParent = angular.element(template[0].querySelector('a.item-parent'));
+      expect($state.$current.name).toBe("contacts.item.detail");
+      expect($state.params.id).toEqual(5);
+    });
 
-  //     triggerClick(childToGrandchild);
-  //     $timeout.flush();
-  //     $q.flush();
+    it("should resolve states from parent uiView", async () => {
+      $state.transitionTo("contacts");
 
-  //     const grandchildToParent = angular.element(template[0].querySelector('a.item-parent2'));
-  //     expect($state.$current.name).toBe('contacts.item.detail');
+      const parentToChild = jqLite(template[0].querySelector("a.item"));
+      browserTrigger(parentToChild, "click");
+      await wait(10);
 
-  //     triggerClick(grandchildToParent);
-  //     $timeout.flush();
-  //     $q.flush();
-  //     expect($state.$current.name).toBe('contacts.item');
+      expect($state.$current.name).toBe("contacts.item");
 
-  //     $state.transitionTo('contacts.item.detail', { id: 3 });
-  //     triggerClick(childToParent);
-  //     $timeout.flush();
-  //     $q.flush();
-  //     expect($state.$current.name).toBe('contacts');
-  //   });
-  // });
+      const childToGrandchild = jqLite(
+        template[0].querySelector("a.item-detail"),
+      );
+      const childToParent = jqLite(template[0].querySelector("a.item-parent"));
 
-  // describe('option event', function () {
-  //   it('should bind click event by default', inject(function ($rootScope, $compile, $state, $timeout) {
-  //     el = angular.element('<a ui-sref="contacts"></a>');
-  //     $compile(el)($rootScope);
-  //     $rootScope.$digest();
+      browserTrigger(childToGrandchild, "click");
+      await wait(10);
 
-  //     expect($state.current.name).toEqual('top');
+      const grandchildToParent = jqLite(
+        template[0].querySelector("a.item-parent2"),
+      );
+      expect($state.$current.name).toBe("contacts.item.detail");
 
-  //     triggerClick(el);
-  //     $timeout.flush();
+      browserTrigger(grandchildToParent, "click");
+      await wait(10);
 
-  //     expect($state.current.name).toEqual('contacts');
-  //   });
+      expect($state.$current.name).toBe("contacts.item");
 
-  //   it('should bind single HTML events', inject(function ($rootScope, $compile, $state, $timeout) {
-  //     el = angular.element('<input type="text" ui-sref="contacts" ui-sref-opts="{ events: [\'change\'] }">');
-  //     $compile(el)($rootScope);
-  //     $rootScope.$digest();
+      $state.transitionTo("contacts.item.detail", { id: 3 });
+      browserTrigger(childToParent, "click");
+      await wait(10);
+      expect($state.$current.name).toBe("contacts");
+    });
+  });
 
-  //     expect($state.current.name).toEqual('top');
+  describe("option event", () => {
+    beforeEach(() => (window.location.hash = ""));
+    it("should bind click event by default", async () => {
+      el = jqLite('<a ui-sref="contacts"></a>');
+      $compile(el)($rootScope);
+      $rootScope.$digest();
 
-  //     triggerHTMLEvent('change');
-  //     $timeout.flush();
+      expect($state.current.name).toEqual("top");
 
-  //     expect($state.current.name).toEqual('contacts');
-  //   });
+      browserTrigger(el, "click");
+      await wait(10);
 
-  //   it('should bind multiple HTML events', inject(function ($rootScope, $compile, $state, $timeout) {
-  //     el = angular.element('<input type="text" ui-sref="contacts" ui-sref-opts="{ events: [\'change\', \'blur\'] }">');
-  //     $compile(el)($rootScope);
-  //     $rootScope.$digest();
+      expect($state.current.name).toEqual("contacts");
+    });
 
-  //     expect($state.current.name).toEqual('top');
+    it("should bind single HTML events", async () => {
+      el = jqLite(
+        '<input type="text" ui-sref="contacts" ui-sref-opts="{ events: [\'change\'] }">',
+      );
+      $compile(el)($rootScope);
+      $rootScope.$digest();
 
-  //     triggerHTMLEvent('change');
-  //     $timeout.flush();
-  //     expect($state.current.name).toEqual('contacts');
+      expect($state.current.name).toEqual("top");
 
-  //     $state.go('top');
-  //     $rootScope.$digest();
+      browserTrigger(el, "change");
+      await wait(10);
 
-  //     expect($state.current.name).toEqual('top');
+      expect($state.current.name).toEqual("contacts");
+    });
 
-  //     triggerHTMLEvent('blur');
-  //     $timeout.flush();
-  //     expect($state.current.name).toEqual('contacts');
-  //   });
+    it("should bind multiple HTML events", async () => {
+      el = jqLite(
+        '<input type="text" ui-sref="contacts" ui-sref-opts="{ events: [\'change\', \'blur\'] }">',
+      );
+      $compile(el)($rootScope);
+      $rootScope.$digest();
 
-  //   it('should bind multiple Mouse events', inject(function ($rootScope, $compile, $state, $timeout) {
-  //     el = angular.element('<a ui-sref="contacts" ui-sref-opts="{ events: [\'mouseover\', \'mousedown\'] }">');
-  //     $compile(el)($rootScope);
-  //     $rootScope.$digest();
+      expect($state.current.name).toEqual("top");
 
-  //     expect($state.current.name).toEqual('top');
+      browserTrigger(el, "change");
+      await wait(10);
+      expect($state.current.name).toEqual("contacts");
 
-  //     triggerMouseEvent('mouseover');
-  //     $timeout.flush();
-  //     expect($state.current.name).toEqual('contacts');
+      $state.go("top");
+      $rootScope.$digest();
 
-  //     $state.go('top');
-  //     $rootScope.$digest();
+      expect($state.current.name).toEqual("top");
 
-  //     expect($state.current.name).toEqual('top');
+      browserTrigger(el, "blur");
+      await wait(10);
+      expect($state.current.name).toEqual("contacts");
+    });
 
-  //     triggerMouseEvent('mousedown');
-  //     $timeout.flush();
-  //     expect($state.current.name).toEqual('contacts');
-  //   });
-  // });
+    it("should bind multiple Mouse events", async () => {
+      el = jqLite(
+        "<a ui-sref=\"contacts\" ui-sref-opts=\"{ events: ['mouseover', 'mousedown'] }\">",
+      );
+      $compile(el)($rootScope);
+      $rootScope.$digest();
+
+      expect($state.current.name).toEqual("top");
+
+      browserTrigger(el, "mouseover");
+      await wait(10);
+      expect($state.current.name).toEqual("contacts");
+
+      $state.go("top");
+      $rootScope.$digest();
+
+      expect($state.current.name).toEqual("top");
+
+      browserTrigger(el, "mousedown");
+      await wait(10);
+      expect($state.current.name).toEqual("contacts");
+    });
+  });
 });
 
-// describe('uiSrefActive', function () {
-//   let el, template, scope, document, _stateProvider;
-
-//   beforeEach(module('ui.router'));
-
-//   beforeEach(
-//     module(function ($stateProvider) {
-//       _stateProvider = $stateProvider;
-//       $stateProvider
-//         .state({name: 'top', url: '',
-//         })
-//         .state({name: 'contacts', url: '/contacts',
-//           views: {
-//             $default: {
-//               template: '<a ui-sref=".item({ id: 6 })" ui-sref-active="active">Contacts</a>',
-//             },
-//           },
-//         })
-//         .state({name: 'contacts.item', url: '/:id',
-//         })
-//         .state({name: 'contacts.item.detail', url: '/detail/:foo',
-//         })
-//         .state({name: 'contacts.item.edit', url: '/edit',
-//         })
-//         .state({name: 'admin', url: '/admin',
-//           abstract: true,
-//           template: '<ui-view/>',
-//         })
-//         .state({name: 'admin.roles', url: '/roles?page',
-//         })
-//         .state({name: 'arrayparam', url: '/arrayparam?{foo:int}&bar',
-//           template: '<div></div>',
-//         });
-//     })
-//   );
-
-//   beforeEach(inject(function ($document, $timeout) {
-//     document = $document[0];
-//     timeoutFlush = function () {
-//       try {
-//         $timeout.flush();
-//       } catch (e) {
-//         // Angular 1.0.8 throws 'No deferred tasks to be flushed' if there is nothing in queue.
-//         // Behave as Angular >=1.1.5 and do nothing in such case.
-//       }
-//     };
-//   });
-
-//   it('should update class for sibling uiSref', inject(function ($rootScope, $q, $compile, $state) {
-//     el = angular.element(
-//       '<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active="active">Contacts</a><a ui-sref="contacts.item({ id: 2 })" ui-sref-active="active">Contacts</a></div>'
-//     );
-//     template = $compile(el)($rootScope);
-//     $rootScope.$digest();
-
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBeFalsy();
-//     $state.transitionTo('contacts.item', { id: 1 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
-
-//     $state.transitionTo('contacts.item', { id: 2 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBeFalsy();
-//   });
-
-//   it("should match state's parameters", inject(function ($rootScope, $q, $compile, $state) {
-//     el = angular.element(
-//       '<div><a ui-sref="contacts.item.detail({ foo: \'bar\' })" ui-sref-active="active">Contacts</a></div>'
-//     );
-//     template = $compile(el)($rootScope);
-//     $rootScope.$digest();
-
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBeFalsy();
-//     $state.transitionTo('contacts.item.detail', { id: 5, foo: 'bar' });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
-
-//     $state.transitionTo('contacts.item.detail', { id: 5, foo: 'baz' });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBeFalsy();
-//   });
-
-//   // Test for #2696
-//   it('should compare using typed parameters', inject(function ($rootScope, $q, $compile, $state) {
-//     el = angular.element('<div><a ui-sref="arrayparam({ foo: [1,2,3] })" ui-sref-active="active">foo 123</a></div>');
-//     template = $compile(el)($rootScope);
-//     $rootScope.$digest();
-
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBeFalsy();
-
-//     $state.transitionTo('arrayparam', { foo: [1, 2, 3] });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
-
-//     $state.transitionTo('arrayparam', { foo: [1, 2, 3], bar: 'asdf' });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
-
-//     $state.transitionTo('arrayparam', { foo: [1, 2] });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBeFalsy();
-//   });
-
-//   // Test for #3154
-//   it('should compare ui-sref-active-eq using typed parameters', inject(function ($rootScope, $q, $compile, $state) {
-//     el = angular.element('<div><a ui-sref="arrayparam({ foo: [1,2,3] })" ui-sref-active-eq="active">foo 123</a></div>');
-//     template = $compile(el)($rootScope);
-//     $rootScope.$digest();
-
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBeFalsy();
-
-//     $state.transitionTo('arrayparam', { foo: [1, 2, 3] });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
-
-//     $state.transitionTo('arrayparam', { foo: [1, 2, 3], bar: 'asdf' });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
-
-//     $state.transitionTo('arrayparam', { foo: [1, 2] });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBeFalsy();
-//   });
-
-//   it('should update in response to ui-sref param expression changes', inject(function (
-//     $rootScope,
-//     $q,
-//     $compile,
-//     $state
-//   ) {
-//     el = angular.element(
-//       '<div><a ui-sref="contacts.item.detail({ foo: fooId })" ui-sref-active="active">Contacts</a></div>'
-//     );
-//     template = $compile(el)($rootScope);
-//     $rootScope.fooId = 'bar';
-//     $rootScope.$digest();
-
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBeFalsy();
-//     $state.transitionTo('contacts.item.detail', { id: 5, foo: 'bar' });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
-
-//     $rootScope.fooId = 'baz';
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBeFalsy();
-//   });
-
-//   it('should match on child states', inject(function ($rootScope, $q, $compile, $state) {
-//     template = $compile('<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active="active">Contacts</a></div>')(
-//       $rootScope
-//     );
-//     $rootScope.$digest();
-//     const a = angular.element(template[0].getElementsByTagName('a')[0]);
-
-//     $state.transitionTo('contacts.item.edit', { id: 1 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect($state.params.id).toBe('1');
-//     expect(a.attr('class')).toMatch(/active/);
-
-//     $state.transitionTo('contacts.item.edit', { id: 4 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect($state.params.id).toBe('4');
-//     expect(a.attr('class')).not.toMatch(/active/);
-//   });
-
-//   it('should NOT match on child states when active-equals is used', inject(function ($rootScope, $q, $compile, $state) {
-//     template = $compile('<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active-eq="active">Contacts</a></div>')(
-//       $rootScope
-//     );
-//     $rootScope.$digest();
-//     const a = angular.element(template[0].getElementsByTagName('a')[0]);
-
-//     $state.transitionTo('contacts.item', { id: 1 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(a.attr('class')).toMatch(/active/);
-
-//     $state.transitionTo('contacts.item.edit', { id: 1 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(a.attr('class')).not.toMatch(/active/);
-//   });
-
-//   it('should match on child states when active-equals and active-equals-eq is used', inject(function (
-//     $rootScope,
-//     $q,
-//     $compile,
-//     $state,
-//     $timeout
-//   ) {
-//     template = $compile(
-//       '<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active="active" ui-sref-active-eq="active-eq">Contacts</a></div>'
-//     )($rootScope);
-//     $rootScope.$digest();
-//     const a = angular.element(template[0].getElementsByTagName('a')[0]);
-
-//     $state.transitionTo('contacts.item', { id: 1 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(a.attr('class')).toMatch(/active/);
-//     expect(a.attr('class')).toMatch(/active-eq/);
-
-//     $state.transitionTo('contacts.item.edit', { id: 1 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(a.attr('class')).toMatch(/active/);
-//     expect(a.attr('class')).not.toMatch(/active-eq/);
-//   });
-
-//   it('should resolve relative state refs', inject(function ($rootScope, $q, $compile, $state) {
-//     el = angular.element('<section><div ui-view></div></section>');
-//     template = $compile(el)($rootScope);
-//     $rootScope.$digest();
-
-//     $state.transitionTo('contacts');
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('ng-scope');
-
-//     $state.transitionTo('contacts.item', { id: 6 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('ng-scope active');
-
-//     $state.transitionTo('contacts.item', { id: 5 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('ng-scope');
-//   });
-
-//   it('should match on any child state refs', inject(function ($rootScope, $q, $compile, $state) {
-//     el = angular.element(
-//       '<div ui-sref-active="active"><a ui-sref="contacts.item({ id: 1 })">Contacts</a><a ui-sref="contacts.item({ id: 2 })">Contacts</a></div>'
-//     );
-//     template = $compile(el)($rootScope);
-//     $rootScope.$digest();
-
-//     expect(angular.element(template[0]).attr('class')).toBe('ng-scope');
-
-//     $state.transitionTo('contacts.item', { id: 1 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0]).attr('class')).toBe('ng-scope active');
-
-//     $state.transitionTo('contacts.item', { id: 2 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0]).attr('class')).toBe('ng-scope active');
-//   });
-
-//   it('should match fuzzy on lazy loaded states', inject(function ($rootScope, $q, $compile, $state) {
-//     el = angular.element('<div><a ui-sref="contacts.lazy" ui-sref-active="active">Lazy Contact</a></div>');
-//     template = $compile(el)($rootScope);
-//     $q.flush();
-
-//     _stateProvider.onInvalid(function ($to$) {
-//       if ($to$.name() === 'contacts.lazy') {
-//         _stateProvider.state({name: 'contacts.lazy', {});
-//         return $to$;
-//       }
-//     });
-
-//     $state.transitionTo('contacts.item', { id: 1 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBeFalsy();
-
-//     $state.transitionTo('contacts.lazy');
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
-//   });
-
-//   it('should match exactly on lazy loaded states', inject(function ($transitions, $rootScope, $q, $compile, $state) {
-//     el = angular.element('<div><a ui-sref="contacts.lazy" ui-sref-active-eq="active">Lazy Contact</a></div>');
-//     template = $compile(el)($rootScope);
-//     $q.flush();
-
-//     _stateProvider.onInvalid(function ($to$) {
-//       if ($to$.name() === 'contacts.lazy') {
-//         _stateProvider.state({name: 'contacts.lazy', {});
-//         return $to$;
-//       }
-//     });
-
-//     $state.transitionTo('contacts.item', { id: 1 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBeFalsy();
-
-//     $state.transitionTo('contacts.lazy');
-//     $q.flush();
-//     timeoutFlush();
-//     expect(angular.element(template[0].querySelector('a')).attr('class')).toBe('active');
-//   });
-
-//   it('should allow multiple classes to be supplied', inject(function ($rootScope, $q, $compile, $state) {
-//     template = $compile(
-//       '<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active="active also-active">Contacts</a></div>'
-//     )($rootScope);
-//     $rootScope.$digest();
-//     const a = angular.element(template[0].getElementsByTagName('a')[0]);
-
-//     $state.transitionTo('contacts.item.edit', { id: 1 });
-//     $q.flush();
-//     timeoutFlush();
-//     expect(a.attr('class')).toMatch(/active also-active/);
-//   });
-
-//   it('should not match fuzzy on lazy loaded future states', inject(function ($rootScope, $compile, $q, $state) {
-//     _stateProvider.state({name: 'contacts.lazy.**', {
-//       url: '/lazy',
-//       lazyLoad: function () {
-//         return $q.when().then(function () {
-//           _stateProvider
-//             .state({name: 'contacts.lazy', {
-//               abstract: true,
-//               url: '/lazy',
-//             })
-//             .state({name: 'contacts.lazy.s1', {
-//               url: '/s1',
-//             })
-//             .state({name: 'contacts.lazy.s2', {
-//               url: '/s2',
-//             });
-//         });
-//       },
-//     });
-//     template = $compile(
-//       '<div ui-sref-active="active"><a ui-sref="contacts.lazy.s1">Lazy</a></div><div ui-sref-active="active"><a ui-sref="contacts.lazy.s2"></a></div>'
-//     )($rootScope);
-//     $rootScope.$digest();
-//     $state.transitionTo('contacts.lazy.s1');
-//     $q.flush();
-//     timeoutFlush();
-//     expect(template.eq(0).hasClass('active')).toBeTruthy();
-//     expect(template.eq(1).hasClass('active')).toBeFalsy();
-//   });
-
-//   describe('ng-{class,style} interface', function () {
-//     it('should match on abstract states that are included by the current state', inject(function (
-//       $rootScope,
-//       $compile,
-//       $state,
-//       $q
-//     ) {
-//       el = $compile(
-//         '<div ui-sref-active="{active: \'admin.*\'}"><a ui-sref-active="active" ui-sref="admin.roles">Roles</a></div>'
-//       )($rootScope);
-//       $state.transitionTo('admin.roles');
-//       $q.flush();
-//       timeoutFlush();
-//       const abstractParent = el[0];
-//       expect(abstractParent.className).toMatch(/active/);
-//       const child = el[0].querySelector('a');
-//       expect(child.className).toMatch(/active/);
-//     });
-
-//     it('should match on state parameters',  async () => {
-//       el = $compile('<div ui-sref-active="{active: \'admin.roles({page: 1})\'}"></div>')($rootScope);
-//       $state.transitionTo('admin.roles', { page: 1 });
-//       $q.flush();
-//       timeoutFlush();
-//       expect(el[0].className).toMatch(/active/);
-//     });
-
-//     it('should shadow the state provided by ui-sref',  async () => {
-//       el = $compile('<div ui-sref-active="{active: \'admin.roles({page: 1})\'}"><a ui-sref="admin.roles"></a></div>')(
-//         $rootScope
-//       );
-//       $state.transitionTo('admin.roles');
-//       $q.flush();
-//       timeoutFlush();
-//       expect(el[0].className).not.toMatch(/active/);
-//       $state.transitionTo('admin.roles', { page: 1 });
-//       $q.flush();
-//       timeoutFlush();
-//       expect(el[0].className).toMatch(/active/);
-//     });
-
-//     it('should support multiple <className, stateOrName> pairs',  async () => {
-//       el = $compile("<div ui-sref-active=\"{contacts: 'contacts.**', admin: 'admin.roles({page: 1})'}\"></div>")(
-//         $rootScope
-//       );
-//       $state.transitionTo('contacts');
-//       $q.flush();
-//       timeoutFlush();
-//       expect(el[0].className).toMatch(/contacts/);
-//       expect(el[0].className).not.toMatch(/admin/);
-//       $state.transitionTo('admin.roles', { page: 1 });
-//       $q.flush();
-//       timeoutFlush();
-//       expect(el[0].className).toMatch(/admin/);
-//       expect(el[0].className).not.toMatch(/contacts/);
-//     });
-
-//     it('should update the active classes when compiled', inject(function ($compile, $rootScope, $document, $state, $q) {
-//       $state.transitionTo('admin.roles');
-//       $q.flush();
-//       timeoutFlush();
-//       el = $compile('<div ui-sref-active="{active: \'admin.roles\'}"/>')($rootScope);
-//       $rootScope.$digest();
-//       timeoutFlush();
-//       expect(el.hasClass('active')).toBeTruthy();
-//     });
-
-//     it('should not match fuzzy on lazy loaded future states', inject(function ($rootScope, $compile, $q, $state) {
-//       _stateProvider.state({name: 'contacts.lazy.**', {
-//         url: '/lazy',
-//         lazyLoad: function () {
-//           return $q.when().then(function () {
-//             _stateProvider
-//               .state({name: 'contacts.lazy', {
-//                 abstract: true,
-//                 url: '/lazy',
-//               })
-//               .state({name: 'contacts.lazy.s1', {
-//                 url: '/s1',
-//               })
-//               .state({name: 'contacts.lazy.s2', {
-//                 url: '/s2',
-//               });
-//           });
-//         },
-//       });
-//       template = $compile(
-//         '<div ui-sref-active="{ active: \'contacts.lazy.s1\' }"><a ui-sref="contacts.lazy.s1">Lazy</a></div><div ui-sref-active="{ active: \'contacts.lazy.s2\' }"></div>'
-//       )($rootScope);
-//       $rootScope.$digest();
-//       $state.transitionTo('contacts.lazy.s1');
-//       $q.flush();
-//       timeoutFlush();
-//       expect(template.eq(0).hasClass('active')).toBeTruthy();
-//       expect(template.eq(1).hasClass('active')).toBeFalsy();
-//     });
-//   });
-
-//   describe('ng-{class,style} interface, and handle values as arrays', function () {
-//     it('should match on abstract states that are included by the current state', inject(function (
-//       $rootScope,
-//       $compile,
-//       $state,
-//       $q
-//     ) {
-//       el = $compile(
-//         '<div ui-sref-active="{active: [\'randomState.**\', \'admin.roles\']}"><a ui-sref-active="active" ui-sref="admin.roles">Roles</a></div>'
-//       )($rootScope);
-//       $state.transitionTo('admin.roles');
-//       $q.flush();
-//       timeoutFlush();
-//       const abstractParent = el[0];
-//       expect(abstractParent.className).toMatch(/active/);
-//       const child = el[0].querySelector('a');
-//       expect(child.className).toMatch(/active/);
-//     });
-
-//     it('should match on state parameters',  async () => {
-//       el = $compile('<div ui-sref-active="{active: [\'admin.roles({page: 1})\']}"></div>')($rootScope);
-//       $state.transitionTo('admin.roles', { page: 1 });
-//       $q.flush();
-//       timeoutFlush();
-//       expect(el[0].className).toMatch(/active/);
-//     });
-
-//     it('should support multiple <className, stateOrName> pairs',  async () => {
-//       el = $compile(
-//         "<div ui-sref-active=\"{contacts: ['contacts.item', 'contacts.item.detail'], admin: 'admin.roles({page: 1})'}\"></div>"
-//       )($rootScope);
-//       $state.transitionTo('contacts.item.detail', { id: 1, foo: 'bar' });
-//       $q.flush();
-//       timeoutFlush();
-//       expect(el[0].className).toMatch(/contacts/);
-//       expect(el[0].className).not.toMatch(/admin/);
-//       $state.transitionTo('admin.roles', { page: 1 });
-//       $q.flush();
-//       timeoutFlush();
-//       expect(el[0].className).toMatch(/admin/);
-//       expect(el[0].className).not.toMatch(/contacts/);
-//     });
-
-//     it('should update the active classes when compiled', inject(function ($compile, $rootScope, $document, $state, $q) {
-//       $state.transitionTo('admin.roles');
-//       $q.flush();
-//       timeoutFlush();
-//       el = $compile("<div ui-sref-active=\"{active: ['admin.roles', 'admin.someOtherState']}\"/>")($rootScope);
-//       $rootScope.$digest();
-//       timeoutFlush();
-//       expect(el.hasClass('active')).toBeTruthy();
-//     });
-//   });
-// });
+describe("uiSrefActive", () => {
+  window.location.hash = "#!";
+  let el,
+    el2,
+    template,
+    scope,
+    _locationProvider,
+    $rootScope,
+    $compile,
+    $q,
+    $injector,
+    $timeout,
+    $state,
+    $stateParams,
+    _stateProvider;
+
+  beforeEach(() => {
+    window.location.hash = "#!";
+    window.angular = new Angular();
+    publishExternalAPI();
+    let module = window.angular.module("defaultModule", ["ui.router"]);
+    module.config(function ($stateProvider) {
+      _stateProvider = $stateProvider;
+      $stateProvider
+        .state({ name: "top", url: "" })
+        .state({
+          name: "contacts",
+          url: "/contacts",
+          views: {
+            $default: {
+              template:
+                '<a ui-sref=".item({ id: 6 })" ui-sref-active="active">Contacts</a>',
+            },
+          },
+        })
+        .state({ name: "contacts.item", url: "/:id" })
+        .state({ name: "contacts.item.detail", url: "/detail/:foo" })
+        .state({ name: "contacts.item.edit", url: "/edit" })
+        .state({
+          name: "admin",
+          url: "/admin",
+          abstract: true,
+          template: "<ui-view/>",
+        })
+        .state({ name: "admin.roles", url: "/roles?page" })
+        .state({
+          name: "arrayparam",
+          url: "/arrayparam?{foo:int}&bar",
+          template: "<div></div>",
+        });
+    });
+    $injector = window.angular.bootstrap(document.getElementById("dummy"), [
+      "defaultModule",
+    ]);
+    $q = $injector.get("$q");
+    $rootScope = $injector.get("$rootScope");
+    $compile = $injector.get("$compile");
+    $timeout = $injector.get("$timeout");
+    $state = $injector.get("$state");
+    $stateParams = $injector.get("$stateParams");
+  });
+
+  it("should update class for sibling uiSref", async () => {
+    el = jqLite(
+      '<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active="active">Contacts</a><a ui-sref="contacts.item({ id: 2 })" ui-sref-active="active">Contacts</a></div>',
+    );
+    template = $compile(el)($rootScope);
+    $rootScope.$digest();
+
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBeFalsy();
+    $state.transitionTo("contacts.item", { id: 1 });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBe("active");
+
+    $state.transitionTo("contacts.item", { id: 2 });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBeFalsy();
+  });
+
+  it("should match state's parameters", async () => {
+    el = jqLite(
+      '<div><a ui-sref="contacts.item.detail({ foo: \'bar\' })" ui-sref-active="active">Contacts</a></div>',
+    );
+    template = $compile(el)($rootScope);
+    $rootScope.$digest();
+
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBeFalsy();
+    $state.transitionTo("contacts.item.detail", { id: 5, foo: "bar" });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBe("active");
+
+    $state.transitionTo("contacts.item.detail", { id: 5, foo: "baz" });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBeFalsy();
+  });
+
+  // Test for #2696
+  it("should compare using typed parameters", async () => {
+    el = jqLite(
+      '<div><a ui-sref="arrayparam({ foo: [1,2,3] })" ui-sref-active="active">foo 123</a></div>',
+    );
+    template = $compile(el)($rootScope);
+    $rootScope.$digest();
+
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBeFalsy();
+
+    $state.transitionTo("arrayparam", { foo: [1, 2, 3] });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBe("active");
+
+    $state.transitionTo("arrayparam", { foo: [1, 2, 3], bar: "asdf" });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBe("active");
+
+    $state.transitionTo("arrayparam", { foo: [1, 2] });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBeFalsy();
+  });
+
+  // Test for #3154
+  it("should compare ui-sref-active-eq using typed parameters", async () => {
+    el = jqLite(
+      '<div><a ui-sref="arrayparam({ foo: [1,2,3] })" ui-sref-active-eq="active">foo 123</a></div>',
+    );
+    template = $compile(el)($rootScope);
+    $rootScope.$digest();
+
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBeFalsy();
+
+    $state.transitionTo("arrayparam", { foo: [1, 2, 3] });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBe("active");
+
+    $state.transitionTo("arrayparam", { foo: [1, 2, 3], bar: "asdf" });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBe("active");
+
+    $state.transitionTo("arrayparam", { foo: [1, 2] });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBeFalsy();
+  });
+
+  it("should update in response to ui-sref param expression changes", async () => {
+    el = jqLite(
+      '<div><a ui-sref="contacts.item.detail({ foo: fooId })" ui-sref-active="active">Contacts</a></div>',
+    );
+    template = $compile(el)($rootScope);
+    $rootScope.fooId = "bar";
+    $rootScope.$digest();
+
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBeFalsy();
+    $state.transitionTo("contacts.item.detail", { id: 5, foo: "bar" });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBe("active");
+
+    $rootScope.fooId = "baz";
+    $rootScope.$digest();
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBeFalsy();
+  });
+
+  it("should match on child states", async () => {
+    template = $compile(
+      '<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active="active">Contacts</a></div>',
+    )($rootScope);
+    $rootScope.$digest();
+    const a = jqLite(template[0].getElementsByTagName("a")[0]);
+
+    $state.transitionTo("contacts.item.edit", { id: 1 });
+    await wait(10);
+    expect($state.params.id).toBe("1");
+    expect(a.attr("class")).toMatch(/active/);
+
+    $state.transitionTo("contacts.item.edit", { id: 4 });
+    await wait(10);
+    expect($state.params.id).toBe("4");
+    expect(a.attr("class")).not.toMatch(/active/);
+  });
+
+  it("should NOT match on child states when active-equals is used", async () => {
+    template = $compile(
+      '<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active-eq="active">Contacts</a></div>',
+    )($rootScope);
+    $rootScope.$digest();
+    const a = jqLite(template[0].getElementsByTagName("a")[0]);
+
+    $state.transitionTo("contacts.item", { id: 1 });
+    await wait(10);
+    expect(a.attr("class")).toMatch(/active/);
+
+    $state.transitionTo("contacts.item.edit", { id: 1 });
+    await wait(10);
+    expect(a.attr("class")).not.toMatch(/active/);
+  });
+
+  it("should match on child states when active-equals and active-equals-eq is used", async () => {
+    template = $compile(
+      '<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active="active" ui-sref-active-eq="active-eq">Contacts</a></div>',
+    )($rootScope);
+    $rootScope.$digest();
+    const a = jqLite(template[0].getElementsByTagName("a")[0]);
+
+    $state.transitionTo("contacts.item", { id: 1 });
+    await wait(10);
+    expect(a.attr("class")).toMatch(/active/);
+    expect(a.attr("class")).toMatch(/active-eq/);
+
+    $state.transitionTo("contacts.item.edit", { id: 1 });
+    await wait(10);
+    expect(a.attr("class")).toMatch(/active/);
+    expect(a.attr("class")).not.toMatch(/active-eq/);
+  });
+
+  it("should resolve relative state refs", async () => {
+    el = jqLite("<section><div ui-view></div></section>");
+    template = $compile(el)($rootScope);
+    $rootScope.$digest();
+
+    $state.transitionTo("contacts");
+    await wait(10);
+    expect(
+      jqLite(template[0].querySelector("a")).attr("class"),
+    ).toBeUndefined();
+
+    $state.transitionTo("contacts.item", { id: 6 });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBe("active");
+
+    $state.transitionTo("contacts.item", { id: 5 });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBe("");
+  });
+
+  it("should match on any child state refs", async () => {
+    el = jqLite(
+      '<div ui-sref-active="active"><a ui-sref="contacts.item({ id: 1 })">Contacts</a><a ui-sref="contacts.item({ id: 2 })">Contacts</a></div>',
+    );
+    template = $compile(el)($rootScope);
+    $rootScope.$digest();
+
+    expect(jqLite(template[0]).attr("class")).toBeUndefined();
+
+    $state.transitionTo("contacts.item", { id: 1 });
+    await wait(10);
+    expect(jqLite(template[0]).attr("class")).toBe("active");
+
+    $state.transitionTo("contacts.item", { id: 2 });
+    await wait(10);
+    expect(jqLite(template[0]).attr("class")).toBe("active");
+  });
+
+  it("should match fuzzy on lazy loaded states", async () => {
+    el = jqLite(
+      '<div><a ui-sref="contacts.lazy" ui-sref-active="active">Lazy Contact</a></div>',
+    );
+    template = $compile(el)($rootScope);
+    await wait(10);
+
+    _stateProvider.onInvalid(function ($to$) {
+      if ($to$.name() === "contacts.lazy") {
+        _stateProvider.state({ name: "contacts.lazy" });
+        return $to$;
+      }
+    });
+
+    $state.transitionTo("contacts.item", { id: 1 });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBeFalsy();
+
+    $state.transitionTo("contacts.lazy");
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBe("active");
+  });
+
+  it("should match exactly on lazy loaded states", async () => {
+    el = jqLite(
+      '<div><a ui-sref="contacts.lazy" ui-sref-active-eq="active">Lazy Contact</a></div>',
+    );
+    template = $compile(el)($rootScope);
+    await wait(10);
+
+    _stateProvider.onInvalid(function ($to$) {
+      if ($to$.name() === "contacts.lazy") {
+        _stateProvider.state({ name: "contacts.lazy" });
+        return $to$;
+      }
+    });
+
+    $state.transitionTo("contacts.item", { id: 1 });
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBeFalsy();
+
+    $state.transitionTo("contacts.lazy");
+    await wait(10);
+    expect(jqLite(template[0].querySelector("a")).attr("class")).toBe("active");
+  });
+
+  it("should allow multiple classes to be supplied", async () => {
+    template = $compile(
+      '<div><a ui-sref="contacts.item({ id: 1 })" ui-sref-active="active also-active">Contacts</a></div>',
+    )($rootScope);
+    $rootScope.$digest();
+    const a = jqLite(template[0].getElementsByTagName("a")[0]);
+
+    $state.transitionTo("contacts.item.edit", { id: 1 });
+    await wait(10);
+    expect(a.attr("class")).toMatch(/active also-active/);
+  });
+
+  // TODO does not work
+  xit("should not match fuzzy on lazy loaded future states", async () => {
+    _stateProvider.state({
+      name: "contacts.lazy.**",
+      url: "/lazy",
+      lazyLoad: () => {
+        return $q.when().then(() => {
+          _stateProvider
+            .state({ name: "contacts.lazy", abstract: true, url: "/lazy" })
+            .state({ name: "contacts.lazy.s1", url: "/s1" })
+            .state({ name: "contacts.lazy.s2", url: "/s2" });
+        });
+      },
+    });
+    template = $compile(
+      '<div ui-sref-active="active"><a ui-sref="contacts.lazy.s1">Lazy</a></div><div ui-sref-active="active"><a ui-sref="contacts.lazy.s2"></a></div>',
+    )($rootScope);
+    $rootScope.$digest();
+    $state.transitionTo("contacts.lazy.s1");
+    await wait(10);
+
+    expect(template.eq(0)[0].hasClass("active")).toBeTruthy();
+    //expect(template.eq(1).hasClass("active")).toBeFalsy();
+  });
+
+  // TODO investigate why transitions error out
+  xdescribe("ng-{class,style} interface", () => {
+    it("should match on abstract states that are included by the current state", async () => {
+      el = $compile(
+        '<div ui-sref-active="{active: \'admin.*\'}"><a ui-sref-active="active" ui-sref="admin.roles">Roles</a></div>',
+      )($rootScope);
+      $state.transitionTo("admin.roles");
+      await wait(10);
+      const abstractParent = el[0];
+      expect(abstractParent.className).toMatch(/active/);
+      const child = el[0].querySelector("a");
+      expect(child.className).toMatch(/active/);
+    });
+
+    it("should match on state parameters", async () => {
+      el = $compile(
+        "<div ui-sref-active=\"{active: 'admin.roles({page: 1})'}\"></div>",
+      )($rootScope);
+      $state.transitionTo("admin.roles", { page: 1 });
+      await wait(10);
+      expect(el[0].className).toMatch(/active/);
+    });
+
+    it("should shadow the state provided by ui-sref", async () => {
+      el = $compile(
+        '<div ui-sref-active="{active: \'admin.roles({page: 1})\'}"><a ui-sref="admin.roles"></a></div>',
+      )($rootScope);
+      $state.transitionTo("admin.roles");
+      await wait(10);
+      expect(el[0].className).not.toMatch(/active/);
+      $state.transitionTo("admin.roles", { page: 1 });
+      await wait(10);
+      expect(el[0].className).toMatch(/active/);
+    });
+
+    it("should support multiple <className, stateOrName> pairs", async () => {
+      el = $compile(
+        "<div ui-sref-active=\"{contacts: 'contacts.**', admin: 'admin.roles({page: 1})'}\"></div>",
+      )($rootScope);
+      $state.transitionTo("contacts");
+      await wait(10);
+      expect(el[0].className).toMatch(/contacts/);
+      expect(el[0].className).not.toMatch(/admin/);
+      $state.transitionTo("admin.roles", { page: 1 });
+      await wait(10);
+      expect(el[0].className).toMatch(/admin/);
+      expect(el[0].className).not.toMatch(/contacts/);
+    });
+
+    it("should update the active classes when compiled", async () => {
+      $state.transitionTo("admin.roles");
+      await wait(10);
+      el = $compile("<div ui-sref-active=\"{active: 'admin.roles'}\"/>")(
+        $rootScope,
+      );
+      $rootScope.$digest();
+      timeoutFlush();
+      expect(el.hasClass("active")).toBeTruthy();
+    });
+
+    it("should not match fuzzy on lazy loaded future states", async () => {
+      _stateProvider.state({
+        name: "contacts.lazy.**",
+        url: "/lazy",
+        lazyLoad: () => {
+          return $q.when().then(() => {
+            _stateProvider
+              .state({ name: "contacts.lazy", abstract: true, url: "/lazy" })
+              .state({ name: "contacts.lazy.s1", url: "/s1" })
+              .state({ name: "contacts.lazy.s2", url: "/s2" });
+          });
+        },
+      });
+      template = $compile(
+        '<div ui-sref-active="{ active: \'contacts.lazy.s1\' }"><a ui-sref="contacts.lazy.s1">Lazy</a></div><div ui-sref-active="{ active: \'contacts.lazy.s2\' }"></div>',
+      )($rootScope);
+      $rootScope.$digest();
+      $state.transitionTo("contacts.lazy.s1");
+      await wait(10);
+      expect(template.eq(0).hasClass("active")).toBeTruthy();
+      expect(template.eq(1).hasClass("active")).toBeFalsy();
+    });
+  });
+
+  xdescribe("ng-{class,style} interface, and handle values as arrays", () => {
+    it("should match on abstract states that are included by the current state", async () => {
+      el = $compile(
+        '<div ui-sref-active="{active: [\'randomState.**\', \'admin.roles\']}"><a ui-sref-active="active" ui-sref="admin.roles">Roles</a></div>',
+      )($rootScope);
+      $state.transitionTo("admin.roles");
+      await wait(10);
+      const abstractParent = el[0];
+      expect(abstractParent.className).toMatch(/active/);
+      const child = el[0].querySelector("a");
+      expect(child.className).toMatch(/active/);
+    });
+
+    it("should match on state parameters", async () => {
+      el = $compile(
+        "<div ui-sref-active=\"{active: ['admin.roles({page: 1})']}\"></div>",
+      )($rootScope);
+      $state.transitionTo("admin.roles", { page: 1 });
+      await wait(10);
+      expect(el[0].className).toMatch(/active/);
+    });
+
+    it("should support multiple <className, stateOrName> pairs", async () => {
+      el = $compile(
+        "<div ui-sref-active=\"{contacts: ['contacts.item', 'contacts.item.detail'], admin: 'admin.roles({page: 1})'}\"></div>",
+      )($rootScope);
+      $state.transitionTo("contacts.item.detail", { id: 1, foo: "bar" });
+      await wait(10);
+      expect(el[0].className).toMatch(/contacts/);
+      expect(el[0].className).not.toMatch(/admin/);
+      $state.transitionTo("admin.roles", { page: 1 });
+      await wait(10);
+      expect(el[0].className).toMatch(/admin/);
+      expect(el[0].className).not.toMatch(/contacts/);
+    });
+
+    it("should update the active classes when compiled", async () => {
+      $state.transitionTo("admin.roles");
+      await wait(10);
+      el = $compile(
+        "<div ui-sref-active=\"{active: ['admin.roles', 'admin.someOtherState']}\"/>",
+      )($rootScope);
+      $rootScope.$digest();
+      timeoutFlush();
+      expect(el.hasClass("active")).toBeTruthy();
+    });
+  });
+});