@api-client/ui 0.0.14 → 0.0.17

package/test/elements/layout/SplitLayoutManager.test.ts

@@ -1,726 +1,735 @@
-import { assert, aTimeout, fixture, html } from '@open-wc/testing';
-import { TemplateResult } from 'lit';
-import sinon from 'sinon';
-import { ISplitItem, SplitItem } from '../../../src/elements/layout/SplitItem.js';
-import { ITabCloseDetail, SplitLayout } from '../../../src/elements/layout/SplitLayout.js';
-import { ISplitPanel, SplitPanel } from '../../../src/elements/layout/SplitPanel.js';
-import SplitView from '../../../src/elements/layout/SplitView.js';
-import { LayoutType, SplitDirection, SplitRegion } from '../../../src/elements/layout/type.js';
-import '../../../src/define/layout/split-view.js';
+import { assert, aTimeout, fixture, html } from '@open-wc/testing'
+import { TemplateResult } from 'lit'
+import sinon from 'sinon'
+import { ISplitItem, SplitItem } from '../../../src/elements/layout/SplitItem.js'
+import { ITabCloseDetail, SplitLayout } from '../../../src/elements/layout/SplitLayout.js'
+import { ISplitPanel, SplitPanel } from '../../../src/elements/layout/SplitPanel.js'
+import SplitView from '../../../src/elements/layout/SplitView.js'
+import { LayoutType, SplitDirection, SplitRegion } from '../../../src/elements/layout/type.js'
+import '../../../src/define/layout/split-view.js'
 
 describe('layout', () => {
   describe('SplitLayout', () => {
     async function splitViewFixture(key: string): Promise<SplitView> {
-      return fixture(html`
-      <split-view .key="${key}">
-        <div id="v1"><button>a</button></div>
-        <div id="v2"><button>b</button></div>
-      </split-view>`);
+      return fixture(
+        html` <split-view .key="${key}">
+          <div id="v1"><button>a</button></div>
+          <div id="v2"><button>b</button></div>
+        </split-view>`
+      )
     }
 
     describe('new()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('sets the active', () => {
         manager.new({
           definitions: [],
           items: [],
           active: 'test-id',
-        });
+        })
 
         assert.equal(manager.active, 'test-id')
-      });
+      })
 
       it('restores the items', () => {
         manager.new({
           definitions: [],
           items: ['test-id'],
-        });
-        assert.lengthOf(manager.items, 1, 'has a single item');
-        const [item] = manager.items;
-        assert.equal(item.type, LayoutType.panel, 'the type is a panel by default');
-        assert.equal(item.key, 'test-id', 'the key is restored');
-      });
+        })
+        assert.lengthOf(manager.items, 1, 'has a single item')
+        const [item] = manager.items
+        assert.equal(item.type, LayoutType.panel, 'the type is a panel by default')
+        assert.equal(item.key, 'test-id', 'the key is restored')
+      })
 
       it('restores a split panel', () => {
         manager.new({
-          definitions: [{
-            type: LayoutType.panel,
-            value: {
-              layout: SplitDirection.vertical,
-              key: 'test-key'
-            } as ISplitPanel,
-          }],
+          definitions: [
+            {
+              type: LayoutType.panel,
+              value: {
+                layout: SplitDirection.vertical,
+                key: 'test-key',
+              } as ISplitPanel,
+            },
+          ],
           items: [],
-        });
-        assert.equal(manager.definitions.size, 1, 'has a single definition');
-        const read = manager.definitions.get('test-key')!;
+        })
+        assert.equal(manager.definitions.size, 1, 'has a single definition')
+        const read = manager.definitions.get('test-key')!
         assert.ok(read, 'definitions have the item')
-        
-        assert.instanceOf(read.value, SplitPanel, 'has the value');
-        assert.equal(read.type, LayoutType.panel, 'has the type');
-      });
+
+        assert.instanceOf(read.value, SplitPanel, 'has the value')
+        assert.equal(read.type, LayoutType.panel, 'has the type')
+      })
 
       it('restores a split item', () => {
         manager.new({
-          definitions: [{
-            type: LayoutType.item,
-            value: {
-              key: 'test-key',
-              kind: 'test-kind',
-              label: 'test-label'
-            } as ISplitItem,
-          }],
+          definitions: [
+            {
+              type: LayoutType.item,
+              value: {
+                key: 'test-key',
+                kind: 'test-kind',
+                label: 'test-label',
+              } as ISplitItem,
+            },
+          ],
           items: [],
-        });
-        assert.equal(manager.definitions.size, 1, 'has a single definition');
-        const read = manager.definitions.get('test-key')!;
+        })
+        assert.equal(manager.definitions.size, 1, 'has a single definition')
+        const read = manager.definitions.get('test-key')!
         assert.ok(read, 'definitions have the item')
 
-        assert.equal(read.type, LayoutType.item, 'has the type');
-        assert.instanceOf(read.value, SplitItem, 'has the value');
-      });
-    });
+        assert.equal(read.type, LayoutType.item, 'has the type')
+        assert.instanceOf(read.value, SplitItem, 'has the value')
+      })
+    })
 
     describe('toJSON()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('serializes an item', () => {
         manager.new({
-          definitions: [{
-            type: LayoutType.item,
-            value: {
-              key: 'test-key',
-              kind: 'test-kind',
-              label: 'test-label'
-            } as ISplitItem,
-          }],
+          definitions: [
+            {
+              type: LayoutType.item,
+              value: {
+                key: 'test-key',
+                kind: 'test-kind',
+                label: 'test-label',
+              } as ISplitItem,
+            },
+          ],
           items: [],
-        });
+        })
 
-        const result = manager.toJSON();
-        const { definitions } = result;
-        assert.lengthOf(definitions, 1, 'definitions has one item');
-        const [item] = definitions;
-        assert.equal(item.type, LayoutType.item, 'the item is the "item" type');
-        assert.equal(item.value.key, 'test-key', 'the item has the key');
-      });
+        const result = manager.toJSON()
+        const { definitions } = result
+        assert.lengthOf(definitions, 1, 'definitions has one item')
+        const [item] = definitions
+        assert.equal(item.type, LayoutType.item, 'the item is the "item" type')
+        assert.equal(item.value.key, 'test-key', 'the item has the key')
+      })
 
       it('serializes a panel', () => {
         manager.new({
-          definitions: [{
-            type: LayoutType.panel,
-            value: {
-              layout: SplitDirection.vertical,
-              key: 'test-key'
-            } as ISplitPanel,
-          }],
+          definitions: [
+            {
+              type: LayoutType.panel,
+              value: {
+                layout: SplitDirection.vertical,
+                key: 'test-key',
+              } as ISplitPanel,
+            },
+          ],
           items: [],
-        });
+        })
 
-        const result = manager.toJSON();
-        const { definitions } = result;
-        assert.lengthOf(definitions, 1, 'definitions has one item');
-        const [item] = definitions;
-        assert.equal(item.type, LayoutType.panel, 'the panel is the "panel" type');
-        assert.equal(item.value.key, 'test-key', 'the panel has the key');
-      });
+        const result = manager.toJSON()
+        const { definitions } = result
+        assert.lengthOf(definitions, 1, 'definitions has one item')
+        const [item] = definitions
+        assert.equal(item.type, LayoutType.panel, 'the panel is the "panel" type')
+        assert.equal(item.value.key, 'test-key', 'the panel has the key')
+      })
 
       it('serializes the active', () => {
         manager.new({
           definitions: [],
           items: [],
-          active: 'test-key'
-        });
+          active: 'test-key',
+        })
 
