@vue/test-utils#RouterLinkStub TypeScript Examples
The following examples show how to use
@vue/test-utils#RouterLinkStub.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: NeonDropdownMenu.spec.ts From neon with MIT License | 4 votes |
|
describe('NeonDropdownMenu', () => {
const model = [
{
key: 'k1',
label: 'Clickable option',
icon: 'user',
separatorBefore: true,
},
{
key: 'k2',
label: 'External link',
href: 'http://getskeleton.com',
icon: 'download',
separatorBefore: true,
},
{
key: 'k3',
label: 'Internal link',
href: '/presentation/dropdown',
icon: 'images',
separatorBefore: false,
},
{
key: 'k4',
label: 'Disabled link',
href: '/presentation/dropdown',
icon: 'lock',
separatorBefore: true,
disabled: true,
},
];
const groupedModel = [
{
key: 'k1',
label: 'Clickable option',
icon: 'user',
separatorBefore: true,
isGroup: true,
},
{
key: 'k2',
label: 'External link',
href: 'http://getskeleton.com',
icon: 'download',
separatorBefore: true,
grouped: true,
},
];
it('renders default color', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-dropdown-menu--low-contrast').element).toBeDefined();
expect(wrapper.find('.neon-dropdown--low-contrast').element).toBeDefined();
});
it('renders color', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model, color: NeonFunctionalColor.Primary },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-dropdown-menu--primary').element).toBeDefined();
expect(wrapper.find('.neon-dropdown--primary').element).toBeDefined();
});
it('renders default size', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.findAll('.neon-dropdown-menu__item--m').length).toEqual(model.length);
expect(wrapper.find('.neon-dropdown--m').element).toBeDefined();
});
it('renders size', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model, size: NeonSize.Large },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.findAll('.neon-dropdown-menu__item--l').length).toEqual(model.length);
expect(wrapper.find('.neon-dropdown--l').element).toBeDefined();
});
it('renders openOnHover', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model, openOnHover: true },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-dropdown--open-on-hover').element).toBeDefined();
});
it('renders enabled', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-dropdown--disabled').element).toBeUndefined();
});
it('renders disabled', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model, disabled: true },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-dropdown--disabled').element).toBeDefined();
});
it('renders correct number of menu items', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.findAll('.neon-dropdown-menu__item').length).toEqual(model.length);
});
it('renders menu item icons', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.findAll('.neon-dropdown-menu__item .neon-icon').length).toEqual(model.length);
});
it('renders menu item label', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-dropdown-menu__item:first-child .neon-dropdown-menu__item-label').text()).toEqual(
model[0].label,
);
});
it('renders disabled menu items', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-dropdown-menu__item--disabled').element).toBeDefined();
expect(wrapper.find('.neon-dropdown-menu__item--disabled .neon-icon--disabled').element).toBeDefined();
});
it('renders menu item separators', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.findAll('.neon-dropdown-menu__item--separator-before').length).toEqual(3);
});
it('renders grouped', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model: groupedModel },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(
wrapper.find('.neon-dropdown-menu__item:first-child.neon-dropdown-menu__item--group-title').element,
).toBeDefined();
expect(
wrapper.find('.neon-dropdown-menu__item:last-child.neon-dropdown-menu__item--grouped').element,
).toBeDefined();
});
it('emits click event', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when
wrapper.find('.neon-dropdown-menu__item:first-child .neon-dropdown-menu__item-container').trigger('click');
// then
expect(wrapper.emitted().click[0]).toEqual([model[0]]);
});
it('emits click event space keydown', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
dropdownMenu.highlightedIndex = 0;
dropdownMenu.highlightedKey = model[0].key;
// when
document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Space' }));
// then
expect(wrapper.emitted().click[0]).toEqual([model[0]]);
});
it('emits click event enter keydown', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
dropdownMenu.highlightedIndex = 0;
dropdownMenu.highlightedKey = model[0].key;
// when
document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Enter' }));
// then
expect(wrapper.emitted().click[0]).toEqual([model[0]]);
});
it('does not emit click event when disabled', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when
wrapper.find('.neon-dropdown-menu__item:last-child .neon-dropdown-menu__item-container').trigger('click');
// then
expect(wrapper.emitted().click).toBeUndefined();
});
it('does not emit click event when disabled and space keydown', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
dropdownMenu.highlightedIndex = 3;
dropdownMenu.highlightedKey = model[3].key;
// when
document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Space' }));
// then
expect(wrapper.emitted().click).toBeUndefined();
});
it('does not emit click event when disabled and enter keydown', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
dropdownMenu.highlightedIndex = 3;
dropdownMenu.highlightedKey = model[3].key;
// when
document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Enter' }));
// then
expect(wrapper.emitted().click).toBeUndefined();
});
it('does not emit click event when href', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when
wrapper.find('.neon-dropdown-menu__item:nth-child(2) .neon-link').trigger('click');
// then
expect(wrapper.emitted().click).toBeUndefined();
});
it('does not emit click event when href and space keydown', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
dropdownMenu.highlightedIndex = 1;
dropdownMenu.highlightedKey = model[1].key;
// when
document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Space' }));
// then
expect(wrapper.emitted().click).toBeUndefined();
});
it('does not emit click event when href and enter keydown', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
dropdownMenu.highlightedIndex = 1;
dropdownMenu.highlightedKey = model[1].key;
// when
document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Enter' }));
// then
expect(wrapper.emitted().click).toBeUndefined();
});
it('navigate up', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
dropdownMenu.highlightedIndex = 1;
dropdownMenu.highlightedKey = model[1].key;
// when
// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-empty-function
document.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowUp' }));
// then
expect(dropdownMenu.highlightedIndex).toEqual(0);
});
it('navigate up first item', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
dropdownMenu.highlightedIndex = 0;
dropdownMenu.highlightedKey = model[0].key;
// when
document.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowUp' }));
// then
expect(dropdownMenu.highlightedIndex).toEqual(0);
});
it('navigate down', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
dropdownMenu.highlightedIndex = 1;
dropdownMenu.highlightedKey = model[1].key;
// when
document.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowDown' }));
// then
expect(dropdownMenu.highlightedIndex).toEqual(2);
});
it('navigate down reverse', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model, placement: NeonDropdownPlacement.TopLeft },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
dropdownMenu.highlightedIndex = 1;
dropdownMenu.highlightedKey = model[1].key;
// when
document.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowDown' }));
// then
expect(dropdownMenu.highlightedIndex).toEqual(0);
});
it('tab closes dropdown menu', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model, placement: NeonDropdownPlacement.TopLeft },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
// when
document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Tab' }));
// then
expect(dropdownMenu.open).toEqual(false);
});
it('alt+tab does not close dropdown menu', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model, placement: NeonDropdownPlacement.TopLeft },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
// when
document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Tab', altKey: true }));
// then
expect(dropdownMenu.open).toEqual(true);
});
it('escape closes dropdown menu', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model, placement: NeonDropdownPlacement.TopLeft },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
// when
document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Escape' }));
// then
expect(dropdownMenu.open).toEqual(false);
});
it('change highlighted on mouse over', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model, placement: NeonDropdownPlacement.TopLeft },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
dropdownMenu.highlightedIndex = 1;
dropdownMenu.highlightedKey = model[1].key;
// when
wrapper.find('.neon-dropdown-menu__item:first-child').trigger('mouseover');
// then
expect(dropdownMenu.highlightedIndex).toEqual(0);
});
it('removes keyboard handler on destroy', () => {
// given
document.addEventListener = jest.fn();
document.removeEventListener = jest.fn();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const wrapper: any = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
wrapper.destroy();
// then
expect(document.addEventListener).toHaveBeenCalled();
expect(document.removeEventListener).toHaveBeenCalled();
});
it('dropdown focus does not open menu', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
// when
dropdownMenu.dropdown.$emit('focus');
// then
expect(dropdownMenu.open).toEqual(false);
});
it('dropdown focus open menu when openOnHover', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model, openOnHover: true },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
// when
dropdownMenu.dropdown.$emit('focus');
// then
expect(dropdownMenu.open).toEqual(true);
});
it('dropdown blur does not close menu', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
// when
dropdownMenu.dropdown.$emit('blur');
// then
expect(dropdownMenu.open).toEqual(true);
});
it('dropdown blur closes menu', () => {
// given
const wrapper = mount(NeonDropdownMenu, {
propsData: { model, openOnHover: true },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
dropdownMenu.open = true;
// when
dropdownMenu.dropdown.$emit('blur');
// then
expect(dropdownMenu.open).toEqual(false);
});
it('scroll on navigate scrolls into view', () => {
// given
const scrollIntoView = NeonScrollUtils.scrollIntoView;
NeonScrollUtils.scrollIntoView = jest.fn();
const wrapper = mount(NeonDropdownMenu, {
propsData: { model },
stubs: {
RouterLink: RouterLinkStub,
},
});
const dropdownMenu = wrapper.vm as NeonDropdownMenuClass;
// when
dropdownMenu.scrollOnNavigate();
// then
expect(NeonScrollUtils.scrollIntoView).toHaveBeenCalled();
NeonScrollUtils.scrollIntoView = scrollIntoView;
});
});
Example #2
| Source File: NeonLink.spec.ts From neon with MIT License | 4 votes |
|
describe('NeonLink', () => {
it('renders default slot contents external link', () => {
// given
const slotValue = 'xd';
const href = 'http://www.getskeleton.com';
const wrapper = shallowMount(NeonLink, {
propsData: { href },
slots: {
default: `<p>${slotValue}</p>`,
},
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-link p').text()).toEqual(slotValue);
});
it('renders default slot contents router link', () => {
// given
const slotValue = 'xd';
const href = '/xd';
const wrapper = shallowMount(NeonLink, {
propsData: { href },
slots: {
default: `<p>${slotValue}</p>`,
},
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-link p').text()).toEqual(slotValue);
});
it('renders external link with indicator', () => {
// given
const href = 'http://www.getskeleton.com';
const wrapper = shallowMount(NeonLink, {
propsData: { href, externalIndicator: true },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-link--external-link').element).toBeDefined();
expect(wrapper.find('.neon-link--with-external-indicator').element).toBeDefined();
});
it('renders external link without indicator', () => {
// given
const href = 'http://www.getskeleton.com';
const wrapper = shallowMount(NeonLink, {
propsData: { href },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-link--external-link').element).toBeDefined();
expect(wrapper.find('.neon-link--with-external-indicator').element).toBeUndefined();
});
it('renders router link', () => {
// given
const href = '/xd';
const wrapper = shallowMount(NeonLink, {
propsData: { href },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-link--router-link').element).toBeDefined();
});
it('renders no style class', () => {
// given
const href = '/xd';
const wrapper = shallowMount(NeonLink, {
propsData: { href, noStyle: true },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-link--no-style').element).toBeDefined();
});
it('renders default outline style', () => {
// given
const href = '/xd';
const wrapper = shallowMount(NeonLink, {
propsData: { href },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-link--outline-text').element).toBeDefined();
});
it('renders provided outline style', () => {
// given
const href = '/xd';
const wrapper = shallowMount(NeonLink, {
propsData: { href, outlineStyle: NeonOutlineStyle.Border },
stubs: {
RouterLink: RouterLinkStub,
},
});
// when / then
expect(wrapper.find('.neon-link--outline-border').element).toBeDefined();
});
it('emits click event', () => {
// given
const wrapper = shallowMount(NeonLink, {
propsData: {},
stubs: {
RouterLink: RouterLinkStub,
},
});
// when
wrapper.find('.neon-link').trigger('click');
// then
expect(wrapper.emitted().click[0]).toBeDefined();
});
it('emits click event on enter keydown', () => {
// given
const wrapper = shallowMount(NeonLink, {
propsData: {},
stubs: {
RouterLink: RouterLinkStub,
},
});
// when
wrapper.find('.neon-link').trigger('keydown.enter');
// then
expect(wrapper.emitted().click[0]).toBeDefined();
});
});
Example #3
| Source File: NeonMenu.spec.ts From neon with MIT License | 4 votes |
|
describe('NeonMenu', () => {
const priorityMenuItems: NeonPriorityMenuItem[] = [
{
// @ts-ignore
element: {},
width: 250,
key: 'item1',
},
{
// @ts-ignore
element: {},
width: 250,
key: 'item2',
},
{
// @ts-ignore
element: {},
width: 250,
key: 'item3',
},
{
// @ts-ignore
element: {},
width: 250,
key: 'item4',
},
];
const menu = [
{
key: 'action-menu',
label: 'Action Menu',
href: '/navigation/action-menu',
},
{
key: 'link',
label: 'Link',
href: '/navigation/link',
},
{
key: 'menu',
label: 'Menu',
href: '/navigation/menu',
},
{
key: 'click-link',
icon: 'contrast',
label: 'Click link',
},
{
key: 'disabled',
label: 'Disabled',
disabled: true,
},
{
key: 'tree-menu',
label: 'Tree Menu',
href: '/navigation/tree-menu',
children: [
{
key: 'tree-menu-description',
label: 'Description',
href: '/navigation/tree-menu#description',
},
{
key: 'tree-menu-api',
label: 'API',
href: '/navigation/tree-menu#api',
},
{
key: 'tree-menu-examples',
label: 'Examples',
href: '/navigation/tree-menu#examples',
},
],
},
];
it('renders menu', () => {
// given
const wrapper = mount(NeonMenu, {
propsData: { menu },
stubs: {
RouterLink: RouterLinkStub,
},
mocks: {
$route: { path: '.' },
},
});
// when / then
expect(wrapper.html()).toMatchSnapshot();
});
it('renders default color', () => {
// given
const wrapper = mount(NeonMenu, {
propsData: { menu },
stubs: {
RouterLink: RouterLinkStub,
},
mocks: {
$route: { path: '.' },
},
});
// when / then
expect(wrapper.find('.neon-menu--brand').element).toBeDefined();
expect(wrapper.findAll('.neon-dropdown-menu--brand').length).toEqual(2);
});
it('renders color', () => {
// given
const wrapper = mount(NeonMenu, {
propsData: { menu, color: NeonFunctionalColor.Primary },
stubs: {
RouterLink: RouterLinkStub,
},
mocks: {
$route: { path: '.' },
},
});
// when / then
expect(wrapper.find('.neon-menu--primary').element).toBeDefined();
expect(wrapper.findAll('.neon-dropdown-menu--primary').length).toEqual(2);
});
it('renders default size', () => {
// given
const wrapper = mount(NeonMenu, {
propsData: { menu },
stubs: {
RouterLink: RouterLinkStub,
},
mocks: {
$route: { path: '.' },
},
});
// when / then
expect(wrapper.find('.neon-menu--l').element).toBeDefined();
expect(wrapper.findAll('.neon-dropdown--l').length).toEqual(2);
});
it('renders size', () => {
// given
const wrapper = mount(NeonMenu, {
propsData: { menu, size: NeonSize.Small },
stubs: {
RouterLink: RouterLinkStub,
},
mocks: {
$route: { path: '.' },
},
});
// when / then
expect(wrapper.find('.neon-menu--s').element).toBeDefined();
expect(wrapper.findAll('.neon-dropdown--s').length).toEqual(2);
});
it('removes resize handler on destroy', () => {
// given
window.addEventListener = jest.fn();
window.removeEventListener = jest.fn();
const wrapper = mount(NeonMenu, {
propsData: { menu },
stubs: {
RouterLink: RouterLinkStub,
},
mocks: {
$route: { path: '.' },
},
});
wrapper.destroy();
// then
expect(window.addEventListener).toHaveBeenCalledTimes(5);
expect(window.removeEventListener).toHaveBeenCalledTimes(5);
});
it('does not remove resize handler on destroy', () => {
// given
window.addEventListener = jest.fn();
window.removeEventListener = jest.fn();
const wrapper = shallowMount(NeonMenu, {
propsData: { menu, priorityMenuEnabled: false },
stubs: {
RouterLink: RouterLinkStub,
},
mocks: {
$route: { path: '.' },
},
});
wrapper.destroy();
// then
expect(window.addEventListener).toHaveBeenCalledTimes(0);
expect(window.removeEventListener).toHaveBeenCalledTimes(0);
});
it('emits click event', () => {
// given
const wrapper = mount(NeonMenu, {
propsData: { menu },
stubs: {
RouterLink: RouterLinkStub,
},
mocks: {
$route: { path: '.' },
},
});
// when
wrapper.find('.neon-menu__item:nth-child(4) .neon-link').trigger('click');
// then
expect(wrapper.emitted().click[0]).toEqual([menu[3].key]);
});
it('responsive menu desktop', () => {
// given
const wrapper = mount(NeonMenu, {
propsData: { menu },
stubs: {
RouterLink: RouterLinkStub,
},
mocks: {
$route: { path: '.' },
},
});
// when
const menuComponent = wrapper.vm as NeonMenuClass;
const result = menuComponent.determineVisibleMenuItems(1048, 48, priorityMenuItems);
// then
expect(result).toEqual(['item1', 'item2', 'item3', 'item4']);
});
it('responsive menu mobile', () => {
// given
const wrapper = mount(NeonMenu, {
propsData: { menu },
stubs: {
RouterLink: RouterLinkStub,
},
mocks: {
$route: { path: '.' },
},
});
// when
const menuComponent = wrapper.vm as NeonMenuClass;
const result = menuComponent.determineVisibleMenuItems(550, 48, priorityMenuItems);
// then
expect(result).toEqual(['item1', 'item2']);
});
it('responsive menu mobile, never show just one item', () => {
// given
const wrapper = mount(NeonMenu, {
propsData: { menu },
stubs: {
RouterLink: RouterLinkStub,
},
mocks: {
$route: { path: '.' },
},
});
// when
const menuComponent = wrapper.vm as NeonMenuClass;
const result = menuComponent.determineVisibleMenuItems(300, 48, priorityMenuItems);
// then
expect(result).toEqual([]);
});
it('resizes to mobile', (done) => {
// given
const wrapper = mount(NeonMenu, {
propsData: { menu },
stubs: {
RouterLink: RouterLinkStub,
},
mocks: {
$route: { path: '.' },
},
});
const menuComponent = wrapper.vm as NeonMenuClass;
menuComponent.menuItems = [
{
// @ts-ignore
element: {},
key: 'action-menu',
width: 200,
},
];
setTimeout(() => {
// when
menuComponent.refreshVisibleMenu();
// then
expect(wrapper.find('.neon-menu__responsive-menu .neon-button').attributes().hidden).toBeUndefined();
done();
});
});
});
Example #4
| Source File: NeonTreeMenu.spec.ts From neon with MIT License | 4 votes |
|
describe('NeonTreeMenu', () => {
const model = [
{
key: 'feedback',
label: 'Feedback',
expanded: false,
children: [
{
key: 'alert',
label: 'Alert',
href: '/feedback/alert',
anchors: ['Description', 'API', 'Examples'],
},
{
key: 'note',
label: 'Note',
href: '/feedback/note',
anchors: ['Description', 'API', 'Examples'],
},
{
key: 'notification-counter',
label: 'Notification Counter',
href: '/feedback/notification-counter',
anchors: ['Description', 'API', 'Examples'],
},
],
},
{
key: 'navigation',
label: 'Navigation',
expanded: true,
children: [
{
key: 'action-menu',
label: 'Action Menu',
href: '/navigation/action-menu',
anchors: ['Description', 'API', 'Examples'],
},
{
key: 'dropdown-menu',
label: 'Dropdown Menu',
href: '/navigation/dropdown-menu',
anchors: ['Description', 'API', 'Examples'],
},
{
key: 'link',
label: 'Link',
href: '/navigation/link',
anchors: ['Description', 'API', 'Examples'],
},
{
key: 'tree-menu',
label: 'Tree Menu',
href: '/navigation/tree-menu',
anchors: ['Description', 'API', 'Examples'],
},
],
},
];
it('matches snapshot', () => {
// given
const wrapper = mount(NeonTreeMenu, {
propsData: { model },
stubs: { RouterLink: RouterLinkStub },
});
// when / then
expect(wrapper.html()).toMatchSnapshot();
});
it('expands all', () => {
// given
const wrapper = mount(NeonTreeMenu, {
propsData: { model, expandAll: true },
stubs: { RouterLink: RouterLinkStub },
});
// when / then
expect(wrapper.find('.neon-tree-menu--expand-all').element).toBeDefined();
expect(wrapper.findAll('.neon-tree-menu__anchors--expanded').length).toEqual(7);
});
it('emits click event on click section link', () => {
// given
const wrapper = mount(NeonTreeMenu, {
propsData: { model },
stubs: { RouterLink: RouterLinkStub },
});
// when
wrapper.findAll('.neon-tree-menu__section-link').at(0).trigger('click');
// then
expect(wrapper.emitted().click[0]).toEqual(['feedback']);
});
it('emits click event on space keydown section link', () => {
// given
const wrapper = mount(NeonTreeMenu, {
propsData: { model },
stubs: { RouterLink: RouterLinkStub },
});
// when
wrapper.findAll('.neon-tree-menu__section-link-label').at(0).trigger('keydown.space');
// then
expect(wrapper.emitted().click[0]).toEqual(['feedback']);
});
it('triggers click on parent link on space keydown', () => {
// given
const wrapper = mount(NeonTreeMenu, {
propsData: { model },
stubs: { RouterLink: RouterLinkStub },
});
const vm = wrapper.vm as NeonTreeMenuClass;
vm.click = jest.fn(vm.click);
// when
wrapper.findAll('.neon-tree-menu__link-label').at(0).trigger('keydown.space');
// then
expect(vm.click).toHaveBeenCalled();
});
it('click executes with no parent element', () => {
// given
const wrapper = mount(NeonTreeMenu, {
propsData: { model },
stubs: { RouterLink: RouterLinkStub },
});
const vm = wrapper.vm as NeonTreeMenuClass;
// when / then
// @ts-ignore
expect(() => vm.click({})).not.toThrowError();
});
});
Example #5
| Source File: NeonButton.spec.ts From neon with MIT License | 4 votes |
|
describe('NeonButton', () => {
it('renders label', () => {
const label = 'test label';
const wrapper = mount(NeonButton, {
propsData: { label },
});
expect(wrapper.find('.neon-button__label').text()).toEqual(label);
});
it('renders icon only', () => {
const icon = 'check';
const wrapper = mount(NeonButton, {
propsData: { icon },
});
expect(wrapper.find('.neon-button--with-icon.neon-button--icon-only').element).toBeDefined();
});
it('renders with outline by default', () => {
const icon = 'check';
const wrapper = mount(NeonButton, {
propsData: { icon },
});
expect(wrapper.find('.neon-button--no-outline').element).toBeUndefined();
});
it('renders no outline class', () => {
const icon = 'check';
const wrapper = mount(NeonButton, {
propsData: { icon, outline: false },
});
expect(wrapper.find('.neon-button--no-outline').element).toBeDefined();
});
it('renders ready state by default', () => {
const icon = 'check';
const wrapper = mount(NeonButton, {
propsData: { icon },
});
expect(wrapper.find('.neon-button--state-ready').element).toBeDefined();
expect((wrapper.vm as NeonButtonClass).iconName).toEqual('check');
});
it('renders loading state', () => {
const wrapper = mount(NeonButton, {
propsData: { state: NeonState.Loading },
});
expect(wrapper.find('.neon-button--state-loading').element).toBeDefined();
expect((wrapper.vm as NeonButtonClass).iconName).toEqual('loading');
});
it('renders success state', () => {
const wrapper = mount(NeonButton, {
propsData: { state: NeonState.Success },
});
expect(wrapper.find('.neon-button--state-success').element).toBeDefined();
expect((wrapper.vm as NeonButtonClass).iconName).toEqual('check');
});
it('renders error state', () => {
const wrapper = mount(NeonButton, {
propsData: { state: NeonState.Error },
});
expect(wrapper.find('.neon-button--state-error').element).toBeDefined();
expect((wrapper.vm as NeonButtonClass).iconName).toEqual('times');
});
it('renders default size', () => {
const icon = 'check';
const wrapper = mount(NeonButton, {
propsData: { icon },
});
expect(wrapper.find('.neon-button--m').element).toBeDefined();
});
it('renders size', () => {
const icon = 'check';
const wrapper = mount(NeonButton, {
propsData: { icon, size: NeonButtonSize.Small },
});
expect(wrapper.find('.neon-button--s').element).toBeDefined();
});
it('renders default color', () => {
const icon = 'check';
const wrapper = mount(NeonButton, {
propsData: { icon },
});
expect(wrapper.find('.neon-button--low-contrast').element).toBeDefined();
});
it('renders color', () => {
const icon = 'check';
const wrapper = mount(NeonButton, {
propsData: { icon, color: NeonFunctionalColor.Primary },
});
expect(wrapper.find('.neon-button--primary').element).toBeDefined();
});
it('renders alternate color', () => {
const icon = 'check';
const wrapper = mount(NeonButton, {
propsData: { icon, alternateColor: NeonFunctionalColor.Primary },
});
expect(wrapper.find('.neon-button--alternate-color-primary').element).toBeDefined();
});
it('renders default style', () => {
const icon = 'check';
const wrapper = mount(NeonButton, {
propsData: { icon },
});
expect(wrapper.find('.neon-button--solid').element).toBeDefined();
});
it('renders outline style', () => {
const icon = 'check';
const wrapper = mount(NeonButton, {
propsData: { icon, buttonStyle: NeonButtonStyle.Outline },
});
expect(wrapper.find('.neon-button--outline').element).toBeDefined();
});
it('renders icon position left', () => {
const icon = 'check';
const label = 'xd';
const wrapper = mount(NeonButton, {
propsData: { icon, label },
});
expect(wrapper.find('.neon-button--with-icon.neon-button--icon-left').element).toBeDefined();
});
it('renders icon position right', () => {
const icon = 'check';
const label = 'xd';
const wrapper = mount(NeonButton, {
propsData: { icon, label, iconPosition: NeonHorizontalPosition.Right },
});
expect(wrapper.find('.neon-button--with-icon.neon-button--icon-right').element).toBeDefined();
});
it('renders as button', () => {
const label = 'xd';
const wrapper = mount(NeonButton, {
propsData: { label },
});
expect(wrapper.find('button.neon-button').element).toBeDefined();
});
it('renders as link with href', () => {
const label = 'xd';
const href = '.';
const wrapper = mount(NeonButton, {
propsData: { label, href },
stubs: { RouterLink: RouterLinkStub },
});
expect(wrapper.find('a.neon-button').element).toBeDefined();
});
it('renders full width', () => {
const label = 'xd';
const wrapper = mount(NeonButton, {
propsData: { label, fullWidth: true },
});
expect(wrapper.find('.neon-button--full-width').element).toBeDefined();
});
it('renders circular', () => {
const icon = 'check';
const wrapper = mount(NeonButton, {
propsData: { icon, circular: true },
});
expect(wrapper.find('.neon-button--circular').element).toBeDefined();
});
it('renders indicator', () => {
const wrapper = mount(NeonButton, {
propsData: { indicator: true },
});
expect(wrapper.find('.neon-button__indicator').element).toBeDefined();
});
it('renders indicator expanded', () => {
const wrapper = mount(NeonButton, {
propsData: { indicator: true, indicatorExpanded: true },
});
expect(wrapper.find('.neon-expansion-indicator--expanded').element).toBeDefined();
});
it('link space keypress triggers click', () => {
// given
const href = 'http://google.com';
const wrapper = mount(NeonButton, {
propsData: { label: 'xd', href },
});
const clickFn = (wrapper.vm.$el as HTMLAnchorElement).click;
(wrapper.vm.$el as HTMLAnchorElement).click = jest.fn();
// when
wrapper.trigger('keydown.space.native');
// then
expect((wrapper.vm.$el as HTMLAnchorElement).click).toHaveBeenCalled();
(wrapper.vm.$el as HTMLAnchorElement).click = clickFn;
});
});
