Skip to content

Commit fb04d07

Browse files
matskoThomasBurleson
matsko
authored and
ThomasBurleson
committed
test(all): make changes to use $animate.flush
update ngMaterial docs and tests to use AngularJS 1.4.6 simplify testing with unified, new API `$animate.flush()` add ngMaterial mock `flush()` methods to hide complexities on Material animations fix interimElement recover logic when templateURL loads fail > supports only AngularJS ^1.3.19 and ^1.4.6 Closes angular#4460.
1 parent b5dd150 commit fb04d07

18 files changed

Lines changed: 193 additions & 188 deletions

File tree

‎config/build.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ var fs = require('fs');
33
var versionFile = __dirname + '/../dist/commit';
44

55
module.exports = {
6-
ngVersion: '1.4.4',
6+
ngVersion: '1.4.6',
77
version: pkg.version,
88
repository: pkg.repository.url
99
.replace(/^git/,'https')

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
"url": "git://github.com/angular/material.git"
66
},
77
"devDependencies": {
8-
"angular": "1.4.4",
9-
"angular-animate": "1.4.4",
10-
"angular-aria": "1.4.4",
11-
"angular-messages": "1.4.4",
12-
"angular-mocks": "1.4.4",
13-
"angular-route": "1.4.4",
8+
"angular": "1.4.6",
9+
"angular-animate": "1.4.6",
10+
"angular-aria": "1.4.6",
11+
"angular-messages": "1.4.6",
12+
"angular-mocks": "1.4.6",
13+
"angular-route": "1.4.6",
1414
"angularytics": "^0.3.0",
1515
"canonical-path": "0.0.2",
1616
"cli-color": "^1.0.0",
@@ -64,4 +64,4 @@
6464
"merge-base": "git merge-base $(npm run -s current-branch) origin/master",
6565
"squash": "git rebase -i $(npm run -s merge-base)"
6666
}
67-
}
67+
}

