Skip to content

Commit

Permalink
Updated the way dropdown menu and items are set.
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexgrozav
alexgrozav committed Mar 9, 2019
1 parent 1234cd0 commit 6d320c4
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 107 deletions.
44 changes: 12 additions & 32 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

25 changes: 18 additions & 7 deletions src/components/Dropdown/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default {
this.show();

setTimeout(() => {
this.items[initialIndex].$el.focus();
this.items[initialIndex].elm.focus();
}, this.visible ? 0 : this.showTimeout);

e.preventDefault();
Expand All @@ -97,7 +97,7 @@ export default {

if (!this.visible) {
setTimeout(() => {
this.items[initialIndex].$el.focus();
this.items[initialIndex].elm.focus();
}, this.showTimeout);
}

Expand All @@ -110,7 +110,7 @@ export default {
},
onItemKeyDown(e) {
const target = e.target;
const currentIndex = this.items.findIndex((i) => i.$el === e.target);
const currentIndex = this.items.findIndex((i) => i.elm === e.target);
const maxIndex = this.items.length - 1;
let nextIndex;

Expand All @@ -122,7 +122,7 @@ export default {
nextIndex = currentIndex < maxIndex ? currentIndex + 1 : maxIndex;
}

this.items[nextIndex].$el.focus();
this.items[nextIndex].elm.focus();

e.preventDefault();
e.stopPropagation();
Expand Down Expand Up @@ -160,11 +160,22 @@ export default {
The first one will be used as a trigger. The second one should be a IDropdownMenu component.`);
}

this.menu = this.$children.find((c) => (c.$options || {}).name === 'IDropdownMenu');
this.items = this.menu.$children.filter((c) => c.$options.name === 'IDropdownItem');
this.menu = this.$slots.default
.find((e) => ((e.componentInstance || {}).$options || {}).name === 'IDropdownMenu' ||
(((e.componentInstance || {}).$options || {}).extends || {}).name === 'IDropdownMenu');

if (!this.menu) {
throw new Error('Could not find child IDropdownMenu in IDropdown.')
}

this.items = (this.menu.componentInstance.$slots.default || [])
.filter((e) => ((e.componentInstance || {}).$options || {}).name === 'IDropdownItem' ||
(((e.componentInstance || {}).$options || {}).extends || {}).name === 'IDropdownItem');

console.log(this.items, this.menu)

this.triggerElement = this.$slots.default[0].elm;
this.popupElement = this.menu.$el;
this.popupElement = this.menu.elm;
}
},
mounted() {
Expand Down
66 changes: 28 additions & 38 deletions tests/unit/components/Dropdown.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,34 @@ describe('Components', () => {
id: 'dropdown'
},
methods: {
created: Dropdown.created,
mounted: Dropdown.mounted
},
// mocks: {
// $children: [
// {
// $options: {
// name: 'IDropdownMenu'
// },
// $children: [
// { $options: { name: 'IDropdownItem' } }
// ]
// }
// ]
// },
slots: {
default: ['<button/>', '<div/>']
default: [
'<button/>',
{
name: 'IDropdownMenu',
components: {
IDropdownItem: {
name: 'IDropdownItem',
template: '<div />'
}
},
template: '<div><i-dropdown-item /><slot><i-dropdown-item /></slot></div>'
}
]
}
});
});
Expand Down Expand Up @@ -351,7 +374,7 @@ describe('Components', () => {
});
});

describe('initElements()', () => {
fdescribe('initElements()', () => {
it('should throw error if trigger or dropdown not provided', () => {
wrapper.vm.$slots.default = [];

Expand Down Expand Up @@ -390,47 +413,14 @@ describe('Components', () => {
});
});

describe('created()', () => {
it('should listen to "dropdown-item-mounted" event', () => {
const spy = jest.spyOn(wrapper.vm, '$on');

wrapper.vm.created();

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith('dropdown-item-mounted', expect.any(Function));
});

it('should push item to items on "dropdown-item-mounted" event', () => {
wrapper.vm.$emit('dropdown-item-mounted', true);

expect(wrapper.vm.items).toEqual([true]);
});

it('should listen to "dropdown-item-destroyed" event', () => {
const spy = jest.spyOn(wrapper.vm, '$on');

wrapper.vm.created();

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith('dropdown-item-destroyed', expect.any(Function));
});

it('should remove item from items on "dropdown-item-destroyed" event', () => {
wrapper.vm.$emit('dropdown-item-mounted', true);
expect(wrapper.vm.items).toEqual([true]);
wrapper.vm.$emit('dropdown-item-destroyed', true);
expect(wrapper.vm.items).toEqual([]);
});
});

describe('mounted()', () => {
it('should listen to "menu-item-click" event', () => {
it('should listen to "item-click" event', () => {
const spy = jest.spyOn(wrapper.vm, '$on');

wrapper.vm.mounted();

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith('menu-item-click', expect.any(Function));
expect(spy).toHaveBeenCalledWith('item-click', expect.any(Function));
});

it('should add keydown event to triggerElement and popupElement', () => {
Expand Down
33 changes: 3 additions & 30 deletions tests/unit/components/DropdownItem.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,7 @@ describe('Components', () => {
let wrapper;

beforeEach(() => {
wrapper = shallowMount(DropdownItem, {
methods: {
mounted: DropdownItem.mounted,
destroyed: DropdownItem.destroyed
}
});
wrapper = shallowMount(DropdownItem);
});

it('should be named correctly', () => {
Expand Down Expand Up @@ -39,37 +34,15 @@ describe('Components', () => {

describe('methods', () => {
describe('onClick()', () => {
it('should dispatch "menu-item-click" to IDropdown', () => {
it('should dispatch "item-click" to IDropdown', () => {
const spy = jest.spyOn(wrapper.vm, 'dispatch');

wrapper.vm.onClick();

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith('IDropdown', 'menu-item-click', [wrapper.vm.action, wrapper.vm]);
expect(spy).toHaveBeenCalledWith('IDropdown', 'item-click', [wrapper.vm.action, wrapper.vm]);
});
});
});

describe('mounted()', () => {
it('should dispatch "dropdown-item-mounted" to IDropdown', () => {
const spy = jest.spyOn(wrapper.vm, 'dispatch');

wrapper.vm.mounted();

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith('IDropdown', 'dropdown-item-mounted', wrapper.vm);
});
});

describe('destroyed()', () => {
it('should dispatch "dropdown-item-destroyed" to IDropdown', () => {
const spy = jest.spyOn(wrapper.vm, 'dispatch');

wrapper.vm.destroyed();

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith('IDropdown', 'dropdown-item-destroyed', wrapper.vm);
});
});
});
});

0 comments on commit 6d320c4

Please sign in to comment.