NoticeBar: add test cases

docs/examples-docs/notice-bar.md

@@ -21,9 +21,7 @@ Vue.component(NoticeBar.name, NoticeBar);
 
 :::demo 基础用法
 ```html
-<van-notice-bar>
+<van-notice-bar text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。">
-  足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
-</van-notice-bar>
 ```
 :::
 

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: '',

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;

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);
+  });
+});