Added more case to xosValidation and tested
diff --git a/views/ngXosLib/xosHelpers/spec/ui/validaiton.test.js b/views/ngXosLib/xosHelpers/spec/ui/validaiton.test.js
deleted file mode 100644
index acb7505..0000000
--- a/views/ngXosLib/xosHelpers/spec/ui/validaiton.test.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * © OpenCORD
- *
- * Created by teone on 4/15/16.
- */
-
-(function () {
- 'use strict';
-
- describe('The xos.helper module', function(){
- describe('The xos-validation component', () => {
-
- let element, scope, isolatedScope;
-
- beforeEach(module('xos.helpers'));
-
- beforeEach(inject(($compile, $rootScope) => {
-
- scope = $rootScope.$new();
-
- scope.errors = {};
-
- element = angular.element(`<xos-validation errors="errors"></xos-validation>`);
- $compile(element)(scope);
- scope.$digest();
- isolatedScope = element.isolateScope().vm;
- }));
-
- it('should not show an alert', () => {
- expect($(element).find('xos-alert > .alert')[0]).toHaveClass('ng-hide');
- });
-
- it('should show an alert', () => {
- scope.errors.email = true;
- scope.$digest();
- expect($(element).find('xos-alert > .alert')[0]).not.toHaveClass('ng-hide');
- });
- });
- });
-})();
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/spec/ui/validation.test.js b/views/ngXosLib/xosHelpers/spec/ui/validation.test.js
new file mode 100644
index 0000000..eb92a05
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/spec/ui/validation.test.js
@@ -0,0 +1,64 @@
+/**
+ * © OpenCORD
+ *
+ * Created by teone on 4/15/16.
+ */
+
+(function () {
+ 'use strict';
+
+ describe('The xos.helper module', function(){
+ describe('The xos-validation component', () => {
+
+ let element, scope, isolatedScope;
+
+ beforeEach(module('xos.helpers'));
+
+ beforeEach(inject(($compile, $rootScope) => {
+
+ scope = $rootScope.$new();
+
+ scope.errors = {};
+
+ element = angular.element(`<xos-validation errors="errors"></xos-validation>`);
+ $compile(element)(scope);
+ scope.$digest();
+ isolatedScope = element.isolateScope().vm;
+ }));
+
+ it('should not show an alert', () => {
+ expect($(element).find('xos-alert > .alert')[0]).toHaveClass('ng-hide');
+ });
+
+ let availableErrors = [
+ {
+ type: 'email',
+ message: 'This is not a valid email'
+ },
+ {
+ type: 'minlength',
+ message: 'Too short'
+ },
+ {
+ type: 'maxlength',
+ message: 'Too long'
+ },
+ {
+ type: 'custom',
+ message: 'Field invalid'
+ },
+ ];
+
+ // use a loop to generate similar test
+ availableErrors.forEach((e, i) => {
+ it(`should show an alert for ${e.type} errors`, () => {
+ scope.errors[e.type] = true;
+ scope.$digest();
+ let alert = $(element).find('xos-alert > .alert')[i];
+ expect(alert).not.toHaveClass('ng-hide');
+ expect(alert).toHaveText(e.message);
+ });
+ });
+ });
+ });
+})();
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
index 9e95805..c5ea993 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
@@ -19,6 +19,32 @@
* @param {Object} errors The error object
* @element ANY
* @scope
+ * @example
+ <example module="sampleValidation">
+ <file name="index.html">
+ <div ng-controller="SampleCtrl as vm">
+ <div class="row">
+ <div class="col-xs-12">
+ <label>Set an error type:</label>
+ </div>
+ <div class="col-xs-2">
+ <a class="btn" ng-click="vm.errors.email = true" ng-class="{'btn-default': !vm.errors.email, 'btn-success': vm.errors.email}">
+ Email
+ </a>
+ </div>
+ </div>
+ <xos-validation errors="vm.errors"></xos-validation>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('sampleValidation', ['xos.uiComponents'])
+ .controller('SampleCtrl', function(){
+ this.errors = {
+ email: false
+ }
+ });
+ </file>
+ </example>
*/
.directive('xosValidation', function(){
@@ -30,9 +56,18 @@
template: `
<div>
<!-- <pre>{{vm.errors.email | json}}</pre> -->
- <xos-alert config="vm.config" show="vm.errors.email !== undefined">
+ <xos-alert config="vm.config" show="vm.errors.email !== undefined && vm.errors.email !== false">
This is not a valid email
</xos-alert>
+ <xos-alert config="vm.config" show="vm.errors.minlength !== undefined && vm.errors.minlength !== false">
+ Too short
+ </xos-alert>
+ <xos-alert config="vm.config" show="vm.errors.maxlength !== undefined && vm.errors.maxlength !== false">
+ Too long
+ </xos-alert>
+ <xos-alert config="vm.config" show="vm.errors.custom !== undefined && vm.errors.custom !== false">
+ Field invalid
+ </xos-alert>
</div>
`,
transclude: true,