angularjs directive - How do i test my custom angular schema form field -
i've started developing angular schema form , i'm struggling write tests custom field directive.
i've tried compiling schema form html tag runs through directives config testing it's display conditions against data in schema. never seems run controller , can't reference directives html elements. can give me guidance on how reference directive? below have far:
angular.module('schemaform').config(['schemaformprovider', 'schemaformdecoratorsprovider', 'sfpathprovider', function(schemaformprovider, schemaformdecoratorsprovider, sfpathprovider) { var date = function (name, schema, options) { if (schema.type === 'string' && schema.format == 'date') { var f = schemaformprovider.stdformobj(name, schema, options); f.key = options.path; f.type = 'date'; options.lookup[sfpathprovider.stringify(options.path)] = f; return f; } }; schemaformprovider.defaults.string.unshift(date); schemaformdecoratorsprovider.addmapping('bootstrapdecorator', 'date', 'app/modules/json_schema_form/schema_form_date_picker/schema_form_date_picker.html'); }]); var datecontrollerfunction = function($scope) { $scope.iscalendaropen = false; $scope.showcalendar = function () { $scope.iscalendaropen = true; }; $scope.calendarsave = function (date) { var leaf_model = $scope.ngmodel[$scope.ngmodel.length - 1]; var formatteddate = $scope.filter('date')(date, 'yyyy-mm-dd'); leaf_model.$setviewvalue(formatteddate); $scope.iscalendaropen = false; }; }; angular.module('schemaform').directive('schemaformdatepickerdirective', ['$filter', function($filter) { return { require: ['ngmodel'], restrict: 'a', scope: false, controller : ['$scope', datecontrollerfunction], link: function(scope, ielement, iattrs, ngmodelctrl) { scope.ngmodel = ngmodelctrl; scope.filter = $filter } }; }]);<div ng-class="{'has-error': haserror()}"> <div ng-model="$$value$$" schema-form-date-picker-directive> <md-input-container> <!-- showtitle function implemented asf --> <label ng-show="showtitle()">{{form.title}}</label> <input name="datetimepicker" ng-model="$$value$$" ng-focus="showcalendar()" ng-disabled="iscalendaropen"> </md-input-container> <time-date-picker ng-model="catalogue.effectivefrom" ng-if="iscalendaropen" on-save="calendarsave($value)" display-mode="date"></time-date-picker> </div> <!-- haserror() defined asf --> <span class="help-block" sf-message="form.description"></span> </div>and spec:
'use strict' describe('schemaformdatepicker', function() { var $compile = undefined; var $rootscope = undefined; var $scope = undefined var scope = undefined var $httpbackend = undefined; var elem = undefined; var html = '<form sf-schema="schema" sf-form="form" sf-model="schemamodel"></form>'; var $templatecache = undefined; var directive = undefined; beforeeach(function(){ module('app'); }); beforeeach(inject(function(_$compile_, _$rootscope_, _$templatecache_, _$httpbackend_) { $compile = _$compile_ $rootscope = _$rootscope_ $httpbackend = _$httpbackend_ $templatecache = _$templatecache_ })); beforeeach(function(){ //absorb call locale $httpbackend.expectget('assets/locale/en_gb.json').respond(200, {}); $templatecache.put('app/modules/json_schema_form/schema_form_date_picker/schema_form_date_picker.html', ''); $scope = $rootscope.$new() $scope.schema = { type: 'object', properties: { party: { title: 'party', type: 'string', format: 'date' }}}; $scope.form = [{key: 'party'}]; $scope.schemamodel = {}; }); describe("showcalendar", function () { beforeeach(function(){ elem = $compile(html)($scope); $scope.$digest(); $httpbackend.flush(); scope = elem.isolatescope(); }); it('should set iscalendaropen true', function(){ var result = elem.find('time-date-picker'); console.log("result: "+result); )); }); }); });
if @ below example taken project can see when uses $compile uses angular.element() first when setting tmpl.
also, supplied test module name 'app' while code sample has module name 'schemaform'. examples in 1.0.0 version of angular schema form repo use sinon , chai, i'm not sure changes need make if not use those.
note: runsync(scope, tmpl); new addition 1.0.0 given run through async functions process $ref includes.
/* eslint-disable quotes, no-var */ /* disabling quotes makes easier copy tests example app */ chai.should(); var runsync = function(scope, tmpl) { var directivescope = tmpl.isolatescope(); sinon.stub(directivescope, 'resolvereferences', function(schema, form) { directivescope.render(schema, form); }); scope.$apply(); }; describe('sf-array.directive.js', function() { var exampleschema; var tmpl; beforeeach(module('schemaform')); beforeeach( module(function($sceprovider) { $sceprovider.enabled(false); exampleschema = { "type": "object", "properties": { "names": { "type": "array", "description": "foobar", "items": { "type": "object", "properties": { "name": { "title": "name", "type": "string", "default": 6, }, }, }, }, }, }; }) ); it('should not throw needless errors on validate [ノಠ益ಠ]ノ彡┻━┻', function(done) { tmpl = angular.element( '<form name="testform" sf-schema="schema" sf-form="form" sf-model="model" json="{{model | json}}"></form>' ); inject(function($compile, $rootscope) { var scope = $rootscope.$new(); scope.model = {}; scope.schema = exampleschema; scope.form = [ "*" ]; $compile(tmpl)(scope); runsync(scope, tmpl); tmpl.find('div.help-block').text().should.equal('foobar'); var add = tmpl.find('button').eq(1); add.click(); $rootscope.$apply(); settimeout(function() { var errors = tmpl.find('.help-block'); errors.text().should.equal('foobar'); done(); }, 0); }); }); });
Comments
Post a Comment