Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-17 23:40:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore(scenario tests): make scenario tests pass again

Browse source
This commit is contained in:
Misko Hevery 2011-11-08 17:40:52 -08:00
parent 085e3c611f
commit 9c06394376
19 changed files with 156 additions and 225 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
docs/content/cookbook/advancedform.ngdoc
View file

@ -34,7 +34,28 @@ detection, and preventing invalid form submission.
save: function() {
this.master = this.form;
this.cancel();
},
addContact: function() {
this.form.contacts.push({type:'', value:''});
},
removeContact: function(contact) {
for ( var i = 0, ii = this.form.contacts.length; i < ii; i++) {
if (contact === this.form.contacts[i]) {
this.form.contacts.splice(i, 1);
}
}
},
isCancelDisabled: function() {
return angular.equals(this.master, this.form);
},
isSaveDisabled: function() {
return this.myForm.$invalid || angular.equals(this.master, this.form);
}
};
</script>
<div ng:controller="UserForm">
@ -53,7 +74,7 @@ detection, and preventing invalid form submission.
ng:pattern="zip" required/><br/><br/>
<label>Contacts:</label>
[ <a href="" ng:click="form.contacts.$add()">add</a> ]
[ <a href="" ng:click="addContact()">add</a> ]
<div ng:repeat="contact in form.contacts">
<select ng:model="contact.type">
<option>email</option>
@ -62,10 +83,10 @@ detection, and preventing invalid form submission.
<option>IM</option>
</select>
<input type="text" ng:model="contact.value" required/>
[ <a href="" ng:click="form.contacts.$remove(contact)">X</a> ]
[ <a href="" ng:click="removeContact(contact)">X</a> ]
</div>
<button ng:click="cancel()" ng:disabled="{{master.$equals(form)}}">Cancel</button>
<button ng:click="save()" ng:disabled="{{myForm.$invalid || master.$equals(form)}}">Save</button>
<button ng:click="cancel()" ng:disabled="{{isCancelDisabled()}}">Cancel</button>
<button ng:click="save()" ng:disabled="{{isSaveDisabled()}}">Save</button>
</form>
<hr/>

16
docs/content/cookbook/form.ngdoc
View file

@ -18,6 +18,18 @@ allow a user to enter data.
};
this.state = /^\w\w$/;
this.zip = /^\d\d\d\d\d$/;
this.addContact = function() {
this.user.contacts.push({type:'', value:''});
};
this.removeContact = function(contact) {
for ( var i = 0, ii = this.user.contacts.length; i < ii; i++) {
if (contact === this.user.contacts[i]) {
this.user.contacts.splice(i, 1);
}
}
};
}
</script>
<div ng:controller="FormController" class="example">
@ -34,7 +46,7 @@ allow a user to enter data.
ng:pattern="zip" required><br/><br/>
<label>Phone:</label>
[ <a href="" ng:click="user.contacts.$add()">add</a> ]
[ <a href="" ng:click="addContact()">add</a> ]
<div ng:repeat="contact in user.contacts">
<select ng:model="contact.type">
<option>email</option>
@ -43,7 +55,7 @@ allow a user to enter data.
<option>IM</option>
</select>
<input type="text" ng:model="contact.value" required/>
[ <a href="" ng:click="user.contacts.$remove(contact)">X</a> ]
[ <a href="" ng:click="removeContact(contact)">X</a> ]
</div>
<hr/>
Debug View:

17
docs/content/guide/dev_guide.expressions.ngdoc
View file

