feat: add menu test (#1080)

src/packages/__VUE/divider/__tests__/__snapshots__/divider.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`slot: html should contain customer text 1`] = `"<div class=\\"nut-divider nut-divider-center nut-divider-hairline\\">customer text</div>"`;

src/packages/__VUE/divider/__tests__/divider.spec.ts

@@ -1,13 +1,13 @@
 import { mount } from '@vue/test-utils';
 import Divider from '../index.vue';
 
-test('slot: html should contain test text', () => {
+test('slot: html should contain customer text', () => {
   const wrapper = mount(Divider, {
     slots: {
-      default: 'test text'
+      default: 'customer text'
     }
   });
-  expect(wrapper.html()).toContain('test text');
+  expect(wrapper.html()).toContain('customer text');
   expect(wrapper.html()).toMatchSnapshot();
 });
 
@@ -17,7 +17,7 @@ test('content-position props: classes should contain nut-divider-left', () => {
       contentPosition: 'left'
     },
     slots: {
-      default: 'test text'
+      default: 'customer text'
     }
   });
   const divider: any = wrapper.find('.nut-divider');
@@ -30,7 +30,7 @@ test('dashed props: classes should contain nut-divider-dashed', () => {
       dashed: true
     },
     slots: {
-      default: 'test text'
+      default: 'customer text'
     }
   });
 
@@ -38,7 +38,7 @@ test('dashed props: classes should contain nut-divider-dashed', () => {
   expect(divider.classes()).toContain('nut-divider-dashed');
 });
 
