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

Comparing version 0.1.9-alpha6 to 0.1.9

package.json

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

src/ia-menu-slider.js

@@ -32,3 +32,3 @@ import { nothing } from 'lit-html';
     this.animateMenuOpen = false;
-    this.manuallyHandleClose = true;
+    this.manuallyHandleClose = false;
   }
@@ -35,0 +35,0 @@

test/ia-menu-slider.test.js

@@ -149,93 +149,127 @@ import { html, fixture, expect } from '@open-wc/testing';
   });
+});
 
-  describe('Menu list', async () => {
-    const el = await fixture(container(menus));
-    const menuList = el
-      .shadowRoot
-      .querySelectorAll('menu-button');
+describe('Menu list', async () => {
+  const el = await fixture(container(menus));
+  const menuList = el
+    .shadowRoot
+    .querySelectorAll('menu-button');
 
-    it('shows menu details when available', () => {
-      const firstMenuItem = menuList[0].shadowRoot.querySelector('.menu-details');
-      expect(firstMenuItem.innerText).to.equal(menus[0].menuDetails);
+  it('shows menu details when available', () => {
+    const firstMenuItem = menuList[0].shadowRoot.querySelector('.menu-details');
+    expect(firstMenuItem.innerText).to.equal(menus[0].menuDetails);
 
-      const secondMenuItem = menuList[1].shadowRoot.querySelector('.menu-details');
-      expect(secondMenuItem.innerText).to.be.empty;
-    });
+    const secondMenuItem = menuList[1].shadowRoot.querySelector('.menu-details');
+    expect(secondMenuItem.innerText).to.be.empty;
   });
+});
 
-  describe('Header section', async () => {
-    let extraButtonClicked = false;
-    const extraActionClickHandler = () => {
-      extraButtonClicked = true;
-    };
-    const menu = {
-      icon: html`<ia-icon icon="audio"></ia-icon>`,
-      title: 'Audio Menu',
-      menuDetails: '(100,000,000 tracks)',
-      actionButton: html`
-        <button
-          style='color: white;'
-          @click=${extraActionClickHandler}
-        >Foo</button>
-      `,
-      label: 'Audio',
-      id: 'audio',
-      component: html`
-        <h1>Menu 2</h1>
-      `,
-    };
-    const el = await fixture(container([menu]));
+describe('Header section', async () => {
+  let extraButtonClicked = false;
+  const extraActionClickHandler = () => {
+    extraButtonClicked = true;
+  };
+  const menu = {
+    icon: html`<ia-icon icon="audio"></ia-icon>`,
+    title: 'Audio Menu',
+    menuDetails: '(100,000,000 tracks)',
+    actionButton: html`
+      <button
+        style='color: white;'
+        @click=${extraActionClickHandler}
+      >Foo</button>
+    `,
+    label: 'Audio',
+    id: 'audio',
+    component: html`
+      <h1>Menu 2</h1>
+    `,
+  };
+  const el = await fixture(container([menu]));
 
-    // open menu
-    el
-      .shadowRoot
-      .querySelectorAll('menu-button')[0]
-      .shadowRoot
-      .querySelector('a')
-      .click();
+  // open menu
+  el
+    .shadowRoot
+    .querySelectorAll('menu-button')[0]
+    .shadowRoot
+    .querySelector('button')
+    .click();
 
+  await el.updateComplete;
+  const menuHeader = el.shadowRoot.querySelector('.content header');
+
+  // 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.label);
+
+    const description = menuHeader.querySelector('.extra-details');
+    expect(description).to.not.be.undefined;
+    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');
+    expect(actionButton).to.not.be.undefined;
+  });
+
+  // custom action
+  it('can click on the custom action', async () => {
+    const actionButton = menuHeader.querySelector('.custom-action > *');
+    expect(extraButtonClicked).to.be.false; // has not been clicked
+    const actionClick = new MouseEvent('click');
+    actionButton.dispatchEvent(actionClick);
     await el.updateComplete;
-    const menuHeader = el.shadowRoot.querySelector('.content header');
+    expect(extraButtonClicked).to.be.true;
+  });
 
-    // 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);
+  // close action
+  it('emits a custom event when the drawer closes', async () => {
+    const closeButton = menuHeader.querySelector('button.close');
+    closeButton.dispatchEvent(new MouseEvent('click'));
+    await el.updateComplete;
+    expect(el.open).to.be.false;
+  });
 
-      const description = menuHeader.querySelector('.extra-details');
-      expect(description).to.not.be.undefined;
-      expect(description.innerText).to.equal(menu.menuDetails);
-    });
+  describe('Animation toggles for primary open/close state', async () => {
+    const thisMenu = await fixture(container(menus));
 
-    it('has a close button by default', async () => {
-      const closeButton = menuHeader.querySelector('.close');
-      expect(closeButton).to.not.be.undefined;
+    it('does not automatically animate menu', () => {
+      expect(thisMenu.animateMenuOpen).to.be.false;
     });
-    it('has an option for a menu specific action button', () => {
-      const actionButton = menuHeader.querySelector('.custom-action');
-      expect(actionButton).to.not.be.undefined;
-    });
 
-    // custom action
-    it('can click on the custom action', async () => {
-      const actionButton = menuHeader.querySelector('.custom-action > *');
-      expect(extraButtonClicked).to.be.false; // has not been clicked
-      const actionClick = new MouseEvent('click');
-      actionButton.dispatchEvent(actionClick);
+    it('uses `animate` class to power transition when turned on', async () => {
+      thisMenu.animateMenuOpen = true;
       await el.updateComplete;
-      expect(extraButtonClicked).to.be.true;
+
+      expect(thisMenu.shadowRoot.querySelector('.menu.animate').classList.contains('animate')).to.be.true;
     });
+  });
 
-    // close action
-    it('emits a custom event when the drawer closes', async () => {
-      const closeButton = menuHeader.querySelector('button.close');
-      closeButton.dispatchEvent(new MouseEvent('click'));
-      await el.updateComplete;
-      expect(el.open).to.be.false;
+  describe('Menu close behavior', async () => {
+    const thisMenu = await fixture(container(menus));
+
+    it('has property: `manuallyHandleClose`', () => {
+      expect(thisMenu.manuallyHandleClose).to.exist;
     });
+
+    thisMenu.manuallyHandleClose = true;
+    thisMenu.open = true;
+    const closebutton = thisMenu.shadowRoot.querySelector('button.close');
+    closebutton.click();
+    await el.updateComplete;
+    closebutton;
+    it('does not manually close menu when property is set: `manuallyHandleClose`', () => {
+      expect(thisMenu.manuallyHandleClose).to.be.true;
+      expect(thisMenu.open).to.be.true;
+    });
   });
 });

No alert changes

Improved metrics

Total package byte prevSize

69367

increased by1.57%

Lines of code

792

increased by3.53%

No dependency changes