From a1aededecb73b1a00b1fb26b3562593367142d39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Mon, 28 Aug 2017 13:45:25 +0800
Subject: [PATCH 1/4] NoticeBar: add component && doc

---
 build/bin/build-entry.js             |  3 +-
 components.json                      |  3 +-
 docs/examples-docs/notice-bar.md     | 71 +++++++++++++++++++++
 docs/src/ExamplesDocsApp.vue         |  1 -
 docs/src/doc.config.js               |  4 ++
 docs/src/examples.js                 |  6 +-
 docs/src/index.js                    |  2 +-
 package.json                         |  2 +-
 packages/index.js                    | 47 ++------------
 packages/notice-bar/index.vue        | 92 ++++++++++++++++++++++++++++
 packages/vant-css/src/index.css      |  1 +
 packages/vant-css/src/notice-bar.css | 36 +++++++++++
 yarn.lock                            |  6 +-
 13 files changed, 221 insertions(+), 53 deletions(-)
 create mode 100644 docs/examples-docs/notice-bar.md
 create mode 100644 packages/notice-bar/index.vue
 create mode 100644 packages/vant-css/src/notice-bar.css

diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index 6294590f1..34d111e49 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -34,8 +34,7 @@ export {
 };
 export default {
   install,
-  version,
-{{list}}
+  version
 };
 `;
 
diff --git a/components.json b/components.json
index dd4b25daa..705772a32 100644
--- a/components.json
+++ b/components.json
@@ -36,5 +36,6 @@
   "uploader": "./packages/uploader/index.js",
   "swipe": "./packages/swipe/index.js",
   "swipe-item": "./packages/swipe-item/index.js",
-  "datetime-picker": "./packages/datetime-picker/index.js"
+  "datetime-picker": "./packages/datetime-picker/index.js",
+  "notice-bar": "./packages/notice-bar/index.js"
 }
diff --git a/docs/examples-docs/notice-bar.md b/docs/examples-docs/notice-bar.md
new file mode 100644
index 000000000..50b954b9b
--- /dev/null
+++ b/docs/examples-docs/notice-bar.md
@@ -0,0 +1,71 @@
+<style>
+.demo-notice-bar {
+  .van-notice-bar:not(:first-of-type) {
+    margin-top: 15px;
+  }
+}
+</style>
+
+## NoticeBar 通告栏
+
+### 使用指南
+``` javascript
+import { NoticeBar } from 'vant';
+
+Vue.component(NoticeBar.name, NoticeBar);
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+<van-notice-bar>
+  足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
+</van-notice-bar>
+```
+:::
+
+#### 禁用滚动
+文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
+
+:::demo 禁用滚动
+```html
+<van-notice-bar :scrollable="false">
+  足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
+</van-notice-bar>
+```
+:::
+
+#### 通告栏模式
+默认模式为空，支持`closeable`和`link`。
+
+:::demo 通告栏模式
+```html
+<!-- closeable 模式，在右侧显示关闭按钮 -->
+<van-notice-bar mode="closeable">
+  足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
+</van-notice-bar>
+
+<!-- link 模式，在右侧显示链接箭头 -->
+<van-notice-bar mode="link">
+  足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
+</van-notice-bar>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| mode | 通告栏模式 | String | `''` | `closeable` `link` |
+| delay | 动画延迟时间，单位秒 | Number | `1` | |
+| scrollable | 是否滚动 | Boolean | `true` | |
+| speed | 滚动速率，单位px | Number | `40` | |
+
+### Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| click | 点击事件回调 | - |
diff --git a/docs/src/ExamplesDocsApp.vue b/docs/src/ExamplesDocsApp.vue
index c8753bf7f..85337be4a 100644
--- a/docs/src/ExamplesDocsApp.vue
+++ b/docs/src/ExamplesDocsApp.vue
@@ -7,7 +7,6 @@
 </template>
 
 <script>
-import 'highlight.js/styles/color-brewer.css';
 import docConfig from './doc.config';
 
 export default {
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index 655038e57..70cf88afc 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -125,6 +125,10 @@ module.exports = {
               {
                 "path": "/lazyload",
                 "title": "Lazyload 图片懒加载"
+              },
+              {
+                "path": "/notice-bar",
+                "title": "NoticeBar 通告栏"
               }
             ]
           },
diff --git a/docs/src/examples.js b/docs/src/examples.js
index 5126b64c3..d63c18c42 100644
--- a/docs/src/examples.js
+++ b/docs/src/examples.js
@@ -2,16 +2,16 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './ExamplesApp';
 import routes from './router.config';
