feat: image component

2020-07-05 08:33:36 +08:00
parent 12faaa2179
commit b79e59bc18
15 changed files with 1041 additions and 8 deletions
@@ -0,0 +1,129 @@
+// 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 class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <!----></i></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-row">
+      <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
+        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+              <!----></i></div>
+        </div>
+        <div class="text">contain</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
+        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+              <!----></i></div>
+        </div>
+        <div class="text">cover</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
+        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+              <!----></i></div>
+        </div>
+        <div class="text">fill</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-right: 10px;">
+        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+              <!----></i></div>
+        </div>
+        <div class="text">none</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 10px;">
+        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+              <!----></i></div>
+        </div>
+        <div class="text">scale-down</div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-row">
+      <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
+        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+              <!----></i></div>
+        </div>
+        <div class="text">contain</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
+        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+              <!----></i></div>
+        </div>
+        <div class="text">cover</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
+        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+              <!----></i></div>
+        </div>
+        <div class="text">fill</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-right: 10px;">
+        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+              <!----></i></div>
+        </div>
+        <div class="text">none</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 10px;">
+        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+              <!----></i></div>
+        </div>
+        <div class="text">scale-down</div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-row">
+      <div class="van-col van-col--8" style="padding-right: 10px;">
+        <div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+              <!----></i></div>
+        </div>
+        <div class="text">默认提示</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 10px;">
+        <div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
+          <div class="van-image__loading">
+            <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
+          </div>
+        </div>
+        <div class="text">自定义提示</div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-row">
+      <div class="van-col van-col--8" style="padding-right: 10px;">
+        <div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+              <!----></i></div>
+        </div>
+        <div class="text">默认提示</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 10px;">
+        <div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+              <!----></i></div>
+        </div>
+        <div class="text">自定义提示</div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`default slot 1`] = `
+<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
+  <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+      <!----></i></div>Custom Default
+</div>
+`;
+
+exports[`error-icon prop 1`] = `
+<div class="van-image">
+  <div class="van-image__error"><i class="van-icon van-icon-error van-image__error-icon">
+      <!----></i></div>
+</div>
+`;
+
+exports[`lazy load 1`] = `
+<div class="van-image"><img class="van-image__img">
+  <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+      <!----></i></div>
+</div>
+`;
+
+exports[`lazy-load error event 1`] = `
+<div class="van-image">
+  <div class="van-image__error"><i class="van-icon van-icon-warning-o van-image__error-icon">
+      <!----></i></div>
+</div>
+`;
+
+exports[`lazy-load load event 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
+
+exports[`load event 1`] = `<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img"></div>`;
+
+exports[`load event 2`] = `
+<div class="van-image"><img src="" class="van-image__img">
+  <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+      <!----></i></div>
+</div>
+`;
+
+exports[`loading-icon prop 1`] = `
+<div class="van-image"><img class="van-image__img">
+  <div class="van-image__loading"><i class="van-icon van-icon-success van-image__loading-icon">
+      <!----></i></div>
+</div>
+`;
+
+exports[`radius prop 1`] = `
+<div class="van-image" style="overflow: hidden; border-radius: 3px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
+  <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+      <!----></i></div>
+</div>
+`;
+
+exports[`show-error prop 1`] = `<div class="van-image"></div>`;
+
+exports[`show-loading prop 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
@@ -0,0 +1,172 @@
+import { mount } from '../../../test';
+import VanImage from '..';
+
+test('click event', () => {
+  const wrapper = mount(VanImage);
+
+  wrapper.trigger('click');
+  expect(wrapper.emitted('click')[0][0]).toBeTruthy();
+  wrapper.destroy();
+});
+
+test('load event', () => {
+  const wrapper = mount(VanImage, {
+    propsData: {
+      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
+    },
+  });
+
+  wrapper.find('img').trigger('load');
+
+  expect(wrapper.emitted('load')[0][0]).toBeTruthy();
+  expect(wrapper).toMatchSnapshot();
+
+  wrapper.setProps({ src: '' });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('error event', () => {
+  const wrapper = mount(VanImage, {
+    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(VanImage, {
+    propsData: {
+      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      lazyLoad: true,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('lazy-load load event', (done) => {
+  const wrapper = mount(VanImage, {
+    propsData: {
+      lazyLoad: true,
+      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
+    },
+    mocks: {
+      $Lazyload: {
+        $on(eventName, hanlder) {
+          if (eventName === 'loaded') {
+            setTimeout(() => {
+              hanlder({ el: null });
+              hanlder({ el: wrapper.find('img').element });
+              expect(wrapper.emitted('load').length).toEqual(1);
+              expect(wrapper).toMatchSnapshot();
+              wrapper.destroy();
+            });
+          }
+        },
+        $off() {
+          done();
+        },
+      },
+    },
+  });
+});
+
+test('lazy-load error event', (done) => {
+  const wrapper = mount(VanImage, {
+    propsData: {
+      lazyLoad: true,
+    },
+    mocks: {
+      $Lazyload: {
+        $on(eventName, hanlder) {
+          if (eventName === 'error') {
+            setTimeout(() => {
+              hanlder({ el: null });
+              hanlder({ el: wrapper.find('img').element });
+              expect(wrapper.emitted('error').length).toEqual(1);
+              expect(wrapper).toMatchSnapshot();
+              wrapper.destroy();
+            });
+          }
+        },
+        $off() {
+          done();
+        },
+      },
+    },
+  });
+});
+
+test('show-loading prop', () => {
+  const wrapper = mount(VanImage, {
+    propsData: {
+      showLoading: false,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('show-error prop', () => {
+  const wrapper = mount(VanImage, {
+    propsData: {
+      showError: false,
+      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
+    },
+  });
+
+  wrapper.find('img').trigger('error');
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('error-icon prop', () => {
+  const wrapper = mount(VanImage, {
+    propsData: {
+      errorIcon: 'error',
+      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
+    },
+  });
+
+  wrapper.find('img').trigger('error');
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('loading-icon prop', () => {
+  const wrapper = mount(VanImage, {
+    propsData: {
+      loadingIcon: 'success',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('radius prop', () => {
+  const wrapper = mount(VanImage, {
+    propsData: {
+      radius: 3,
+      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('default slot', () => {
+  const wrapper = mount(VanImage, {
+    propsData: {
+      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
+    },
+    scopedSlots: {
+      default: () => 'Custom Default',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});