补充 Col & Row 测试用例 (#16)

* layout test

* fix row

* update layout test

packages/col/src/col.vue

@@ -25,7 +25,8 @@
     },
     computed: {
       gutter() {
-        return Number(this.$parent.gutter);
+        if (!this.$parent) return 0;
+        return Number(this.$parent.gutter) || 0;
       },
       style() {
         const padding = `${this.gutter / 2}px`;

packages/datetime-picker/src/datetime-picker.vue

@@ -31,7 +31,7 @@ export default {
     },
     format: {
       type: String,
-      default: 'yyyy.mm.dd hh时 mm分'
+      default: 'YYYY.MM.DD HH时 mm分'
     },
     visibleItemCount: {
       type: Number,

packages/row/src/row.vue

@@ -14,7 +14,10 @@
         type: String,
         default: 'van'
       },
-      gutter: [Number, String]
+      gutter: {
+        type: [Number, String],
+        default: 0
+      }
     },
     computed: {
       style() {

packages/vant-css/src/loading.css

@@ -1,3 +1,5 @@
+@import './common/var.css';
+
 @-webkit-keyframes loading {
   from {
     -webkit-transform: rotate(0deg);
@@ -24,7 +26,7 @@
 
 @component-namespace van {
   @b loading {
-    
+
     line-height: 0;
     font-size: 0;
 
@@ -38,12 +40,12 @@
       width: 30px;
       height: 30px;
     }
-  
-    @e spinner { 
+
+    @e spinner {
       display: inline-block;
       height: 100%;
       width: 100%;
-      
+
       -webkit-animation: loading 0.8s linear;
       -webkit-animation-iteration-count: infinite;
       animation: loading 0.8s linear;

test/unit/components/row.vue

@@ -0,0 +1,25 @@
+<template>
+  <van-row gutter="10">
+    <van-col span="8">
+      <div class="gray">span: 8</div>
+    </van-col>
+    <van-col span="8">
+      <div class="gray">span: 8</div>
+    </van-col>
+    <van-col span="8">
+      <div class="gray">span: 8</div>
+    </van-col>
+  </van-row>
+</template>
+
+<script>
+import Row from 'packages/row';
+import Col from 'packages/col';
+
+export default {
+  components: {
+    'van-row': Row,
+    'van-col': Col
+  }
+};
+</script>

test/unit/specs/layout.spec.js

@@ -0,0 +1,41 @@
+import { mount } from 'avoriaz';
+import Col from 'packages/col';
+import Row from 'packages/row';
+import RowTestComponent from '../components/row';
+
+describe('Layout', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a simple row', () => {
+    wrapper = mount(Row);
+
+    expect(wrapper.hasClass('van-row')).to.be.true;
+    expect(wrapper.computed().style()).to.be.empty;
+  });
+
+  it('create a simple column', () => {
+    wrapper = mount(Col, {
+      propsData: {
+        span: 8,
+        offset: 8
+      }
+    });
+    expect(wrapper.hasClass('van-col')).to.be.true;
+    expect(wrapper.hasClass('van-col-8')).to.be.true;
+    expect(wrapper.hasClass('van-col-offset-8')).to.be.true;
+    expect(wrapper.computed().gutter()).to.equal(0);
+  });
+
+  it('create a gutter row', () => {
+    wrapper = mount(RowTestComponent);
+    const row = wrapper.find(Row)[0];
+    const column = wrapper.find(Col)[0];
+    expect(row.hasStyle('margin-left', '-5px')).to.be.true;
+    expect(row.hasStyle('margin-right', '-5px')).to.be.true;
+    expect(column.hasStyle('padding-left', '5px')).to.be.true;
+    expect(column.hasStyle('padding-right', '5px')).to.be.true;
+  });
+});