chore(dispatcher): add selectToBoundary tests

Author: gabrielhase

spec/dispatcher.spec.js

@@ -140,24 +140,27 @@ describe('Dispatcher', function () {
         expect(insert.calls).toEqual(1)
       })
 
-      it('fires merge if cursor is in the middle', function () {
-        // <div>fo|o</div>
-        elem.innerHTML = 'foo'
+      it('fires "split" if cursor is in the middle', function () {
+        console.log('HERE................')
+        // <div>ba|r</div>
+        elem.innerHTML = 'bar'
         const range = rangy.createRange()
         range.setStart(elem.firstChild, 2)
         range.setEnd(elem.firstChild, 2)
+        range.collapse()
         createCursor(range)
 
         const insert = on('split', (element, before, after, cursor) => {
           expect(element).toEqual(elem)
-          expect(content.getInnerHtmlOfFragment(before)).toEqual('fo')
-          expect(content.getInnerHtmlOfFragment(after)).toEqual('o')
+          expect(content.getInnerHtmlOfFragment(before)).toEqual('ba')
+          expect(content.getInnerHtmlOfFragment(after)).toEqual('r')
           expect(cursor.isCursor).toEqual(true)
         })
 
         const evt = new KeyboardEvent('keydown', {keyCode: key.enter})
         elem.dispatchEvent(evt)
         expect(insert.calls).toEqual(1)
+        console.log('END...........')
       })
     })
 
@@ -304,5 +307,61 @@ describe('Dispatcher', function () {
         elem.dispatchEvent(evt)
       })
     })
+
+    describe('selectToBoundary event:', function () {
+
+      it('fires "both" if all is selected', function () {
+        elem.innerHTML = 'People Make The World Go Round'
+        // select all
+        const range = rangy.createRange()
+        range.selectNodeContents(elem)
+        createCursor(range)
+        // listen for event
+        let position
+        editable.selectToBoundary(function (element, evt, pos) {
+          position = pos
+        })
+        // trigger selectionchange event
+        const selectionEvent = new Event('selectionchange', {bubbles: true})
+        elem.dispatchEvent(selectionEvent)
+        expect(position).toEqual('both')
+      })
+
+      it('fires "start" if selection is at beginning but not end', function () {
+        elem.innerHTML = 'People Make The World Go Round'
+        // select "People"
+        const range = rangy.createRange()
+        range.setStart(elem.firstChild, 0)
+        range.setEnd(elem.firstChild, 5)
+        createCursor(range)
+        // listen for event
+        let position
+        editable.selectToBoundary(function (element, evt, pos) {
+          position = pos
+        })
+        // trigger selectionchange event
+        const selectionEvent = new Event('selectionchange', {bubbles: true})
+        elem.dispatchEvent(selectionEvent)
+        expect(position).toEqual('start')
+      })
+
+      it('fires "end" if selection is at end but not beginning', function () {
+        elem.innerHTML = 'People Make The World Go Round'
+        // select "Round"
+        const range = rangy.createRange()
+        range.setStart(elem.firstChild, 25)
+        range.setEnd(elem.firstChild, 30)
+        createCursor(range)
+        // listen for event
+        let position
+        editable.selectToBoundary(function (element, evt, pos) {
+          position = pos
+        })
+        // trigger selectionchange event
+        const selectionEvent = new Event('selectionchange', {bubbles: true})
+        elem.dispatchEvent(selectionEvent)
+        expect(position).toEqual('end')
+      })
+    })
   })
 })

spec/highlighting.spec.js

@@ -1,3 +1,4 @@
+import sinon from 'sinon'
 import rangy from 'rangy'
 import {Editable} from '../src/core'
 import Highlighting from '../src/highlighting'
@@ -422,6 +423,17 @@ Make The <br> W<span class="highlight-spellcheck" data-word-id="spellcheckId" da
       expect(this.extract('comment')).toEqual(expectedRanges)
       expect(startIndex).toEqual(3)
     })
+
+    it('normalizes a simple text node after removing a highlight', function () {
+      setupHighlightEnv(self, 'People Make The World Go Round')
+      self.highlightRange('myId', 3, 7)
+      const normalizeSpy = sinon.spy(self.div, 'normalize')
+      self.removeHighlight('myId')
+      // There is no way to see the actual error in a test since it only happens in (non-headless)
+      // Chome environments. We just check if the normalize method has been called here.
+      expect(normalizeSpy.callCount).toEqual(1)
+      normalizeSpy.restore()
+    })
   })
 
   describe('highlight support with special characters', function () {

spec/selection.spec.js

@@ -100,7 +100,7 @@ describe('Selection', function () {
         expect(this.selection.isAllSelected()).toEqual(true)
       })
 
-      it('returns true if all is selected', function () {
+      it('returns false if not all is selected', function () {
         const textNode = this.oneWord.firstChild
         let range = rangy.createRange()
         range.setStartBefore(textNode)

src/dispatcher.js

@@ -276,10 +276,13 @@ export default class Dispatcher {
         const cursor = range.forceCursor()
 
         if (cursor.isAtTextEnd()) {
+          console.log('at end', event.target)
           self.notify('insert', this, 'after', cursor)
         } else if (cursor.isAtBeginning()) {
+          console.log('at beginning', event.target)
           self.notify('insert', this, 'before', cursor)
         } else {
+          console.log('in split', event.target)
           self.notify('split', this, cursor.before(), cursor.after(), cursor)
         }
       })
@@ -330,11 +333,11 @@ export default class Dispatcher {
       const cursor = this.selectionWatcher.getFreshSelection()
 
       if (cursor && cursor.isSelection && cursor.isAtBeginning() && cursor.isAtEnd()) {
-        this.notify('selectToBoundary', cursor.host, evt, 'both', cursor)
+        this.notify('selectToBoundary', cursor.host, evt, 'both')
       } else if (cursor && cursor.isSelection && cursor.isAtBeginning()) {
-        this.notify('selectToBoundary', cursor.host, evt, 'start', cursor)
+        this.notify('selectToBoundary', cursor.host, evt, 'start')
       } else if (cursor && cursor.isSelection && cursor.isAtEnd()) {
-        this.notify('selectToBoundary', cursor.host, evt, 'end', cursor)
+        this.notify('selectToBoundary', cursor.host, evt, 'end')
       }
 
       if (suppressSelectionChanges) {

src/highlight-support.js

@@ -69,6 +69,7 @@ const highlightSupport = {
     const elems = editableHost.querySelectorAll(`[data-word-id="${highlightId}"]`)
     for (const elem of elems) {
       content.unwrap(elem)
+      // in Chrome browsers the unwrap method leaves the host node split into 2 (lastChild !== firstChild)
       editableHost.normalize()
       if (dispatcher) dispatcher.notify('change', editableHost)
     }