123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273 |
- 'use strict';
- const Panel = require('../src/panel');
- const PanelContainer = require('../src/panel-container');
- describe('PanelContainerElement', () => {
- let jasmineContent, element, container;
- class TestPanelContainerItem {}
- class TestPanelContainerItemElement_ extends HTMLElement {
- connectedCallback() {
- this.classList.add('test-root');
- }
- initialize(model) {
- this.model = model;
- return this;
- }
- focus() {}
- }
- window.customElements.define(
- 'atom-test-container-item-element',
- TestPanelContainerItemElement_
- );
- const TestPanelContainerItemElement = document.createElement(
- 'atom-test-container-item-element'
- );
- beforeEach(() => {
- jasmineContent = document.body.querySelector('#jasmine-content');
- atom.views.addViewProvider(TestPanelContainerItem, model =>
- TestPanelContainerItemElement.initialize(model)
- );
- container = new PanelContainer({
- viewRegistry: atom.views,
- location: 'left'
- });
- element = container.getElement();
- jasmineContent.appendChild(element);
- });
- it('has a location class with value from the model', () => {
- expect(element).toHaveClass('left');
- });
- it('removes the element when the container is destroyed', () => {
- expect(element.parentNode).toBe(jasmineContent);
- container.destroy();
- expect(element.parentNode).not.toBe(jasmineContent);
- });
- 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
- );
- 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());
- });
- describe('when the container is at the left location', () =>
- it('adds atom-panel elements when a new panel is added to the container; removes them when the panels are destroyed', () => {
- expect(element.childNodes.length).toBe(0);
- const panel1 = new Panel(
- { item: new TestPanelContainerItem() },
- atom.views
- );
- 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
- expect(element.childNodes[0].tagName).toBe('ATOM-PANEL');
- const panel2 = new Panel(
- { item: new TestPanelContainerItem() },
- atom.views
- );
- 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');
- panel1.destroy();
- expect(element.childNodes.length).toBe(1);
- panel2.destroy();
- expect(element.childNodes.length).toBe(0);
- }));
- describe('when the container is at the bottom location', () => {
- beforeEach(() => {
- container = new PanelContainer({
- viewRegistry: atom.views,
- location: 'bottom'
- });
- element = container.getElement();
- jasmineContent.appendChild(element);
- });
- it('adds atom-panel elements when a new panel is added to the container; removes them when the panels are destroyed', () => {
- expect(element.childNodes.length).toBe(0);
- const panel1 = new Panel(
- { item: new TestPanelContainerItem(), className: 'one' },
- atom.views
- );
- 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
- );
- container.addPanel(panel2);
- expect(element.childNodes.length).toBe(2);
- expect(panel2.getElement()).toHaveClass('two');
- panel1.destroy();
- expect(element.childNodes.length).toBe(1);
- panel2.destroy();
- expect(element.childNodes.length).toBe(0);
- });
- });
- });
- describe('when the container is modal', () => {
- beforeEach(() => {
- container = new PanelContainer({
- viewRegistry: atom.views,
- location: 'modal'
- });
- element = container.getElement();
- jasmineContent.appendChild(element);
- });
- it('allows only one panel to be visible at a time', () => {
- const panel1 = new Panel(
- { item: new TestPanelContainerItem() },
- atom.views
- );
- container.addPanel(panel1);
- expect(panel1.getElement().style.display).not.toBe('none');
- const panel2 = new Panel(
- { item: new TestPanelContainerItem() },
- atom.views
- );
- container.addPanel(panel2);
- expect(panel1.getElement().style.display).toBe('none');
- expect(panel2.getElement().style.display).not.toBe('none');
- panel1.show();
- expect(panel1.getElement().style.display).not.toBe('none');
- expect(panel2.getElement().style.display).toBe('none');
- });
- it("adds the 'modal' class to panels", () => {
- const panel1 = new Panel(
- { item: new TestPanelContainerItem() },
- atom.views
- );
- 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');
- });
- describe('autoFocus', () => {
- function createPanel(autoFocus = true) {
- const panel = new Panel(
- {
- item: new TestPanelContainerItem(),
- autoFocus: autoFocus,
- visible: false
- },
- atom.views
- );
- container.addPanel(panel);
- return panel;
- }
- it('focuses the first tabbable item if available', () => {
- const panel = createPanel();
- const panelEl = panel.getElement();
- const inputEl = document.createElement('input');
- panelEl.appendChild(inputEl);
- expect(document.activeElement).not.toBe(inputEl);
- panel.show();
- expect(document.activeElement).toBe(inputEl);
- panel.destroy();
- });
- it('focuses the autoFocus element if available', () => {
- const inputEl1 = document.createElement('input');
- const inputEl2 = document.createElement('input');
- const panel = createPanel(inputEl2);
- const panelEl = panel.getElement();
- panelEl.appendChild(inputEl1);
- panelEl.appendChild(inputEl2);
- expect(document.activeElement).not.toBe(inputEl2);
- panel.show();
- expect(document.activeElement).toBe(inputEl2);
- panel.destroy();
- });
- it('focuses the entire panel item when no tabbable item is available and the panel is focusable', () => {
- const panel = createPanel();
- const panelEl = panel.getElement();
- spyOn(panelEl, 'focus');
- panel.show();
- expect(panelEl.focus).toHaveBeenCalled();
- panel.destroy()
- });
- it('returns focus to the original activeElement', () => {
- const panel = createPanel();
- const previousActiveElement = document.activeElement;
- const panelEl = panel.getElement();
- panelEl.appendChild(document.createElement('input'));
- panel.show();
- panel.hide();
- waitsFor(() => document.activeElement === previousActiveElement);
- runs(() => {
- expect(document.activeElement).toBe(previousActiveElement);
- });
- });
- });
- });
- });
|