feat: NavBar component

src-next/nav-bar/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-nav-bar van-hairline--bottom">
+      <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
+          <!----></i><span class="van-nav-bar__text">返回</span></div>
+      <div class="van-nav-bar__title van-ellipsis">标题</div>
+      <div class="van-nav-bar__right"><span class="van-nav-bar__text">按钮</span></div>
+    </div>
+  </div>
+  <div>
+    <div class="van-nav-bar van-hairline--bottom">
+      <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
+          <!----></i><span class="van-nav-bar__text">返回</span></div>
+      <div class="van-nav-bar__title van-ellipsis">标题</div>
+      <div class="van-nav-bar__right"><i class="van-icon van-icon-search" style="font-size: 18px;">
+          <!----></i></div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`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__left"></div>
+    <div class="van-nav-bar__title van-ellipsis"></div>
+    <div class="van-nav-bar__right"></div>
+  </div>
+</div>
+`;
+
+exports[`render left & right slot 1`] = `
+<div class="van-nav-bar van-hairline--bottom">
+  <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>
+`;
+
+exports[`render title slot 1`] = `
+<div class="van-nav-bar van-hairline--bottom">
+  <div class="van-nav-bar__left"></div>
+  <div class="van-nav-bar__title van-ellipsis">Custom Title</div>
+  <div class="van-nav-bar__right"></div>
+</div>
+`;

src-next/nav-bar/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);

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

@@ -0,0 +1,60 @@
+import NavBar from '..';
+import { mount, mockGetBoundingClientRect } from '../../../test';
+
+test('render left & right slot', () => {
+  const wrapper = mount(NavBar, {
+    scopedSlots: {
+      left: () => 'Custom Left',
+      right: () => 'Custom Right',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render title slot', () => {
+  const wrapper = mount(NavBar, {
+    scopedSlots: {
+      title: () => 'Custom Title',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('placeholder prop', () => {
+  const restore = mockGetBoundingClientRect({ height: 50 });
+
+  const wrapper = mount(NavBar, {
+    propsData: {
+      fixed: true,
+      placeholder: true,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+
+  restore();
+});
+
+test('click-left event', () => {
+  const wrapper = mount(NavBar, {
+    propsData: {
+      leftText: 'left',
+    },
+  });
+
+  wrapper.find('.van-nav-bar__left').trigger('click');
+  expect(wrapper.emitted('click-left')).toBeTruthy();
+});
+
+test('click-right event', () => {
+  const wrapper = mount(NavBar, {
+    propsData: {
+      rightText: 'right',
+    },
+  });
+
+  wrapper.find('.van-nav-bar__right').trigger('click');
+  expect(wrapper.emitted('click-right')).toBeTruthy();
+});