-        const result = manager.toJSON();
-        const { active } = result;
-        assert.equal(active, 'test-key');
-      });
-    });
+        const result = manager.toJSON()
+        const { active } = result
+        assert.equal(active, 'test-key')
+      })
+    })
 
     describe('initialize()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       afterEach(() => {
-        manager.dispose();
-      });
+        manager.dispose()
+      })
 
       it('ignores then state when not provided', async () => {
-        await manager.initialize();
-        assert.deepEqual(manager.items, []);
-        assert.equal(manager.definitions.size, 0);
-        assert.isUndefined(manager.active);
-      });
+        await manager.initialize()
+        assert.deepEqual(manager.items, [])
+        assert.equal(manager.definitions.size, 0)
+        assert.isUndefined(manager.active)
+      })
 
       it('calls the new() function when the state is set', async () => {
-        const spy = sinon.spy(manager, 'new');
+        const spy = sinon.spy(manager, 'new')
         await manager.initialize({
           definitions: [],
           items: [],
-        });
-        assert.isTrue(spy.calledOnce);
-      });
-    });
+        })
+        assert.isTrue(spy.calledOnce)
+      })
+    })
 
     describe('findView()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('returns undefined when no panel', () => {
-        const result = manager.findView('some-key');
-        assert.isUndefined(result);
-      });
+        const result = manager.findView('some-key')
+        assert.isUndefined(result)
+      })
 
       it('returns the split view element', async () => {
-        await splitViewFixture('abc');
-        const result = manager.findView('abc');
-        assert.ok(result);
-      });
-    });
+        await splitViewFixture('abc')
+        const result = manager.findView('abc')
+        assert.ok(result)
+      })
+    })
 
     describe('getParents()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('returns empty array when no item or panel', () => {
-        const result = manager.getParents('unknown');
-        assert.deepEqual(result, []);
-      });
+        const result = manager.getParents('unknown')
+        assert.deepEqual(result, [])
+      })
 
       it('returns a parent for a panel that is a panel', () => {
-        const p1 = manager.addPanel();
-        const p2 = p1.addPanel();
-        const result = manager.getParents(p2.key);
-        assert.deepEqual(result, [p1]);
-      });
+        const p1 = manager.addPanel()
+        const p2 = p1.addPanel()
+        const result = manager.getParents(p2.key)
+        assert.deepEqual(result, [p1])
+      })
 
       it('returns empty array when the parent is the manager', () => {
-        const p1 = manager.addPanel();
-        const result = manager.getParents(p1.key);
-        assert.deepEqual(result, []);
-      });
+        const p1 = manager.addPanel()
+        const result = manager.getParents(p1.key)
+        assert.deepEqual(result, [])
+      })
 
       it('returns a parent for an item', () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         const i1 = p1.addItem({
           kind: 'a',
           key: 'b',
           label: 'c',
-        });
-        const result = manager.getParents(i1.key);
-        assert.deepEqual(result, [p1]);
-      });
+        })
+        const result = manager.getParents(i1.key)
+        assert.deepEqual(result, [p1])
+      })
 
       it('returns empty array for an item that has been removes', () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         const i1 = p1.addItem({
           kind: 'a',
           key: 'b',
           label: 'c',
-        });
-        p1.removeChildItem(i1);
-        const result = manager.getParents(i1.key);
-        assert.deepEqual(result, []);
-      });
-    });
+        })
+        p1.removeChildItem(i1)
+        const result = manager.getParents(i1.key)
+        assert.deepEqual(result, [])
+      })
+    })
 
     describe('findPanel()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('finds a direct panel', () => {
-        const p1 = manager.addPanel();
-        const result = manager.findPanel(p1.key);
-        assert.deepEqual(result, p1);
-      });
+        const p1 = manager.addPanel()
+        const result = manager.findPanel(p1.key)
+        assert.deepEqual(result, p1)
+      })
 
       it('finds an indirect panel', () => {
-        const p1 = manager.addPanel();
-        const p2 = p1.addPanel();
-        const result = manager.findPanel(p2.key);
-        assert.deepEqual(result, p2);
-      });
+        const p1 = manager.addPanel()
+        const p2 = p1.addPanel()
+        const result = manager.findPanel(p2.key)
+        assert.deepEqual(result, p2)
+      })
 
       it('returns undefined when no panel', () => {
-        const result = manager.findPanel('test');
-        assert.isUndefined(result);
-      });
+        const result = manager.findPanel('test')
+        assert.isUndefined(result)
+      })
 
       it('returns undefined when referencing an item', () => {
         const i1 = manager.addItem({
           key: '',
           kind: '',
           label: '',
-        });
-        const result = manager.findPanel(i1.key);
-        assert.isUndefined(result);
-      });
-    });
+        })
+        const result = manager.findPanel(i1.key)
+        assert.isUndefined(result)
+      })
+    })
 
     describe('findItem()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('finds an item', () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         const i1 = p1.addItem({
           key: '',
           kind: '',
           label: '',
-        });
-        const result = manager.findItem(i1.key);
-        assert.deepEqual(result, i1);
-      });
+        })
+        const result = manager.findItem(i1.key)
+        assert.deepEqual(result, i1)
+      })
 
       it('returns undefined when no item', () => {
-        const result = manager.findItem('test');
-        assert.isUndefined(result);
-      });
+        const result = manager.findItem('test')
+        assert.isUndefined(result)
+      })
 
       it('returns undefined when referencing a panel', () => {
-        const p1 = manager.addPanel();
-        const p2 = p1.addPanel();
-        const result = manager.findItem(p2.key);
-        assert.isUndefined(result);
-      });
-    });
+        const p1 = manager.addPanel()
+        const p2 = p1.addPanel()
+        const result = manager.findItem(p2.key)
+        assert.isUndefined(result)
+      })
+    })
 
     describe('notifyChange()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('dispatches the "change" event', () => {
-        const spy = sinon.spy();
-        manager.addEventListener('change', spy);
-        manager.notifyChange();
-        assert.isTrue(spy.calledOnce);
-      });
+        const spy = sinon.spy()
+        manager.addEventListener('change', spy)
+        manager.notifyChange()
+        assert.isTrue(spy.calledOnce)
+      })
 
       it('calls the scheduleStore() method', () => {
-        const spy = sinon.spy(manager, 'scheduleStore');
-        manager.notifyChange();
-        assert.isTrue(spy.calledOnce);
-      });
-    });
+        const spy = sinon.spy(manager, 'scheduleStore')
+        manager.notifyChange()
+        assert.isTrue(spy.calledOnce)
+      })
+    })
 
     describe('dispatchNameItem()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('dispatches the "nameitem" event', () => {
         const i1 = manager.addItem({
           key: '',
           kind: '',
           label: '',
-        });
-        const spy = sinon.spy();
-        manager.addEventListener('nameitem', spy);
-        manager.dispatchNameItem(i1);
-        assert.isTrue(spy.calledOnce);
-      });
-    });
+        })
+        const spy = sinon.spy()
+        manager.addEventListener('nameitem', spy)
+        manager.dispatchNameItem(i1)
+        assert.isTrue(spy.calledOnce)
+      })
+    })
 
     describe('notifyTabClose()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('dispatches the "nameitem" event', () => {
-        const spy = sinon.spy();
-        manager.addEventListener('closetab', spy);
-        manager.notifyTabClose('test', 'key');
-        assert.isTrue(spy.calledOnce);
-        const event = spy.args[0][0] as CustomEvent<ITabCloseDetail>;
-        assert.equal(event.detail.tab, 'test');
-        assert.equal(event.detail.panel, 'key');
-      });
-    });
+        const spy = sinon.spy()
+        manager.addEventListener('closetab', spy)
+        manager.notifyTabClose('test', 'key')
+        assert.isTrue(spy.calledOnce)
+        const event = spy.args[0][0] as CustomEvent<ITabCloseDetail>
+        assert.equal(event.detail.tab, 'test')
+        assert.equal(event.detail.panel, 'key')
+      })
+    })
 
     describe('requestNameUpdate()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('dispatches the "nameitem" event', () => {
         const i1 = manager.addItem({
           key: '',
           kind: '',
           label: '',
-        });
-        const spy = sinon.spy();
-        manager.addEventListener('nameitem', spy);
-        manager.requestNameUpdate(i1.key);
-        assert.isTrue(spy.calledOnce);
-        const event = spy.args[0][0] as CustomEvent<SplitItem>;
-        assert.deepEqual(event.detail, i1);
-      });
+        })
+        const spy = sinon.spy()
+        manager.addEventListener('nameitem', spy)
+        manager.requestNameUpdate(i1.key)
+        assert.isTrue(spy.calledOnce)
+        const event = spy.args[0][0] as CustomEvent<SplitItem>
+        assert.deepEqual(event.detail, i1)
+      })
 
       it('does not dispatch the "nameitem" event when the item is not found', () => {
-        const spy = sinon.spy();
-        manager.addEventListener('nameitem', spy);
-        manager.requestNameUpdate('unknown');
-        assert.isFalse(spy.called);
-      });
+        const spy = sinon.spy()
+        manager.addEventListener('nameitem', spy)
+        manager.requestNameUpdate('unknown')
+        assert.isFalse(spy.called)
+      })
 
       it('calls update view on the parent', () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         const i1 = manager.addItem({
           key: 'test-id',
           kind: '',
           label: '',
-        });
+        })
         manager.addEventListener('nameitem', (e: Event): void => {
-          const event = e as CustomEvent<SplitItem>;
-          event.detail.label = 'changed';
-        });
-        const spy = sinon.spy(p1, 'updateView');
-        manager.requestNameUpdate(i1.key);
-        assert.isTrue(spy.calledOnce);
-      });
-    });
+          const event = e as CustomEvent<SplitItem>
+          event.detail.label = 'changed'
+        })
+        const spy = sinon.spy(p1, 'updateView')
+        manager.requestNameUpdate(i1.key)
+        assert.isTrue(spy.calledOnce)
+      })
+    })
 
     describe('addPanel()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('adds a panel to the definitions', () => {
-        const p1 = manager.addPanel();
-        const def = manager.definitions.get(p1.key);
-        assert.deepEqual(def?.value, p1);
-      });
+        const p1 = manager.addPanel()
+        const def = manager.definitions.get(p1.key)
+        assert.deepEqual(def?.value, p1)
+      })
 
       it('adds a panel to the root items', () => {
-        const p1 = manager.addPanel();
-        const item = manager.items.find(i => i.key === p1.key)!;
-        assert.ok(item, 'has the item');
-        assert.equal(item?.type, LayoutType.panel, 'has the correct type');
-      });
+        const p1 = manager.addPanel()
+        const item = manager.items.find((i) => i.key === p1.key)!
+        assert.ok(item, 'has the item')
+        assert.equal(item?.type, LayoutType.panel, 'has the correct type')
+      })
 
       it('adds a panel to another panel', () => {
-        const p1 = manager.addPanel();
-        const p2 = p1.addPanel();
-        const def = manager.definitions.get(p2.key);
-        assert.deepEqual(def?.value, p2, 'has the definition');
-        const parent = p2.getParent();
-        assert.deepEqual(parent, p1, 'has the parent');
-      });
+        const p1 = manager.addPanel()
+        const p2 = p1.addPanel()
+        const def = manager.definitions.get(p2.key)
+        assert.deepEqual(def?.value, p2, 'has the definition')
+        const parent = p2.getParent()
+        assert.deepEqual(parent, p1, 'has the parent')
+      })
 
       it('throws when the parent panel is not found', () => {
         assert.throws(() => {
-          manager.addPanel({ parent: 'unknown' });
-        }, `Parent panel not found.`);
-      });
+          manager.addPanel({ parent: 'unknown' })
+        }, `Parent panel not found.`)
+      })
 
       it('throws when the parent panel already has items', () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         p1.addItem({
           kind: 'a',
           key: 'b',
           label: 'c',
-        });
+        })
         assert.throws(() => {
-          manager.addPanel({ parent: p1.key });
-        }, `Unable to create panel in a panel that has items.`);
-      });
-      
+          manager.addPanel({ parent: p1.key })
+        }, `Unable to create panel in a panel that has items.`)
+      })
+
       it('sets the default layout', () => {
-        const p1 = manager.addPanel();
-        assert.equal(p1.layout, SplitDirection.horizontal);
-      });
-      
+        const p1 = manager.addPanel()
+        assert.equal(p1.layout, SplitDirection.horizontal)
+      })
+
       it('sets the configured layout', () => {
-        const p1 = manager.addPanel({ layout: SplitDirection.vertical });
-        assert.equal(p1.layout, SplitDirection.vertical);
-      });
-    });
+        const p1 = manager.addPanel({ layout: SplitDirection.vertical })
+        assert.equal(p1.layout, SplitDirection.vertical)
+      })
+    })
 
     describe('addItem()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('adds a panel with an item', () => {
         const i1 = manager.addItem({
           key: 'test-id',
           kind: '',
           label: '',
-        });
-        const parent = i1.getParents()[0];
-        assert.ok(parent, 'has the parent');
-        const foundParent = manager.findPanel(parent.key);
-        assert.ok(foundParent, 'the parent is in the layout');
-        const foundItem = manager.findItem(i1.key);
-        assert.ok(foundItem, 'the item is in the layout');
-      });
+        })
+        const parent = i1.getParents()[0]
+        assert.ok(parent, 'has the parent')
+        const foundParent = manager.findPanel(parent.key)
+        assert.ok(foundParent, 'the parent is in the layout')
+        const foundItem = manager.findItem(i1.key)
+        assert.ok(foundItem, 'the item is in the layout')
+      })
 
       it('adds an item to a first panel that has no panels', () => {
-        const p1 = manager.addPanel();
-        const p2 = p1.addPanel();
+        const p1 = manager.addPanel()
+        const p2 = p1.addPanel()
         const i1 = manager.addItem({
           key: 'test-id',
           kind: '',
           label: '',
-        });
-        const itemParent = i1.getParents()[0];
+        })
+        const itemParent = i1.getParents()[0]
         // p1 has panels in it so it must be p2.
