feat(navview): initial implementation (#62)

* feat(navview): init commit * feat(navview): default auto paneDisplayMode * feat(navview): custom pane header * feat(navview): nav items support * feat(navview): pane footer links * test(navview): covered navview item component * fix(navview): fixes for navview's appearence on mobile screens
arturmiz · Apr 23, 2019 · 2013d34 · 2013d34
1 parent 14d7c8b
commit 2013d34
Show file tree

Hide file tree

Showing 15 changed files with 814 additions and 1 deletion.
diff --git a/__tests__/Vuent.test.js b/__tests__/Vuent.test.js
@@ -10,6 +10,7 @@ import {
   VntIcon,
   VntInput,
   VntLink,
+  VntNavView,
   VntRadio,
   VntRating,
   VntSelect,
@@ -43,13 +44,14 @@ describe('Vuent', () => {
       expect(isInstalled(localVue, VntIcon)).toBe(true);
       expect(isInstalled(localVue, VntInput)).toBe(true);
       expect(isInstalled(localVue, VntLink)).toBe(true);
+      expect(isInstalled(localVue, VntNavView)).toBe(true);
       expect(isInstalled(localVue, VntRadio)).toBe(true);
       expect(isInstalled(localVue, VntRating)).toBe(true);
       expect(isInstalled(localVue, VntSelect)).toBe(true);
       expect(isInstalled(localVue, VntSlider)).toBe(true);
       expect(isInstalled(localVue, VntToggle)).toBe(true);
       expect(isInstalled(localVue, VntTabs)).toBe(true);
-      expect(countInstalledPlugins(localVue)).toBe(14);
+      expect(countInstalledPlugins(localVue)).toBe(15);
     });
 
     test('has $vuent instance object', () => {

diff --git a/__tests__/__snapshots__/navview.test.js.snap b/__tests__/__snapshots__/navview.test.js.snap
@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavView by default renders correctly 1`] = `
+<article class="vnt-navview">
+  <aside class="vnt-navview__pane vnt-navview__pane--auto">
+    <div>
+      <div class="vnt-navview__pane-header">
+        <button type="button" class="vnt-navview__pane-toggle"><span class="vnt-icon vnt-icon--global-navigation"></span></button>
+        <div class="vnt-navview__pane-title">
+
+        </div>
+      </div>
+      <ul class="vnt-navview__items"></ul>
+    </div>
+    <ul class="vnt-navview__pane-footer"></ul>
+  </aside>
+  <div class="vnt-navview__viewport">
+    <!---->
+    <section class="vnt-navview__content">
+      Content goes here
+    </section>
+  </div>
+</article>
+`;
+
+exports[`NavView generates correct structure renders correctly 1`] = `
+<article class="vnt-navview">
+  <aside class="vnt-navview__pane vnt-navview__pane--auto">
+    <div>
+      <div class="vnt-navview__pane-header">
+        <button type="button" class="vnt-navview__pane-toggle"><span class="vnt-icon vnt-icon--global-navigation"></span></button>
+        <div class="vnt-navview__pane-title">
+          App name
+        </div>
+      </div>
+      <ul class="vnt-navview__items">
+        <li class="vnt-navview__item-header">Nav item header</li>
+        <li class="vnt-navview__item vnt-navview__item--active">
+          <a href="#" class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon vnt-icon--save"></span> <span class="vnt-navview__item-label">Link 1</span></a>
+        </li>
+        <li class="vnt-navview__item-separator"></li>
+        <li class="vnt-navview__item">
+          <a href="#" class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon vnt-icon--contact"></span> <span class="vnt-navview__item-label">Link 2</span></a>
+        </li>
+      </ul>
+    </div>
+    <ul class="vnt-navview__pane-footer"></ul>
+  </aside>
+  <div class="vnt-navview__viewport">
+    <header class="vnt-navview__header">
+      <hgroup class="vnt-header">
+        <h1 class="vnt-header__header">Header</h1>
+      </hgroup>
+    </header>
+    <section class="vnt-navview__content">
+      Some content
+    </section>
+  </div>
+</article>
+`;
+
+exports[`NavView when using custom pane footer renders correctly 1`] = `
+<article class="vnt-navview">
+  <aside class="vnt-navview__pane vnt-navview__pane--auto">
+    <div>
+      <div class="vnt-navview__pane-header">
+        <button type="button" class="vnt-navview__pane-toggle"><span class="vnt-icon vnt-icon--global-navigation"></span></button>
+        <div class="vnt-navview__pane-title">
+          App name
+        </div>
+      </div>
+      <ul class="vnt-navview__items"></ul>
+    </div>
+    <ul class="vnt-navview__pane-footer">
+      <li class="vnt-navview__item">
+        <a href="#" class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon vnt-icon--contact"></span> <span class="vnt-navview__item-label">Account</span></a>
+      </li>
+      <li class="vnt-navview__item">
+        <a href="#" class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon vnt-icon--settings"></span> <span class="vnt-navview__item-label">Settings</span></a>
+      </li>
+    </ul>
+  </aside>
+  <div class="vnt-navview__viewport">
+    <!---->
+    <section class="vnt-navview__content">
+      Some content
+    </section>
+  </div>
+</article>
+`;
+
+exports[`NavView when using custom pane header renders correctly 1`] = `
+<article class="vnt-navview">
+  <aside class="vnt-navview__pane vnt-navview__pane--auto">
+    <div>
+      <div class="vnt-navview__pane-header">
+        <button type="button" class="vnt-navview__pane-toggle"><span class="vnt-icon vnt-icon--global-navigation"></span></button>
+        <div class="vnt-navview__pane-title">
+          <div>App name with logo</div>
+        </div>
+      </div>
+      <ul class="vnt-navview__items"></ul>
+    </div>
+    <ul class="vnt-navview__pane-footer"></ul>
+  </aside>
+  <div class="vnt-navview__viewport">
+    <!---->
+    <section class="vnt-navview__content">
+      Some content
+    </section>
+  </div>
+</article>
+`;
diff --git a/__tests__/__snapshots__/navviewItem.test.js.snap b/__tests__/__snapshots__/navviewItem.test.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavviewItem by default renders correctly 1`] = `
+<li class="vnt-navview__item">
+  <a href="#" class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon"></span> <span class="vnt-navview__item-label"></span></a>
+</li>
+`;
+
+exports[`NavviewItem when icon is set renders correctly 1`] = `
+<li class="vnt-navview__item">
+  <a href="#" class="vnt-navview__item-link"><span class="vnt-icon vnt-navview__item-icon vnt-icon--settings"></span> <span class="vnt-navview__item-label">Settings</span></a>
+</li>
+`;
diff --git a/__tests__/navview.test.js b/__tests__/navview.test.js
@@ -0,0 +1,128 @@
+import { createLocalVue, mount } from '@vue/test-utils';
+import { VntNavView } from '@/components';
+import { isInstalled } from './utils';
+
+describe('NavView', () => {
+  let localVue, wrapper;
+
+  beforeAll(() => {
+    localVue = createLocalVue();
+    localVue.use(VntNavView);
+  });
+
+  test('can be installed separately', () => {
+    expect(isInstalled(localVue, VntNavView)).toBe(true);
+  });
+
+  describe('by default', () => {
+
+    beforeAll(() => {
+      wrapper = mount(VntNavView, {
+        localVue
+      });
+    });
+
+    test('pane is hidden', () => {
+      expect(wrapper.vm.isPaneOpened).toBe(false);
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+  });
+
+  describe('generates correct structure', () => {
+
+    beforeAll(() => {
+      wrapper = mount(VntNavView, {
+        localVue,
+        propsData: {
+          paneTitle: 'App name',
+          header: 'Header',
+        },
+        slots: {
+          default: `
+            <vnt-navview-items>
+              <vnt-navview-item-header>Nav item header</vnt-navview-item-header>
+              <vnt-navview-item icon="save" active>Link 1</vnt-navview-item>
+              <vnt-navview-item-separator />
+              <vnt-navview-item icon="contact">Link 2</vnt-navview-item>
+            </vnt-navview-items>
+            <vnt-navview-content>
+              Some content
+            </vnt-navview-content>
+          `
+        }
+      });
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('pane can be toggled', () => {
+      const menuButton = wrapper.find('.vnt-navview__pane-toggle');
+      menuButton.trigger('click');
+
+      expect(wrapper.vm.isPaneOpened).toBe(true);
+    });
+
+  });
+
+  describe('when using custom pane header', () => {
+
+    beforeAll(() => {
+      wrapper = mount(VntNavView, {
+        localVue,
+        propsData: {
+          paneTitle: 'App name'
+        },
+        slots: {
+          default: `
+            <vnt-navview-pane-header>
+              <div>App name with logo</div>
+            </vnt-navview-pane-header>
+            <vnt-navview-content>
+              Some content
+            </vnt-navview-content>
+          `
+        }
+      });
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+  });
+
+  describe('when using custom pane footer', () => {
+
+    beforeAll(() => {
+      wrapper = mount(VntNavView, {
+        localVue,
+        propsData: {
+          paneTitle: 'App name',
+        },
+        slots: {
+          default: `
+            <vnt-navview-pane-footer>
+              <vnt-navview-item icon="contact">Account</vnt-navview-item>
+              <vnt-navview-item icon="settings">Settings</vnt-navview-item>
+            </vnt-navview-pane-footer>
+            <vnt-navview-content>
+              Some content
+            </vnt-navview-content>
+          `
+        }
+      });
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+  });
+
+});
diff --git a/__tests__/navviewItem.test.js b/__tests__/navviewItem.test.js
@@ -0,0 +1,76 @@
+import { mount } from '@vue/test-utils';
+import VntNavviewItem from '@/components/navview/MenuItem.vue';
+
+describe('NavviewItem', () => {
+  let wrapper;
+
+  describe('by default', () => {
+
+    beforeAll(() => {
+      wrapper = mount(VntNavviewItem);
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('is not active', () => {
+      expect(wrapper.vm.active).toBe(false);
+    });
+
+    test('icon is null', () => {
+      expect(wrapper.vm.icon).toBeNull();
+    });
+
+    test('click handler is undefined', () => {
+      expect(wrapper.vm.click).toBeUndefined();
+    });
+
+    test('when clicked, no error is thrown', () => {
+      expect(() => {
+        wrapper.find('a').trigger('click');
+      }).not.toThrow();
+    });
+
+  });
+
+  describe('when icon is set', () => {
+
+    beforeAll(() => {
+      wrapper = mount(VntNavviewItem, {
+        propsData: {
+          icon: 'settings'
+        },
+        slots: {
+          default: 'Settings'
+        }
+      });
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+  });
+
+  describe('when click handler is given', () => {
+    let mockClick;
+
+    beforeAll(() => {
+      mockClick = jest.fn();
+
+      wrapper = mount(VntNavviewItem, {
+        propsData: {
+          click: mockClick
+        }
+      });
+    });
+
+    test('when clicked, click handler is invoked', () => {
+      wrapper.find('a').trigger('click');
+      expect(mockClick).toHaveBeenCalled();
+    });
+
+  });
+
+});
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -11,6 +11,7 @@ module.exports = {
         'icon',
         'input',
         'link',
+        'navview',
         'radio',
         'rating',
         'select',

diff --git a/src/components/index.js b/src/components/index.js
@@ -7,6 +7,7 @@ export { default as VntHeader } from './header';
 export { default as VntIcon } from './icon';
 export { default as VntInput } from './input';
 export { default as VntLink } from './link';
+export { default as VntNavView } from './navview';
 export { default as VntRadio } from './radio';
 export { default as VntRating } from './rating';
 export { default as VntSelect } from './select';