‎src/components/autocomplete/autocomplete.spec.js‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,14 @@ describe('<md-autocomplete>', function () {
4444
// Using md-item-size would reduce this to a single flush, but given that
4545
// autocomplete allows for custom row templates, it's better to measure
4646
// rather than assuming a given size.
47-
inject(function ($$rAF) {
48-
$$rAF.flush();
49-
element.scope().$apply();
50-
$$rAF.flush();
47+
inject(function ($material, $timeout) {
48+
$material.flushOutstandingAnimations();
49+
$timeout.flush();
5150
});
5251
}
5352

5453
describe('basic functionality', function () {
55-
it('should update selected item and search text', inject(function ($timeout, $mdConstant) {
54+
it('should update selected item and search text', inject(function ($timeout, $mdConstant, $material) {
5655
var scope = createScope();
5756
var template = '\
5857
<md-autocomplete\
@@ -67,11 +66,12 @@ describe('<md-autocomplete>', function () {
6766
var ctrl = element.controller('mdAutocomplete');
6867
var ul = element.find('ul');
6968

69+
$material.flushInterimElement();
70+
7071
expect(scope.searchText).toBe('');
7172
expect(scope.selectedItem).toBe(null);
7273

7374
element.scope().searchText = 'fo';
74-
$timeout.flush();
7575
waitForVirtualRepeat(element);
7676

7777
expect(scope.searchText).toBe('fo');
@@ -160,7 +160,7 @@ describe('<md-autocomplete>', function () {
160160
});
161161

162162
describe('basic functionality with template', function () {
163-
it('should update selected item and search text', inject(function ($timeout, $mdConstant) {
163+
it('should update selected item and search text', inject(function ($timeout, $material, $mdConstant) {
164164
var scope = createScope();
165165
var template = '\
166166
<md-autocomplete\
@@ -180,8 +180,9 @@ describe('<md-autocomplete>', function () {
180180
expect(scope.searchText).toBe('');
181181
expect(scope.selectedItem).toBe(null);
182182

183+
$material.flushInterimElement();
184+
183185
element.scope().searchText = 'fo';
184-
$timeout.flush();
185186
waitForVirtualRepeat(element);
186187

187188
expect(scope.searchText).toBe('fo');
@@ -190,6 +191,7 @@ describe('<md-autocomplete>', function () {
190191

191192
ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.DOWN_ARROW));
192193
ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ENTER));
194+
193195
$timeout.flush();
194196

195197
expect(scope.searchText).toBe('foo');
@@ -198,7 +200,7 @@ describe('<md-autocomplete>', function () {
198200
element.remove();
199201
}));
200202

201-
it('should compile the template against the parent scope', inject(function ($timeout) {
203+
it('should compile the template against the parent scope', inject(function ($timeout, $material) {
202204
var scope = createScope(null, { bang: 'boom' });
203205
var template = '\
204206
<md-autocomplete\
@@ -217,6 +219,8 @@ describe('<md-autocomplete>', function () {
217219
var ctrl = element.controller('mdAutocomplete');
218220
var ul = element.find('ul');
219221

222+
$material.flushOutstandingAnimations();
223+
220224
expect(scope.bang).toBe('boom');
221225

222226
element.scope().searchText = 'fo';
@@ -242,7 +246,7 @@ describe('<md-autocomplete>', function () {
242246
});
243247

244248
describe('xss prevention', function () {
245-
it('should not allow html to slip through', inject(function($timeout) {
249+
it('should not allow html to slip through', inject(function($timeout, $material) {
246250
var html = 'foo <img src="img" onerror="alert(1)" />';
247251
var scope = createScope([ { display: html } ]);
248252
var template = '\
@@ -258,6 +262,8 @@ describe('<md-autocomplete>', function () {
258262
var element = compile(template, scope);
259263
var ul = element.find('ul');
260264

265+
$material.flushOutstandingAnimations();
266+
261267
expect(scope.searchText).toBe('');
262268
expect(scope.selectedItem).toBe(null);
263269

‎src/components/bottomSheet/bottom-sheet.spec.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@ describe('$mdBottomSheet service', function() {
22
beforeEach(module('material.components.bottomSheet'));
33

44
describe('#build()', function() {
5-
it('should close when `escapeToClose == true`', inject(function($mdBottomSheet, $rootScope, $rootElement, $timeout, $animate, $mdConstant) {
5+
it('should close when `escapeToClose == true`', inject(function($mdBottomSheet, $rootElement, $material, $mdConstant) {
66
var parent = angular.element('<div>');
77
$mdBottomSheet.show({
88
template: '<md-bottom-sheet>',
99
parent: parent,
1010
escapeToClose: true
1111
});
12-
$rootScope.$apply();
1312

14-
$animate.triggerCallbacks();
13+
$material.flushOutstandingAnimations();
1514

1615
expect(parent.find('md-bottom-sheet').length).toBe(1);
1716

@@ -20,7 +19,7 @@ describe('$mdBottomSheet service', function() {
2019
keyCode: $mdConstant.KEY_CODE.ESCAPE
2120
});
2221

23-
$timeout.flush();
22+
$material.flushInterimElement();
2423
expect(parent.find('md-bottom-sheet').length).toBe(0);
2524
}));
2625

@@ -33,16 +32,14 @@ describe('$mdBottomSheet service', function() {
3332
});
3433
$rootScope.$apply();
3534

36-
$animate.triggerCallbacks();
37-
3835
expect(parent.find('md-bottom-sheet').length).toBe(1);
3936

4037
$rootElement.triggerHandler({type: 'keyup', keyCode: $mdConstant.KEY_CODE.ESCAPE});
4138

4239
expect(parent.find('md-bottom-sheet').length).toBe(1);
4340
}));
4441

45-
it('should close when navigation fires `scope.$destroy()`', inject(function($mdBottomSheet, $rootScope, $rootElement, $timeout, $animate, $mdConstant) {
42+
it('should close when navigation fires `scope.$destroy()`', inject(function($mdBottomSheet, $rootScope, $rootElement, $timeout, $material, $mdConstant) {
4643
var parent = angular.element('<div>');
4744
$mdBottomSheet.show({
4845
template: '<md-bottom-sheet>',
@@ -51,11 +48,12 @@ describe('$mdBottomSheet service', function() {
5148
});
5249

5350
$rootScope.$apply();
54-
$animate.triggerCallbacks();
51+
$material.flushOutstandingAnimations();
5552

5653
expect(parent.find('md-bottom-sheet').length).toBe(1);
5754

5855
$rootScope.$destroy();
56+
$material.flushInterimElement();
5957
expect(parent.find('md-bottom-sheet').length).toBe(0);
6058
}));
6159

@@ -78,7 +76,6 @@ describe('$mdBottomSheet service', function() {
7876
escapeToClose: false
7977
});
8078
$rootScope.$apply();
81-
$animate.triggerCallbacks();
8279

8380
var sheet = parent.find('md-bottom-sheet');
8481
expect(sheet.length).toBe(1);

‎src/components/datepicker/calendar.spec.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ describe('md-calendar', function() {
55
var JAN = 0, FEB = 1, MAR = 2, APR = 3, MAY = 4, JUN = 5, JUL = 6, AUG = 7, SEP = 8, OCT = 9,
66
NOV = 10, DEC = 11;
77

8-
var ngElement, element, scope, pageScope, controller, $animate, $compile, $$rAF;
8+
var ngElement, element, scope, pageScope, controller, $material, $compile, $$rAF;
99
var $rootScope, dateLocale, $mdUtil, keyCodes, dateUtil;
1010

1111
// List of calendar elements added to the DOM so we can remove them after every test.
@@ -17,8 +17,7 @@ describe('md-calendar', function() {
1717
*/
1818
function applyDateChange() {
1919
pageScope.$apply();
20-
$animate.triggerCallbacks();
21-
$$rAF.flush();
20+
$material.flushOutstandingAnimations();
2221

2322
// Internally, the calendar sets scrollTop to scroll to the month for a change.
2423
// The handler for that scroll won't be invoked unless we manually trigger it.
@@ -139,7 +138,7 @@ describe('md-calendar', function() {
139138
}
140139
});
141140

142-
$animate = $injector.get('$animate');
141+
$material = $injector.get('$material');
143142
$compile = $injector.get('$compile');
144143
$rootScope = $injector.get('$rootScope');
145144
$$rAF = $injector.get('$$rAF');
@@ -474,7 +473,7 @@ describe('md-calendar', function() {
474473
controller.changeDisplayDate(laterDate);
475474
expect(controller.displayDate).toBeSameDayAs(earlierDate);
476475

477-
$animate.triggerCallbacks();
476+
$material.flushOutstandingAnimations();
478477
controller.changeDisplayDate(laterDate);
479478
expect(controller.displayDate).toBeSameDayAs(laterDate);
480479
});

‎src/components/dialog/dialog.spec.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,10 @@ describe('$mdDialog', function() {
1313
return $$q.when();
1414
});
1515
}));
16-
beforeEach(inject(function($rootScope, $timeout, $$rAF, $animate) {
17-
16+
beforeEach(inject(function($material) {
1817
runAnimation = function() {
19-
$timeout.flush(); // flush to start animations
20-
$$rAF.flush(); // flush animations
21-
$animate.triggerCallbacks();
22-
$timeout.flush(); // flush responses after animation completions
23-
}
18+
$material.flushInterimElement();
19+
};
2420
}));
2521

2622
describe('#alert()', function() {
@@ -144,15 +140,16 @@ describe('$mdDialog', function() {
144140
})
145141
);
146142

147-
runAnimation(parent.find('md-dialog'));
143+
runAnimation();
148144

149145
container = angular.element(parent[0].querySelector('.md-dialog-container'));
150146
container.triggerHandler({
151147
type: 'click',
152148
target: container[0]
153149
});
154150

155-
runAnimation(parent.find('md-dialog'));
151+
$timeout.flush();
152+
runAnimation();
156153

157154
container = angular.element(parent[0].querySelector('.md-dialog-container'));
158155
expect(container.length).toBe(0);
@@ -188,7 +185,7 @@ describe('$mdDialog', function() {
188185
'ok', 'cancel', 'targetEvent', 'theme'
189186
]);
190187

191-
it('shows a basic confirm dialog with simple text content', inject(function($rootScope, $mdDialog, $animate) {
188+
it('shows a basic confirm dialog with simple text content', inject(function($rootScope, $mdDialog, $animate, $timeout) {
192189
var parent = angular.element('<div>');
193190
var rejected = false;
194191
$mdDialog.show(
@@ -285,7 +282,7 @@ describe('$mdDialog', function() {
285282
expect($document.activeElement).toBe(parent[0].querySelector('.dialog-close'));
286283
}));
287284

288-
it('should remove `md-dialog-container` after click outside', inject(function($mdDialog, $rootScope, $timeout) {
285+
it('should remove `md-dialog-container` after click outside', inject(function($mdDialog, $rootScope, $timeout, $animate) {
289286
jasmine.mockElementFocus(this);
290287
var container, parent = angular.element('<div>');
291288

@@ -309,6 +306,8 @@ describe('$mdDialog', function() {
309306
type: 'click',
310307
target: container[0]
311308
});
309+
310+
runAnimation();
312311
runAnimation();
313312

314313
container = angular.element(parent[0].querySelector('.md-dialog-container'));
@@ -343,6 +342,7 @@ describe('$mdDialog', function() {
343342
keyCode: $mdConstant.KEY_CODE.ESCAPE
344343
});
345344
runAnimation();
345+
runAnimation();
346346

347347
container = angular.element(parent[0].querySelector('.md-dialog-container'));
348348
expect(container.length).toBe(0);
@@ -540,6 +540,7 @@ describe('$mdDialog', function() {
540540
target: container[0]
541541
});
542542
runAnimation();
543+
runAnimation();
543544

544545
expect(parent.find('md-dialog').length).toBe(0);
545546
}));

‎src/components/menu/menu.spec.js‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ describe('material.components.menu', function() {
151151
}
152152

153153
function testAttribute(attr) {
154-
return inject(function($rootScope, $compile) {
154+
return inject(function($rootScope, $compile, $timeout, $browser, $animate) {
155155
var template = '' +
156156
'<md-menu>' +
157157
' <button ng-click="$mdOpenMenu($event)">Hello World</button>' +
@@ -162,9 +162,12 @@ describe('material.components.menu', function() {
162162
' </md-menu-content>' +
163163
'</md-menu>';
164164

165+
165166
openMenu($compile(template)($rootScope));
167+
166168
expect(getOpenMenuContainer().length).toBe(1);
167169

170+
$timeout.flush();
168171
var btn = getOpenMenuContainer()[0].querySelector('md-button');
169172
btn.click();
170173

@@ -226,23 +229,14 @@ describe('material.components.menu', function() {
226229
}
227230

228231
function waitForMenuOpen() {
229-
inject(function($rootScope, $$rAF, $timeout) {
230-
$rootScope.$digest();
231-
232-
$$rAF.flush(); // flush $animate.enter(backdrop)
233-
$$rAF.flush(); // flush $animateCss
234-
$timeout.flush(); // flush response
235-
232+
inject(function($material) {
233+
$material.flushInterimElement();
236234
});
237235
}
238236

239237
function waitForMenuClose() {
240-
inject(function($rootScope, $$rAF, $timeout) {
241-
$rootScope.$digest();
242-
243-
$$rAF.flush(); // flush $animate.leave(backdrop)
244-
$$rAF.flush(); // flush $animateCss
245-
$timeout.flush(); // flush response
238+
inject(function($material) {
239+
$material.flushInterimElement();
246240
});
247241
}
248242

0 commit comments

Comments
 (0)