-        assert.deepEqual(itemParent, p2);
-      });
+        assert.deepEqual(itemParent, p2)
+      })
 
       it('adds an item to an active panel', () => {
-        manager.addPanel();
-        const p2 = manager.addPanel();
-        manager.setActive(p2.key);
+        manager.addPanel()
+        const p2 = manager.addPanel()
+        manager.setActive(p2.key)
         const i1 = manager.addItem({
           key: 'test-id',
           kind: '',
           label: '',
-        });
-        const itemParent = i1.getParents()[0];
-        assert.deepEqual(itemParent, p2);
-      });
+        })
+        const itemParent = i1.getParents()[0]
+        assert.deepEqual(itemParent, p2)
+      })
 
       it('notifies update', () => {
-        const spy = sinon.spy();
-        manager.addEventListener('change', spy);
+        const spy = sinon.spy()
+        manager.addEventListener('change', spy)
         manager.addItem({
           key: 'test-id',
           kind: '',
           label: '',
-        });
-        assert.isTrue(spy.calledOnce);
-      });
+        })
+        assert.isTrue(spy.calledOnce)
+      })
 
       it('updates the view', async () => {
-        const p1 = manager.addPanel();
-        const view = await splitViewFixture(p1.key);
-        const spy = sinon.spy(view, 'requestUpdate');
+        const p1 = manager.addPanel()
+        const view = await splitViewFixture(p1.key)
+        const spy = sinon.spy(view, 'requestUpdate')
         manager.addItem({
           key: 'test-id',
           kind: '',
           label: '',
-        });
-        assert.isTrue(spy.calledOnce);
-      });
-    });
+        })
+        assert.isTrue(spy.calledOnce)
+      })
+    })
 
     describe('updateView()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('calls updateView() on specified panel', () => {
-        const p1 = manager.addPanel();
-        const spy = sinon.spy(p1, 'updateView');
-        manager.updateView(p1.key);
-        assert.isTrue(spy.calledOnce);
-      });
+        const p1 = manager.addPanel()
+        const spy = sinon.spy(p1, 'updateView')
+        manager.updateView(p1.key)
+        assert.isTrue(spy.calledOnce)
+      })
 
       it('calls updateView() on an active panel', () => {
-        const p1 = manager.addPanel();
-        manager.setActive(p1.key);
-        const spy = sinon.spy(p1, 'updateView');
-        manager.updateView();
-        assert.isTrue(spy.calledOnce);
-      });
+        const p1 = manager.addPanel()
+        manager.setActive(p1.key)
+        const spy = sinon.spy(p1, 'updateView')
+        manager.updateView()
+        assert.isTrue(spy.calledOnce)
+      })
 
       it('does nothing when an active panel is not set', () => {
-        const p1 = manager.addPanel();
-        const spy = sinon.spy(p1, 'updateView');
-        manager.updateView();
-        assert.isFalse(spy.called);
-      });
-    });
+        const p1 = manager.addPanel()
+        const spy = sinon.spy(p1, 'updateView')
+        manager.updateView()
+        assert.isFalse(spy.called)
+      })
+    })
 
     describe('setItemLabel()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('sets the label on an item', () => {
         const i1 = manager.addItem({
           key: 'test-key',
           kind: '',
           label: '',
-        });
-        manager.setItemLabel(i1.key, 'updated');
-        assert.equal(i1.label, 'updated');
-      });
+        })
+        manager.setItemLabel(i1.key, 'updated')
+        assert.equal(i1.label, 'updated')
+      })
 
       it('does nothing when the item is not in the manager', () => {
         const i1 = manager.addItem({
           key: 'test-key',
           kind: '',
           label: '',
-        });
-        manager.setItemLabel('another', 'updated');
-        assert.equal(i1.label, '');
-      });
+        })
+        manager.setItemLabel('another', 'updated')
+        assert.equal(i1.label, '')
+      })
 
       it('calls the updateView() on the panel', () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         const i1 = p1.addItem({
           key: 'test-key',
           kind: '',
           label: '',
-        });
+        })
         const spy = sinon.spy(p1, 'updateView')