-test('customer style: should ', () => {
+test('customer style: element color should be rgb(25, 137, 250) etc', () => {
   const wrapper = mount(Divider, {
     props: {
       style: { color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }
@@ -49,3 +49,12 @@ test('customer style: should ', () => {
   expect((_html.element as HTMLElement).style.borderColor).toBe('#1989fa');
   expect((_html.element as HTMLElement).style.padding).toBe('0px 16px');
 });
+
+test('hairline props: classes should contain nut-divider-hairline default, after set hairline false, nut-divider-hairline disappear', async () => {
+  const wrapper = mount(Divider);
+
+  const divider: any = wrapper.find('.nut-divider');
+  expect(divider.classes()).toContain('nut-divider-hairline');
+  await wrapper.setProps({ hairline: false });
+  expect(wrapper.classes('nut-divider-hairline')).toBe(false);
+});

src/packages/__VUE/menu/__tests__/menu.spec.ts

@@ -0,0 +1,195 @@
+import { config, mount } from '@vue/test-utils';
+import Menu from '../index.vue';
+import MenuItem from '../../menuitem/index.vue';
+import NutIcon from '../../icon/index.vue';
+import { h, nextTick } from 'vue';
+
+const options1 = [
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+];
+
+const options2 = [
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+];
+
+const options3 = [
+  { text: '全部商品', value: 0 },
+  { text: '家庭清洁/纸品', value: 1 },
+  { text: '个人护理', value: 2 },
+  { text: '美妆护肤', value: 3 },
+  { text: '食品饮料', value: 4 },
+  { text: '家用电器', value: 5 },
+  { text: '母婴', value: 6 },
+  { text: '数码', value: 7 },
+  { text: '电脑、办公', value: 8 },
+  { text: '运动户外', value: 9 },
+  { text: '厨具', value: 10 },
+  { text: '医疗保健', value: 11 },
+  { text: '酒类', value: 12 },
+  { text: '生鲜', value: 13 },
+  { text: '家具', value: 14 },
+  { text: '传统滋补', value: 15 },
+  { text: '汽车用品', value: 16 },
+  { text: '家居日用', value: 17 }
+];
+
+// 所有的测试用例之前执行一次
+beforeAll(() => {
+  config.global.components = {
+    NutIcon,
+    MenuItem,
+    NutMenuItem: MenuItem,
+    NutMenu: Menu
+  };
+});
+
+test('menu item cols props: nut-menu-item__option flex-basis should be 50%', () => {
+  const wrapper = mount(Menu, {
+    slots: {
+      default: h(MenuItem, {
+        modelValue: 0,
+        cols: 2,
+        options: options3
+      })
+    }
+  });
+
+  expect(wrapper.find<HTMLElement>('.nut-menu-item__option').element.style.flexBasis).toEqual('50%');
+});
+
+test('menu item options props: html should contain options3 text', () => {
+  const wrapper = mount(Menu, {
+    slots: {
+      default: h(MenuItem, {
+        modelValue: 0,
+        options: options3
+      })
+    }
+  });
+
+  expect(wrapper.html()).toContain('全部商品');
+});
+
+test('menu item customer text: nut-menu-item__content html should contain customer text', () => {
+  const component = {
+    template: `<nut-menu>
+      <nut-menu-item v-model="value1" :options="options1" />
+      <nut-menu-item>
+        <div>customer text</div>
+      </nut-menu-item>
+    </nut-menu>`,
+    data() {
+      return {
+        options1,
+        value1: 0
+      };
+    }
+  };
+
+  const wrapper = mount(component);
+
+  expect(wrapper.html()).toContain('customer text');
+});
+
+test('menu item disabled props: nut-menu__item classes should contain disabled', async () => {
+  const wrapper = mount(Menu, {
+    slots: {
+      default: h(MenuItem, {
+        modelValue: 0,
+        disabled: true,
+        options: options1
+      })
+    }
+  });
+  await nextTick();
+
+  const barItem: any = wrapper.find('.nut-menu__item');
+  expect(barItem.classes()).toContain('disabled');
+});
+
+test('menu item title props: nut-menu__title-text html should contain customer title', async () => {
+  const wrapper = mount(Menu, {
+    slots: {
+      default: h(MenuItem, {
+        title: 'customer title',
+        options: options1
+      })
+    }
+  });
+  await nextTick();
+
+  expect(wrapper.find('.nut-menu__title-text').html()).toContain('customer title');
+});
+
+test('menu item title icon props: nut-menu__title-text html should contain customer title', async () => {
+  const wrapper = mount(Menu, {
+    slots: {
+      default: h(MenuItem, {
+        titleIcon: 'plus',
+        modelValue: 0,
+        options: options1
+      })
+    }
+  });
+  await nextTick();
+
+  const barItem: any = wrapper.find('.nut-menu__item .nut-menu__title i');
+  expect(barItem.classes()).toContain('nut-icon-plus');
+});
+
+test('active color props: i in active nut-menu-item__option color and active nut-menu__item color should be both green', async () => {
+  const wrapper = mount(Menu, {
+    props: {
+      activeColor: 'green'
+    },
+    slots: {
+      default: h(MenuItem, {
+        modelValue: 0,
+        options: options1
+      })
+    }
+  });
+
+  await nextTick();
+  wrapper.find('.nut-menu__item').trigger('click');
+  await nextTick();
+
+  expect(wrapper.find<HTMLElement>('.nut-menu__item.active').element.style.color).toEqual('green');
+  expect(wrapper.find<HTMLElement>('.nut-menu-item__option.active i').element.style.color).toEqual('green');
+});
+
+test('menu item change props: value2 should be b after click', async () => {
+  const wrapper = mount({
+    components: {
+      NutMenu: Menu,
+      NutMenuItem: MenuItem
+    },
+    template: `
+    <nut-menu>
+    <nut-menu-item v-model="value2" @change="handleChange" :options="options2" />
+  </nut-menu>
+    `,
+    data: () => {
+      return {
+        value2: 'a',
+        options2
+      };
+    },
+    methods: {
+      handleChange(val: any) {
+        this.value2 = val;
+      }
+    }
+  });
+
+  await nextTick();
+  const tabbarItem: any = wrapper.findAll('.nut-menu-item__option');
+
+  tabbarItem[1].trigger('click');
+
+  expect(wrapper.vm.value2).toBe('b');
+});