@ -54,15 +54,26 @@ You can try evaluating different expressions here:
function Cntl2() {
this.exprs = [];
this.expr = '3*10|currency';
this.addExp = function(expr) {
this.exprs.push(expr);
};
this.removeExp = function(contact) {
for ( var i = 0, ii = this.exprs.length; i < ii; i++) {
if (contact === this.exprs[i]) {
this.exprs.splice(i, 1);
}
}
};
}
</script>
<div ng:controller="Cntl2" class="expressions">
Expression:
<input type='text' ng:model="expr" size="80"/>
<button ng:click="exprs.$add(expr)">Evaluate</button>
<button ng:click="addExp(expr)">Evaluate</button>
<ul>
<li ng:repeat="expr in exprs">
[ <a href="" ng:click="exprs.$remove(expr)">X</a> ]
[ <a href="" ng:click="removeExp(expr)">X</a> ]
<tt>{{expr}}</tt> => <span ng:bind="$parent.$eval(expr)"></span>
</li>
</ul>
@ -175,7 +186,7 @@ Extensions: You can further extend the expression vocabulary by adding new metho
Search: <input ng:model="searchText"/>
<table class="example3">
<tr><th>Name</th><th>Phone</th><tr>
<tr ng:repeat="friend in friends.$filter(searchText)">
<tr ng:repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>

26
docs/content/guide/dev_guide.forms.ngdoc
View file

@ -134,7 +134,16 @@ The following example demonstrates:
save: function() {
this.master = this.form;
this.cancel();
},
isCancelDisabled: function() {
return angular.equals(this.master, this.form);
},
isSaveDisabled: function() {
return this.userForm.$invalid || angular.equals(this.master, this.form);
}
};
</script>
<div ng:controller="UserFormCntl">
@ -172,10 +181,9 @@ The following example demonstrates:
</ng:form>
<button ng:click="cancel()"
ng:disabled="{{master.$equals(form)}}">Cancel</button>
ng:disabled="{{isCancelDisabled()}}">Cancel</button>
<button ng:click="save()"
ng:disabled="{{userForm.$invalid || master.$equals(form)}}">
Save</button>
ng:disabled="{{isSaveDisabled()}}">Save</button>
</form>
<hr/>
@ -278,9 +286,9 @@ This example shows how to implement a custom HTML editor widget in Angular.
this.htmlContent = '<b>Hello</b> <i>World</i>!';
}
function HTMLEditorWidget(element) {
HTMLEditorWidget.$inject = ['$element', 'html$Filter'];
function HTMLEditorWidget(element, htmlFilter) {
var self = this;
var htmlFilter = angular.filter('html');
this.$parseModel = function() {
// need to protect for script injection
@ -309,7 +317,7 @@ This example shows how to implement a custom HTML editor widget in Angular.
}
angular.directive('ng:html-editor-model', function() {
function linkFn($formFactory, element) {
return ['$formFactory', '$element', function ($formFactory, element) {
var exp = element.attr('ng:html-editor-model'),
form = $formFactory.forElement(element),
widget;
@ -318,15 +326,13 @@ This example shows how to implement a custom HTML editor widget in Angular.
scope: this,
model: exp,
controller: HTMLEditorWidget,
controllerArgs: [element]});
controllerArgs: {$element: element}});
// if the element is destroyed, then we need to
// notify the form.
element.bind('$destroy', function() {
widget.$destroy();
});
}
linkFn.$inject = ['$formFactory'];
return linkFn;
}];
});
</script>
<form name='editorForm' ng:controller="EditorCntl">

24
docs/content/guide/dev_guide.services.injecting_controllers.ngdoc
View file