-        manager.setItemLabel(i1.key, 'updated');
-        assert.isTrue(spy.calledOnce);
-      });
+        manager.setItemLabel(i1.key, 'updated')
+        assert.isTrue(spy.calledOnce)
+      })
 
       it('notifies the change', () => {
         const i1 = manager.addItem({
           key: 'test-key',
           kind: '',
           label: '',
-        });
-        const spy = sinon.spy();
+        })
+        const spy = sinon.spy()
         manager.addEventListener('change', spy)
-        manager.setItemLabel(i1.key, 'updated');
-        assert.isTrue(spy.calledOnce);
-      });
+        manager.setItemLabel(i1.key, 'updated')
+        assert.isTrue(spy.calledOnce)
+      })
 
       it('does nothing when the label is the same', () => {
         const i1 = manager.addItem({
           key: 'test-key',
           kind: '',
           label: 'value',
-        });
-        const spy = sinon.spy();
+        })
+        const spy = sinon.spy()
         manager.addEventListener('change', spy)
-        manager.setItemLabel(i1.key, 'value');
-        assert.isFalse(spy.called);
-      });
-    });
+        manager.setItemLabel(i1.key, 'value')
+        assert.isFalse(spy.called)
+      })
+    })
 
     describe('removeItem()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
-      
+        manager = new SplitLayout()
+      })
+
       it('removes an item from the layout', () => {
         const i1 = manager.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
-        manager.removeItem(i1.key);
-        const read = manager.findItem(i1.key);
-        assert.isUndefined(read);
-      });
+        })
+        manager.removeItem(i1.key)
+        const read = manager.findItem(i1.key)
+        assert.isUndefined(read)
+      })
 
       it('removes only the select item', () => {
         const i1 = manager.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         const i2 = manager.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
+        })
         const i3 = manager.addItem({
           key: 'i3',
           kind: '',
           label: '',
-        });
-        manager.removeItem(i2.key);
-        assert.ok(manager.findItem(i1.key));
-        assert.isUndefined(manager.findItem(i2.key));
-        assert.ok(manager.findItem(i3.key));
-      });
+        })
+        manager.removeItem(i2.key)
+        assert.ok(manager.findItem(i1.key))
+        assert.isUndefined(manager.findItem(i2.key))
+        assert.ok(manager.findItem(i3.key))
+      })
 
       it('does nothing when item not managed by the manager', () => {
         const i1 = manager.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
-        manager.removeItem('other');
-        assert.ok(manager.findItem(i1.key));
-      });
+        })
+        manager.removeItem('other')
+        assert.ok(manager.findItem(i1.key))
+      })
 
       it('removes the panel when it was the last item', () => {
-        const p1 = manager.addPanel();
-        const p2 = p1.addPanel();
-        const p3 = p1.addPanel();
+        const p1 = manager.addPanel()
+        const p2 = p1.addPanel()
+        const p3 = p1.addPanel()
         const i1 = p3.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
-        manager.removeItem(i1.key);
-        const read3 = manager.findPanel(p3.key);
-        assert.isUndefined(read3, 'removes the parent panel');
-        const read2 = manager.findPanel(p2.key);
-        assert.ok(read2, 'has the other panel');
-      });
+        })
+        manager.removeItem(i1.key)
+        const read3 = manager.findPanel(p3.key)
+        assert.isUndefined(read3, 'removes the parent panel')
+        const read2 = manager.findPanel(p2.key)
+        assert.ok(read2, 'has the other panel')
+      })
 
       it('does not remove a panel when it was the other items', () => {
-        const p1 = manager.addPanel();
-        const p2 = p1.addPanel();
+        const p1 = manager.addPanel()
+        const p2 = p1.addPanel()
         const i1 = p2.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         p2.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
-        manager.removeItem(i1.key);
-        const read2 = manager.findPanel(p2.key);
-        assert.ok(read2, 'has the other panel');
-      });
-    });
+        })
+        manager.removeItem(i1.key)
+        const read2 = manager.findPanel(p2.key)
+        assert.ok(read2, 'has the other panel')
+      })
+    })
 
     // describe('removeRelative()', () => {
     //   let manager: SplitLayout;
