diff --git a/documentation/_api/_events.pug b/documentation/_api/_events.pug index 59ca235..c20df89 100644 --- a/documentation/_api/_events.pug +++ b/documentation/_api/_events.pug @@ -15,6 +15,12 @@ h2.typo__h2#sub-events(data-section) Events td.table__td | Emitted after when #[kbd this.value] changes + tr.table__tr + td.table__td: strong @open + td.table__td: - + td.table__td + | Emitted when the popover is opened. + tr.table__tr td.table__td: strong @close td.table__td: kbd value diff --git a/src/Swatches.vue b/src/Swatches.vue index b46dc73..974f40c 100644 --- a/src/Swatches.vue +++ b/src/Swatches.vue @@ -414,10 +414,11 @@ export default { // Called programmatically showPopover () { /* istanbul ignore if */ - if (this.isOpen) return /* dont show */ + if (this.isOpen || this.inline) return /* dont show */ this.internalIsOpen = true this.$el.focus() + this.$emit('open') }, togglePopover () { this.isOpen ? this.hidePopover() : this.showPopover() diff --git a/test/unit/specs/Swatches.spec.js b/test/unit/specs/Swatches.spec.js index be37177..e8157ea 100644 --- a/test/unit/specs/Swatches.spec.js +++ b/test/unit/specs/Swatches.spec.js @@ -1088,6 +1088,71 @@ describe('Events', () => { }) }) }) + describe('@open', () => { + test('should not be emited when Inline mode is activated', () => { + const componentWrapper = mount(Swatches, { + propsData: { + inline: true + } + }) + componentWrapper.vm.showPopover() + + return Vue.nextTick() + .then(() => { + expect(componentWrapper.emitted().open) + .not.toBeTruthy() + }) + }) + test('should be emited when Inline mode is not activated', () => { + const componentWrapper = mount(Swatches, { + propsData: { + inline: false + } + }) + componentWrapper.vm.showPopover() + + return Vue.nextTick() + .then(() => { + expect(componentWrapper.emitted().open.length).toEqual(1) + }) + }) + describe('When legacy trigger is used', () => { + test('should be emited whenever user clicks the trigger', () => { + const componentWrapper = mount(Swatches, { + propsData: { + inline: false + } + }) + const trigger = componentWrapper.find({ ref: 'trigger-wrapper' }) + trigger.trigger('click') + + return Vue.nextTick() + .then(() => { + expect(componentWrapper.emitted().open.length).toEqual(1) + }) + }) + }) + describe('When trigger slot is used', () => { + test('should be emited whenever user clicks the trigger', () => { + const buttonTest = '' + const componentWrapper = mount(Swatches, { + slots: { + trigger: buttonTest + }, + propsData: { + inline: false + } + }) + const trigger = componentWrapper.find('#button-test') + trigger.trigger('click') + + return Vue.nextTick() + .then(() => { + expect(componentWrapper.emitted().open.length).toEqual(1) + }) + }) + }) + }) describe('@close', () => { test('should not be emited when Inline mode is activated', () => { const componentWrapper = mount(Swatches, { @@ -1126,8 +1191,8 @@ describe('Events', () => { } }) const trigger = componentWrapper.find({ ref: 'trigger-wrapper' }) - trigger.trigger('click') - trigger.trigger('click') + trigger.trigger('click') // one click to open the Popover + trigger.trigger('click') // and another to close the Popover return Vue.nextTick() .then(() => {