added schema support

Author: matt-sanders

src/components/FormlyField.vue

@@ -1,9 +1,9 @@
 <template>
-  <component :is="schema.type" :model="model"></component>
+  <component :is="field.type" :model="model"></component>
 </template>
 
 <script>
  export default {
-     props: ['schema', 'model']
+     props: ['field', 'model']
  }
 </script>

src/components/FormlyForm.vue

@@ -1,11 +1,11 @@
 <template>
   <fieldset>
-
+      <formly-field v-for="field in fields" :field="field" :model.sync="model[field.key]" ></formly-field>
   </fieldset>
 </template>
 
 <script>
  export default{
-
+     props: ['fields', 'model']
  }
 </script>

test/unit/specs/FormlyField.spec.js

@@ -3,8 +3,7 @@ const expect = chai.expect;
 import sinonChai from 'sinon-chai';
 import sinon from 'sinon';
 import Vue from 'vue';
-import VueFormly from 'src/index';
-Vue.use(VueFormly);
+import FormlyField from 'src/components/FormlyField.vue';
 chai.use(sinonChai);
 
 let el, vm;
@@ -14,7 +13,10 @@ function createForm(template, data){
     el.innerHTML = template;
     vm = new Vue({
         el: el,
-        data: data
+        data: data,
+        components: {
+            'formly-field': FormlyField
+        }
     });
 
     return [el, vm];
@@ -34,7 +36,7 @@ describe('FormlyField', () => {
             }
         };
 
-        createForm('<formly-field :schema="schema"></formly-field>', data);
+        createForm('<formly-field :field="schema"></formly-field>', data);
 
         let innerElem = vm.$el.querySelector('#testComponent');
 
@@ -56,7 +58,7 @@ describe('FormlyField', () => {
             testModel: 'foo'
         };
 
-        createForm('<formly-field :schema="schema" :model.sync="testModel"></formly-field>', data);
+        createForm('<formly-field :field="schema" :model.sync="testModel"></formly-field>', data);
 
         let input = vm.$el.querySelector('#testInput');
 

test/unit/specs/FormlyForm.spec.js

@@ -0,0 +1,69 @@
+import chai from 'chai';
+const expect = chai.expect;
+import sinonChai from 'sinon-chai';
+import sinon from 'sinon';
+import Vue from 'vue';
+import FormlyForm from 'src/components/FormlyForm.vue';
+chai.use(sinonChai);
+
+//mock our formly-field component
+let FormlyField = Vue.extend({
+    template: '<div class="formly-field"><pre id="{{field.key}}_field">{{field | json}}</pre><pre id="{{field.key}}_model">{{model | json}}</pre></div>',
+    props: ['field', 'model']
+});
+
+let el, vm;
+
+function createForm(template, data){
+    el = document.createElement('div');
+    el.innerHTML = template;
+    vm = new Vue({
+        el: el,
+        data: data,
+        components: {
+            'formly-form': FormlyForm
+        }
+    });
+
+    return [el, vm];
+}
+
+describe('FormlyForm', () => {
+
+    beforeEach( () => {
+        //ensure that our mocked component is there
+        Vue.component('formly-field', FormlyField);
+    });
+
+    it('should create a subset of components with the right data', () => {
+
+        let data = {
+            schema: [
+                {
+                    key: 'fname',
+                    type: 'input'
+                },
+                {
+                    key: 'lname',
+                    type: 'input'
+                }
+            ],
+            model: {
+                fname: '',
+                lname: 'smith'
+            }
+        };
+
+        createForm('<formly-form :fields="schema" :model="model"></formly-form>', data);
+
+        //check the elements have been created
+        expect(vm.$el.querySelectorAll('fieldset')).to.be.length(1);
+        expect(vm.$el.querySelectorAll('.formly-field')).to.be.length(2);
+
+        //check their data
+        expect(vm.$el.querySelector('#lname_model').textContent).to.contain('smith');
+        expect(JSON.parse(vm.$el.querySelector('#lname_field').textContent)).to.deep.equal(data.schema[1]);
+        
+    });
+    
+});