breaking change: rename GoodsAction to ActionBar

2020-08-20 11:54:04 +08:00
parent 1ad76a8aa3
commit fc825d7a33
22 changed files with 315 additions and 317 deletions
@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-action-bar">
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
+          <!---->
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
+          <!---->
+        </div>购物车
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-shop-o van-action-bar-icon__icon">
+          <!---->
+        </div>店铺
+      </div> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--last van-action-bar-button--danger">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div class="van-action-bar">
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
+          <div class="van-info van-info--dot"></div>
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
+          <div class="van-info">5</div>
+        </div>购物车
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-shop-o van-action-bar-icon__icon">
+          <div class="van-info">12</div>
+        </div>店铺
+      </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning">
+        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
+      </button> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--last van-action-bar-button--danger">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div class="van-action-bar">
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon" style="color: rgb(7, 193, 96);">
+          <!---->
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
+          <!---->
+        </div>购物车
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-star van-action-bar-icon__icon" style="color: rgb(255, 80, 0);">
+          <!---->
+        </div>已收藏
+      </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning">
+        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
+      </button> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--last van-action-bar-button--danger">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div class="van-action-bar">
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
+          <!---->
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
+          <!---->
+        </div>购物车
+      </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning" style="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;">
+        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
+      </button> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--last van-action-bar-button--danger" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button render default slot 1`] = `
+<button class="van-button van-button--default van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--last">
+  <div class="van-button__content"><span class="van-button__text">Default Content</span></div>
+</button>
+`;
+
+exports[`Icon render default slot 1`] = `
+<div role="button" tabindex="0" class="van-action-bar-icon">
+  <div class="van-icon van-icon-undefined van-action-bar-icon__icon">
+    <!---->
+  </div>Default Content
+</div>
+`;
+
+exports[`Icon render icon slot 1`] = `
+<div role="button" tabindex="0" class="van-action-bar-icon">
+  <div class="van-action-bar-icon__icon">Custom Icon
+    <!---->
+  </div>Text
+</div>
+`;
+
+exports[`Icon render icon slot with dot 1`] = `
+<div role="button" tabindex="0" class="van-action-bar-icon">
+  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-info van-info--dot"></div>
+  </div>Text
+</div>
+`;
+
+exports[`Icon render icon slot with info 1`] = `
+<div role="button" tabindex="0" class="van-action-bar-icon">
+  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-info">1</div>
+  </div>Text
+</div>
+`;
+
+exports[`disable safe-area-inset-bottom prop 1`] = `<div class="van-action-bar van-action-bar--unfit"></div>`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
@@ -0,0 +1,97 @@
+import ActionBar from '..';
+import Button from '../../action-bar-button';
+import Icon from '../../action-bar-icon';
+import { mount } from '../../../test';
+
+test('Button click event', () => {
+  const wrapper = mount(Button);
+  wrapper.trigger('click');
+  expect(wrapper.emitted('click').length).toEqual(1);
+});
+
+test('Icon click event', () => {
+  const wrapper = mount(Icon);
+  wrapper.trigger('click');
+  expect(wrapper.emitted('click').length).toEqual(1);
+});
+
+test('Button render default slot', () => {
+  const wrapper = mount({
+    render(h) {
+      return h(Button, null, ['Default Content']);
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('Icon render default slot', () => {
+  const wrapper = mount({
+    render(h) {
+      return h(Icon, null, ['Default Content']);
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('Icon render icon slot', () => {
+  const wrapper = mount({
+    render(h) {
+      return h(Icon, {
+        scopedSlots: {
+          default: () => 'Text',
+          icon: () => 'Custom Icon',
+        },
+      });
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('Icon render icon slot with info', () => {
+  const wrapper = mount({
+    render(h) {
+      return h(Icon, {
+        props: {
+          info: '1',
+        },
+        scopedSlots: {
+          default: () => 'Text',
+          icon: () => 'Custom Icon',
+        },
+      });
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('Icon render icon slot with dot', () => {
+  const wrapper = mount({
+    render(h) {
+      return h(Icon, {
+        props: {
+          dot: true,
+        },
+        scopedSlots: {
+          default: () => 'Text',
+          icon: () => 'Custom Icon',
+        },
+      });
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('disable safe-area-inset-bottom prop', () => {
+  const wrapper = mount(ActionBar, {
+    propsData: {
+      safeAreaInsetBottom: false,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});