Merge 80ed353 into 50b52f2

src/base/ui_object/ui_object.js

@@ -3,8 +3,8 @@
 // license that can be found in the LICENSE file.
 
 import $ from 'clappr-zepto'
-import { uniqueId, DomRecycler } from '../../utils'
-import BaseObject from '../base_object'
+import { uniqueId, DomRecycler } from '@/utils'
+import BaseObject from '@/base/base_object'
 
 const delegateEventSplitter = /^(\S+)\s*(.*)$/
 
@@ -154,7 +154,7 @@ export default class UIObject extends BaseObject {
    * @return {UIObject} itself
    */
   delegateEvents(events) {
-    if (!(events || (events = this.events))) return this
+    if (!events) events = this.events
     this.undelegateEvents()
     for (const key in events) {
       let method = events[key]

src/base/ui_object/ui_object.test.js

@@ -1,32 +1,38 @@
 import UIObject from './ui_object'
 import  $ from 'clappr-zepto'
 
-describe('UIObject', function() {
-  test('is a div tag by default', function() {
+describe('UIObject', () => {
+  test('is a div tag by default', () => {
     const uiObject = new UIObject()
     expect(uiObject.tagName).toEqual('div')
   })
 
-  test('can be any tag', function() {
+  test('render method returns the component itself by default', () => {
+    const uiObject = new UIObject()
+
+    expect(uiObject.render()).toEqual(uiObject)
+  })
+
+  test('can be any tag', () => {
     class MyButton extends UIObject { get tagName() { return 'button' } }
     const myButton = new MyButton()
     expect(myButton.tagName).toEqual('button')
   })
 
-  test('has an unique id', function() {
+  test('has an unique id', () => {
     const uiObjectA = new UIObject()
     const uiObjectB = new UIObject()
     expect(uiObjectA.cid).not.toEqual(uiObjectB.cid)
   })
 
-  test('creates element for a given ui component', function() {
+  test('creates element for a given ui component', () => {
     const uiObject = new UIObject()
     const component = $('<div></div>')
     expect(uiObject.el).toEqual(component[0])
     expect(uiObject.$el).toEqual(component)
   })
 
-  test('can set element', function() {
+  test('can set element', () => {
     const uiObject = new UIObject()
     const element = $('<section></section>')
     uiObject.setElement(element)
@@ -35,7 +41,7 @@ describe('UIObject', function() {
     expect(uiObject.$el).toEqual(element)
   })
 
-  test('creates an element with attributes', function() {
+  test('creates an element with attributes', () => {
     class MyButton extends UIObject {
       constructor(options) { super(options) }
       get attributes() { return { class: 'my-button' } }
@@ -46,7 +52,20 @@ describe('UIObject', function() {
     expect(myButton.el.className).toEqual('my-button')
   })
 
-  test('binds events of an element to methods', function() {
+  test('creates an element with only id/className attributes', () => {
+    class MyButton extends UIObject {
+      constructor(options) { super(options) }
+      get id() { return 'id-example' }
+      get className() { return 'class__example' }
+    }
+
+    const myButton = new MyButton()
+
+    expect(myButton.el.id).toEqual('id-example')
+    expect(myButton.el.className).toEqual('class__example')
+  })
+
+  test('binds events of an element to methods', () => {
     class MyButton extends UIObject {
       constructor(options) {
         super(options)
@@ -65,7 +84,57 @@ describe('UIObject', function() {
     expect(myButton.myId).toEqual(42)
   })
 
-  test('selects elements within the component', function() {
+  test('can bind events dynamically', () => {
+    class MyButton extends UIObject {
+      constructor(options) {
+        super(options)
+        this.myId = 0
+      }
+      myClick() { this.myId = 42 }
+    }
+
+    const myButton = new MyButton()
+
+    myButton.delegateEvents({ 'click': 'myClick' })
+
+    expect(myButton.myId).toEqual(0)
+
+    myButton.$el.trigger('click')
+
+    expect(myButton.myId).toEqual(42)
+  })
+
+  test('binds events of an element with specific selectors to methods', () => {
+    class MyButton extends UIObject { myClick() {} }
+    const myButton = new MyButton()
+    jest.spyOn(myButton, 'myClick')
+
+    myButton.$el.append($('<div class="class__example" data-example="example"></div>'))
+    const $specificSelector = myButton.$('.class__example[data-example]')
+
+    myButton.delegateEvents({ 'click .class__example[data-example]': 'myClick' })
+
+    myButton.$el.trigger('click')
+    $specificSelector.trigger('click')
+
+    expect(myButton.myClick).toHaveBeenCalledTimes(1)
+  })
+
+  test('only bind events whit correct dictionary { event: callback } input', () => {
+    class MyButton extends UIObject { myClick() {} }
+    const myButton = new MyButton()
+    jest.spyOn(myButton, 'myClick')
+
+    myButton.delegateEvents({ 'click': null })
+    myButton.delegateEvents({ 'click': 'test' })
+    myButton.delegateEvents({ 'click': 'myClick' })
+
+    myButton.$el.trigger('click')
+
+    expect(myButton.myClick).toHaveBeenCalledTimes(1)
+  })
+
+  test('selects elements within the component', () => {
     const insideComponent = $('<p id="special-id">here</p>')[0]
     class MySpecialButton extends UIObject {
       constructor(options) {
@@ -80,7 +149,21 @@ describe('UIObject', function() {
     expect(myButton.$('#special-id')[0]).toEqual(insideComponent)
   })
 
-  test('removes it from DOM', function() {
+  test('uses the existent element if _ensureElement method is called after one component is created', () => {
+    class MyButton extends UIObject { get tagName() { return 'button' } }
+    const myButton = new MyButton()
+    const component = $('<button></button>')
+
+    expect(myButton.el).toEqual(component[0])
+    expect(myButton.$el).toEqual(component)
+
+    myButton._ensureElement()
+
+    expect(myButton.el).toEqual(component[0])
+    expect(myButton.$el).toEqual(component)
+  })
+
+  test('removes it from DOM', () => {
     class FullscreenButton extends UIObject {
       constructor(options) {
         super(options)
@@ -98,7 +181,7 @@ describe('UIObject', function() {
     expect($('#my-0-button').length).toEqual(0)
   })
 
-  test('stops listening', function() {
+  test('stops listening', () => {
     class FullscreenButton extends UIObject {
       constructor(options) {
         super(options)