网格系统代码
网格系统测试代码

1.思路

1. 使用row.vue和col.vue构成网格系统的基础部分
2. 两单文件所需要的传值以及依赖
   col.vue的样式propsData
   • span：表示网格占据列数的宽度
   • offset：表示网格列的margin-left，偏移量
     通过传值拼接所需要的className生成对应的样式名触发CSS
     对应的CSS通过SCSS的for循环生成，如：

   $class: col-;
   @for $n from 1 through 24 {
       &.#{$class}#{$n} {
          width: ($n / 24) * 100%
       }
    }
   
   $class: offset-;
   @for $n from 1 through 24 {
     &.#{$class}#{$n} {
       margin-left: ($n / 24) * 100%
     }
   }
   

row.vue的样式propsData
* gutter： 表示网格列的间隔，由于这个是作用在col的，但设定在row这个组件中，所以需要传值到col中使列生成padding
* align：表示弹性盒子子元素在主轴（横轴）方向上的对齐方式
这两个传值也是通过拼接所需要的className生成对应的样式名触发CSS

3. 实现响应式
   • 需要借助传值名称以及媒体查询各屏幕的大小来判定生成对应的className触发CSS
   • 需要注意的是在设计响应式过程中要有个取舍问题，看下你的组件主要作用点，手机端还是PC端，那样你的 col组件的span``offset就以那个端为基准和设计媒体查询大小的制订，具体请看代码，我是以手机为基准

2.测试

1. 测试row的组件gutter属性需要生成对应的HTML结构才能进行测试，所以这个测试不能使用传统的直接Vue.extend(Row)然后挂载组件进行测试，而是要使用原生的方法进行DOM生成

it('接收gutter属性', (done) => {
    Vue.component('g-row', Row)
    Vue.component('g-col', Col)
    const div = document.createElement('div')
    document.body.appendChild(div)
    div.innerHTML = `
      <g-row gutter="20">
        <g-col span="12"></g-col>
        <g-col span="12"></g-col>
      </g-row>
    `
    const vm = new Vue({
      el: div
    })
    setTimeout(() => {
      const row = vm.$el.querySelector('.row')
      expect(getComputedStyle(row).marginLeft).to.equal('-10px')
      expect(getComputedStyle(row).marginRight).to.equal('-10px')
      const col = vm.$el.querySelectorAll('.col')
      expect(getComputedStyle(col[0]).paddingRight).to.equal('10px')
      expect(getComputedStyle(col[1]).paddingLeft).to.equal('10px')
      done() // mocha异步测试回调
      vm.$el.remove()
      vm.$destroy()
    })
  })

注意：

• 在测试gutter属性为什么需要用到setTimeout去输出测试结果，原因是在上面这段代码如果不使用setTimeout的情况下按照js同步执行顺序从上向下执行，而row组件向col组件的gutter传值是通过mouted这个钩子进行传值，vue执行的是DOM异步队列更新，在试图通过gutter修改col组件的样式时，Virtualdom会将这个任务推到任务队列中等待同步代码执行完成后再进行队列任务，所以必须使用setTimeout将测试结果的代码放置到任务队列最后进行输出才能获取到对应的更新后的DOM属性
• 在测试框架中，如果不写done这个参数，就表示只执行同步代码，当执行到setTimeout后不等执行队列任务就直接退出代码执行。再后面要执行done这个函数，是为了告诉它任务已经执行完成，可以退出代码执行