@ -31,16 +31,18 @@ myController.$inject = ['$location', '$log'];
<doc:example>
<doc:source>
<script type="text/javascript">
angular.service('notify', function(win) {
var msgs = [];
return function(msg) {
msgs.push(msg);
if (msgs.length == 3) {
win.alert(msgs.join("\n"));
msgs = [];
}
};
}, {$inject: ['$window']});
angular.module.MyServiceModule = ['$provide', function($provide){
$provide.factory('notify', ['$window', function(win) {
var msgs = [];
return function(msg) {
msgs.push(msg);
if (msgs.length == 3) {
win.alert(msgs.join("\n"));
msgs = [];
}
};
}]);
}];
function myController(notifyService) {
this.callNotify = function(msg) {
@ -51,7 +53,7 @@ function myController(notifyService) {
myController.$inject = ['notify'];
</script>
<div ng:controller="myController">
<div ng:controller="myController" ng:module="MyServiceModule">
<p>Let's try this simple notify service, injected into the controller...</p>
<input ng:init="message='test'" type="text" ng:model="message" />
<button ng:click="callNotify(message);">NOTIFY</button>

32
docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc
View file

@ -19,28 +19,32 @@ text upper-case and assigns color.
<doc:example>
<doc:source>
<script type="text/javascript">
angular.filter('reverse', function(input, uppercase, color) {
var out = "";
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
angular.module.MyReverseModule = function MyModule($provide) {
$provide.filter('reverse', function() {
return function(input, uppercase, color) {
var out = "";
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
// conditional based on optional argument
if (uppercase) {
out = out.toUpperCase();
}
// DOM manipulation using $element
if (color) {
this.$element.css('color', color);
}
return out;
}
// conditional based on optional argument
if (uppercase) {
out = out.toUpperCase();
}
// DOM manipulation using $element
if (color) {
this.$element.css('color', color);
}
return out;
});
}
function Ctrl() {
this.greeting = 'hello';
}
</script>
<div ng:controller="Ctrl">
<div ng:controller="Ctrl" ng:module="MyReverseModule">
<input ng:model="greeting" type="greeting"><br>
No filter: {{greeting}}<br>
Reverse: {{greeting|reverse}}<br>

8
docs/src/templates/docs.css
View file

@ -474,3 +474,11 @@ td.empty-corner-lt {
.error {
color: red;
}
.odd {
background-color: #808080;
}
.even {
background-color: #d3d3d3;
}

4
example/personalLog/personalLog.html
View file

@ -20,11 +20,11 @@
<hr/>
<h2>Logs:</h2>
<ul>
<li ng:repeat="log in logs.$orderBy('-at')">
<li ng:repeat="log in logs | orderBy:'-at'">
{{log.at | date:'yy-MM-dd HH:mm'}} {{log.msg}}
[<a href="" ng:click="rmLog(log)">x</a>]
</li>
</ul>
</body>
</html>
</html>

132
src/Angular.js
View file

@ -498,10 +498,6 @@ function map(obj, iterator, context) {
/**
* @ngdoc function
* @name angular.Object.size
* @function
*
* @description
* Determines the number of elements in an array, the number of properties an object has, or
* the length of a string.
@ -512,29 +508,6 @@ function map(obj, iterator, context) {
* @param {Object|Array|string} obj Object, array, or string to inspect.
* @param {boolean} [ownPropsOnly=false] Count only "own" properties in an object
* @returns {number} The size of `obj` or `0` if `obj` is neither an object nor an array.
*
* @example
* <doc:example>
* <doc:source>
* <script>
* function SizeCtrl() {
* this.fooStringLength = angular.Object.size('foo');
* }
* </script>
* <div ng:controller="SizeCtrl">
* Number of items in array: {{ [1,2].$size() }}<br/>
* Number of items in object: {{ {a:1, b:2, c:3}.$size() }}<br/>
* String length: {{fooStringLength}}
* </div>
* </doc:source>
* <doc:scenario>
* it('should print correct sizes for an array and an object', function() {
* expect(binding('[1,2].$size()')).toBe('2');
* expect(binding('{a:1, b:2, c:3}.$size()')).toBe('3');
* expect(binding('fooStringLength')).toBe('3');
* });
* </doc:scenario>
* </doc:example>
*/
function size(obj, ownPropsOnly) {
var size = 0, key;
@ -566,11 +539,11 @@ function indexOf(array, obj) {
}
function arrayRemove(array, value) {
var index = indexOf(array, value);
if (index >=0)
array.splice(index, 1);
return value;
}
var index = indexOf(array, value);
if (index >=0)
array.splice(index, 1);
return value;
}
function isLeafNode (node) {
if (node) {
@ -590,15 +563,6 @@ function isLeafNode (node) {
* @function
*
* @description
* Alias for {@link angular.Object.copy}
*/
/**
* @ngdoc function
* @name angular.Object.copy
* @function
*
* @description
* Creates a deep copy of `source`, which should be an object or an array.
*
* * If no destination is supplied, a copy of the object or array is created.
@ -614,46 +578,6 @@ function isLeafNode (node) {
* @param {(Object|Array)=} destination Destination into which the source is copied. If
* provided, must be of the same type as `source`.
* @returns {*} The copy or updated `destination`, if `destination` was specified.
*
* @example
* <doc:example>
* <doc:source>
<script>
function Ctrl() {
this.master = {
salutation: 'Hello',
name: 'world'
};
this.copy = function() {
this.form = angular.copy(this.master);
}
}
</script>
<div ng:controller="Ctrl">
Salutation: <input type="text" ng:model="master.salutation" ><br/>
Name: <input type="text" ng:model="master.name"><br/>
<button ng:click="copy()">copy</button>
<hr/>
The master object is <span ng:hide="master.$equals(form)">NOT</span> equal to the form object.
<pre>master={{master}}</pre>
<pre>form={{form}}</pre>
</div>
* </doc:source>
* <doc:scenario>
it('should print that initialy the form object is NOT equal to master', function() {
expect(element('.doc-example-live input[ng\\:model="master.salutation"]').val()).toBe('Hello');
expect(element('.doc-example-live input[ng\\:model="master.name"]').val()).toBe('world');
expect(element('.doc-example-live span').css('display')).toBe('inline');
});
it('should make form and master equal when the copy button is clicked', function() {
element('.doc-example-live button').click();
expect(element('.doc-example-live span').css('display')).toBe('none');
});
* </doc:scenario>
* </doc:example>
*/
function copy(source, destination){
if (!destination) {
@ -693,15 +617,6 @@ function copy(source, destination){
* @function
*
* @description
* Alias for {@link angular.Object.equals}
*/
/**
* @ngdoc function
* @name angular.Object.equals
* @function
*
* @description
* Determines if two objects or two values are equivalent. Supports value types, arrays and
* objects.
*
@ -720,43 +635,6 @@ function copy(source, destination){
* @param {*} o2 Object or value to compare.
* @returns {boolean} True if arguments are equal.
*
* @example
* <doc:example>
* <doc:source>
<script>
function Ctrl() {
this.master = {
salutation: 'Hello',
name: 'world'
};
this.greeting = angular.copy(this.master);
}
</script>
<div ng:controller="Ctrl">
Salutation: <input type="text" ng:model="greeting.salutation"><br/>
Name: <input type="text" ng:model="greeting.name"><br/>
<hr/>
The <code>greeting</code> object is
<span ng:hide="greeting.$equals(master)">NOT</span> equal to
<code>{salutation:'Hello', name:'world'}</code>.
<pre>greeting={{greeting}}</pre>
</div>
* </doc:source>
* <doc:scenario>
it('should print that initialy greeting is equal to the hardcoded value object', function() {
expect(element('.doc-example-live input[ng\\:model="greeting.salutation"]').val()).toBe('Hello');
expect(element('.doc-example-live input[ng\\:model="greeting.name"]').val()).toBe('world');
expect(element('.doc-example-live span').css('display')).toBe('none');
});
it('should say that the objects are not equal when the form is modified', function() {
input('greeting.name').enter('kitty');
expect(element('.doc-example-live span').css('display')).toBe('inline');
});
* </doc:scenario>
* </doc:example>
*/
function equals(o1, o2) {
if (o1 === o2) return true;

4
src/angular-mocks.js vendored
View file

@ -344,7 +344,9 @@ angular.mock.$Browser.prototype = {
}
},
addJs: function() {}
notifyWhenNoOutstandingRequests: function(fn) {
fn();
}
};

2
src/scenario/Application.js
View file

@ -90,7 +90,7 @@ angular.scenario.Application.prototype.executeAction = function(action) {
if (!$window.angular) {
return action.call(this, $window, _jQuery($window.document));
}
var element = $window.angular.element($window.document.body);
var element = $window.angular.element($window.document);
var $injector = element.inheritedData('$injector');
$injector(function($browser){
$browser.notifyWhenNoOutstandingRequests(function() {

6
src/service/filter/filter.js
View file

@ -2,7 +2,7 @@
/**
* @ngdoc function
* @name angular.Array.filter
* @name angular.service.filter.filter
* @function
*
* @description
@ -44,7 +44,7 @@
Search: <input ng:model="searchText"/>
<table id="searchTextResults">
<tr><th>Name</th><th>Phone</th><tr>
<tr ng:repeat="friend in friends.$filter(searchText)">
<tr ng:repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<tr>
@ -55,7 +55,7 @@
Phone only <input ng:model="search.phone"/><br>
<table id="searchObjResults">
<tr><th>Name</th><th>Phone</th><tr>
<tr ng:repeat="friend in friends.$filter(search)">
<tr ng:repeat="friend in friends | filter:search">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<tr>

4
src/service/filter/filters.js
View file

@ -40,8 +40,6 @@
* @param {string=} symbol Currency symbol or identifier to be displayed.
* @returns {string} Formatted number.
*
* @css ng-format-negative
* When the value is negative, this css class is applied to the binding making it (by default) red.
*
* @example
<doc:example>
@ -66,8 +64,6 @@
input('amount').enter('-1234');
expect(binding('amount | currency')).toBe('($1,234.00)');
expect(binding('amount | currency:"USD$"')).toBe('(USD$1,234.00)');
expect(element('.doc-example-live .ng-binding').prop('className')).
toMatch(/ng-format-negative/);
});
</doc:scenario>
</doc:example>

10
src/service/filter/limitTo.js
View file

@ -2,7 +2,7 @@
/**
* @ngdoc function
* @name angular.Array.limitTo
* @name angular.service.filter.limitTo
* @function
*
* @description
@ -32,23 +32,23 @@
</script>
<div ng:controller="Ctrl">
Limit {{numbers}} to: <input type="integer" ng:model="limit"/>
<p>Output: {{ numbers.$limitTo(limit) | json }}</p>
<p>Output: {{ numbers | limitTo:limit | json }}</p>
</div>
</doc:source>
<doc:scenario>
it('should limit the numer array to first three items', function() {
expect(element('.doc-example-live input[ng\\:model=limit]').val()).toBe('3');
expect(binding('numbers.$limitTo(limit) | json')).toEqual('[1,2,3]');
expect(binding('numbers | limitTo:limit | json')).toEqual('[1,2,3]');
});
it('should update the output when -3 is entered', function() {
input('limit').enter(-3);
expect(binding('numbers.$limitTo(limit) | json')).toEqual('[7,8,9]');
expect(binding('numbers | limitTo:limit | json')).toEqual('[7,8,9]');
});
it('should not exceed the maximum size of input array', function() {
input('limit').enter(100);
expect(binding('numbers.$limitTo(limit) | json')).toEqual('[1,2,3,4,5,6,7,8,9]');
expect(binding('numbers | limitTo:limit | json')).toEqual('[1,2,3,4,5,6,7,8,9]');
});
</doc:scenario>
</doc:example>

2
src/service/filter/orderBy.js
View file

@ -53,7 +53,7 @@
<th><a href="" ng:click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th>
<th><a href="" ng:click="predicate = 'age'; reverse=!reverse">Age</a></th>
<tr>
<tr ng:repeat="friend in friends.$orderBy(predicate, reverse)">
<tr ng:repeat="friend in friends | orderBy:predicate:reverse">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>

12
src/service/formFactory.js
View file

@ -29,9 +29,9 @@
this.html = '<b>Hello</b> <i>World</i>!';
}
function HTMLEditorWidget(element) {
HTMLEditorWidget.$inject = ['$element', 'html$Filter'];
function HTMLEditorWidget(element, htmlFilter) {
var self = this;
var htmlFilter = angular.filter('html');
this.$parseModel = function() {
// need to protect for script injection
@ -59,7 +59,7 @@
}
angular.directive('ng:contenteditable', function() {
function linkFn($formFactory, element) {
return ['$formFactory', '$element', function ($formFactory, element) {
var exp = element.attr('ng:contenteditable'),
form = $formFactory.forElement(element),
widget;
@ -68,14 +68,12 @@
scope: this,
model: exp,
controller: HTMLEditorWidget,
controllerArgs: [element]});
controllerArgs: {$element: element}});
// if the element is destroyed, then we need to notify the form.
element.bind('$destroy', function() {
widget.$destroy();
});
}
linkFn.$inject = ['$formFactory'];
return linkFn;
}];
});
</script>
<form name='editorForm' ng:controller="EditorCntl">

17
test/scenario/ApplicationSpec.js
View file

@ -112,22 +112,20 @@ describe('angular.scenario.Application', function() {
expect(called).toBeTruthy();
});
it('should wait for pending requests in executeAction', function() {
it('should wait for pending requests in executeAction', inject(function($injector, $browser) {
var called, polled;
var handlers = [];
var testWindow = {
document: _jQuery('<div class="test-foo"></div>'),
document: jqLite('<div class="test-foo"></div>'),
angular: {
element: jqLite,
service: {}
}
};
testWindow.angular.service.$browser = function() {
return {
notifyWhenNoOutstandingRequests: function(fn) {
handlers.push(fn);
}
};
$browser.notifyWhenNoOutstandingRequests = function(fn) {
handlers.push(fn);
};
testWindow.document.data('$injector', $injector);
app.getWindow_ = function() {
return testWindow;
};
@ -138,5 +136,6 @@ describe('angular.scenario.Application', function() {
});
expect(handlers.length).toEqual(1);
handlers[0]();
});
dealoc(testWindow.document);
}));
});

20
test/scenario/dslSpec.js
View file

@ -4,13 +4,14 @@ describe("angular.scenario.dsl", function() {
var $window, $root;
var application, eventLog;
beforeEach(function() {
beforeEach(inject(function($injector) {
eventLog = [];
$window = {
document: _jQuery("<div></div>"),
document: jqLite('<div class="document"></div>'),
angular: new angular.scenario.testing.MockAngular()
};
$root = angular.injector('NG')('$rootScope');
$window.document.data('$injector', $injector);
$root = $injector('$rootScope');
$root.emit = function(eventName) {
eventLog.push(eventName);
};
@ -45,6 +46,10 @@ describe("angular.scenario.dsl", function() {
// Just use the real one since it delegates to this.addFuture
$root.addFutureAction = angular.scenario.
SpecRunner.prototype.addFutureAction;
}));
afterEach(function(){
jqLite($window.document).removeData('$injector');
});
describe('Pause', function() {
@ -201,11 +206,14 @@ describe("angular.scenario.dsl", function() {
// ex. jQuery('#foo').find('[name="bar"]') // fails
// ex. jQuery('#foo [name="bar"]') // works, wtf?
//
beforeEach(function() {
beforeEach(inject(function($injector) {
doc = _jQuery('<div id="angular-scenario-binding"></div>');
_jQuery(document.body).html('').append(doc);
$window.document = window.document;
});
dealoc($window.document); // we are about to override it
$window.document = window.document;
jqLite($window.document).data('$injector', $injector);
}));
afterEach(function() {
_jQuery(document.body).

16
test/scenario/mocks.js
View file

@ -4,32 +4,18 @@ angular.scenario.testing = angular.scenario.testing || {};
angular.scenario.testing.MockAngular = function() {
this.reset();
this.service = this;
this.element = jqLite;
};
angular.scenario.testing.MockAngular.prototype.reset = function() {
this.log = [];
};
angular.scenario.testing.MockAngular.prototype.element = function(e) {
return jqLite(e);
};
angular.scenario.testing.MockAngular.prototype.$browser = function() {
this.log.push('$brower()');
return this;
};
angular.scenario.testing.MockAngular.prototype.poll = function() {
this.log.push('$brower.poll()');
return this;
};
angular.scenario.testing.MockAngular.prototype.notifyWhenNoOutstandingRequests = function(fn) {
this.log.push('$brower.notifyWhenNoOutstandingRequests()');
fn();
};
angular.scenario.testing.MockRunner = function() {
this.listeners = [];
};