2014-02-01 02:49:36 +04:00
|
|
|
SelectListView = require '../src/select-list-view'
|
2013-09-20 00:51:53 +04:00
|
|
|
{$, $$} = require 'atom'
|
2012-10-04 01:49:08 +04:00
|
|
|
|
2014-02-01 02:49:36 +04:00
|
|
|
describe "SelectListView", ->
|
2014-02-15 02:42:48 +04:00
|
|
|
[selectList, items, list, filterEditorView] = []
|
2012-10-04 01:49:08 +04:00
|
|
|
|
|
|
|
beforeEach ->
|
2014-02-14 21:43:19 +04:00
|
|
|
items = [
|
2012-10-04 01:49:08 +04:00
|
|
|
["A", "Alpha"], ["B", "Bravo"], ["C", "Charlie"],
|
|
|
|
["D", "Delta"], ["E", "Echo"], ["F", "Foxtrot"]
|
|
|
|
]
|
|
|
|
|
2014-02-01 02:49:36 +04:00
|
|
|
selectList = new SelectListView
|
2014-02-14 21:43:19 +04:00
|
|
|
selectList.setMaxItems(4)
|
|
|
|
selectList.getFilterKey = -> 1
|
|
|
|
selectList.viewForItem = (item) ->
|
|
|
|
$$ -> @li item[1], class: item[0]
|
2012-10-04 01:49:08 +04:00
|
|
|
|
2012-10-04 05:21:07 +04:00
|
|
|
selectList.confirmed = jasmine.createSpy('confirmed hook')
|
2012-10-04 03:10:43 +04:00
|
|
|
selectList.cancelled = jasmine.createSpy('cancelled hook')
|
|
|
|
|
2014-02-14 21:43:19 +04:00
|
|
|
selectList.setItems(items)
|
2014-02-15 02:42:48 +04:00
|
|
|
{list, filterEditorView} = selectList
|
2012-10-04 01:49:08 +04:00
|
|
|
|
|
|
|
describe "when an array is assigned", ->
|
|
|
|
it "populates the list with up to maxItems items, based on the liForElement function", ->
|
|
|
|
expect(list.find('li').length).toBe selectList.maxItems
|
|
|
|
expect(list.find('li:eq(0)')).toHaveText 'Alpha'
|
|
|
|
expect(list.find('li:eq(0)')).toHaveClass 'A'
|
|
|
|
|
2014-02-14 21:51:33 +04:00
|
|
|
describe "viewForItem(item)", ->
|
|
|
|
it "allows raw DOM elements to be returned", ->
|
|
|
|
selectList.viewForItem = (item) ->
|
|
|
|
li = document.createElement('li')
|
|
|
|
li.classList.add(item[0])
|
|
|
|
li.innerText = item[1]
|
|
|
|
li
|
|
|
|
|
|
|
|
selectList.setItems(items)
|
|
|
|
|
|
|
|
expect(list.find('li').length).toBe selectList.maxItems
|
|
|
|
expect(list.find('li:eq(0)')).toHaveText 'Alpha'
|
|
|
|
expect(list.find('li:eq(0)')).toHaveClass 'A'
|
|
|
|
expect(selectList.getSelectedItem()).toBe items[0]
|
|
|
|
|
2014-03-11 22:19:52 +04:00
|
|
|
it "allows raw HTML to be returned", ->
|
|
|
|
selectList.viewForItem = (item) ->
|
|
|
|
"<li>#{item}</li>"
|
|
|
|
|
|
|
|
selectList.setItems(['Bermuda', 'Bahama'])
|
|
|
|
|
|
|
|
expect(list.find('li:eq(0)')).toHaveText 'Bermuda'
|
|
|
|
expect(selectList.getSelectedItem()).toBe 'Bermuda'
|
|
|
|
|
2012-10-04 01:49:08 +04:00
|
|
|
describe "when the text of the mini editor changes", ->
|
2012-11-16 23:34:52 +04:00
|
|
|
beforeEach ->
|
|
|
|
selectList.attachToDom()
|
|
|
|
|
2012-10-04 11:04:44 +04:00
|
|
|
it "filters the elements in the list based on the scoreElement function and selects the first item", ->
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.getEditor().insertText('la')
|
2012-12-13 02:52:31 +04:00
|
|
|
window.advanceClock(selectList.inputThrottle)
|
|
|
|
|
2012-10-04 01:49:08 +04:00
|
|
|
expect(list.find('li').length).toBe 2
|
|
|
|
expect(list.find('li:contains(Alpha)')).toExist()
|
|
|
|
expect(list.find('li:contains(Delta)')).toExist()
|
2012-10-04 11:04:44 +04:00
|
|
|
expect(list.find('li:first')).toHaveClass 'selected'
|
2012-11-16 23:34:52 +04:00
|
|
|
expect(selectList.error).not.toBeVisible()
|
|
|
|
|
|
|
|
it "displays an error if there are no matches, removes error when there are matches", ->
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.getEditor().insertText('nothing will match this')
|
2012-12-13 02:52:31 +04:00
|
|
|
window.advanceClock(selectList.inputThrottle)
|
|
|
|
|
2012-11-16 23:34:52 +04:00
|
|
|
expect(list.find('li').length).toBe 0
|
|
|
|
expect(selectList.error).not.toBeHidden()
|
|
|
|
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.getEditor().setText('la')
|
2012-12-13 02:52:31 +04:00
|
|
|
window.advanceClock(selectList.inputThrottle)
|
|
|
|
|
2012-11-16 23:34:52 +04:00
|
|
|
expect(list.find('li').length).toBe 2
|
|
|
|
expect(selectList.error).not.toBeVisible()
|
2012-10-04 01:49:08 +04:00
|
|
|
|
2013-01-25 22:28:07 +04:00
|
|
|
it "displays no elements until the array has been set on the list", ->
|
2014-02-14 21:43:19 +04:00
|
|
|
selectList.items = null
|
2013-01-25 22:28:07 +04:00
|
|
|
selectList.list.empty()
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.getEditor().insertText('la')
|
2013-01-25 22:28:07 +04:00
|
|
|
window.advanceClock(selectList.inputThrottle)
|
|
|
|
|
|
|
|
expect(list.find('li').length).toBe 0
|
2013-06-13 22:31:09 +04:00
|
|
|
expect(selectList.error).toBeHidden()
|
2014-02-14 21:43:19 +04:00
|
|
|
selectList.setItems(items)
|
2013-01-25 22:28:07 +04:00
|
|
|
expect(list.find('li').length).toBe 2
|
|
|
|
|
2014-02-15 02:42:48 +04:00
|
|
|
describe "when core:move-up / core:move-down are triggered on the filterEditorView", ->
|
2012-10-04 08:30:41 +04:00
|
|
|
it "selects the previous / next item in the list, or wraps around to the other side", ->
|
2012-10-04 01:49:08 +04:00
|
|
|
expect(list.find('li:first')).toHaveClass 'selected'
|
|
|
|
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.trigger 'core:move-up'
|
2012-10-04 01:49:08 +04:00
|
|
|
|
2012-10-04 08:30:41 +04:00
|
|
|
expect(list.find('li:first')).not.toHaveClass 'selected'
|
|
|
|
expect(list.find('li:last')).toHaveClass 'selected'
|
|
|
|
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.trigger 'core:move-down'
|
2012-10-04 08:30:41 +04:00
|
|
|
|
2012-10-04 01:49:08 +04:00
|
|
|
expect(list.find('li:first')).toHaveClass 'selected'
|
2012-10-04 08:30:41 +04:00
|
|
|
expect(list.find('li:last')).not.toHaveClass 'selected'
|
2012-10-04 01:49:08 +04:00
|
|
|
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.trigger 'core:move-down'
|
2012-10-04 01:49:08 +04:00
|
|
|
|
|
|
|
expect(list.find('li:eq(0)')).not.toHaveClass 'selected'
|
|
|
|
expect(list.find('li:eq(1)')).toHaveClass 'selected'
|
|
|
|
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.trigger 'core:move-down'
|
2012-10-04 01:49:08 +04:00
|
|
|
|
|
|
|
expect(list.find('li:eq(1)')).not.toHaveClass 'selected'
|
|
|
|
expect(list.find('li:eq(2)')).toHaveClass 'selected'
|
|
|
|
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.trigger 'core:move-up'
|
2012-10-04 01:49:08 +04:00
|
|
|
|
|
|
|
expect(list.find('li:eq(2)')).not.toHaveClass 'selected'
|
|
|
|
expect(list.find('li:eq(1)')).toHaveClass 'selected'
|
|
|
|
|
2012-10-04 02:10:45 +04:00
|
|
|
it "scrolls to keep the selected item in view", ->
|
|
|
|
selectList.attachToDom()
|
|
|
|
itemHeight = list.find('li').outerHeight()
|
|
|
|
list.height(itemHeight * 2)
|
|
|
|
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.trigger 'core:move-down'
|
|
|
|
filterEditorView.trigger 'core:move-down'
|
2012-10-04 02:10:45 +04:00
|
|
|
expect(list.scrollBottom()).toBe itemHeight * 3
|
|
|
|
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.trigger 'core:move-down'
|
2012-10-04 02:10:45 +04:00
|
|
|
expect(list.scrollBottom()).toBe itemHeight * 4
|
|
|
|
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.trigger 'core:move-up'
|
|
|
|
filterEditorView.trigger 'core:move-up'
|
2013-04-16 04:53:10 +04:00
|
|
|
expect(list.scrollTop()).toBe itemHeight
|
2012-10-04 02:10:45 +04:00
|
|
|
|
2012-10-04 03:10:43 +04:00
|
|
|
describe "the core:confirm event", ->
|
2012-10-04 05:21:07 +04:00
|
|
|
describe "when there is an item selected (because the list in not empty)", ->
|
|
|
|
it "triggers the selected hook with the selected array element", ->
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.trigger 'core:move-down'
|
|
|
|
filterEditorView.trigger 'core:move-down'
|
|
|
|
filterEditorView.trigger 'core:confirm'
|
2014-02-14 21:43:19 +04:00
|
|
|
expect(selectList.confirmed).toHaveBeenCalledWith(items[2])
|
2012-10-04 05:21:07 +04:00
|
|
|
|
|
|
|
describe "when there is no item selected (because the list is empty)", ->
|
2013-04-03 00:22:42 +04:00
|
|
|
beforeEach ->
|
|
|
|
selectList.attachToDom()
|
|
|
|
|
2012-10-04 05:21:07 +04:00
|
|
|
it "does not trigger the confirmed hook", ->
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.getEditor().insertText("i will never match anything")
|
2012-12-13 02:52:31 +04:00
|
|
|
window.advanceClock(selectList.inputThrottle)
|
|
|
|
|
2012-10-04 05:21:07 +04:00
|
|
|
expect(list.find('li')).not.toExist()
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.trigger 'core:confirm'
|
2012-10-04 05:21:07 +04:00
|
|
|
expect(selectList.confirmed).not.toHaveBeenCalled()
|
2012-10-04 01:49:08 +04:00
|
|
|
|
2012-12-29 01:29:32 +04:00
|
|
|
it "does trigger the cancelled hook", ->
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.getEditor().insertText("i will never match anything")
|
2012-12-29 01:29:32 +04:00
|
|
|
window.advanceClock(selectList.inputThrottle)
|
|
|
|
|
|
|
|
expect(list.find('li')).not.toExist()
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.trigger 'core:confirm'
|
2012-12-29 01:29:32 +04:00
|
|
|
expect(selectList.cancelled).toHaveBeenCalled()
|
|
|
|
|
2012-10-04 10:44:12 +04:00
|
|
|
describe "when a list item is clicked", ->
|
|
|
|
it "selects the item on mousedown and confirms it on mouseup", ->
|
|
|
|
item = list.find('li:eq(1)')
|
|
|
|
|
|
|
|
item.mousedown()
|
|
|
|
expect(item).toHaveClass 'selected'
|
|
|
|
item.mouseup()
|
|
|
|
|
2014-02-14 21:43:19 +04:00
|
|
|
expect(selectList.confirmed).toHaveBeenCalledWith(items[1])
|
2012-10-04 10:44:12 +04:00
|
|
|
|
2012-10-04 01:49:08 +04:00
|
|
|
describe "the core:cancel event", ->
|
2012-12-13 03:08:20 +04:00
|
|
|
it "triggers the cancelled hook and detaches and empties the select list", ->
|
2012-10-04 09:03:13 +04:00
|
|
|
spyOn(selectList, 'detach')
|
2014-02-15 02:42:48 +04:00
|
|
|
filterEditorView.trigger 'core:cancel'
|
2012-10-04 03:10:43 +04:00
|
|
|
expect(selectList.cancelled).toHaveBeenCalled()
|
2012-10-04 09:03:13 +04:00
|
|
|
expect(selectList.detach).toHaveBeenCalled()
|
2012-12-13 03:08:20 +04:00
|
|
|
expect(selectList.list).toBeEmpty()
|
2012-10-04 09:03:13 +04:00
|
|
|
|
2012-10-04 10:44:12 +04:00
|
|
|
describe "when the mini editor loses focus", ->
|
2012-10-04 09:03:13 +04:00
|
|
|
it "triggers the cancelled hook and detaches the select list", ->
|
|
|
|
spyOn(selectList, 'detach')
|
2014-10-17 06:04:47 +04:00
|
|
|
filterEditorView.trigger 'blur'
|
2012-10-04 09:03:13 +04:00
|
|
|
expect(selectList.cancelled).toHaveBeenCalled()
|
|
|
|
expect(selectList.detach).toHaveBeenCalled()
|
2013-01-26 05:31:38 +04:00
|
|
|
|
|
|
|
describe "the core:move-to-top event", ->
|
2013-04-11 21:39:19 +04:00
|
|
|
it "scrolls to the top, selects the first element, and does not bubble the event", ->
|
|
|
|
selectList.attachToDom()
|
|
|
|
moveToTopHandler = jasmine.createSpy("moveToTopHandler")
|
|
|
|
selectList.parent().on 'core:move-to-top', moveToTopHandler
|
|
|
|
|
2013-01-26 05:31:38 +04:00
|
|
|
selectList.trigger 'core:move-down'
|
|
|
|
expect(list.find('li:eq(1)')).toHaveClass 'selected'
|
|
|
|
selectList.trigger 'core:move-to-top'
|
|
|
|
expect(list.find('li:first')).toHaveClass 'selected'
|
2013-04-11 21:39:19 +04:00
|
|
|
expect(moveToTopHandler).not.toHaveBeenCalled()
|
2013-01-26 05:31:38 +04:00
|
|
|
|
|
|
|
describe "the core:move-to-bottom event", ->
|
2013-04-11 21:39:19 +04:00
|
|
|
it "scrolls to the bottom, selects the last element, and does not bubble the event", ->
|
|
|
|
selectList.attachToDom()
|
|
|
|
moveToBottomHandler = jasmine.createSpy("moveToBottomHandler")
|
|
|
|
selectList.parent().on 'core:move-to-bottom', moveToBottomHandler
|
|
|
|
|
2013-01-26 05:31:38 +04:00
|
|
|
expect(list.find('li:first')).toHaveClass 'selected'
|
|
|
|
selectList.trigger 'core:move-to-bottom'
|
|
|
|
expect(list.find('li:last')).toHaveClass 'selected'
|
2013-04-11 21:39:19 +04:00
|
|
|
expect(moveToBottomHandler).not.toHaveBeenCalled()
|