add @OPEN event

saintplay · Feb 24, 2018 · 17ee162 · 17ee162
1 parent 4cfa139
commit 17ee162
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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 = '<button id="button-test">Hello World</button>'
+        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(() => {