test(NavBar): update test cases

src/action-bar-button/test/__snapshots__/index.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render default slot and match snapshot 1`] = `
+exports[`should render default slot correctly 1`] = `
 <button type="button" class="van-button van-button--default van-button--large van-action-bar-button">
   <div class="van-button__content">
     <!----><span class="van-button__text">Content</span>

src/action-bar-button/test/index.spec.js

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import ActionBarButton from '..';
 
-test('should render default slot and match snapshot', () => {
+test('should render default slot correctly', () => {
   const wrapper = mount(ActionBarButton, {
     slots: {
       default: 'Content',

src/action-bar-icon/test/__snapshots__/index.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render default slot and match snapshot 1`] = `
+exports[`should render default slot correctly 1`] = `
 <div role="button" class="van-action-bar-icon" tabindex="0">
   <div class="van-badge__wrapper van-icon van-icon-undefined van-action-bar-icon__icon">
     <!---->
@@ -10,7 +10,7 @@ exports[`should render default slot and match snapshot 1`] = `
 </div>
 `;
 
-exports[`should render icon slot and match snapshot 1`] = `
+exports[`should render icon slot correctly 1`] = `
 <div role="button" class="van-action-bar-icon" tabindex="0">
   <div class="van-badge__wrapper van-action-bar-icon__icon">Custom Icon
     <!---->
@@ -18,14 +18,14 @@ exports[`should render icon slot and match snapshot 1`] = `
 </div>
 `;
 
-exports[`should render icon slot with badge and match snapshot 1`] = `
+exports[`should render icon slot with badge correctly 1`] = `
 <div role="button" class="van-action-bar-icon" tabindex="0">
   <div class="van-badge__wrapper van-action-bar-icon__icon">Custom Icon<div class="van-badge van-badge--fixed">1</div>
   </div>Content
 </div>
 `;
 
-exports[`should render icon slot with dot and match snapshot 1`] = `
+exports[`should render icon slot with dot correctly 1`] = `
 <div role="button" class="van-action-bar-icon" tabindex="0">
   <div class="van-badge__wrapper van-action-bar-icon__icon">Custom Icon<div class="van-badge van-badge--dot van-badge--fixed">
       <!---->

src/action-bar-icon/test/index.spec.js

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import ActionBarIcon from '..';
 
-test('should render default slot and match snapshot', () => {
+test('should render default slot correctly', () => {
   const wrapper = mount(ActionBarIcon, {
     slots: {
       default: 'Content',
@@ -10,7 +10,7 @@ test('should render default slot and match snapshot', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should render icon slot and match snapshot', () => {
+test('should render icon slot correctly', () => {
   const wrapper = mount(ActionBarIcon, {
     slots: {
       default: 'Content',
@@ -21,7 +21,7 @@ test('should render icon slot and match snapshot', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should render icon slot with badge and match snapshot', () => {
+test('should render icon slot with badge correctly', () => {
   const wrapper = mount(ActionBarIcon, {
     props: {
       badge: '1',
@@ -35,7 +35,7 @@ test('should render icon slot with badge and match snapshot', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should render icon slot with dot and match snapshot', () => {
+test('should render icon slot with dot correctly', () => {
   const wrapper = mount(ActionBarIcon, {
     props: {
       dot: true,

src/action-sheet/test/__snapshots__/index.spec.js.snap

@@ -7,7 +7,7 @@ exports[`should allow to custom close icon with closeIcon prop 1`] = `
   <!----></i>
 `;
 
-exports[`should render default slot and match snapshot 1`] = `
+exports[`should render default slot correctly 1`] = `
 <transition-stub>
   <div class="van-overlay">
     <!---->
@@ -28,11 +28,11 @@ exports[`should render default slot and match snapshot 1`] = `
 </transition-stub>
 `;
 
-exports[`should render description and match snapshot 1`] = `<div class="van-action-sheet__description">This is a description</div>`;
+exports[`should render description correctly 1`] = `<div class="van-action-sheet__description">This is a description</div>`;
 
 exports[`should render description slot when match snapshot 1`] = `<div class="van-action-sheet__description">Custom Description</div>`;
 
-exports[`should render subname and match snapshot 1`] = `
+exports[`should render subname correctly 1`] = `
 <button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span>
   <div class="van-action-sheet__subname">Subname</div></button>
 `;

src/action-sheet/test/index.spec.js

@@ -64,7 +64,7 @@ test('should emit cancel event after clicking cancel button', () => {
   expect(wrapper.emitted('cancel').length).toEqual(1);
 });
 
