@internetarchive/ia-menu-slider - npm Package Compare versions

Comparing version 0.2.0-alpha3 to 0.2.0-alpha4

package.json

 {
   "name": "@internetarchive/ia-menu-slider",
-  "version": "0.2.0-alpha3",
+  "version": "0.2.0-alpha4",
   "description": "Menu slider used in ia-topnav",
@@ -5,0 +5,0 @@ "author": "ia-menu-slider",

src/ia-menu-slider.js

@@ -114,3 +114,5 @@ import { nothing } from 'lit-html';
     const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';
-
+    const actionBlock = this.selectedMenuAction
+      ? html`<span class="custom-action">${this.selectedMenuAction}</span>`
+      : nothing;
     return html`
@@ -122,3 +124,3 @@ <header class="${headerClass}">
         </div>
-        ${this.selectedMenuAction}
+        ${actionBlock}
         ${this.closeButton}
@@ -125,0 +127,0 @@ </header>

test/ia-menu-slider.test.js

@@ -165,3 +165,3 @@ import { html, fixture, expect } from '@open-wc/testing';
 
-  describe('Header section', async () => {
+  describe('Header section', () => {
     let extraButtonClicked = false;
@@ -177,2 +177,3 @@ const extraActionClickHandler = () => {
         <button
+          id="custom-action-button"
           style='color: white;'
@@ -188,23 +189,20 @@ @click=${extraActionClickHandler}
     };
-    const el = await fixture(container([menu]));
 
-    // open menu
-    el
-      .shadowRoot
-      .querySelectorAll('menu-button')[0]
-      .shadowRoot
-      .querySelector('a')
-      .click();
+    // display
+    it('creates a header section', async () => {
+      const el = await fixture(container([menu]));
+      el
+        .shadowRoot
+        .querySelectorAll('menu-button')[0]
+        .shadowRoot
+        .querySelector('button')
+        .click();
+      await el.updateComplete;
 
-    await el.updateComplete;
-    const menuHeader = el.shadowRoot.querySelector('.content header');
+      const menuHeader = el.shadowRoot.querySelector('.content header');
+      expect(menuHeader).to.not.be.undefined;
 
-    // display
-    it('creates a header section', () => {
-      expect(menuHeader).to.not.be.undefined;
-    });
-    it('adds header title and description', () => {
       const title = menuHeader.querySelector('h3');
       expect(title).to.not.be.undefined;
-      expect(title.innerText).to.equal(menu.title);
+      expect(title.innerText).to.equal(menu.label);
 
@@ -214,9 +212,6 @@ const description = menuHeader.querySelector('.extra-details');
       expect(description.innerText).to.equal(menu.menuDetails);
-    });
 
-    it('has a close button by default', async () => {
       const closeButton = menuHeader.querySelector('.close');
       expect(closeButton).to.not.be.undefined;
-    });
-    it('has an option for a menu specific action button', () => {
+
       const actionButton = menuHeader.querySelector('.custom-action');
@@ -226,6 +221,18 @@ expect(actionButton).to.not.be.undefined;
 
-    // custom action
+    // // custom action
     it('can click on the custom action', async () => {
+      const el = await fixture(container([menu]));
+      el
+        .shadowRoot
+        .querySelectorAll('menu-button')[0]
+        .shadowRoot
+        .querySelector('button')
+        .click();
+      await el.updateComplete;
+
+      const menuHeader = el.shadowRoot.querySelector('.content header');
       const actionButton = menuHeader.querySelector('.custom-action > *');
+      expect(el.selectedMenuAction).to.not.be.undefined;
       expect(extraButtonClicked).to.be.false; // has not been clicked
+
       const actionClick = new MouseEvent('click');
@@ -236,5 +243,13 @@ actionButton.dispatchEvent(actionClick);
     });
+  });
 
-    // close action
+  // // close action
+  describe('Close behavior', () => {
     it('emits a custom event when the drawer closes', async () => {
+      const el = await fixture(container(menus));
+      el.open = true;
+      await el.updateComplete;
+      expect(el.open).to.be.true;
+
+      const menuHeader = el.shadowRoot.querySelector('.content header');
       const closeButton = menuHeader.querySelector('button.close');
@@ -245,3 +260,27 @@ closeButton.dispatchEvent(new MouseEvent('click'));
     });
+    it('emits event but does not close drawer if prop `manuallyHandleClose = true`', async () => {
+      let sliderEmittedEvent = false;
+      const el = await fixture(container(menus));
+      el.manuallyHandleClose = true;
+      el.open = true;
+      await el.updateComplete;
+
+      // confirm base config
+      expect(el.open).to.be.true;
+      expect(sliderEmittedEvent).to.be.false;
+
+      el.addEventListener('menuSliderClosed', (e) => {
+        console.log('ERRRR', e.detail);
+        sliderEmittedEvent = true;
+      });
+
+      const menuHeader = el.shadowRoot.querySelector('.content header');
+      const closeButton = menuHeader.querySelector('button.close');
+      closeButton.dispatchEvent(new MouseEvent('click'));
+      await el.updateComplete;
+
+      expect(sliderEmittedEvent).to.be.true; // handler received click event
+      expect(el.open).to.be.true; // open state is still active, does not close
+    });
   });
 });

No alert changes

Improved metrics

Total package byte prevSize

67472

increased by2.36%

Lines of code

783

increased by4.54%

No dependency changes