@@ -766,556 +775,556 @@ describe('layout', () => {
     // });
 
     describe('moveItem()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('moves items within the same panel', () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         const i1 = p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         const i2 = p1.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
+        })
         const i3 = p1.addItem({
           key: 'i3',
           kind: '',
           label: '',
-        });
-        manager.moveItem(p1.key, p1.key, i1.key, { index: 1 });
-        assert.equal(i1.index, 1, 'the #1 has changed index');
-        assert.equal(i2.index, 0, 'the #2 has changed index');
-        assert.equal(i3.index, 2, 'the #3 has unchanged index');
-      });
+        })
+        manager.moveItem(p1.key, p1.key, i1.key, { index: 1 })
+        assert.equal(i1.index, 1, 'the #1 has changed index')
+        assert.equal(i2.index, 0, 'the #2 has changed index')
+        assert.equal(i3.index, 2, 'the #3 has unchanged index')
+      })
 
       it('moves items between layouts', () => {
-        const p1 = manager.addPanel();
-        const p2 = manager.addPanel();
+        const p1 = manager.addPanel()
+        const p2 = manager.addPanel()
         const i1 = p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         const i2 = p1.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
+        })
         const i3 = p2.addItem({
           key: 'i3',
           kind: '',
           label: '',
-        });
-        manager.moveItem(p1.key, p2.key, i1.key, { index: 0 });
-        const readI1 = manager.findItem(i1.key)!;
-        assert.ok(readI1, 'the manager has the moved item');
-        assert.isFalse(p1.hasItem(i1.key), 'item was removed from the from parent');
-        assert.isTrue(p2.hasItem(i1.key), 'target parent has the item');
-        assert.equal(i1.index, 0, 'item 1 is placed at the index');
-        assert.equal(i2.index, 0, 'item 2 has decreased index');
-        assert.equal(i3.index, 1, 'item 3 has increased index');
-      });
+        })
+        manager.moveItem(p1.key, p2.key, i1.key, { index: 0 })
+        const readI1 = manager.findItem(i1.key)!
+        assert.ok(readI1, 'the manager has the moved item')
+        assert.isFalse(p1.hasItem(i1.key), 'item was removed from the from parent')
+        assert.isTrue(p2.hasItem(i1.key), 'target parent has the item')
+        assert.equal(i1.index, 0, 'item 1 is placed at the index')
+        assert.equal(i2.index, 0, 'item 2 has decreased index')
+        assert.equal(i3.index, 1, 'item 3 has increased index')
+      })
 
       it('throws when the from parent is not found', () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         const i1 = p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         assert.throws(() => {
-          manager.moveItem('unknown', p1.key, i1.key, { index: 0 });
-        }, 'Source layout panel not found.');
-      });
+          manager.moveItem('unknown', p1.key, i1.key, { index: 0 })
+        }, 'Source layout panel not found.')
+      })
 
       it('throws when the target parent is not found', () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         const i1 = p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         assert.throws(() => {
-          manager.moveItem(p1.key, 'unknown', i1.key, { index: 0 });
-        }, 'Target layout panel not found.');
-      });
+          manager.moveItem(p1.key, 'unknown', i1.key, { index: 0 })
+        }, 'Target layout panel not found.')
+      })
 
       it('throws when the item is not found', () => {
-        const p1 = manager.addPanel();
-        const p2 = manager.addPanel();
+        const p1 = manager.addPanel()
+        const p2 = manager.addPanel()
         assert.throws(() => {
-          manager.moveItem(p1.key, p2.key, 'unknown');
-        }, 'Item not found.');
-      });
-    });
+          manager.moveItem(p1.key, p2.key, 'unknown')
+        }, 'Item not found.')
+      })
+    })
 
     describe('panelIterator()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('iterates over panels in order', () => {
-        const p1 = manager.addPanel();
-        const p2 = p1.addPanel();
-        const p3 = p1.addPanel();
-        const p4 = p2.addPanel();
-        const results: string[] = [];
+        const p1 = manager.addPanel()
+        const p2 = p1.addPanel()
+        const p3 = p1.addPanel()
+        const p4 = p2.addPanel()
+        const results: string[] = []
         for (const panel of manager.panelIterator()) {
-          results.push(panel.key);
+          results.push(panel.key)
         }
-        assert.deepEqual(results, [p1.key, p2.key, p4.key, p3.key]);
-      });
+        assert.deepEqual(results, [p1.key, p2.key, p4.key, p3.key])
+      })
 
       it('ignores panels that are not defined', () => {
-        const p1 = manager.addPanel();
-        const p2 = p1.addPanel();
+        const p1 = manager.addPanel()
+        const p2 = p1.addPanel()
         p2.items.push({
           type: LayoutType.panel,
           key: 'unknown',
-        });
-        const results: string[] = [];
+        })
+        const results: string[] = []
         for (const panel of manager.panelIterator()) {
-          results.push(panel.key);
+          results.push(panel.key)
         }
-        assert.deepEqual(results, [p1.key, p2.key]);
-      });
-    });
+        assert.deepEqual(results, [p1.key, p2.key])
+      })
+    })
 
     describe('parentItemsIterator()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('iterates over panels in order', () => {
-        const parent = 'my-parent';
-        const p1 = manager.addPanel();
-        const p2 = p1.addPanel();
-        const p3 = p1.addPanel();
-        const p4 = p2.addPanel();
+        const parent = 'my-parent'
+        const p1 = manager.addPanel()
+        const p2 = p1.addPanel()
+        const p3 = p1.addPanel()
+        const p4 = p2.addPanel()
         const i1 = p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
           parent,
-        });
+        })
         p2.addItem({
           key: 'i2',
           kind: '',
           label: '',
           parent: 'other-parent',
-        });
+        })
         p3.addItem({
           key: 'i3',
           kind: '',
           label: '',
-        });
+        })
         const i4 = p4.addItem({
           key: 'i4',
           kind: '',
           label: '',
           parent,
-        });
-        const results: string[] = [];
+        })
+        const results: string[] = []
         for (const panel of manager.parentItemsIterator(parent)) {
-          results.push(panel.key);
+          results.push(panel.key)
         }
         // i4 is first because it's panel is closer that the i1 item.
-        assert.deepEqual(results, [i4.key, i1.key]);
-      });
-    });
+        assert.deepEqual(results, [i4.key, i1.key])
+      })
+    })
 
     describe('requestNameUpdateByParent()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('updates name on items with set parent only', () => {
-        const parent = 'my-parent';
-        const p1 = manager.addPanel();
+        const parent = 'my-parent'
+        const p1 = manager.addPanel()
         const i1 = p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
           parent,
-        });
+        })
         const i2 = p1.addItem({
           key: 'i2',
           kind: '',
           label: '',
           parent: 'other-parent',
-        });
+        })
         const i3 = p1.addItem({
           key: 'i3',
           kind: '',
           label: '',
-        });
-        const p2 = manager.addPanel();
+        })
+        const p2 = manager.addPanel()
         const i4 = p2.addItem({
           key: 'i4',
           kind: '',
           label: '',
           parent,
-        });
+        })
 
