pulsar/spec/panel-container-element-spec.js

217 lines
7.3 KiB
JavaScript
Raw Normal View History

2017-03-08 01:52:32 +03:00
'use strict'
2017-03-08 01:30:33 +03:00
const Panel = require('../src/panel')
const PanelContainer = require('../src/panel-container')
2017-03-08 01:52:32 +03:00
describe('PanelContainerElement', () => {
let jasmineContent, element, container
class TestPanelContainerItem {
}
2017-03-08 01:30:33 +03:00
class TestPanelContainerItemElement_ extends HTMLElement {
createdCallback () {
2017-03-08 01:52:32 +03:00
this.classList.add('test-root')
}
2017-03-08 01:30:33 +03:00
initialize (model) {
this.model = model
return this
}
focus() {}
}
2017-03-08 01:52:32 +03:00
const TestPanelContainerItemElement = document.registerElement(
'atom-test-container-item-element',
{prototype: TestPanelContainerItemElement_.prototype}
)
2017-03-08 01:52:32 +03:00
beforeEach(() => {
2017-03-08 01:30:33 +03:00
jasmineContent = document.body.querySelector('#jasmine-content')
2017-03-08 01:52:32 +03:00
atom.views.addViewProvider(
TestPanelContainerItem,
model => new TestPanelContainerItemElement().initialize(model)
)
container = new PanelContainer({viewRegistry: atom.views, location: 'left'})
element = container.getElement()
2017-03-08 01:52:32 +03:00
jasmineContent.appendChild(element)
2017-03-08 01:30:33 +03:00
})
2017-03-08 01:52:32 +03:00
it('has a location class with value from the model', () => {
expect(element).toHaveClass('left')
})
2017-03-08 01:52:32 +03:00
it('removes the element when the container is destroyed', () => {
2017-03-08 01:30:33 +03:00
expect(element.parentNode).toBe(jasmineContent)
container.destroy()
2017-03-08 01:52:32 +03:00
expect(element.parentNode).not.toBe(jasmineContent)
2017-03-08 01:30:33 +03:00
})
2017-03-08 01:52:32 +03:00
describe('adding and removing panels', () => {
it('allows panels to be inserted at any position', () => {
const panel1 = new Panel({item: new TestPanelContainerItem(), priority: 10}, atom.views)
const panel2 = new Panel({item: new TestPanelContainerItem(), priority: 5}, atom.views)
const panel3 = new Panel({item: new TestPanelContainerItem(), priority: 8}, atom.views)
2017-03-08 01:30:33 +03:00
container.addPanel(panel1)
container.addPanel(panel2)
container.addPanel(panel3)
expect(element.childNodes[2]).toBe(panel1.getElement())
expect(element.childNodes[1]).toBe(panel3.getElement())
expect(element.childNodes[0]).toBe(panel2.getElement())
2017-03-08 01:30:33 +03:00
})
2017-03-08 01:30:33 +03:00
describe('when the container is at the left location', () =>
2017-03-08 01:52:32 +03:00
it('adds atom-panel elements when a new panel is added to the container; removes them when the panels are destroyed', () => {
2017-03-08 01:30:33 +03:00
expect(element.childNodes.length).toBe(0)
const panel1 = new Panel({item: new TestPanelContainerItem()}, atom.views)
2017-03-08 01:30:33 +03:00
container.addPanel(panel1)
expect(element.childNodes.length).toBe(1)
expect(element.childNodes[0]).toHaveClass('left')
expect(element.childNodes[0]).toHaveClass('tool-panel') // legacy selector support
expect(element.childNodes[0]).toHaveClass('panel-left') // legacy selector support
2017-03-08 01:30:33 +03:00
expect(element.childNodes[0].tagName).toBe('ATOM-PANEL')
const panel2 = new Panel({item: new TestPanelContainerItem()}, atom.views)
2017-03-08 01:30:33 +03:00
container.addPanel(panel2)
expect(element.childNodes.length).toBe(2)
expect(panel1.getElement().style.display).not.toBe('none')
expect(panel2.getElement().style.display).not.toBe('none')
2017-03-08 01:30:33 +03:00
panel1.destroy()
expect(element.childNodes.length).toBe(1)
2017-03-08 01:30:33 +03:00
panel2.destroy()
2017-03-08 01:52:32 +03:00
expect(element.childNodes.length).toBe(0)
})
2017-03-08 01:30:33 +03:00
)
2017-03-08 01:52:32 +03:00
describe('when the container is at the bottom location', () => {
beforeEach(() => {
container = new PanelContainer({viewRegistry: atom.views, location: 'bottom'})
element = container.getElement()
2017-03-08 01:52:32 +03:00
jasmineContent.appendChild(element)
2017-03-08 01:30:33 +03:00
})
2017-03-08 01:52:32 +03:00
it('adds atom-panel elements when a new panel is added to the container; removes them when the panels are destroyed', () => {
2017-03-08 01:30:33 +03:00
expect(element.childNodes.length).toBe(0)
const panel1 = new Panel({item: new TestPanelContainerItem(), className: 'one'}, atom.views)
2017-03-08 01:30:33 +03:00
container.addPanel(panel1)
expect(element.childNodes.length).toBe(1)
expect(element.childNodes[0]).toHaveClass('bottom')
expect(element.childNodes[0]).toHaveClass('tool-panel') // legacy selector support
expect(element.childNodes[0]).toHaveClass('panel-bottom') // legacy selector support
expect(element.childNodes[0].tagName).toBe('ATOM-PANEL')
expect(panel1.getElement()).toHaveClass('one')
const panel2 = new Panel({item: new TestPanelContainerItem(), className: 'two'}, atom.views)
2017-03-08 01:30:33 +03:00
container.addPanel(panel2)
expect(element.childNodes.length).toBe(2)
expect(panel2.getElement()).toHaveClass('two')
2017-03-08 01:30:33 +03:00
panel1.destroy()
expect(element.childNodes.length).toBe(1)
2017-03-08 01:30:33 +03:00
panel2.destroy()
2017-03-08 01:52:32 +03:00
expect(element.childNodes.length).toBe(0)
2017-03-08 01:30:33 +03:00
})
})
})
2017-03-08 01:52:32 +03:00
describe('when the container is modal', () => {
beforeEach(() => {
container = new PanelContainer({viewRegistry: atom.views, location: 'modal'})
element = container.getElement()
2017-03-08 01:52:32 +03:00
jasmineContent.appendChild(element)
2017-03-08 01:30:33 +03:00
})
2017-03-08 01:52:32 +03:00
it('allows only one panel to be visible at a time', () => {
const panel1 = new Panel({item: new TestPanelContainerItem()}, atom.views)
2017-03-08 01:30:33 +03:00
container.addPanel(panel1)
expect(panel1.getElement().style.display).not.toBe('none')
const panel2 = new Panel({item: new TestPanelContainerItem()}, atom.views)
2017-03-08 01:30:33 +03:00
container.addPanel(panel2)
expect(panel1.getElement().style.display).toBe('none')
expect(panel2.getElement().style.display).not.toBe('none')
2017-03-08 01:30:33 +03:00
panel1.show()
expect(panel1.getElement().style.display).not.toBe('none')
expect(panel2.getElement().style.display).toBe('none')
2017-03-08 01:30:33 +03:00
})
2017-03-08 01:52:32 +03:00
it("adds the 'modal' class to panels", () => {
const panel1 = new Panel({item: new TestPanelContainerItem()}, atom.views)
2017-03-08 01:30:33 +03:00
container.addPanel(panel1)
expect(panel1.getElement()).toHaveClass('modal')
// legacy selector support
expect(panel1.getElement()).not.toHaveClass('tool-panel')
expect(panel1.getElement()).toHaveClass('overlay')
expect(panel1.getElement()).toHaveClass('from-top')
2017-03-08 01:30:33 +03:00
})
2017-08-12 08:23:35 +03:00
describe("autoFocus", () => {
function createPanel() {
const panel = new Panel(
{
item: new TestPanelContainerItem(),
autoFocus: true,
visible: false
},
atom.views
)
container.addPanel(panel)
return panel
}
it("focuses the first tabbable item if available", () => {
2017-08-12 08:37:11 +03:00
const panel = createPanel()
2017-08-12 08:23:35 +03:00
const panelEl = panel.getElement()
const inputEl = document.createElement('input')
2017-08-14 19:56:43 +03:00
panelEl.appendChild(inputEl)
2017-08-12 08:23:35 +03:00
expect(document.activeElement).not.toBe(inputEl)
2017-08-14 19:56:43 +03:00
2017-08-12 08:23:35 +03:00
panel.show()
expect(document.activeElement).toBe(inputEl)
})
2017-08-12 08:23:35 +03:00
it("focuses the entire panel item when no tabbable item is available and the panel is focusable", () => {
2017-08-12 08:37:11 +03:00
const panel = createPanel()
2017-08-12 08:23:35 +03:00
const panelEl = panel.getElement()
2017-08-12 08:23:35 +03:00
spyOn(panelEl, 'focus')
panel.show()
expect(panelEl.focus).toHaveBeenCalled()
})
2017-08-12 08:23:35 +03:00
it("returns focus to the original activeElement", () => {
2017-08-12 08:37:11 +03:00
const panel = createPanel()
2017-08-12 08:23:35 +03:00
const previousActiveElement = document.activeElement
const panelEl = panel.getElement()
panelEl.appendChild(document.createElement('input'))
2017-08-12 08:23:35 +03:00
panel.show()
panel.hide()
2017-08-12 08:23:35 +03:00
waitsFor(() => document.activeElement === previousActiveElement)
runs(() => {
expect(document.activeElement).toBe(previousActiveElement)
})
})
})
2017-03-08 01:30:33 +03:00
})
})