-import ZanUI from 'packages/index';
+import Vant, { Lazyload } from 'packages/index';
 import ZanDoc from 'zan-doc';
 import 'packages/vant-css/src/index.css';
 import 'zan-doc/src/helper/touch-simulator';
 
 import DemoList from './components/demo-list.vue';
 
-Vue.use(ZanUI);
+Vue.use(Vant);
 Vue.use(ZanDoc);
-Vue.use(ZanUI.Lazyload, {
+Vue.use(Lazyload, {
   lazyComponent: true
 });
 Vue.use(VueRouter);
diff --git a/docs/src/index.js b/docs/src/index.js
index 8b19eb7c9..3c36180f8 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -4,7 +4,7 @@ import App from './ExamplesDocsApp';
 import routes from './router.config';
 import ZanDoc from 'zan-doc';
 import DemoBlock from './components/demo-block';
-import 'packages/vant-css/src/index.css';
+import 'packages/vant-css/src/reset.css';
 
 const isMobile = (function() {
   var platform = navigator.userAgent.toLowerCase();
diff --git a/package.json b/package.json
index 725581af1..1536e0cd9 100644
--- a/package.json
+++ b/package.json
@@ -117,6 +117,6 @@
     "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1",
     "webpack-merge": "^4.1.0",
-    "zan-doc": "^0.2.3"
+    "zan-doc": "^0.2.5"
   }
 }
diff --git a/packages/index.js b/packages/index.js
index 3a1ca3699..7529339fe 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -36,6 +36,7 @@ import Uploader from './uploader';
 import Swipe from './swipe';
 import SwipeItem from './swipe-item';
 import DatetimePicker from './datetime-picker';
+import NoticeBar from './notice-bar';
 
 const version = '0.8.6';
 const components = [
@@ -71,7 +72,8 @@ const components = [
   Uploader,
   Swipe,
   SwipeItem,
-  DatetimePicker
+  DatetimePicker,
+  NoticeBar
 ];
 
 const install = function(Vue) {
@@ -127,47 +129,10 @@ export {
   Uploader,
   Swipe,
   SwipeItem,
-  DatetimePicker
+  DatetimePicker,
+  NoticeBar
 };
 export default {
   install,
-  version,
-  Button,
-  Switch,
-  Field,
-  Radio,
-  Cell,
-  Icon,
-  CellGroup,
-  CellSwipe,
-  Popup,
-  Dialog,
-  Picker,
-  RadioGroup,
-  Waterfall,
-  Loading,
-  Panel,
-  Card,
-  Steps,
-  Tag,
-  Checkbox,
-  CheckboxGroup,
-  BadgeGroup,
-  Badge,
-  Search,
-  Step,
-  Tabs,
-  Tab,
-  Lazyload,
-  ImagePreview,
-  Col,
-  Row,
-  Actionsheet,
-  Quantity,
-  Progress,
-  Toast,
-  Uploader,
-  Swipe,
-  SwipeItem,
-  DatetimePicker
+  version
 };
diff --git a/packages/notice-bar/index.vue b/packages/notice-bar/index.vue
new file mode 100644
index 000000000..59e7430bd
--- /dev/null
+++ b/packages/notice-bar/index.vue
@@ -0,0 +1,92 @@
+<template>
+  <div v-show="showNoticeBar" @click="$emit('click')" :class="['van-notice-bar', { 'van-notice-bar--withicon': mode }]">
+    <div class="van-notice-bar__content-wrap" ref="contentWrap">
+      <div class="van-notice-bar__content" ref="content" :style="contentStyle" @transitionend="onTransitionEnd">
+        <slot></slot>
+      </div>
+    </div>
+    <van-icon class="van-notice-bar__icon" :name="iconName" v-if="iconName" @click="onClickIcon" />
+  </div>
+</template>
+
+<script>
+import Icon from '../icon';
+
+const NOTICE_BAR_MODE = ['', 'closeable', 'link'];
+
+export default {
+  name: 'van-notice-bar',
+
+  components: {
+    [Icon.name]: Icon
+  },
+
+  props: {
+    mode: {
+      type: String,
+      default: '',
+      validator: val => NOTICE_BAR_MODE.indexOf(val) !== -1
+    },
+    delay: {
+      type: [String, Number],
+      default: 1
+    },
+    scrollable: {
+      type: Boolean,
+      default: true
+    },
+    speed: {
+      type: Number,
+      default: 40
+    }
+  },
+
+  data() {
+    return {
+      duration: 0,
+      offsetWidth: 0,
+      showNoticeBar: true,
+      diableTransition: false
+    };
+  },
+
+  computed: {
+    iconName() {
+      return this.mode === 'closeable' ? 'close' : this.mode === 'link' ? 'arrow' : '';
+    },
+    contentStyle() {
+      return {
+        left: -this.offsetWidth + 'px',
+        transitionDelay: this.delay + 's',
+        transitionDuration: this.duration + 's',
+        transitionProperty: this.diableTransition ? 'none' : 'left'
+      };
+    }
+  },
+
+  mounted() {
+    const offsetWidth = this.$refs.content.getBoundingClientRect().width;
+    const wrapWidth = this.$refs.contentWrap.getBoundingClientRect().width;
+    if (this.scrollable && offsetWidth > wrapWidth) {
+      this.offsetWidth = offsetWidth;
+      this.duration = Math.ceil((offsetWidth + wrapWidth) / this.speed);
+    }
+  },
+
+  methods: {
+    onClickIcon() {
+      this.showNoticeBar = this.mode !== 'closeable';
+    },
+    onTransitionEnd() {
+      const { offsetWidth } = this;
+      this.diableTransition = true;
+      this.offsetWidth = 0;
+
+      setTimeout(() => {
+        this.diableTransition = false;
+        this.offsetWidth = offsetWidth;
+      }, 50);
+    }
+  }
+};
+</script>
diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css
index d18b5a74d..6a7bfa8df 100644
--- a/packages/vant-css/src/index.css
+++ b/packages/vant-css/src/index.css
@@ -30,3 +30,4 @@
 @import './toast.css';
 @import './uploader.css';
 @import './swipe.css';
+@import './notice-bar.css';
diff --git a/packages/vant-css/src/notice-bar.css b/packages/vant-css/src/notice-bar.css
new file mode 100644
index 000000000..67f912a1a
--- /dev/null
+++ b/packages/vant-css/src/notice-bar.css
@@ -0,0 +1,36 @@
+@import './common/var.css';
+
+.van-notice-bar {
+  color: #f60;
+  padding: 9px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  background-color: #fff7cc;
+
+  &--withicon {
+    position: relative;
+    padding-right: 30px;
+  }
+
+  &__icon {
+    top: 10px;
+    right: 10px;
+    position: absolute;
+    font-size: 15px;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  &__content-wrap {
+    height: 18px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  &__content {
+    position: absolute;
+    white-space: nowrap;
+    transition-property: left;
+    transition-timing-function: linear;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index b2c4b198a..65dac4f42 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7959,9 +7959,9 @@ yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
-zan-doc@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.3.tgz#79a8a4b6b5377e5900fd9a37034bb481ab281cf8"
+zan-doc@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.5.tgz#4f82e1b75db1a348b57436cd1d4ffb607bc18562"
   dependencies:
     cheerio "0.22.0"
     decamelize "^1.2.0"

From c357dd4e71fcbafd52fecd56b8beeaff6293b178 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Mon, 28 Aug 2017 14:20:34 +0800
Subject: [PATCH 2/4] NoticeBar: add test cases

---
 docs/examples-docs/notice-bar.md   |  4 +-
 packages/notice-bar/index.vue      |  3 +-
 test/unit/specs/cell-swipe.spec.js |  6 +--
 test/unit/specs/notice-bar.spec.js | 62 ++++++++++++++++++++++++++++++
 4 files changed, 68 insertions(+), 7 deletions(-)
 create mode 100644 test/unit/specs/notice-bar.spec.js

diff --git a/docs/examples-docs/notice-bar.md b/docs/examples-docs/notice-bar.md
index 50b954b9b..eaccdde97 100644
--- a/docs/examples-docs/notice-bar.md
+++ b/docs/examples-docs/notice-bar.md
@@ -21,9 +21,7 @@ Vue.component(NoticeBar.name, NoticeBar);
 
 :::demo 基础用法
 ```html
-<van-notice-bar>
-  足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
-</van-notice-bar>
+<van-notice-bar text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。">
 ```
 :::
 
diff --git a/packages/notice-bar/index.vue b/packages/notice-bar/index.vue
index 59e7430bd..3540c4833 100644
--- a/packages/notice-bar/index.vue
+++ b/packages/notice-bar/index.vue
@@ -2,7 +2,7 @@
   <div v-show="showNoticeBar" @click="$emit('click')" :class="['van-notice-bar', { 'van-notice-bar--withicon': mode }]">
     <div class="van-notice-bar__content-wrap" ref="contentWrap">
       <div class="van-notice-bar__content" ref="content" :style="contentStyle" @transitionend="onTransitionEnd">
-        <slot></slot>
+        <slot>{{ text }}</slot>
       </div>
     </div>
     <van-icon class="van-notice-bar__icon" :name="iconName" v-if="iconName" @click="onClickIcon" />
@@ -22,6 +22,7 @@ export default {
   },
 
   props: {
+    text: String,
     mode: {
       type: String,
       default: '',
diff --git a/test/unit/specs/cell-swipe.spec.js b/test/unit/specs/cell-swipe.spec.js
index 89e5ca833..ed142b25f 100644
--- a/test/unit/specs/cell-swipe.spec.js
+++ b/test/unit/specs/cell-swipe.spec.js
@@ -7,14 +7,14 @@ const defaultProps = {
     leftWidth: 100,
     rightWidth: 100
   }
-}
+};
 
 describe('CellSwipe', () => {
   let wrapper;
   afterEach(() => {
     wrapper && wrapper.destroy();
   });
-  
+
   it('render left or right part when has width', () => {
     wrapper = mount(CellSwipe, defaultProps);
     expect(wrapper.find('.van-cell-swipe__left').length).to.equal(1);
@@ -97,7 +97,7 @@ describe('CellSwipe', () => {
 
       triggerTouch(wrapper, 'touchstart', 0, 0);
       triggerTouch(wrapper, 'touchmove', 1, 0);
-      
+
       wrapper.vm.$nextTick(() => {
         expect(wrapper.vm.offset).to.equal(0);
         expect(wrapper.vm.opened).to.be.false;
diff --git a/test/unit/specs/notice-bar.spec.js b/test/unit/specs/notice-bar.spec.js
new file mode 100644
index 000000000..f85d09b36
--- /dev/null
+++ b/test/unit/specs/notice-bar.spec.js
@@ -0,0 +1,62 @@
+import NoticeBar from 'packages/notice-bar';
+import { mount } from 'avoriaz';
+
+describe('NoticeBar', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a notice-bar', () => {
+    wrapper = mount(NoticeBar, {
+      propsData: {},
+      attachToDocument: true
+    });
+
+    expect(wrapper.hasClass('van-notice-bar')).to.be.true;
+  });
+
+  it('mode closeable', () => {
+    wrapper = mount(NoticeBar, {
+      propsData: {
+        mode: 'closeable'
+      },
+      attachToDocument: true
+    });
+
+    const icon = wrapper.find('.van-icon-close');
+    expect(icon.length).to.equal(1);
+
+    icon[0].trigger('click');
+    expect(wrapper.hasStyle('display', 'none'));
+  });
+
+  it('mode link', () => {
+    wrapper = mount(NoticeBar, {
+      propsData: {
+        mode: 'link'
+      },
+      attachToDocument: true
+    });
+
+    expect(wrapper.find('.van-icon-arrow').length).to.equal(1);
+  });
+
+  it('notice-bar transitionend', (done) => {
+    wrapper = mount(NoticeBar, {
+      propsData: {
+        text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
+        speed: 10000,
+        delay: 0
+      },
+      attachToDocument: true
+    });
+
+    const content = wrapper.find('.van-notice-bar__content')[0];
+
+    setTimeout(() => {
+      expect(content.hasStyle('transition-delay', '0s')).to.be.true;
+      done();
+    }, 1500);
+  });
+});

From 561821d03acd295bab4330ab5501c1feb0933c5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Mon, 28 Aug 2017 14:40:00 +0800
Subject: [PATCH 3/4] NoticeBar: improve test coverage

---
 packages/notice-bar/index.vue       |  2 +-
 test/unit/components/notice-bar.vue | 16 ++++++++++++++++
 test/unit/index.js                  |  2 +-
 test/unit/specs/notice-bar.spec.js  | 11 +++++------
 4 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 test/unit/components/notice-bar.vue

diff --git a/packages/notice-bar/index.vue b/packages/notice-bar/index.vue
index 3540c4833..4060dccc6 100644
--- a/packages/notice-bar/index.vue
+++ b/packages/notice-bar/index.vue
@@ -70,7 +70,7 @@ export default {
     const wrapWidth = this.$refs.contentWrap.getBoundingClientRect().width;
     if (this.scrollable && offsetWidth > wrapWidth) {
       this.offsetWidth = offsetWidth;
-      this.duration = Math.ceil((offsetWidth + wrapWidth) / this.speed);
+      this.duration = (offsetWidth + wrapWidth) / this.speed;
     }
   },
 
diff --git a/test/unit/components/notice-bar.vue b/test/unit/components/notice-bar.vue
new file mode 100644
index 000000000..7eed57545
--- /dev/null
+++ b/test/unit/components/notice-bar.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="notice-bar-container" style="width: 100px;">
+    <van-notice-bar :speed="speed" :text="text" :mode="mode" :delay="delay" />
+  </div>
+</template>
+
+<script>
+import NoticeBar from 'packages/notice-bar';
+export default {
+  components: {
+    [NoticeBar.name]: NoticeBar
+  },
+  props: ['speed', 'text', 'mode', 'delay']
+};
+</script>
+
diff --git a/test/unit/index.js b/test/unit/index.js
index 9f20bac30..cac038bbe 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -13,4 +13,4 @@ if (process.env.TEST_FILE) {
   });
 } else {
   testsReq.keys().forEach(testsReq);
-}
\ No newline at end of file
+}
diff --git a/test/unit/specs/notice-bar.spec.js b/test/unit/specs/notice-bar.spec.js
index f85d09b36..87c796e44 100644
--- a/test/unit/specs/notice-bar.spec.js
+++ b/test/unit/specs/notice-bar.spec.js
@@ -1,4 +1,4 @@
-import NoticeBar from 'packages/notice-bar';
+import NoticeBar from '../components/notice-bar';
 import { mount } from 'avoriaz';
 
 describe('NoticeBar', () => {
@@ -13,7 +13,7 @@ describe('NoticeBar', () => {
       attachToDocument: true
     });
 
-    expect(wrapper.hasClass('van-notice-bar')).to.be.true;
+    expect(wrapper.find('.van-notice-bar').length).to.equal(1);
   });
 
   it('mode closeable', () => {
@@ -45,18 +45,17 @@ describe('NoticeBar', () => {
   it('notice-bar transitionend', (done) => {
     wrapper = mount(NoticeBar, {
       propsData: {
-        text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
-        speed: 10000,
+        text: '足协杯战线连续第2年上演广州德比战',
+        speed: 1000,
         delay: 0
       },
       attachToDocument: true
     });
 
     const content = wrapper.find('.van-notice-bar__content')[0];
-
     setTimeout(() => {
       expect(content.hasStyle('transition-delay', '0s')).to.be.true;
       done();
-    }, 1500);
+    }, 500);
   });
 });

From 17779384ee22fc464cc7f26ee2d8e6a74d29dbb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Mon, 28 Aug 2017 14:55:39 +0800
Subject: [PATCH 4/4] fix: exclude test files when dist test coverage report

---
 test/unit/get-webpack-conf.js | 16 +++++++++++++++-
 test/unit/karma.conf.js       |  3 ++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/test/unit/get-webpack-conf.js b/test/unit/get-webpack-conf.js
index 6d0818692..3861fd399 100644
--- a/test/unit/get-webpack-conf.js
+++ b/test/unit/get-webpack-conf.js
@@ -75,7 +75,21 @@ function getWebpackConfig(testFileName) {
           ]
         },
         {
-          test: /\.vue$/,
+          test: /test\/unit\/components\/.*\.vue$|packages\/swipe\/.*\.vue$/,
+          use: [
+            {
+              loader: 'vue-loader',
+              options: {
+                loaders: {
+                  css: ['style-loader', 'css-loader', 'postcss-loader']
+                }
+              }
+            }
+          ]
+        },
+        {
+          test: /packages\/.*\.vue$/,
+          exclude: /packages\/swipe\/.*\.vue$/,
           use: [
             {
               loader: 'vue-loader',
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index 7c8a89d96..0056f945a 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -14,7 +14,8 @@ module.exports = function(config) {
     reporters: ['spec', 'coverage'],
     files: ['./index.js'],
     preprocessors: {
-      './index.js': ['webpack', 'sourcemap']
+      './index.js': ['webpack', 'sourcemap'],
+      'test/unit/!(components)/**/*.vue': ['coverage']
     },
     webpack: getWebpackConfig(getTestFileName()),
     webpackMiddleware: {