Skip to content

Commit 4702309

Browse files
tolyotolyo
committed
Additional tests
1 parent 006c99c commit 4702309

File tree

5 files changed

+714
-807
lines changed

5 files changed

+714
-807
lines changed

‎src/router/directives/state-directives.spec.js‎

Lines changed: 89 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,20 @@ describe("ngStateRef", () => {
105105
el2 = app.querySelectorAll("a")[1];
106106
}
107107

108+
async function buildHtml5DOM() {
109+
window.history.replaceState(null, "", "/");
110+
app.innerHTML =
111+
'<a ng-sref="contacts.item.detail({ id: contact.id })">Details</a>' +
112+
'<a ng-sref="top">Top</a>';
113+
scope = $rootScope;
114+
scope.contact = { id: 5 };
115+
await wait();
116+
$compile(app)(scope);
117+
await wait();
118+
el = app.querySelectorAll("a")[0];
119+
el2 = app.querySelectorAll("a")[1];
120+
}
121+
108122
describe("links", () => {
109123
beforeEach(async () => {
110124
await buildDOM();
@@ -261,37 +275,81 @@ describe("ngStateRef", () => {
261275
});
262276
});
263277

264-
// TODO: Since this is HTML5 mode, we would want to test this with actual backend
265-
// describe('links in html5 mode', () => {
266-
// beforeEach(() => {
267-
// _locationProvider.html5Mode(true);
268-
// });
269-
270-
// beforeEach(inject(buildDOM));
271-
272-
// it('should generate the correct href', () => {
273-
// expect(el.getAttribute('href')).toBe('/contacts/5');
274-
// expect(el2.getAttribute('href')).toBe('');
275-
// });
276-
277-
// it('should update the href when parameters change', () => {
278-
// expect(el.getAttribute('href')).toBe('/contacts/5');
279-
// scope.contact.id = 6;
280-
// expect(el.getAttribute('href')).toBe('/contacts/6');
281-
// });
282-
283-
// it('should transition states when the url is empty', async () => {
284-
// // Odd, in html5Mode, the initial state isn't matching on empty url, but does match if top.url is "/".
285-
// // expect($state.$current.name).toEqual('top');
286-
287-
// triggerClick(el2);
288-
// timeoutFlush();
289-
// await wait(100);
290-
291-
// expect($state.current.name).toEqual('top');
292-
// expect(obj($stateParams)).toEqual({});
293-
// });
294-
// });
278+
describe("links in html5 mode", () => {
279+
let originalUrl;
280+
281+
beforeEach(async () => {
282+
originalUrl =
283+
window.location.pathname +
284+
window.location.search +
285+
window.location.hash;
286+
dealoc(document.getElementById("app"));
287+
app.innerHTML = "";
288+
window.history.replaceState(null, "", "/");
289+
window.angular = new Angular();
290+
const module = window.angular
291+
.module("html5Module", [])
292+
.decorator("$exceptionHandler", function () {
293+
return (exception) => {
294+
errorLog.push(exception.message);
295+
};
296+
});
297+
module.config(($stateProvider, $locationProvider) => {
298+
_locationProvider = $locationProvider;
299+
$locationProvider.html5ModeConf.enabled = true;
300+
$locationProvider.html5ModeConf.requireBase = false;
301+
$locationProvider.hashPrefixConf = "";
302+
$stateProvider
303+
.state({ name: "top", url: "" })
304+
.state({ name: "other", url: "/other/:id", template: "other" })
305+
.state({ name: "other.detail", url: "/detail", template: "detail" })
306+
.state({
307+
name: "contacts",
308+
url: "/contacts",
309+
template:
310+
'<a ng-sref=".item({ id: 5 })" class="item">Person</a> <ng-view></ng-view>',
311+
})
312+
.state({
313+
name: "contacts.item",
314+
url: "/{id:int}",
315+
template:
316+
'<a ng-sref=".detail" class="item-detail">Detail</a> | <a ng-sref="^" class="item-parent">Parent</a> | <ng-view></ng-view>',
317+
})
318+
.state({
319+
name: "contacts.item.detail",
320+
template:
321+
'<div class="title">Detail</div> | <a ng-sref="^" class="item-parent2">Item</a>',
322+
});
323+
});
324+
325+
$injector = window.angular.bootstrap(document.getElementById("app"), [
326+
"html5Module",
327+
]);
328+
$rootScope = $injector.get("$rootScope");
329+
$compile = $injector.get("$compile");
330+
$state = $injector.get("$state");
331+
$stateParams = $injector.get("$router").params;
332+
$url = $injector.get("$url");
333+
$url.listen();
334+
await buildHtml5DOM();
335+
});
336+
337+
afterEach(() => {
338+
window.history.replaceState(null, "", originalUrl);
339+
});
340+
341+
it("should generate the correct href", () => {
342+
expect(el.getAttribute("href")).toBe("/contacts/5");
343+
expect(el2.getAttribute("href")).toBe("");
344+
});
345+
346+
it("should update the href when parameters change", async () => {
347+
expect(el.getAttribute("href")).toBe("/contacts/5");
348+
scope.contact.id = 6;
349+
await wait();
350+
expect(el.getAttribute("href")).toBe("/contacts/6");
351+
});
352+
});
295353

296354
describe("links with dynamic state definitions", () => {
297355
let template;

‎src/router/directives/view-directive.spec.js‎

Lines changed: 64 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { createElementFromHTML, dealoc } from "../../shared/dom.ts";
1+
import {
2+
createElementFromHTML,
3+
dealoc,
4+
getCacheData,
5+
} from "../../shared/dom.ts";
26
import { Angular } from "../../angular.ts";
37
import { wait } from "../../shared/test-utils.ts";
48

@@ -366,6 +370,65 @@ describe("ngView", () => {
366370
expect(elem.textContent).toBe("mState");
367371
});
368372

373+
it("should do transition animations", async () => {
374+
elem.innerHTML = "<div><ng-view></ng-view></div>";
375+
$compile(elem)(scope);
376+
377+
await $state.transitionTo("n");
378+
await wait(100);
379+
expect(elem.querySelector("ng-view").textContent).toBe(nState.template);
380+
381+
await $state.transitionTo("a");
382+
await wait(100);
383+
expect(elem.querySelector("ng-view").textContent).toBe(aState.template);
384+
expect(log).toContain("animEnter;");
385+
expect(log).toContain("animLeave;");
386+
});
387+
388+
it("should expose real ngView animation promises to controllers", async () => {
389+
elem.innerHTML = "<div><ng-view></ng-view></div>";
390+
$compile(elem)(scope);
391+
392+
await $state.transitionTo("n");
393+
await wait(100);
394+
expect(log).toContain("animEnter;");
395+
396+
await $state.transitionTo("a");
397+
await wait(100);
398+
expect(log).toContain("destroy;");
399+
expect(log).toContain("animLeave;");
400+
});
401+
402+
it("should do ngClass animations", async () => {
403+
scope.classOn = false;
404+
elem.innerHTML =
405+
'<div><ng-view ng-class="{ yay: classOn }">Initial Content</ng-view></div>';
406+
$compile(elem)(scope);
407+
408+
scope.classOn = true;
409+
await wait(100);
410+
expect(elem.querySelector("ng-view").classList.contains("yay")).toBeTrue();
411+
412+
scope.classOn = false;
413+
await wait(100);
414+
expect(elem.querySelector("ng-view").classList.contains("yay")).toBeFalse();
415+
});
416+
417+
it("should do ngIf animations", async () => {
418+
scope.shouldShow = false;
419+
elem.innerHTML =
420+
'<div><ng-view ng-if="shouldShow">Initial Content</ng-view></div>';
421+
$compile(elem)(scope);
422+
423+
scope.shouldShow = true;
424+
await wait(100);
425+
expect(elem.querySelector("ng-view").textContent).toBe("Initial Content");
426+
427+
scope.shouldShow = false;
428+
await wait(100);
429+
expect(elem.querySelector("ng-view")).toBeNull();
430+
});
431+
369432
describe("(resolved data)", () => {
370433
let _scope;
371434
function controller($scope) {
@@ -642,160 +705,6 @@ describe("ngView", () => {
642705
});
643706
});
644707
});
645-
646-
// describe("AngularTS Animations", () => {
647-
// it("should do transition animations", async () => {
648-
// let content = "Initial Content",
649-
// animation;
650-
// elem.append(
651-
// $compile("<div><ng-view>" + content + "</ng-view></div>")(scope),
652-
// );
653-
654-
// // Enter Animation
655-
// animation = $animate.queue.shift();
656-
// expect(animation.event).toBe("enter");
657-
// expect(animation.element.textContent + "-1").toBe(content + "-1");
658-
659-
// $state.transitionTo(aState);
660-
// await wait(100);
661-
662-
// // Enter Animation
663-
// animation = $animate.queue.shift();
664-
// expect(animation.event).toBe("enter");
665-
// expect(animation.element.textContent + "-2").toBe(aState.template + "-2");
666-
// // Leave Animation
667-
// animation = $animate.queue.shift();
668-
// expect(animation.event).toBe("leave");
669-
// expect(animation.element.textContent + "-3").toBe(content + "-3");
670-
671-
// $state.transitionTo(bState);
672-
// await wait(100);
673-
674-
// // Enter Animation
675-
// animation = $animate.queue.shift();
676-
// expect(animation.event).toBe("enter");
677-
// expect(animation.element.textContent + "-4").toBe(bState.template + "-4");
678-
// // Leave Animation
679-
// animation = $animate.queue.shift();
680-
// expect(animation.event).toBe("leave");
681-
// expect(animation.element.textContent + "-5").toBe(aState.template + "-5");
682-
683-
// // No more animations
684-
// expect($animate.queue.length).toBe(0);
685-
// });
686-
687-
// it("should do ngClass animations", async () => {
688-
// scope.classOn = false;
689-
// let content = "Initial Content",
690-
// className = "yay",
691-
// animation;
692-
// elem.append(
693-
// $compile(
694-
// "<div><ng-view ng-class=\"{'" +
695-
// className +
696-
// "': classOn}\">" +
697-
// content +
698-
// "</ng-view></div>",
699-
// )(scope),
700-
// );
701-
// // Don't care about enter class
702-
// $animate.queue.shift();
703-
704-
// scope.classOn = true;
705-
// ;
706-
707-
// animation = $animate.queue.shift();
708-
// expect(animation.event).toBe("addClass");
709-
// expect(animation.element.textContent).toBe(content);
710-
711-
// scope.classOn = false;
712-
// ;
713-
714-
// animation = $animate.queue.shift();
715-
// expect(animation.event).toBe("removeClass");
716-
// expect(animation.element.textContent).toBe(content);
717-
718-
// // No more animations
719-
// expect($animate.queue.length).toBe(0);
720-
// });
721-
722-
// it("should do ngIf animations", async () => {
723-
// scope.shouldShow = false;
724-
// let content = "Initial Content",
725-
// animation;
726-
// elem.append(
727-
// $compile(
728-
// '<div><ng-view ng-if="shouldShow">' + content + "</ng-view></div>",
729-
// )(scope),
730-
// );
731-
732-
// // No animations yet
733-
// expect($animate.queue.length).toBe(0);
734-
735-
// scope.shouldShow = true;
736-
// ;
737-
738-
// // ViewDirective enter animation - Basically it's just the <!-- ngView --> comment
739-
// animation = $animate.queue.shift();
740-
// expect(animation.event).toBe("enter");
741-
// expect(animation.element.textContent).toBe("");
742-
743-
// // ViewDirectiveFill enter animation - The second ngView directive that files in the content
744-
// animation = $animate.queue.shift();
745-
// expect(animation.event).toBe("enter");
746-
// expect(animation.element.textContent).toBe(content);
747-
748-
// scope.shouldShow = false;
749-
// ;
750-
751-
// // ngView leave animation
752-
// animation = $animate.queue.shift();
753-
// expect(animation.event).toBe("leave");
754-
// expect(animation.element.textContent).toBe(content);
755-
756-
// // No more animations
757-
// expect($animate.queue.length).toBe(0);
758-
// });
759-
760-
// it("should expose animation promises to controllers", async () => {
761-
// $transitions.onStart({}, function ($transition$) {
762-
// log += "start:" + $transition$.to().name + ";";
763-
// });
764-
// $transitions.onFinish({}, function ($transition$) {
765-
// log += "finish:" + $transition$.to().name + ";";
766-
// });
767-
// $transitions.onSuccess({}, function ($transition$) {
768-
// log += "success:" + $transition$.to().name + ";";
769-
// });
770-
771-
// const content = "Initial Content";
772-
// elem.append(
773-
// $compile("<div><ng-view>" + content + "</ng-view></div>")(scope),
774-
// );
775-
// $state.transitionTo("n");
776-
// await wait(100);
777-
778-
// expect($state.current.name).toBe("n");
779-
// expect(log).toBe("start:n;finish:n;success:n;");
780-
781-
// // animateFlush($animate);
782-
// await wait(100);
783-
// expect(log).toBe("start:n;finish:n;success:n;animEnter;");
784-
785-
// $state.transitionTo("a");
786-
// await wait(100);
787-
// expect($state.current.name).toBe("a");
788-
// expect(log).toBe(
789-
// "start:n;finish:n;success:n;animEnter;start:a;finish:a;destroy;success:a;",
790-
// );
791-
792-
// // animateFlush($animate);
793-
// await wait(100);
794-
// expect(log).toBe(
795-
// "start:n;finish:n;success:n;animEnter;start:a;finish:a;destroy;success:a;animLeave;",
796-
// );
797-
// });
798-
// });
799708
});
800709

801710
describe("ngView named", () => {

0 commit comments

Comments
 (0)