-        let i = 0;
+        let i = 0
         manager.addEventListener('nameitem', (e: Event): void => {
-          const event = e as CustomEvent<SplitItem>;
-          event.detail.label = `changed ${i++}`;
-        });
-        manager.requestNameUpdateByParent(parent);
-        assert.equal(i1.label, 'changed 0', 'item 1 label has changed');
-        assert.equal(i2.label, '', 'item 2 label has not changed');
-        assert.equal(i3.label, '', 'item 3 label has not changed');
-        assert.equal(i4.label, 'changed 1', 'item 4 label has changed');
-      });
+          const event = e as CustomEvent<SplitItem>
+          event.detail.label = `changed ${i++}`
+        })
+        manager.requestNameUpdateByParent(parent)
+        assert.equal(i1.label, 'changed 0', 'item 1 label has changed')
+        assert.equal(i2.label, '', 'item 2 label has not changed')
+        assert.equal(i3.label, '', 'item 3 label has not changed')
+        assert.equal(i4.label, 'changed 1', 'item 4 label has changed')
+      })
 
       it('calls updateView() only once per panel', () => {
-        const parent = 'my-parent';
-        const p1 = manager.addPanel();
+        const parent = 'my-parent'
+        const p1 = manager.addPanel()
         p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
           parent,
-        });
+        })
         p1.addItem({
           key: 'i2',
           kind: '',
           label: '',
           parent,
-        });
-        const p2 = manager.addPanel();
+        })
+        const p2 = manager.addPanel()
         p2.addItem({
           key: 'i3',
           kind: '',
           label: '',
           parent,
-        });
+        })
         p2.addItem({
           key: 'i4',
           kind: '',
           label: '',
           parent,
-        });
+        })
 
-        let i = 0;
+        let i = 0
         manager.addEventListener('nameitem', (e: Event): void => {
-          const event = e as CustomEvent<SplitItem>;
-          event.detail.label = `changed ${i++}`;
-        });
-        const spy = sinon.spy(manager, 'updateView');
-        manager.requestNameUpdateByParent(parent);
-        assert.equal(spy.callCount, 2, 'update view called twice for each panel');
-        assert.equal(spy.args[0][0], p1.key, 'called panel 1');
-        assert.equal(spy.args[1][0], p2.key, 'called panel 2');
-      });
-    });
+          const event = e as CustomEvent<SplitItem>
+          event.detail.label = `changed ${i++}`
+        })
+        const spy = sinon.spy(manager, 'updateView')
+        manager.requestNameUpdateByParent(parent)
+        assert.equal(spy.callCount, 2, 'update view called twice for each panel')
+        assert.equal(spy.args[0][0], p1.key, 'called panel 1')
+        assert.equal(spy.args[1][0], p2.key, 'called panel 2')
+      })
+    })
 
     describe('removeByParent()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('removes items that have a parent', () => {
-        const parent = 'my-parent';
-        const p1 = manager.addPanel();
+        const parent = 'my-parent'
+        const p1 = manager.addPanel()
         const i1 = p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
           parent,
-        });
+        })
         const i2 = p1.addItem({
           key: 'i2',
           kind: '',
           label: '',
           parent: 'other-parent',
-        });
+        })
         const i3 = p1.addItem({
           key: 'i3',
           kind: '',
           label: '',
-        });
-        const p2 = manager.addPanel();
+        })
+        const p2 = manager.addPanel()
         const i4 = p2.addItem({
           key: 'i4',
           kind: '',
           label: '',
           parent,
-        });
-        manager.removeByParent(parent);
-        assert.isUndefined(manager.findItem(i1.key), 'item 1 is removed');
-        assert.ok(manager.findItem(i2.key), 'item 2 is kept');
-        assert.ok(manager.findItem(i3.key), 'item 3 is kept');
-        assert.isUndefined(manager.findItem(i4.key), 'item 4 is removed');
-      });
-    });
+        })
+        manager.removeByParent(parent)
+        assert.isUndefined(manager.findItem(i1.key), 'item 1 is removed')
+        assert.ok(manager.findItem(i2.key), 'item 2 is kept')
+        assert.ok(manager.findItem(i3.key), 'item 3 is kept')
+        assert.isUndefined(manager.findItem(i4.key), 'item 4 is removed')
+      })
+    })
 
     describe('hasItem()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('returns true when the layout has an item', () => {
         const i1 = manager.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
-        assert.isTrue(manager.hasItem(i1.key));
-      });
+        })
+        assert.isTrue(manager.hasItem(i1.key))
+      })
 
       it('returns false when item is not defined', () => {
-        assert.isFalse(manager.hasItem('other'));
-      });
-    });
+        assert.isFalse(manager.hasItem('other'))
+      })
+    })
 
     describe('selectItem()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('sets the item selected in a set panel', () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         const i1 = p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         const i2 = p1.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
-        p1.selected = i2.key;
-        manager.selectItem(i1.key, p1.key);
-        assert.equal(p1.selected, i1.key);
-      });
+        })
+        p1.selected = i2.key
+        manager.selectItem(i1.key, p1.key)
+        assert.equal(p1.selected, i1.key)
+      })
 
       it('sets the item selected in an active panel', () => {
-        const p1 = manager.addPanel();
-        const p2 = manager.addPanel();
+        const p1 = manager.addPanel()
+        const p2 = manager.addPanel()
         const i1 = p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         const i2 = p1.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
-        p2.addItem(i1);
-        p2.addItem(i2);
+        })
+        p2.addItem(i1)
+        p2.addItem(i2)
 
-        manager.setActive(p2.key);
-        p2.selected = i2.key;
-        manager.selectItem(i1.key);
-        assert.equal(p2.selected, i1.key);
-      });
+        manager.setActive(p2.key)
+        p2.selected = i2.key
+        manager.selectItem(i1.key)
+        assert.equal(p2.selected, i1.key)
+      })
 
       it('sets the item selected in an first panel with the item', () => {
-        const p1 = manager.addPanel();
-        const p2 = manager.addPanel();
+        const p1 = manager.addPanel()
+        const p2 = manager.addPanel()
         const i1 = p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         const i2 = p1.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
-        p2.addItem(i1);
-        p2.addItem(i2);
+        })
+        p2.addItem(i1)
+        p2.addItem(i2)
 
-        p1.selected = i2.key;
-        manager.selectItem(i1.key);
-        assert.equal(p1.selected, i1.key);
-      });
+        p1.selected = i2.key
+        manager.selectItem(i1.key)
+        assert.equal(p1.selected, i1.key)
+      })
 
       it('does nothing when the item panel cannot be found', () => {
-        const p1 = manager.addPanel();
-        const p2 = manager.addPanel();
+        const p1 = manager.addPanel()
+        const p2 = manager.addPanel()
         const i1 = p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         const i2 = p1.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
-        p2.addItem(i1);
-        p2.addItem(i2);
+        })
+        p2.addItem(i1)
+        p2.addItem(i2)
 
-        manager.selectItem('other');
+        manager.selectItem('other')
 
