Fix noticebar (#2)

* test(noticebar): add noticebar test * fix(Noticebar): marquee 属性 * chore: rename button test file Co-authored-by: pengshanglong <[email protected]>
psaren · May 26, 2020 · de5e4b8 · de5e4b8
1 parent 5d75d6f
commit de5e4b8
Showing 7 changed files with 209 additions and 11 deletions.
diff --git a/src/components/notes.md b/src/components/notes.md
@@ -1,4 +1,3 @@
-- Noticebar marquee 属性 还不可用
 - Button Invalid handler for event "getPhoneNumber": got undefined 等错误请查看[小程序button](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)
 - Accordion 动画不顺滑
 - Indexes 跳转动画有问题
diff --git a/src/components/noticebar/index.jsx b/src/components/noticebar/index.jsx
@@ -87,9 +87,7 @@ export default {
           const dura = width / +this.speed
           this.setState({ dura })
         } else if (isWEAPP || isALIPAY) {
-          const query = isALIPAY
-            ? Taro.createSelectorQuery()
-            : Taro.createSelectorQuery().in(this.$scope)
+          const query = Taro.createSelectorQuery()
           query
             .select(`.${this.state.animElemId}`)
             .boundingClientRect()
@@ -168,7 +166,7 @@ export default {
       this.state.show && (
         <view class={classNames(rootClassName, classObject, className)} style={customStyle}>
           {close && (
-            <view class="at-noticebar__close" onClick={this.handlClose}>
+            <view class="at-noticebar__close" onTap={this.handleClose}>
               <view class="at-icon at-icon-close"></view>
             </view>
           )}
@@ -181,7 +179,6 @@ export default {
             )}
             <view class="at-noticebar__content-text">
               <view
-                // @ts-ignore
                 animation={this.state.animationData}
                 class={classNames(innerClassName)}
                 style={style}>
@@ -190,7 +187,7 @@ export default {
             </view>
           </view>
           {showMore && (
-            <view class="at-noticebar__more" onClick={this.handleGotoMore}>
+            <view class="at-noticebar__more" onTap={this.handleGotoMore}>
               <view class="text">{_moreText}</view>
               <view class="at-noticebar__more-icon">
                 <view class="at-icon at-icon-chevron-right"></view>

diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
@@ -22,8 +22,8 @@
       getUserInfo
     </button>
     <AtButton
-      open-type="getPhoneNumber"
-      :on-get-phone-number="handleUserInfo"
+      open-type="getUserInfo"
+      :on-get-user-info="handleUserInfo"
     >
       getPhoneNumber
     </AtButton>
@@ -39,18 +39,22 @@
         当前选择: {{ date }}
       </view>
     </picker>
+    <AtNoticebar marquee>
+      这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏
+    </AtNoticebar>
   </view>
 </template>
 <script>
 import Taro from '@tarojs/taro'
 import { AtCalendar } from '../../components'
-import { AtIcon, AtTag, AtButton } from '../../components'
+import { AtIcon, AtTag, AtButton, AtNoticebar } from '../../components'
 export default {
   components: {
     AtCalendar,
     AtIcon,
     AtTag,
-    AtButton
+    AtButton,
+    AtNoticebar
   },
   data() {
     return {

diff --git a/.../unit/__snapshots__/AtButton.spec.js.snap → tests/unit/__snapshots__/button.spec.js.snap b/.../unit/__snapshots__/AtButton.spec.js.snap → tests/unit/__snapshots__/button.spec.js.snap
diff --git a/tests/unit/__snapshots__/noticebar.spec.js.snap b/tests/unit/__snapshots__/noticebar.spec.js.snap
@@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AtNoticebar Snap render AtNoticebar -- props icon 1`] = `
+<view
+  class="at-noticebar"
+>
+  <view
+    class="at-noticebar__content"
+  >
+    <view
+      class="at-noticebar__content-icon"
+    >
+      <view
+        class="at-icon at-icon-volume-plus at-icon at-icon-volume-plus"
+      />
+    </view>
+    <view
+      class="at-noticebar__content-text"
+    >
+      <view
+        animation="[object Object]"
+        class="at-noticebar__content-inner"
+      >
+        这是内容
+      </view>
+    </view>
+  </view>
+</view>
+`;
+
+exports[`AtNoticebar Snap render AtNoticebar -- props moreText & showMore 1`] = `
+<view
+  class="at-noticebar at-noticebar--single"
+>
+  <view
+    class="at-noticebar__content"
+  >
+    <view
+      class="at-noticebar__content-text"
+    >
+      <view
+        animation="[object Object]"
+        class="at-noticebar__content-inner"
+      >
+        这是内容
+      </view>
+    </view>
+  </view>
+  <view
+    class="at-noticebar__more"
+  >
+    <view
+      class="text"
+    >
+      查看更多
+    </view>
+    <view
+      class="at-noticebar__more-icon"
+    >
+      <view
+        class="at-icon at-icon-chevron-right"
+      />
+    </view>
+  </view>
+</view>
+`;
+
+exports[`AtNoticebar Snap render AtNoticebar -- props show 1`] = `
+<view
+  class="at-noticebar"
+>
+  <view
+    class="at-noticebar__close"
+  >
+    <view
+      class="at-icon at-icon-close"
+    />
+  </view>
+  <view
+    class="at-noticebar__content"
+  >
+    <view
+      class="at-noticebar__content-text"
+    >
+      <view
+        animation="[object Object]"
+        class="at-noticebar__content-inner"
+      >
+        这是内容
+      </view>
+    </view>
+  </view>
+</view>
+`;
+
+exports[`AtNoticebar Snap render AtNoticebar -- props single 1`] = `
+<view
+  class="at-noticebar at-noticebar--single"
+>
+  <view
+    class="at-noticebar__content"
+  >
+    <view
+      class="at-noticebar__content-text"
+    >
+      <view
+        animation="[object Object]"
+        class="at-noticebar__content-inner"
+      >
+        这是内容
+      </view>
+    </view>
+  </view>
+</view>
+`;
+
+exports[`AtNoticebar Snap render AtNoticebar -- props speed 1`] = `
+<view
+  class="at-noticebar"
+>
+  <view
+    class="at-noticebar__content"
+  >
+    <view
+      class="at-noticebar__content-text"
+    >
+      <view
+        animation="[object Object]"
+        class="at-noticebar__content-inner"
+      >
+        这是内容
+      </view>
+    </view>
+  </view>
+</view>
+`;
diff --git a/tests/unit/AtButton.spec.js → tests/unit/button.spec.js b/tests/unit/AtButton.spec.js → tests/unit/button.spec.js
diff --git a/tests/unit/noticebar.spec.js b/tests/unit/noticebar.spec.js
@@ -0,0 +1,62 @@
+import { mount } from '@vue/test-utils'
+import AtNoticebar from '../../src/components/noticebar'
+
+const factory = (values = {}, slots = { default: ['这是内容'] }) => {
+  return mount(AtNoticebar, {
+    slots,
+    propsData: { ...values },
+  })
+}
+
+describe('AtNoticebar Snap', () => {
+  it('render AtNoticebar -- props show', () => {
+    const wrapper = factory({ close: true })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+
+  it('render AtNoticebar -- props single', () => {
+    const wrapper = factory({ single: true })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+
+  it('render AtNoticebar -- props speed', () => {
+    const wrapper = factory({ speed: 200 })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+
+  it('render AtNoticebar -- props moreText & showMore', () => {
+    // showMore work only when single is true
+    const wrapper = factory({ moreText: '查看更多', showMore: true, single: true })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+
+  it('render AtNoticebar -- props icon', () => {
+    const wrapper = factory({ icon: 'volume-plus' })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})
+
+describe('AtNoticebar Event', () => {
+  it('AtNoticebar onClose', () => {
+    const onClose = jest.fn()
+    const wrapper = factory({
+      close: true,
+      onClose: onClose,
+    })
+    wrapper.find('.at-noticebar__close').trigger('tap')
+    expect(onClose).toBeCalled()
+  })
+
+  it('AtNoticebar onGotoMore', () => {
+    const onGotoMore = jest.fn()
+    const wrapper = factory({
+      icon: 'volume-plus',
+      single: true,
+      showMore: true,
+      onGotoMore: onGotoMore,
+      moreText: '更多内容',
+    })
+    wrapper.find('.at-noticebar__more').trigger('tap')
+    expect(onGotoMore).toBeCalled()
+  })
+})