tree menu component tests

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of VueJS components with minimal dependencies. It supports light and dark modes and can be extended to support multiple themes",
-  "version": "4.1.11",
+  "version": "4.1.12",
   "main": "dist/@aotearoan/neon.umd.js",
   "types": "dist/@aotearoan/components.d.ts",
   "files": [

src/components/navigation/tree-menu/NeonTreeMenu.spec.ts

@@ -0,0 +1,139 @@
+import Vue from 'vue';
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import NeonTreeMenu from './NeonTreeMenu.vue';
+import NeonTreeMenuClass from './NeonTreeMenu';
+import NeonLink from '../link/NeonLink.vue';
+
+Vue.component('NeonLink', NeonLink);
+
+describe('NeonTreeMenu', () => {
+  const model = [
+    {
+      key: 'feedback',
+      label: 'Feedback',
+      expanded: false,
+      children: [
+        {
+          key: 'alert',
+          label: 'Alert',
+          href: '/feedback/alert',
+          anchors: ['Description', 'API', 'Examples'],
+        },
+        {
+          key: 'note',
+          label: 'Note',
+          href: '/feedback/note',
+          anchors: ['Description', 'API', 'Examples'],
+        },
+        {
+          key: 'notification-counter',
+          label: 'Notification Counter',
+          href: '/feedback/notification-counter',
+          anchors: ['Description', 'API', 'Examples'],
+        },
+      ],
+    },
+    {
+      key: 'navigation',
+      label: 'Navigation',
+      expanded: true,
+      children: [
+        {
+          key: 'action-menu',
+          label: 'Action Menu',
+          href: '/navigation/action-menu',
+          anchors: ['Description', 'API', 'Examples'],
+        },
+        {
+          key: 'dropdown-menu',
+          label: 'Dropdown Menu',
+          href: '/navigation/dropdown-menu',
+          anchors: ['Description', 'API', 'Examples'],
+        },
+        {
+          key: 'link',
+          label: 'Link',
+          href: '/navigation/link',
+          anchors: ['Description', 'API', 'Examples'],
+        },
+        {
+          key: 'tree-menu',
+          label: 'Tree Menu',
+          href: '/navigation/tree-menu',
+          anchors: ['Description', 'API', 'Examples'],
+        },
+      ],
+    },
+  ];
+
+  it('matches snapshot', () => {
+    // given
+    const wrapper = mount(NeonTreeMenu, {
+      propsData: { model },
+      stubs: { RouterLink: RouterLinkStub },
+    });
+    // when / then
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('expands all', () => {
+    // given
+    const wrapper = mount(NeonTreeMenu, {
+      propsData: { model, expandAll: true },
+      stubs: { RouterLink: RouterLinkStub },
+    });
+    // when / then
+    expect(wrapper.find('.neon-tree-menu--expand-all').element).toBeDefined();
+    expect(wrapper.findAll('.neon-tree-menu__anchors--expanded').length).toEqual(7);
+  });
+
+  it('emits click event on click section link', () => {
+    // given
+    const wrapper = mount(NeonTreeMenu, {
+      propsData: { model },
+      stubs: { RouterLink: RouterLinkStub },
+    });
+    // when
+    wrapper.findAll('.neon-tree-menu__section-link').at(0).trigger('click');
+    // then
+    expect(wrapper.emitted().click[0]).toEqual(['feedback']);
+  });
+
+  it('emits click event on space keydown section link', () => {
+    // given
+    const wrapper = mount(NeonTreeMenu, {
+      propsData: { model },
+      stubs: { RouterLink: RouterLinkStub },
+    });
+    // when
+    wrapper.findAll('.neon-tree-menu__section-link-label').at(0).trigger('keydown.space');
+    // then
+    expect(wrapper.emitted().click[0]).toEqual(['feedback']);
+  });
+
+  it('triggers click on parent link on space keydown', () => {
+    // given
+    const wrapper = mount(NeonTreeMenu, {
+      propsData: { model },
+      stubs: { RouterLink: RouterLinkStub },
+    });
+    const vm = wrapper.vm as NeonTreeMenuClass;
+    vm.click = jest.fn(vm.click);
+    // when
+    wrapper.findAll('.neon-tree-menu__link-label').at(0).trigger('keydown.space');
+    // then
+    expect(vm.click).toHaveBeenCalled();
+  });
+
+  it('click executes with no parent element', () => {
+    // given
+    const wrapper = mount(NeonTreeMenu, {
+      propsData: { model },
+      stubs: { RouterLink: RouterLinkStub },
+    });
+    const vm = wrapper.vm as NeonTreeMenuClass;
+    // when / then
+    // @ts-ignore
+    expect(() => vm.click({})).not.toThrowError();
+  });
+});

src/components/navigation/tree-menu/NeonTreeMenu.ts

@@ -44,7 +44,7 @@ export default class NeonTreeMenu extends Vue {
     this.url = path;
   }
 
-  private click($event: KeyboardEvent) {
+  click($event: KeyboardEvent) {
     const target = $event.target as HTMLSpanElement;
     if (target?.parentElement) {
       target.parentElement.click();

src/components/navigation/tree-menu/__snapshots__/NeonTreeMenu.spec.ts.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NeonTreeMenu matches snapshot 1`] = `
+<nav class="neon-tree-menu">
+  <ul class="no-style">
+    <li class="neon-tree-menu__section"><a tabindex="-1" class="neon-link neon-tree-menu__section-link neon-link--no-style neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text">Feedback</span></span></a>
+      <ul class="no-style neon-tree-menu__links">
+        <li class="neon-tree-menu__link-item"><a tabindex="-1" class="neon-link neon-link--router-link neon-tree-menu__link neon-link--no-style neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__link-label neon-tree-menu__link-label--outline-text">Alert</span></span></a>
+          <ul class="no-style neon-tree-menu__anchors">
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Description</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">API</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Examples</span></span></a></li>
+          </ul>
+        </li>
+        <li class="neon-tree-menu__link-item"><a tabindex="-1" class="neon-link neon-link--router-link neon-tree-menu__link neon-link--no-style neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__link-label neon-tree-menu__link-label--outline-text">Note</span></span></a>
+          <ul class="no-style neon-tree-menu__anchors">
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Description</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">API</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Examples</span></span></a></li>
+          </ul>
+        </li>
+        <li class="neon-tree-menu__link-item"><a tabindex="-1" class="neon-link neon-link--router-link neon-tree-menu__link neon-link--no-style neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__link-label neon-tree-menu__link-label--outline-text">Notification Counter</span></span></a>
+          <ul class="no-style neon-tree-menu__anchors">
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Description</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">API</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Examples</span></span></a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li class="neon-tree-menu__section neon-tree-menu__section--expanded"><a tabindex="-1" class="neon-link neon-tree-menu__section-link neon-link--no-style neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text">Navigation</span></span></a>
+      <ul class="no-style neon-tree-menu__links">
+        <li class="neon-tree-menu__link-item"><a tabindex="-1" class="neon-link neon-link--router-link neon-tree-menu__link neon-link--no-style neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__link-label neon-tree-menu__link-label--outline-text">Action Menu</span></span></a>
+          <ul class="no-style neon-tree-menu__anchors">
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Description</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">API</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Examples</span></span></a></li>
+          </ul>
+        </li>
+        <li class="neon-tree-menu__link-item"><a tabindex="-1" class="neon-link neon-link--router-link neon-tree-menu__link neon-link--no-style neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__link-label neon-tree-menu__link-label--outline-text">Dropdown Menu</span></span></a>
+          <ul class="no-style neon-tree-menu__anchors">
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Description</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">API</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Examples</span></span></a></li>
+          </ul>
+        </li>
+        <li class="neon-tree-menu__link-item"><a tabindex="-1" class="neon-link neon-link--router-link neon-tree-menu__link neon-link--no-style neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__link-label neon-tree-menu__link-label--outline-text">Link</span></span></a>
+          <ul class="no-style neon-tree-menu__anchors">
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Description</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">API</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Examples</span></span></a></li>
+          </ul>
+        </li>
+        <li class="neon-tree-menu__link-item"><a tabindex="-1" class="neon-link neon-link--router-link neon-tree-menu__link neon-link--no-style neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__link-label neon-tree-menu__link-label--outline-text">Tree Menu</span></span></a>
+          <ul class="no-style neon-tree-menu__anchors">
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Description</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">API</span></span></a></li>
+            <li><a tabindex="-1" class="neon-link neon-link--router-link neon-link--no-style neon-tree-menu__anchor neon-link--outline-none"><span class="neon-link__label"><span tabindex="0" role="link" class="neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text">Examples</span></span></a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</nav>
+`;