-test('should render subname and match snapshot', () => {
+test('should render subname correctly', () => {
   const wrapper = mount(ActionSheet, {
     props: {
       show: true,
@@ -84,7 +84,7 @@ test('should render content after disabling the lazy-render prop', async () => {
   expect(wrapper.find('.van-action-sheet__content').exists()).toBeTruthy();
 });
 
-test('should render default slot and match snapshot', () => {
+test('should render default slot correctly', () => {
   const wrapper = mount(ActionSheet, {
     props: {
       show: true,
@@ -160,7 +160,7 @@ test('should allow to custom close icon with closeIcon prop', () => {
   expect(wrapper.find('.van-action-sheet__close').html()).toMatchSnapshot();
 });
 
-test('should render description and match snapshot', () => {
+test('should render description correctly', () => {
   const wrapper = mount(ActionSheet, {
     props: {
       show: true,

src/badge/test/__snapshots__/index.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render content slot and match snapshot 1`] = `<div class="van-badge">Custom Content</div>`;
+exports[`should render content slot correctly 1`] = `<div class="van-badge">Custom Content</div>`;
 
 exports[`should render nothing when badge is empty string 1`] = `<!---->`;
 

src/badge/test/index.spec.js

@@ -31,7 +31,7 @@ test('should render nothing when badge is zero', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should render content slot and match snapshot', () => {
+test('should render content slot correctly', () => {
   const wrapper = mount(Badge, {
     slots: {
       content: () => 'Custom Content',

src/button/test/__snapshots__/index.spec.js.snap

@@ -23,7 +23,7 @@ exports[`should render icon in the right side when setting icon-position to righ
 </button>
 `;
 
-exports[`should render loading slot and match snapshot 1`] = `
+exports[`should render loading slot correctly 1`] = `
 <button type="button" class="van-button van-button--default van-button--normal van-button--loading">
   <div class="van-button__content">Custom Loading
     <!---->

src/button/test/index.spec.js

@@ -51,7 +51,7 @@ test('should change icon class prefix when using icon-prefix prop', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should render loading slot and match snapshot', () => {
+test('should render loading slot correctly', () => {
   const wrapper = mount(Button, {
     props: {
       loading: true,

src/cell-group/test/__snapshots__/index.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render title slot and match snapshot 1`] = `
+exports[`should render title slot correctly 1`] = `
 <div class="van-cell-group__title">Custom Title</div>
 <div class="van-cell-group van-hairline--top-bottom">
   <!---->

src/cell-group/test/index.spec.js

@@ -1,7 +1,7 @@
 import CellGroup from '..';
 import { mount } from '@vue/test-utils';
 
-test('should render title slot and match snapshot', () => {
+test('should render title slot correctly', () => {
   const wrapper = mount(CellGroup, {
     slots: {
       title: () => 'Custom Title',

src/cell/test/__snapshots__/index.spec.js.snap

@@ -19,7 +19,7 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = `
 </div>
 `;
 
-exports[`should render default slot and match snapshot 1`] = `
+exports[`should render default slot correctly 1`] = `
 <div class="van-cell">
   <!---->
   <!---->
@@ -29,7 +29,7 @@ exports[`should render default slot and match snapshot 1`] = `
 </div>
 `;
 
-exports[`should render extra slot and match snapshot 1`] = `
+exports[`should render extra slot correctly 1`] = `
 <div class="van-cell">
   <!---->
   <!---->
@@ -37,7 +37,7 @@ exports[`should render extra slot and match snapshot 1`] = `
   <!---->Custom Extra</div>
 `;
 
-exports[`should render icon slot and match snapshot 1`] = `
+exports[`should render icon slot correctly 1`] = `
 <div class="van-cell">Custom Icon
   <!---->
   <!---->
@@ -46,7 +46,7 @@ exports[`should render icon slot and match snapshot 1`] = `
 </div>
 `;
 
-exports[`should render label slot and match snapshot 1`] = `
+exports[`should render label slot correctly 1`] = `
 <div class="van-cell">
   <!---->
   <div class="van-cell__title"><span>Title</span>
@@ -58,7 +58,7 @@ exports[`should render label slot and match snapshot 1`] = `
 </div>
 `;
 
-exports[`should render title slot and match snapshot 1`] = `
+exports[`should render title slot correctly 1`] = `
 <div class="van-cell">
   <!---->
   <div class="van-cell__title">Custom Title

src/cell/test/index.spec.js

@@ -1,7 +1,7 @@
 import Cell from '..';
 import { mount } from '@vue/test-utils';
 
-test('should render default slot and match snapshot', () => {
+test('should render default slot correctly', () => {
   const wrapper = mount(Cell, {
     slots: {
       default: () => 'Custom Default',
@@ -10,7 +10,7 @@ test('should render default slot and match snapshot', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should render title slot and match snapshot', () => {
+test('should render title slot correctly', () => {
   const wrapper = mount(Cell, {
     slots: {
       title: () => 'Custom Title',
@@ -19,7 +19,7 @@ test('should render title slot and match snapshot', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should render label slot and match snapshot', () => {
+test('should render label slot correctly', () => {
   const wrapper = mount(Cell, {
     props: {
       title: 'Title',
@@ -31,7 +31,7 @@ test('should render label slot and match snapshot', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should render icon slot and match snapshot', () => {
+test('should render icon slot correctly', () => {
   const wrapper = mount(Cell, {
     slots: {
       icon: () => 'Custom Icon',
@@ -40,7 +40,7 @@ test('should render icon slot and match snapshot', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should render extra slot and match snapshot', () => {
+test('should render extra slot correctly', () => {
   const wrapper = mount(Cell, {
     slots: {
       extra: () => 'Custom Extra',

src/nav-bar/index.tsx

@@ -58,9 +58,7 @@ export default createComponent({
         return slots.right();
       }
 
-      if (props.rightText) {
-        return <span class={bem('text')}>{props.rightText}</span>;
-      }
+      return <span class={bem('text')}>{props.rightText}</span>;
     };
 
     const renderNavBar = () => {

src/nav-bar/test/__snapshots__/index.legacy.js.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render left/right slot and match snapshot 1`] = `
-<div class="van-nav-bar van-hairline--bottom">
-  <div class="van-nav-bar__content">
-    <div class="van-nav-bar__left">Custom Left</div>
-    <div class="van-nav-bar__title van-ellipsis"></div>
-    <div class="van-nav-bar__right">Custom Right</div>
-  </div>
-</div>
-`;
-
-exports[`should render placeholder element when using placeholder prop 1`] = `
-<div class="van-nav-bar__placeholder" style="height: 50px;">
-  <div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
-    <div class="van-nav-bar__content">
-      <div class="van-nav-bar__title van-ellipsis"></div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`should render title slot and match snapshot 1`] = `
-<div class="van-nav-bar van-hairline--bottom">
-  <div class="van-nav-bar__content">
-    <div class="van-nav-bar__title van-ellipsis">Custom Title</div>
-  </div>
-</div>
-`;

src/nav-bar/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render left slot correctly 1`] = `<div class="van-nav-bar__left">Custom Left</div>`;
+
+exports[`should render left slot correctly 2`] = `<div class="van-nav-bar__right">Custom Right</div>`;
+
+exports[`should render placeholder element when using placeholder prop 1`] = `
+<div class="van-nav-bar__placeholder" style="height: 50px;">
+  <div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
+    <div class="van-nav-bar__content">
+      <!---->
+      <div class="van-nav-bar__title van-ellipsis">
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render title slot correctly 1`] = `<div class="van-nav-bar__title van-ellipsis">Custom Title</div>`;

src/nav-bar/test/index.spec.js

@@ -1,30 +1,38 @@
 import NavBar from '..';
-import { mount, mockGetBoundingClientRect } from '../../../test';
+import { mount, mockGetBoundingClientRect, later } from '../../../test';
 
-test('should render left/right slot and match snapshot', () => {
+test('should render left slot correctly', () => {
   const wrapper = mount(NavBar, {
     slots: {
       left: () => 'Custom Left',
+    },
+  });
+
+  expect(wrapper.find('.van-nav-bar__left').html()).toMatchSnapshot();
+});
+
+test('should render left slot correctly', () => {
+  const wrapper = mount(NavBar, {
+    slots: {
       right: () => 'Custom Right',
     },
   });
 
-  expect(wrapper.html()).toMatchSnapshot();
+  expect(wrapper.find('.van-nav-bar__right').html()).toMatchSnapshot();
 });
 
-test('should render title slot and match snapshot', () => {
+test('should render title slot correctly', () => {
   const wrapper = mount(NavBar, {
     slots: {
       title: () => 'Custom Title',
     },
   });
 
-  expect(wrapper.html()).toMatchSnapshot();
+  expect(wrapper.find('.van-nav-bar__title').html()).toMatchSnapshot();
 });
 
-test('should render placeholder element when using placeholder prop', () => {
+test('should render placeholder element when using placeholder prop', async () => {
   const restore = mockGetBoundingClientRect({ height: 50 });
-
   const wrapper = mount(NavBar, {
     props: {
       fixed: true,
@@ -32,8 +40,8 @@ test('should render placeholder element when using placeholder prop', () => {
     },
   });
 
+  await later();
   expect(wrapper.html()).toMatchSnapshot();
-
   restore();
 });
 
@@ -66,5 +74,16 @@ test('should have safe-area-inset-top class when using safe-area-inset-top prop'
     },
   });
 
-  expect(wrapper.contains('.van-nav-bar--safe-area-inset-top')).toBeTruthy();
+  expect(
+    wrapper.find('.van-nav-bar--safe-area-inset-top').exists()
+  ).toBeTruthy();
+});
+
+test('should change z-index when using z-index prop', () => {
+  const wrapper = mount(NavBar, {
+    props: {
+      zIndex: 100,
+    },
+  });
+  expect(wrapper.element.style.zIndex).toEqual('100');
 });