Merge pull request #178 from DrRataplan/addpanel-0

fix(pb-grid): Fix calling pb-grid#addPanel(0)

src/pb-grid.js

@@ -156,12 +156,18 @@ export class PbGrid extends pbMixin(LitElement) {
         }
     }
 
+	/**
+	 * Add a panel. Defaults to opening 'the next' panel if the `initial` parameter is omitted: if
+	 * panels 1,6,3 are open, panel 7 will be added
+	 *
+	 * @param {number} [initial] The panel number of the panel to add.
+	 */
     addPanel(initial) {
-        let value = initial
-        if (!initial && !this.panels.length) {
-            value = 0
+        let value = initial;
+        if (initial === undefined && !this.panels.length) {
+            value = 0;
         }
-        if (!initial && this.panels.length) {
+        if (initial === undefined && this.panels.length) {
             const max = this.panels.reduce((result, next) => Math.max(result, next), 0);
             value = max + 1;
         }
@@ -170,15 +176,15 @@ export class PbGrid extends pbMixin(LitElement) {
         this.panels.push(value);
 
         this._insertPanel(value);
-        registry.commit(this, this._getState())
+        registry.commit(this, this._getState());
         this._update();
         this.emitTo('pb-refresh');
     }
 
     /**
      * Remove a panel from the grid
-     * 
-     * @param {HTMLElement|number} panel the pb-panel element or the panel number 
+     *
+     * @param {HTMLElement|number} panel the pb-panel element or the panel number
      */
     removePanel(panel) {
         let idx;

test/pb-grid.test.js

@@ -0,0 +1,53 @@
+/* eslint-disable no-unused-expressions */
+import { expect } from '@open-wc/testing';
+import { waitForPage, cleanup } from './util.js';
+
+import '../src/pb-page.js';
+import '../src/pb-grid.js';
+import '../src/pb-panel.js';
+
+describe('pb-grid', () => {
+  afterEach(cleanup);
+
+  it('Can open a panel', async () => {
+    const el = await waitForPage(`
+            <pb-page endpoint="." api-version="1.0.0">
+                <!-- Define the grid with no initial columns, but three possible -->
+                <pb-grid id="grid" panels="[]" >
+                    <template>
+                        <pb-panel>
+                            <template title="FIRST">I am a panel</template>
+                            <template title="SECOND">I am also a panel</template>
+                            <template title="THIRD">I am also a panel! The last</template>
+                        </pb-panel>
+                    </template>
+                </pb-grid>
+            </pb-page>`);
+
+    /**
+     * @type {import('../src/pb-grid.js').PbGrid}
+     */
+    const grid = el.querySelector('#grid');
+
+    grid.addPanel(1);
+    expect(grid.panels).to.have.members([1], 'The second panel should be open now');
+
+    grid.removePanel(1);
+    expect(grid.panels).to.have.members([], 'All panels should be closed now');
+
+    grid.addPanel(0);
+    expect(grid.panels).to.have.members([0], 'The first panel should be opened now');
+
+    // Call without parameters: open the 'next' panel
+    grid.addPanel();
+    expect(grid.panels).to.have.members([0, 1], 'The first two panels should be opened now');
+
+    grid.removePanel(0);
+    grid.removePanel(1);
+
+    // Call without parameters: open the 'next' panel: skip the first
+    grid.addPanel(1);
+    grid.addPanel();
+    expect(grid.panels).to.have.members([1, 2], 'The first two panels should be opened now');
+  });
+});