2014-11-20 04:57:08 +03:00
|
|
|
TooltipManager = require '../src/tooltip-manager'
|
2015-04-13 13:24:25 +03:00
|
|
|
_ = require "underscore-plus"
|
2014-11-20 04:57:08 +03:00
|
|
|
|
|
|
|
describe "TooltipManager", ->
|
|
|
|
[manager, element] = []
|
|
|
|
|
2015-04-13 13:24:25 +03:00
|
|
|
ctrlX = _.humanizeKeystroke("ctrl-x")
|
|
|
|
ctrlY = _.humanizeKeystroke("ctrl-y")
|
|
|
|
|
2014-11-20 04:57:08 +03:00
|
|
|
beforeEach ->
|
|
|
|
manager = new TooltipManager
|
|
|
|
element = document.createElement('div')
|
|
|
|
element.classList.add('foo')
|
|
|
|
jasmine.attachToDOM(element)
|
|
|
|
|
|
|
|
hover = (element, fn) ->
|
2015-09-05 02:08:11 +03:00
|
|
|
element.dispatchEvent(new CustomEvent('mouseenter', bubbles: true))
|
2014-11-20 04:57:08 +03:00
|
|
|
advanceClock(manager.defaults.delay.show)
|
|
|
|
fn()
|
2015-09-05 02:08:11 +03:00
|
|
|
element.dispatchEvent(new CustomEvent('mouseleave', bubbles: true))
|
2014-11-20 04:57:08 +03:00
|
|
|
advanceClock(manager.defaults.delay.hide)
|
|
|
|
|
|
|
|
describe "::add(target, options)", ->
|
2015-09-05 02:08:11 +03:00
|
|
|
it "creates a tooltip based on the given options when hovering over the target element", ->
|
|
|
|
manager.add element, title: "Title"
|
|
|
|
hover element, ->
|
|
|
|
expect(document.body.querySelector(".tooltip")).toHaveText("Title")
|
|
|
|
|
|
|
|
describe "when a selector is specified", ->
|
|
|
|
it "creates a tooltip when hovering over a descendant of the target that matches the selector", ->
|
|
|
|
child = document.createElement('div')
|
|
|
|
child.classList.add('bar')
|
|
|
|
grandchild = document.createElement('div')
|
|
|
|
element.appendChild(child)
|
|
|
|
child.appendChild(grandchild)
|
|
|
|
|
|
|
|
manager.add element, selector: '.bar', title: 'Bar'
|
|
|
|
|
|
|
|
hover grandchild, ->
|
|
|
|
expect(document.body.querySelector('.tooltip')).toHaveText('Bar')
|
|
|
|
expect(document.body.querySelector('.tooltip')).toBeNull()
|
2014-11-20 04:57:08 +03:00
|
|
|
|
|
|
|
describe "when a keyBindingCommand is specified", ->
|
|
|
|
describe "when a title is specified", ->
|
|
|
|
it "appends the key binding corresponding to the command to the title", ->
|
|
|
|
atom.keymaps.add 'test',
|
|
|
|
'.foo': 'ctrl-x ctrl-y': 'test-command'
|
2014-11-20 05:10:36 +03:00
|
|
|
'.bar': 'ctrl-x ctrl-z': 'test-command'
|
2014-11-20 04:57:08 +03:00
|
|
|
|
|
|
|
manager.add element, title: "Title", keyBindingCommand: 'test-command'
|
|
|
|
|
|
|
|
hover element, ->
|
|
|
|
tooltipElement = document.body.querySelector(".tooltip")
|
2015-04-13 13:24:25 +03:00
|
|
|
expect(tooltipElement).toHaveText "Title #{ctrlX} #{ctrlY}"
|
2014-11-20 04:57:08 +03:00
|
|
|
|
|
|
|
describe "when no title is specified", ->
|
|
|
|
it "shows the key binding corresponding to the command alone", ->
|
|
|
|
atom.keymaps.add 'test', '.foo': 'ctrl-x ctrl-y': 'test-command'
|
|
|
|
|
|
|
|
manager.add element, keyBindingCommand: 'test-command'
|
|
|
|
|
|
|
|
hover element, ->
|
|
|
|
tooltipElement = document.body.querySelector(".tooltip")
|
2015-04-13 13:24:25 +03:00
|
|
|
expect(tooltipElement).toHaveText "#{ctrlX} #{ctrlY}"
|
2014-11-20 05:10:36 +03:00
|
|
|
|
|
|
|
describe "when a keyBindingTarget is specified", ->
|
|
|
|
it "looks up the key binding relative to the target", ->
|
|
|
|
atom.keymaps.add 'test',
|
|
|
|
'.bar': 'ctrl-x ctrl-z': 'test-command'
|
|
|
|
'.foo': 'ctrl-x ctrl-y': 'test-command'
|
|
|
|
|
|
|
|
manager.add element, keyBindingCommand: 'test-command', keyBindingTarget: element
|
|
|
|
|
|
|
|
hover element, ->
|
|
|
|
tooltipElement = document.body.querySelector(".tooltip")
|
2015-04-13 13:24:25 +03:00
|
|
|
expect(tooltipElement).toHaveText "#{ctrlX} #{ctrlY}"
|
2014-11-20 05:19:05 +03:00
|
|
|
|
2014-12-03 03:31:38 +03:00
|
|
|
it "does not display the keybinding if there is nothing mapped to the specified keyBindingCommand", ->
|
|
|
|
manager.add element, title: 'A Title', keyBindingCommand: 'test-command', keyBindingTarget: element
|
|
|
|
|
|
|
|
hover element, ->
|
|
|
|
tooltipElement = document.body.querySelector(".tooltip")
|
|
|
|
expect(tooltipElement.textContent).toBe "A Title"
|
|
|
|
|
2014-11-20 05:19:05 +03:00
|
|
|
describe "when .dispose() is called on the returned disposable", ->
|
|
|
|
it "no longer displays the tooltip on hover", ->
|
|
|
|
disposable = manager.add element, title: "Title"
|
|
|
|
|
|
|
|
hover element, ->
|
|
|
|
expect(document.body.querySelector(".tooltip")).toHaveText("Title")
|
|
|
|
|
|
|
|
disposable.dispose()
|
|
|
|
|
|
|
|
hover element, ->
|
|
|
|
expect(document.body.querySelector(".tooltip")).toBeNull()
|
2015-09-04 20:29:24 +03:00
|
|
|
|
|
|
|
describe "when the window is resized", ->
|
|
|
|
it "hides the tooltips", ->
|
|
|
|
manager.add element, title: "Title"
|
|
|
|
hover element, ->
|
|
|
|
expect(document.body.querySelector(".tooltip")).toBeDefined()
|
|
|
|
window.dispatchEvent(new CustomEvent('resize'))
|
|
|
|
expect(document.body.querySelector(".tooltip")).toBeNull()
|