[new feature] add image component

2019-05-17 14:16:45 +08:00
parent 2644689162
commit 1321ba6902
15 changed files with 430 additions and 1 deletions
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-row">
+      <div class="van-image" style="width: 100px; height: 100px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img"></div>
+    </div>
+  </div>
+  <div>
+    <div class="van-row" style="margin-left: -10px; margin-right: -10px;">
+      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
+        <div class="van-image" style="height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;"></div>
+        <div class="text">contain</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
+        <div class="van-image" style="height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;"></div>
+        <div class="text">cover</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
+        <div class="van-image" style="height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;"></div>
+        <div class="text">fill</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
+        <div class="van-image" style="height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;"></div>
+        <div class="text">none</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
+        <div class="van-image" style="height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;"></div>
+        <div class="text">scale-down</div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lazy load 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import demoTest from '../../../test/demo-test';
+
+demoTest(Demo);
@@ -0,0 +1,45 @@
+
+import { mount } from '../../../test/utils';
+import Image from '..';
+
+test('click event', () => {
+  const wrapper = mount(Image);
+
+  wrapper.trigger('click');
+  expect(wrapper.emitted('click')[0][0]).toBeTruthy();
+});
+
+test('load event', () => {
+  const wrapper = mount(Image, {
+    propsData: {
+      src: 'https://img.yzcdn.cn/vant/cat.jpeg'
+    }
+  });
+
+  wrapper.find('img').trigger('load');
+
+  expect(wrapper.emitted('load')[0][0]).toBeTruthy();
+});
+
+test('error event', () => {
+  const wrapper = mount(Image, {
+    propsData: {
+      src: 'https://img.yzcdn.cn/vant/cat.jpeg'
+    }
+  });
+
+  wrapper.find('img').trigger('error');
+
+  expect(wrapper.emitted('error')[0][0]).toBeTruthy();
+});
+
+test('lazy load', () => {
+  const wrapper = mount(Image, {
+    propsData: {
+      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      lazyLoad: true
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});