[new feature] add DropdownMenu component

2019-05-06 20:12:37 +08:00
parent 9c9642ee1f
commit a26be4819c
18 changed files with 816 additions and 0 deletions
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-dropdown-menu van-hairline--top-bottom">
+      <div class="van-dropdown-item" style="top:0px;z-index:10;display:none;">
+        <!---->
+      </div>
+      <div class="van-dropdown-item" style="top:0px;z-index:10;display:none;">
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-dropdown-menu van-hairline--top-bottom">
+      <div class="van-dropdown-item" style="top:0px;z-index:10;display:none;">
+        <!---->
+      </div>
+      <div class="van-dropdown-item" style="top:0px;z-index:10;display:none;">
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`click option 1`] = `
+<div class="van-dropdown-menu van-hairline--top-bottom">
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title" style=""><span>A</span></div>
+      </div>
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>B</span></div>
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+            <!----></i></div>
+      </div>
+    </div>
+  </div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`destroy one item 1`] = `
+<div class="van-dropdown-menu van-hairline--top-bottom">
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
+  <!---->
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`didn\`t find matched option 1`] = `
+<div class="van-dropdown-menu van-hairline--top-bottom">
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+    <!---->
+  </div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`show dropdown item 1`] = `
+<div class="van-dropdown-menu van-hairline--top-bottom">
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active" style="color: rgb(25, 137, 250);">A</span></div>
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+            <!----></i></div>
+      </div>
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title"><span>B</span></div>
+      </div>
+    </div>
+    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; z-index: 2000; position: absolute;"></div>
+  </div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`show dropdown item 2`] = `
+<div class="van-dropdown-menu van-hairline--top-bottom">
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+            <!----></i></div>
+      </div>
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title"><span>B</span></div>
+      </div>
+    </div>
+    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2000; z-index: 2000; position: absolute;"></div>
+  </div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`show dropdown item 3`] = `
+<div class="van-dropdown-menu van-hairline--top-bottom">
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active" style="color: rgb(25, 137, 250);">A</span></div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+            <!----></i></div>
+      </div>
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title"><span>B</span></div>
+      </div>
+    </div>
+  </div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
+        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
+            <!----></i></div>
+      </div>
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title"><span>B</span></div>
+      </div>
+    </div>
+    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; z-index: 2001; position: absolute;"></div>
+  </div>
+</div>
+`;
+
+exports[`title prop 1`] = `
+<div class="van-dropdown-menu van-hairline--top-bottom">
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+    <!---->
+  </div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+    <!---->
+  </div>
+</div>
+`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import demoTest from '../../../test/demo-test';
+
+demoTest(Demo);
@@ -0,0 +1,100 @@
+import { mount, later } from '../../../test/utils';
+import DropdownMenu from '..';
+import DropdownItem from '../../dropdown-item';
+
+function renderWrapper(options = {}) {
+  return mount({
+    template: `
+      <dropdown-menu>
+        <dropdown-item v-model="value" :title="title" :options="options" />
+        <dropdown-item v-model="value" :title="title" :options="options" />
+      </dropdown-menu>
+    `,
+    components: {
+      DropdownItem,
+      DropdownMenu
+    },
+    data() {
+      return {
+        value: options.value || 0,
+        title: options.title || '',
+        options: [
+          { text: 'A', value: 0 },
+          { text: 'B', value: 1 }
+        ]
+      };
+    }
+  });
+}
+
+test('show dropdown item', async () => {
+  const wrapper = renderWrapper();
+
+  await later();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+
+  titles.at(0).trigger('click');
+  expect(wrapper).toMatchSnapshot();
+
+  titles.at(0).trigger('click');
+  expect(wrapper).toMatchSnapshot();
+
+  titles.at(1).trigger('click');
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('click option', async () => {
+  const wrapper = renderWrapper();
+
+  await later();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+  titles.at(0).trigger('click');
+
+  const options = wrapper.findAll('.van-dropdown-item .van-cell');
+
+  options.at(1).trigger('click');
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('title prop', async () => {
+  const wrapper = renderWrapper({ title: 'Title' });
+  await later();
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('didn`t find matched option', async () => {
+  const wrapper = renderWrapper({ value: -1 });
+  await later();
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('destroy one item', async () => {
+  const wrapper = mount({
+    template: `
+      <dropdown-menu>
+        <dropdown-item v-if="render" v-model="value" :options="options" />
+        <dropdown-item v-model="value" :options="options" />
+      </dropdown-menu>
+    `,
+    components: {
+      DropdownItem,
+      DropdownMenu
+    },
+    data() {
+      return {
+        value: 0,
+        render: true,
+        options: [
+          { text: 'A', value: 0 },
+          { text: 'B', value: 1 }
+        ]
+      };
+    }
+  });
+
+  await later();
+  wrapper.setData({ render: false });
+  expect(wrapper).toMatchSnapshot();
+});