-        assert.equal(p1.selected, i2.key);
-        assert.equal(p2.selected, i2.key);
-      });
+        assert.equal(p1.selected, i2.key)
+        assert.equal(p2.selected, i2.key)
+      })
 
       it('requests a view update', () => {
         const i1 = manager.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         manager.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
-        const spy = sinon.spy(manager, 'updateView');
-        manager.selectItem(i1.key);
-        assert.isTrue(spy.calledOnce);
-      });
+        })
+        const spy = sinon.spy(manager, 'updateView')
+        manager.selectItem(i1.key)
+        assert.isTrue(spy.calledOnce)
+      })
 
       it('notifies change', () => {
         const i1 = manager.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         manager.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
-        const spy = sinon.spy(manager, 'notifyChange');
-        manager.selectItem(i1.key);
-        assert.isTrue(spy.calledOnce);
-      });
-    });
+        })
+        const spy = sinon.spy(manager, 'notifyChange')
+        manager.selectItem(i1.key)
+        assert.isTrue(spy.calledOnce)
+      })
+    })
 
     describe('isEmpty()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       it('returns true for empty layout', () => {
-        assert.isTrue(manager.isEmpty());
-      });
+        assert.isTrue(manager.isEmpty())
+      })
 
       it('returns true for all panels are empty', () => {
-        const p1 = manager.addPanel();
-        manager.addPanel();
-        const p3 = p1.addPanel();
-        p3.addPanel();
-        assert.isTrue(manager.isEmpty());
-      });
+        const p1 = manager.addPanel()
+        manager.addPanel()
+        const p3 = p1.addPanel()
+        p3.addPanel()
+        assert.isTrue(manager.isEmpty())
+      })
 
       it('returns false when a layout has an item', () => {
-        const p1 = manager.addPanel();
-        manager.addPanel();
-        const p3 = p1.addPanel();
-        const p4 = p3.addPanel();
+        const p1 = manager.addPanel()
+        manager.addPanel()
+        const p3 = p1.addPanel()
+        const p4 = p3.addPanel()
         p4.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
-        assert.isFalse(manager.isEmpty());
-      });
-    });
+        })
+        assert.isFalse(manager.isEmpty())
+      })
+    })
 
     describe('storeLayout()', () => {
       it('calls the callback', async () => {
-        const spy = sinon.spy();
+        const spy = sinon.spy()
         const manager = new SplitLayout({
           stateCallback: spy,
-        });
-        manager.addPanel();
-        const compare = manager.toJSON();
-        await manager.storeLayout();
-        assert.isTrue(spy.calledOnce);
-        assert.deepEqual(spy.args[0][0], compare);
-      });
+        })
+        manager.addPanel()
+        const compare = manager.toJSON()
+        await manager.storeLayout()
+        assert.isTrue(spy.calledOnce)
+        assert.deepEqual(spy.args[0][0], compare)
+      })
 
       it('calls the callback again when an update happens while storing', async () => {
-        let callCount = 0;
+        let callCount = 0
         const manager = new SplitLayout({
           stateCallback: async (): Promise<void> => {
-            callCount++;
-            await aTimeout(1);
+            callCount++
+            await aTimeout(1)
           },
-        });
-        manager.addPanel();
-        const promise = manager.storeLayout();
-        manager.storeLayout();
-        await promise;
-        assert.equal(callCount, 2);
-      });
-    });
+        })
+        manager.addPanel()
+        const promise = manager.storeLayout()
+        manager.storeLayout()
+        await promise
+        assert.equal(callCount, 2)
+      })
+    })
 
     describe('setting the active panel from a focus', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-        manager.initialize();
-      });
+        manager = new SplitLayout()
+        manager.initialize()
+      })
 
       afterEach(() => {
-        manager.dispose();
-      });
+        manager.dispose()
+      })
 
       it('sets the active panel', async () => {
-        const p1 = manager.addPanel();
-        const view = await splitViewFixture(p1.key);
-        const button = view.querySelector('#v1 button') as HTMLButtonElement;
-        button.focus();
-        assert.equal(manager.active, p1.key);
-      });
+        const p1 = manager.addPanel()
+        const view = await splitViewFixture(p1.key)
+        const button = view.querySelector('#v1 button') as HTMLButtonElement
+        button.focus()
+        assert.equal(manager.active, p1.key)
+      })
 
       it('ignores when focus comes from the outside of the view', async () => {
-        const p1 = manager.addPanel();
-        await splitViewFixture(p1.key);
-        document.body.focus();
-        assert.isUndefined(manager.active);
-      });
+        const p1 = manager.addPanel()
+        await splitViewFixture(p1.key)
+        document.body.focus()
+        assert.isUndefined(manager.active)
+      })
 
       it('ignores when focus comes from a not registered panel', async () => {
-        const view = await splitViewFixture('something');
-        const button = view.querySelector('#v1 button') as HTMLButtonElement;
-        button.focus();
-        assert.isUndefined(manager.active);
-      });
-    });
+        const view = await splitViewFixture('something')
+        const button = view.querySelector('#v1 button') as HTMLButtonElement
+        button.focus()
+        assert.isUndefined(manager.active)
+      })
+    })
 
     describe('addItem()', () => {
-      let manager: SplitLayout;
+      let manager: SplitLayout
 
       beforeEach(() => {
-        manager = new SplitLayout();
-      });
+        manager = new SplitLayout()
+      })
 
       function renderer(item: SplitItem, visible: boolean): TemplateResult {
-        const { key, kind } = item;
-        return html`<p class="content" data-key="${key}" data-kind="${kind}" ?hidden="${!visible}">${key}</p>`;
+        const { key, kind } = item
+        return html`<p class="content" data-key="${key}" data-kind="${kind}" ?hidden="${!visible}">${key}</p>`
       }
 
       it('renders single panel', async () => {
@@ -1323,158 +1332,170 @@ describe('layout', () => {
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         manager.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
-        const content = manager.render(renderer);
-        const markup = await fixture(html`<div>${content}</div>`);
-        const views = markup.querySelectorAll('split-view');
-        assert.lengthOf(views, 1, 'renders single view');
-        const contents = views[0].querySelectorAll('p');
-        assert.lengthOf(contents, 2, 'renders all items');
-        const [c1, c2] = Array.from(contents);
-        assert.equal(c1.dataset.key, 'i1', 'item 1 has the rendered values');
-        assert.equal(c2.dataset.key, 'i2', 'item 2 has the rendered values');
-      });
+        })
+        const content = manager.render(renderer)
+        const markup = await fixture(html`<div>${content}</div>`)
+        const views = markup.querySelectorAll('split-view')
+        assert.lengthOf(views, 1, 'renders single view')
+        const contents = views[0].querySelectorAll('p')
+        assert.lengthOf(contents, 2, 'renders all items')
+        const [c1, c2] = Array.from(contents)
+        assert.equal(c1.dataset.key, 'i1', 'item 1 has the rendered values')
+        assert.equal(c2.dataset.key, 'i2', 'item 2 has the rendered values')
+      })
 
       it('renders another panel in the east region', async () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         p1.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
-        // split view 
-        p1.addItem({
-          key: 'i3',
-          kind: '',
-          label: '',
-        }, { region: SplitRegion.east });
-        const content = manager.render(renderer);
-        const markup = await fixture(html`<div>${content}</div>`);
-        const views = markup.querySelectorAll('split-view');
-        assert.lengthOf(views, 3, 'renders all views');
-        const contents1 = views[1].querySelectorAll('p');
-        assert.lengthOf(contents1, 2, 'renders all panel 1 items');
-        const contents2 = views[2].querySelectorAll('p');
-        assert.lengthOf(contents2, 1, 'renders all panel 2 items');
-        const [c1, c2] = Array.from(contents1);
-        assert.equal(c1.dataset.key, 'i1', 'item 1 has the rendered values');
-        assert.equal(c2.dataset.key, 'i2', 'item 2 has the rendered values');
-        const [c3] = Array.from(contents2);
-        assert.equal(c3.dataset.key, 'i3', 'item 3 has the rendered values');
-      });
+        })
+        // split view
+        p1.addItem(
+          {
+            key: 'i3',
+            kind: '',
+            label: '',
+          },
+          { region: SplitRegion.east }
+        )
+        const content = manager.render(renderer)
+        const markup = await fixture(html`<div>${content}</div>`)
+        const views = markup.querySelectorAll('split-view')
+        assert.lengthOf(views, 3, 'renders all views')
+        const contents1 = views[1].querySelectorAll('p')
+        assert.lengthOf(contents1, 2, 'renders all panel 1 items')
+        const contents2 = views[2].querySelectorAll('p')
+        assert.lengthOf(contents2, 1, 'renders all panel 2 items')
+        const [c1, c2] = Array.from(contents1)
+        assert.equal(c1.dataset.key, 'i1', 'item 1 has the rendered values')
+        assert.equal(c2.dataset.key, 'i2', 'item 2 has the rendered values')
+        const [c3] = Array.from(contents2)
+        assert.equal(c3.dataset.key, 'i3', 'item 3 has the rendered values')
+      })
 
       it('renders another panel in the west region', async () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         p1.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
-        // split view 
-        p1.addItem({
-          key: 'i3',
-          kind: '',
-          label: '',
-        }, { region: SplitRegion.west });
-        const content = manager.render(renderer);
-        const markup = await fixture(html`<div>${content}</div>`);
-        const views = markup.querySelectorAll('split-view');
-        assert.lengthOf(views, 3, 'renders all views');
-        const contents1 = views[1].querySelectorAll('p');
-        assert.lengthOf(contents1, 1, 'renders all panel 1 items');
-        const contents2 = views[2].querySelectorAll('p');
-        assert.lengthOf(contents2, 2, 'renders all panel 2 items');
-
-        const [c1, c2] = Array.from(contents2);
-        assert.equal(c1.dataset.key, 'i1', 'item 1 has the rendered values');
-        assert.equal(c2.dataset.key, 'i2', 'item 2 has the rendered values');
-        
-        const [c3] = Array.from(contents1);
-        assert.equal(c3.dataset.key, 'i3', 'item 3 has the rendered values');
-      });
+        })
+        // split view
+        p1.addItem(
+          {
+            key: 'i3',
+            kind: '',
+            label: '',
+          },
+          { region: SplitRegion.west }
+        )
+        const content = manager.render(renderer)
+        const markup = await fixture(html`<div>${content}</div>`)
+        const views = markup.querySelectorAll('split-view')
+        assert.lengthOf(views, 3, 'renders all views')
+        const contents1 = views[1].querySelectorAll('p')
+        assert.lengthOf(contents1, 1, 'renders all panel 1 items')
+        const contents2 = views[2].querySelectorAll('p')
+        assert.lengthOf(contents2, 2, 'renders all panel 2 items')
+
+        const [c1, c2] = Array.from(contents2)
+        assert.equal(c1.dataset.key, 'i1', 'item 1 has the rendered values')
+        assert.equal(c2.dataset.key, 'i2', 'item 2 has the rendered values')
+
+        const [c3] = Array.from(contents1)
+        assert.equal(c3.dataset.key, 'i3', 'item 3 has the rendered values')
+      })
 
       it('renders another panel in the south region', async () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         p1.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
-        // split view 
-        p1.addItem({
-          key: 'i3',
-          kind: '',
-          label: '',
-        }, { region: SplitRegion.south });
-        const content = manager.render(renderer);
-        const markup = await fixture(html`<div>${content}</div>`);
-        const views = markup.querySelectorAll('split-view');
-        assert.lengthOf(views, 3, 'renders all views');
-        const contents1 = views[1].querySelectorAll('p');
-        assert.lengthOf(contents1, 2, 'renders all panel 1 items');
-        const contents2 = views[2].querySelectorAll('p');
-        assert.lengthOf(contents2, 1, 'renders all panel 2 items');
-        const [c1, c2] = Array.from(contents1);
-        assert.equal(c1.dataset.key, 'i1', 'item 1 has the rendered values');
-        assert.equal(c2.dataset.key, 'i2', 'item 2 has the rendered values');
-        const [c3] = Array.from(contents2);
-        assert.equal(c3.dataset.key, 'i3', 'item 3 has the rendered values');
-      });
+        })
+        // split view
+        p1.addItem(
+          {
+            key: 'i3',
+            kind: '',
+            label: '',
+          },
+          { region: SplitRegion.south }
+        )
+        const content = manager.render(renderer)
+        const markup = await fixture(html`<div>${content}</div>`)
+        const views = markup.querySelectorAll('split-view')
+        assert.lengthOf(views, 3, 'renders all views')
+        const contents1 = views[1].querySelectorAll('p')
+        assert.lengthOf(contents1, 2, 'renders all panel 1 items')
+        const contents2 = views[2].querySelectorAll('p')
+        assert.lengthOf(contents2, 1, 'renders all panel 2 items')
+        const [c1, c2] = Array.from(contents1)
+        assert.equal(c1.dataset.key, 'i1', 'item 1 has the rendered values')
+        assert.equal(c2.dataset.key, 'i2', 'item 2 has the rendered values')
+        const [c3] = Array.from(contents2)
+        assert.equal(c3.dataset.key, 'i3', 'item 3 has the rendered values')
+      })
 
       it('renders another panel in the north region', async () => {
-        const p1 = manager.addPanel();
+        const p1 = manager.addPanel()
         p1.addItem({
           key: 'i1',
           kind: '',
           label: '',
-        });
+        })
         p1.addItem({
           key: 'i2',
           kind: '',
           label: '',
-        });
-        // split view 
-        p1.addItem({
-          key: 'i3',
-          kind: '',
-          label: '',
-        }, { region: SplitRegion.north });
-        const content = manager.render(renderer);
-        const markup = await fixture(html`<div>${content}</div>`);
-        const views = markup.querySelectorAll('split-view');
-        assert.lengthOf(views, 3, 'renders all views');
-        const contents1 = views[1].querySelectorAll('p');
-        assert.lengthOf(contents1, 1, 'renders all panel 1 items');
-        const contents2 = views[2].querySelectorAll('p');
-        assert.lengthOf(contents2, 2, 'renders all panel 2 items');
-
-        const [c1, c2] = Array.from(contents2);
-        assert.equal(c1.dataset.key, 'i1', 'item 1 has the rendered values');
-        assert.equal(c2.dataset.key, 'i2', 'item 2 has the rendered values');
-        
-        const [c3] = Array.from(contents1);
-        assert.equal(c3.dataset.key, 'i3', 'item 3 has the rendered values');
-      });
-    });
-  });
-});
+        })
+        // split view
+        p1.addItem(
+          {
+            key: 'i3',
+            kind: '',
+            label: '',
+          },
+          { region: SplitRegion.north }
+        )
+        const content = manager.render(renderer)
+        const markup = await fixture(html`<div>${content}</div>`)
+        const views = markup.querySelectorAll('split-view')
+        assert.lengthOf(views, 3, 'renders all views')
+        const contents1 = views[1].querySelectorAll('p')
+        assert.lengthOf(contents1, 1, 'renders all panel 1 items')
+        const contents2 = views[2].querySelectorAll('p')
+        assert.lengthOf(contents2, 2, 'renders all panel 2 items')
+
+        const [c1, c2] = Array.from(contents2)
+        assert.equal(c1.dataset.key, 'i1', 'item 1 has the rendered values')
+        assert.equal(c2.dataset.key, 'i2', 'item 2 has the rendered values')
+
+        const [c3] = Array.from(contents1)
+        assert.equal(c3.dataset.key, 'i3', 'item 3 has the rendered values')
+      })
+    })
+  })
+})