-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
15 changed files
with
814 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
|
||
}); | ||
|
||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
|
||
}); | ||
|
||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,6 +11,7 @@ module.exports = { | |
'icon', | ||
'input', | ||
'link', | ||
'navview', | ||
'radio', | ||
'rating', | ||
'select', | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.