Skip to content

Commit 7d9cd15

Browse files
bsalexbsalex
committed
Fix for error in directive rendering if mixin is not applied
1 parent 305fa16 commit 7d9cd15

File tree

2 files changed

+95
-86
lines changed

2 files changed

+95
-86
lines changed

‎source/js/directives/loading-overlay.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@
1515
var ids = scope.loadingOverlay.split(","),
1616
result = false;
1717

18-
for(var i = 0; i < ids.length; i++) {
19-
if (scope.$parent.isLoadingOverlay(ids[i].trim() || undefined)) {
20-
result = true;
21-
break;
18+
if (scope.$parent.isLoadingOverlay !== undefined) {
19+
for(var i = 0; i < ids.length; i++) {
20+
if (scope.$parent.isLoadingOverlay(ids[i].trim() || undefined)) {
21+
result = true;
22+
break;
23+
}
2224
}
2325
}
2426

‎test/directives/loading-overlay.spec.js‎

Lines changed: 89 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -12,68 +12,31 @@ describe("Loading overlay directive", function () {
1212
LoadingOverlay = _LoadingOverlay_;
1313
}));
1414

15-
beforeEach(function () {
16-
LoadingOverlay.mixin($scope);
17-
});
18-
19-
it("should be applicable", function () {
15+
it("should not throw error if mixin is not applied to the scope", function () {
2016
$compile("<div loading-overlay></div>")($scope);
2117
$scope.$digest();
2218
});
2319

24-
it("should add a div inside a container", function () {
25-
var element = $compile("<div loading-overlay><div id='anotherDiv'></div></div>")($scope);
26-
$scope.$digest();
27-
28-
expect(element[0].querySelector(".loading-overlay")).not.toBeNull();
29-
expect(element[0].querySelector("#anotherDiv")).not.toBeNull();
30-
});
31-
32-
it("should hide the overlay by default", function () {
33-
var element = $compile("<div loading-overlay><div id='anotherDiv'></div></div>")($scope);
34-
35-
$scope.$digest();
36-
37-
var overlay = angular.element(element[0].querySelector(".loading-overlay"));
38-
39-
expect(overlay.hasClass("ng-hide")).toBeTruthy();
40-
});
41-
42-
it("should show the overlay", function () {
43-
var element = $compile("<div loading-overlay><div id='anotherDiv'></div></div>")($scope);
44-
45-
$scope.$digest();
46-
47-
$scope.$apply(function () {
48-
$scope.showLoadingOverlay();
20+
describe("when mixin is applied to scope", function() {
21+
beforeEach(function () {
22+
LoadingOverlay.mixin($scope);
4923
});
5024

51-
var overlay = angular.element(element[0].querySelector(".loading-overlay"));
52-
53-
expect(overlay.hasClass("ng-hide")).toBeFalsy();
54-
});
55-
56-
it("should hide the overlay after it has been showed", function () {
57-
var element = $compile("<div loading-overlay><div id='anotherDiv'></div></div>")($scope);
58-
59-
$scope.$digest();
60-
61-
$scope.$apply(function () {
62-
$scope.showLoadingOverlay();
63-
});
64-
65-
$scope.$apply(function () {
66-
$scope.hideLoadingOverlay();
25+
it("should be applicable", function () {
26+
$compile("<div loading-overlay></div>")($scope);
27+
$scope.$digest();
6728
});
6829

69-
var overlay = angular.element(element[0].querySelector(".loading-overlay"));
30+
it("should add a div inside a container", function () {
31+
var element = $compile("<div loading-overlay><div id='anotherDiv'></div></div>")($scope);
32+
$scope.$digest();
7033

71-
expect(overlay.hasClass("ng-hide")).toBeTruthy();
72-
});
34+
expect(element[0].querySelector(".loading-overlay")).not.toBeNull();
35+
expect(element[0].querySelector("#anotherDiv")).not.toBeNull();
36+
});
7337

74-
describe("With id attribute set", function () {
7538
it("should hide the overlay by default", function () {
76-
var element = $compile("<div loading-overlay=\"theId\"><div id='anotherDiv'></div></div>")($scope);
39+
var element = $compile("<div loading-overlay><div id='anotherDiv'></div></div>")($scope);
7740

7841
$scope.$digest();
7942

@@ -83,73 +46,117 @@ describe("Loading overlay directive", function () {
8346
});
8447

8548
it("should show the overlay", function () {
86-
var element = $compile("<div loading-overlay=\"theId\"><div id='anotherDiv'></div></div>")($scope);
49+
var element = $compile("<div loading-overlay><div id='anotherDiv'></div></div>")($scope);
8750

8851
$scope.$digest();
8952

9053
$scope.$apply(function () {
91-
$scope.showLoadingOverlay("theId");
54+
$scope.showLoadingOverlay();
9255
});
9356

9457
var overlay = angular.element(element[0].querySelector(".loading-overlay"));
9558

9659
expect(overlay.hasClass("ng-hide")).toBeFalsy();
9760
});
9861

99-
it("should be applicable with several ids", function () {
100-
$compile("<div loading-overlay=\"theId, anotherId\"><div id='anotherDiv'></div></div>")($scope);
62+
it("should hide the overlay after it has been showed", function () {
63+
var element = $compile("<div loading-overlay><div id='anotherDiv'></div></div>")($scope);
10164

10265
$scope.$digest();
103-
});
10466

105-
it("should show overlay if even one id is active", function () {
106-
var element = $compile("<div loading-overlay=\"theId, anotherId\"><div id='anotherDiv'></div></div>")($scope);
107-
108-
$scope.$digest();
67+
$scope.$apply(function () {
68+
$scope.showLoadingOverlay();
69+
});
10970

11071
$scope.$apply(function () {
111-
$scope.showLoadingOverlay("anotherId");
72+
$scope.hideLoadingOverlay();
11273
});
11374

11475
var overlay = angular.element(element[0].querySelector(".loading-overlay"));
11576

116-
expect(overlay.hasClass("ng-hide")).toBeFalsy();
77+
expect(overlay.hasClass("ng-hide")).toBeTruthy();
11778
});
11879

119-
it("should hide overlay if none of ids is active", function () {
120-
var element = $compile("<div loading-overlay=\"theId, anotherId\"><div id='anotherDiv'></div></div>")($scope);
80+
describe("With id attribute set", function () {
81+
it("should hide the overlay by default", function () {
82+
var element = $compile("<div loading-overlay=\"theId\"><div id='anotherDiv'></div></div>")($scope);
12183

122-
$scope.$digest();
84+
$scope.$digest();
12385

124-
$scope.$apply(function () {
125-
$scope.showLoadingOverlay("anotherId");
126-
$scope.showLoadingOverlay("theId");
86+
var overlay = angular.element(element[0].querySelector(".loading-overlay"));
12787

128-
$scope.hideLoadingOverlay("anotherId");
129-
$scope.hideLoadingOverlay("theId");
88+
expect(overlay.hasClass("ng-hide")).toBeTruthy();
13089
});
13190

132-
var overlay = angular.element(element[0].querySelector(".loading-overlay"));
91+
it("should show the overlay", function () {
92+
var element = $compile("<div loading-overlay=\"theId\"><div id='anotherDiv'></div></div>")($scope);
13393

134-
expect(overlay.hasClass("ng-hide")).toBeTruthy();
135-
});
94+
$scope.$digest();
13695

137-
it("should hide the overlay after it has been showed", function () {
138-
var element = $compile("<div loading-overlay=\"theId\"><div id='anotherDiv'></div></div>")($scope);
96+
$scope.$apply(function () {
97+
$scope.showLoadingOverlay("theId");
98+
});
13999

140-
$scope.$digest();
100+
var overlay = angular.element(element[0].querySelector(".loading-overlay"));
141101

142-
$scope.$apply(function () {
143-
$scope.showLoadingOverlay("theId");
102+
expect(overlay.hasClass("ng-hide")).toBeFalsy();
144103
});
145104

146-
$scope.$apply(function () {
147-
$scope.hideLoadingOverlay("theId");
105+
it("should be applicable with several ids", function () {
106+
$compile("<div loading-overlay=\"theId, anotherId\"><div id='anotherDiv'></div></div>")($scope);
107+
108+
$scope.$digest();
148109
});
149110

150-
var overlay = angular.element(element[0].querySelector(".loading-overlay"));
111+
it("should show overlay if even one id is active", function () {
112+
var element = $compile("<div loading-overlay=\"theId, anotherId\"><div id='anotherDiv'></div></div>")($scope);
151113

152-
expect(overlay.hasClass("ng-hide")).toBeTruthy();
114+
$scope.$digest();
115+
116+
$scope.$apply(function () {
117+
$scope.showLoadingOverlay("anotherId");
118+
});
119+
120+
var overlay = angular.element(element[0].querySelector(".loading-overlay"));
121+
122+
expect(overlay.hasClass("ng-hide")).toBeFalsy();
123+
});
124+
125+
it("should hide overlay if none of ids is active", function () {
126+
var element = $compile("<div loading-overlay=\"theId, anotherId\"><div id='anotherDiv'></div></div>")($scope);
127+
128+
$scope.$digest();
129+
130+
$scope.$apply(function () {
131+
$scope.showLoadingOverlay("anotherId");
132+
$scope.showLoadingOverlay("theId");
133+
134+
$scope.hideLoadingOverlay("anotherId");
135+
$scope.hideLoadingOverlay("theId");
136+
});
137+
138+
var overlay = angular.element(element[0].querySelector(".loading-overlay"));
139+
140+
expect(overlay.hasClass("ng-hide")).toBeTruthy();
141+
});
142+
143+
it("should hide the overlay after it has been showed", function () {
144+
var element = $compile("<div loading-overlay=\"theId\"><div id='anotherDiv'></div></div>")($scope);
145+
146+
$scope.$digest();
147+
148+
$scope.$apply(function () {
149+
$scope.showLoadingOverlay("theId");
150+
});
151+
152+
$scope.$apply(function () {
153+
$scope.hideLoadingOverlay("theId");
154+
});
155+
156+
var overlay = angular.element(element[0].querySelector(".loading-overlay"));
157+
158+
expect(overlay.hasClass("ng-hide")).toBeTruthy();
159+
});
153160
});
154161
});
155162
});

0 commit comments

Comments
 (0)