@autoafleveren/ui 1.3.2 → 1.3.3

package/src/modules/components/AppNavigationMenu/Mobile.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { Dialog, TransitionChild, TransitionRoot } from '@headlessui/vue';
+  import { useNavigation } from '~composables/useNavigation';
+  import { Bars3Icon, XMarkIcon } from '~icons';
+  import NavigationItem from './NavigationItem.vue';
+  import SupportItem from './SupportItem.vue';
+
+  const {
+    logo,
+    avatar,
+    navigationItems,
+    mobileMenuOpen,
+    mobileMenuOpenTransition,
+    openMobileMenu,
+    closeMobileMenu,
+  } = useNavigation();
+
+  const menuIcon = computed(() => {
+    if (mobileMenuOpen.value) {
+      return XMarkIcon;
+    }
+
+    return Bars3Icon;
+  });
+
+  function close(): void {
+    closeMobileMenu();
+
+    setTimeout(() => {
+      mobileMenuOpenTransition.value = false;
+    }, 100);
+  }
+
+  function open(): void {
+    if (!mobileMenuOpenTransition.value) {
+      openMobileMenu();
+
+      mobileMenuOpenTransition.value = true;
+    }
+  }
+</script>
+
+<template>
+  <header class="app-mobile-menu flex h-18 items-center justify-between bg-zinc-50 px-4 text-black md:hidden">
+    <div
+      class="inline-flex w-10 grow-0 cursor-pointer items-center justify-start rounded-sm !py-2
+        hover:text-primary focus:outline-hidden"
+      data-test-menu-icon-wrapper
+      @click.stop="open"
+    >
+      <Component
+        :is="menuIcon"
+        class="block size-6 text-black"
+        aria-hidden="true"
+      />
+    </div>
+
+    <div
+      class="flex h-full max-w-[70%] grow justify-center py-4"
+      data-test-logo-wrapper
+      v-html="logo"
+    ></div>
+
+    <div
+      class="flex w-10 grow-0 justify-end"
+      data-test-avatar-wrapper
+    >
+      <Component
+        :is="avatar"
+        v-if="avatar"
+      />
+    </div>
+
+    <TransitionRoot
+      :show="mobileMenuOpen"
+      as="template"
+    >
+      <Dialog
+        as="div"
+        class="app-mobile-menu-dialog fixed inset-0 top-18 z-50 flex lg:hidden"
+        @close="close"
+      >
+        <TransitionChild
+          as="template"
+          enter="transition ease-in-out duration-300 transform"
+          enter-from="translate-y-full"
+          enter-to="translate-y-0"
+          leave="transition ease-in-out duration-300 transform"
+          leave-from="translate-y-0"
+          leave-to="translate-y-full"
+        >
+          <div
+            class="relative flex size-full flex-1 flex-col
+              bg-white focus:outline-hidden"
+            data-test-navigation-wrapper
+          >
+            <div
+              class="h-0 flex-1 overflow-y-auto p-4"
+              data-test-navigation-links-wrapper
+            >
+              <nav
+                aria-label="MainMenu"
+                class="mt-5"
+              >
+                <ul class="mb-auto">
+                  <li
+                    v-for="item in navigationItems.filter(item => item.visible !== false)"
+                    :key="item.name"
+                    data-test-navigation-item
+                  >
+                    <NavigationItem :item="item" />
+                  </li>
+                </ul>
+              </nav>
+
+              <SupportItem />
+            </div>
+          </div>
+        </TransitionChild>
+      </Dialog>
+    </TransitionRoot>
+
+    <SupportItem />
+  </header>
+</template>

package/src/modules/components/AppNavigationMenu/NavigationItem.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useNavigation } from '~composables';
+  import { AppLoader } from '~components';
+
+  import type { Component } from 'vue';
+  import type { NavigationItem } from '~composables/useNavigation';
+
+  const props = defineProps<{
+    item: NavigationItem;
+    linkClasses?: string;
+  }>();
+
+  const { navigationComponent, closeMobileMenu, expanded } = useNavigation();
+  const router = useRouter();
+  const isLoading = ref(false);
+
+  const iconIsComponent = computed((): boolean => {
+    return isLoading.value || typeof props.item.icon !== 'string';
+  });
+  const icon = computed((): string | Component => {
+    return isLoading.value ? AppLoader : props.item.icon;
+  });
+  const href = computed((): string => {
+    // @ts-expect-error unknown RouteLocation generic
+    return props.item.href ?? router.resolve(props.item.to)?.href ?? '';
+  });
+
+  async function onClick(event: Event): Promise<void> {
+    closeMobileMenu();
+
+    if (!props.item?.onClick) {
+      return;
+    }
+
+    event.preventDefault();
+
+    isLoading.value = true;
+
+    await Promise.resolve(props.item?.onClick?.());
+
+    isLoading.value = false;
+  }
+</script>
+
+<template>
+  <Component
+    :is="navigationComponent"
+    :to="item.to"
+    :href="href"
+    :class="[{
+      'md:bg-primary md:text-white!': item.active ?? false,
+      'rounded-full!': item.rounded ?? false,
+      'mb-3': !item.bottom,
+      'mt-3': item.bottom,
+      'md:w-10 md:justify-center': !expanded,
+      'md:px-6': expanded,
+    }, linkClasses]"
+    class="group/item flex h-10 w-full cursor-pointer rounded-lg transition-colors hover:bg-primary
+      md:items-center md:text-center md:text-zinc-400 md:hover:text-white"
+    @click="onClick"
+  >
+    <Component
+      :is="iconIsComponent ? icon : 'span'"
+      :class="{ 'h-6!': !iconIsComponent, 'md:text-white!': item.active }"
+      :size="isLoading ? 'extra-small' : undefined"
+      class="app-navigation-item size-5 stroke-2 text-black md:size-4 md:text-zinc-400 md:group-hover/item:text-white"
+      data-test-icon
+    >
+      {{ !iconIsComponent ? item.icon : '' }}
+    </Component>
+
+    <span
+      :class="{ 'md:w-0 md:p-0': !expanded }"
+      class="overflow-hidden whitespace-nowrap pl-7 text-lg font-semibold md:text-base md:font-normal"
+      data-test-name
+    >
+      {{ item.name }}
+    </span>
+  </Component>
+</template>

package/src/modules/components/AppNavigationMenu/SupportItem.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+  import { useNavigation } from '~composables';
+
+  const { contactRoute, contactIcon, navigationComponent, closeMobileMenu } = useNavigation();
+</script>
+
+<template>
+  <Component
+    :is="navigationComponent"
+    v-if="contactRoute"
+    :to="navigationComponent !== 'a' ? contactRoute : undefined"
+    :href="navigationComponent ? contactRoute : undefined"
+    class="app-support-item fixed bottom-5 right-5 z-50 mt-2 flex size-10 justify-center rounded-full bg-primary
+      py-2 text-white transition-colors hover:bg-primary-active focus-visible:outline-hidden"
+    data-test-help-icon
+    @click="closeMobileMenu"
+  >
+    <template v-if="typeof contactIcon === 'string'">
+      {{ contactIcon }}
+    </template>
+
+    <template v-else>
+      <Component
+        :is="contactIcon"
+        class="size-full"
+      />
+    </template>
+  </Component>
+</template>

package/src/modules/components/AppNavigationMenu/__tests__/app-navigation-menu.spec.ts

@@ -0,0 +1,104 @@
+import {
+  describe,
+  it,
+  expect,
+  beforeEach,
+} from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { useNavigation } from '~/modules/composables';
+import AppNavigationMenu from '../AppNavigationMenu.vue';
+import NavigationItem from '~components/AppNavigationMenu/NavigationItem.vue';
+import { navigationItem as navigationItemMock } from '~composables/useNavigation/__mocks__/navigation';
+import SupportItem from '../SupportItem.vue';
+import Mobile from '../Mobile.vue';
+
+const navigation = useNavigation();
+
+describe('the App Navigation Menu component', () => {
+  beforeEach(() => {
+    navigation.closeMainMenu();
+  });
+
+  it('should hide main menu by default', () => {
+    const wrapper = shallowMount(AppNavigationMenu);
+
+    const mainMenu = wrapper.find('[data-test-main-menu]');
+    expect(mainMenu.classes('hidden')).toBe(true);
+    expect(mainMenu.classes('md:flex!')).toBe(false);
+  });
+
+  it('can show main menu', () => {
+    navigation.openMainMenu();
+
+    const wrapper = shallowMount(AppNavigationMenu);
+
+    const mainMenu = wrapper.find('[data-test-main-menu]');
+    expect(mainMenu.classes('hidden')).toBe(true);
+    expect(mainMenu.classes('md:flex')).toBe(true);
+  });
+
+  it('should render the MainMenuMobile', () => {
+    const wrapper = shallowMount(AppNavigationMenu);
+
+    expect(wrapper.findComponent(Mobile).exists()).toBe(true);
+  });
+
+  it('should render the top navigation items', () => {
+    navigation.setNavigationItems([
+      navigationItemMock,
+      {
+        ...navigationItemMock,
+        name: 'Contact',
+      },
+      {
+        ...navigationItemMock,
+        name: 'Not visible',
+        visible: false,
+      },
+    ]);
+
+    const wrapper = shallowMount(AppNavigationMenu);
+    const navigationItems = wrapper.findAll('[data-test-top-navigation-item]');
+
+    expect(navigationItems).toHaveLength(2);
+
+    const firstNavigationItem = navigationItems[0].findComponent(NavigationItem);
+    expect(firstNavigationItem.props('item')).toBe(navigation.navigationItems.value[0]);
+
+    const secondNavigationItem = navigationItems[1].findComponent(NavigationItem);
+    expect(secondNavigationItem.props('item')).toBe(navigation.navigationItems.value[1]);
+  });
+
+  it('should render the top & bottom navigation items', () => {
+    navigation.setNavigationItems([
+      navigationItemMock,
+      {
+        ...navigationItemMock,
+        bottom: true,
+        name: 'Contact',
+      },
+      {
+        ...navigationItemMock,
+        bottom: true,
+        visible: false,
+        name: 'Not visible',
+      },
+    ]);
+
+    const wrapper = shallowMount(AppNavigationMenu);
+    const topNavigationItems = wrapper.findAll('[data-test-top-navigation-item]');
+    expect(topNavigationItems).toHaveLength(1);
+
+    const bottomNavigationItems = wrapper.findAll('[data-test-bottom-navigation-item]');
+    expect(bottomNavigationItems).toHaveLength(1);
+
+    const firstBottomNavigationItem = bottomNavigationItems[0].findComponent(NavigationItem);
+    expect(firstBottomNavigationItem.props('item')).toBe(navigation.navigationItems.value[1]);
+  });
+
+  it('should render the SupportItem in bottom navigation', () => {
+    const wrapper = shallowMount(AppNavigationMenu);
+
+    expect(wrapper.findComponent(SupportItem).exists()).toBe(true);
+  });
+});

package/src/modules/components/AppNavigationMenu/__tests__/mobile.spec.ts

@@ -0,0 +1,155 @@
+import {
+  describe,
+  it,
+  expect,
+  beforeEach,
+} from 'vitest';
+import { Dialog, TransitionRoot } from '@headlessui/vue';
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import { navigationItem as navigationItemMock } from '~composables/useNavigation/__mocks__/navigation';
+import NavigationItem from '~components/AppNavigationMenu/NavigationItem.vue';
+import { Bars3Icon, XMarkIcon } from '~/modules/icons';
+import { useNavigation } from '~/modules/composables';
+import SupportItem from '../SupportItem.vue';
+import Mobile from '../Mobile.vue';
+
+const navigation = useNavigation();
+
+describe('the Mobile Navigation component', () => {
+  beforeEach(() => {
+    navigation.closeMobileMenu();
+    navigation.mobileMenuOpenTransition.value = false;
+  });
+
+  it('should only visible after md breakpoint', () => {
+    const wrapper = shallowMount(Mobile);
+    expect(wrapper.classes('flex')).toBe(true);
+    expect(wrapper.classes('md:hidden')).toBe(true);
+  });
+
+  it('should render the toggle menu icon', () => {
+    const wrapper = shallowMount(Mobile);
+
+    const iconWrapper = wrapper.find('[data-test-menu-icon-wrapper]');
+    expect(iconWrapper.exists()).toBe(true);
+
+    const icon = iconWrapper.findComponent(Bars3Icon);
+    expect(icon.exists()).toBe(true);
+  });
+
+  it('should render the close menu icon when menu is open', () => {
+    navigation.openMobileMenu();
+
+    const wrapper = shallowMount(Mobile);
+
+    const iconWrapper = wrapper.find('[data-test-menu-icon-wrapper]');
+    expect(iconWrapper.exists()).toBe(true);
+
+    const icon = iconWrapper.findComponent(XMarkIcon);
+    expect(icon.exists()).toBe(true);
+  });
+
+  it('should render the logo', () => {
+    const logoHtml = 'logo with <span>html</span>';
+    navigation.setLogo(logoHtml);
+
+    const wrapper = shallowMount(Mobile);
+
+    const logoWrapper = wrapper.find('[data-test-logo-wrapper]');
+    expect(logoWrapper.exists()).toBe(true);
+    expect(logoWrapper.element.innerHTML).toBe(logoHtml);
+  });
+
+  it('should render the support item for desktop', () => {
+    const wrapper = shallowMount(Mobile);
+
+    const supportItem = wrapper.findAllComponents(SupportItem);
+    expect(supportItem).toHaveLength(2);
+  });
+
+  it('should render the support item for mobile', async () => {
+    expect.assertions(3);
+
+    const wrapper = shallowMount(Mobile);
+    const iconWrapper = wrapper.find('[data-test-menu-icon-wrapper]');
+
+    await iconWrapper.trigger('click');
+
+    const transitionRoot = wrapper.findComponent(TransitionRoot);
+    expect(transitionRoot.exists()).toBe(true);
+
+    await flushPromises();
+
+    expect(transitionRoot.props('show')).toBe(true);
+
+    const dialog = transitionRoot.findComponent(Dialog);
+
+    const supportItem = dialog.findComponent(SupportItem);
+    expect(supportItem.exists()).toBe(true);
+  });
+
+  it('should render the navigation items', () => {
+    navigation.setNavigationItems([
+      navigationItemMock,
+      {
+        ...navigationItemMock,
+        name: 'Contact',
+      },
+      {
+        ...navigationItemMock,
+        name: 'Not visible',
+        visible: false,
+      },
+    ]);
+
+    const wrapper = shallowMount(Mobile);
+
+    const navigationItems = wrapper.findAll('[data-test-navigation-item]');
+    expect(navigationItems).toHaveLength(2);
+
+    const firstNavigationItem = navigationItems[0].findComponent(NavigationItem);
+    expect(firstNavigationItem.props('item')).toBe(navigation.navigationItems.value[0]);
+
+    const secondNavigationItem = navigationItems[1].findComponent(NavigationItem);
+    expect(secondNavigationItem.props('item')).toBe(navigation.navigationItems.value[1]);
+  });
+
+  it('should open the mobile main menu on icon element click', async () => {
+    expect.assertions(3);
+
+    const wrapper = shallowMount(Mobile);
+    const iconWrapper = wrapper.find('[data-test-menu-icon-wrapper]');
+
+    const transitionRoot = wrapper.findComponent(TransitionRoot);
+    expect(transitionRoot.exists()).toBe(true);
+    expect(transitionRoot.props('show')).toBe(false);
+
+    await iconWrapper.trigger('click');
+    await flushPromises();
+
+    expect(transitionRoot.props('show')).toBe(true);
+  });
+
+  it('should close the mobile main menu on dialog close', async () => {
+    expect.assertions(4);
+
+    const wrapper = shallowMount(Mobile);
+    const iconWrapper = wrapper.find('[data-test-menu-icon-wrapper]');
+
+    await iconWrapper.trigger('click');
+    await flushPromises();
+
+    const transitionRoot = wrapper.findComponent(TransitionRoot);
+    expect(transitionRoot.exists()).toBe(true);
+    expect(transitionRoot.props('show')).toBe(true);
+
+    const dialog = transitionRoot.findComponent(Dialog);
+    expect(dialog.exists()).toBe(true);
+
+    dialog.vm.$emit('close', true);
+
+    await flushPromises();
+
+    expect(transitionRoot.props('show')).toBe(false);
+  });
+});

package/src/modules/components/AppNavigationMenu/__tests__/navigation-item.spec.ts

@@ -0,0 +1,91 @@
+import {
+  describe,
+  it,
+  expect,
+  vi,
+  beforeEach,
+} from 'vitest';
+import { flushPromises, RouterLinkStub, shallowMount } from '@vue/test-utils';
+import { useNavigation } from '~/modules/composables';
+import { AppLoader } from '~/modules/components';
+import NavigationItem from '../NavigationItem.vue';
+import { navigationItem as navigationItemMock } from '~composables/useNavigation/__mocks__/navigation';
+
+import type { HomeIcon } from '@heroicons/vue/24/outline';
+import type { VueWrapper } from '@vue/test-utils';
+import type { NavigationItem as NavigationItemType } from '~composables/useNavigation';
+
+function createWrapper(mockData: Partial<NavigationItemType> = {}): VueWrapper<InstanceType<typeof NavigationItem>> {
+  return shallowMount(NavigationItem, {
+    props: {
+      item: { ...navigationItemMock, ...mockData },
+    },
+  });
+}
+
+describe('the NavigationItem component', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  it('should render an "a" element as root element based on useNavigation', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.element).toBeInstanceOf(HTMLAnchorElement);
+    expect(wrapper.attributes('href')).toBe(navigationItemMock.href);
+  });
+
+  it('should render an "router" element as root element based on useNavigation', () => {
+    const navigation = useNavigation();
+    navigation.setNavigationComponent(RouterLinkStub);
+
+    const wrapper = createWrapper();
+
+    const routerLink = wrapper.findComponent(RouterLinkStub);
+    expect(routerLink.exists()).toBe(true);
+    expect(routerLink.attributes('href')).toBe(navigationItemMock.href);
+    expect(routerLink.props('to')).toStrictEqual(navigationItemMock.to);
+  });
+
+  it('should render an icon', () => {
+    const wrapper = createWrapper();
+
+    const icon = wrapper.findComponent<typeof HomeIcon>('[data-test-icon]');
+    expect(icon.exists()).toBe(true);
+  });
+
+  it('should render the name', () => {
+    const wrapper = createWrapper();
+
+    const name = wrapper.find('[data-test-name]');
+    expect(name.text()).toBe(navigationItemMock.name);
+  });
+
+  it('should render a loader when onClick provides a promise', async () => {
+    expect.assertions(4);
+
+    const clickMock = vi.fn();
+    const wrapper = createWrapper({
+      onClick: async (): Promise<void> => {
+        clickMock();
+
+        await new Promise(resolve => setTimeout(resolve, 500));
+      },
+    });
+
+    let icon = wrapper.findComponent(AppLoader);
+    expect(icon.exists()).toBe(false);
+
+    await wrapper.trigger('click');
+
+    icon = wrapper.findComponent(AppLoader);
+    expect(icon.exists()).toBe(true);
+
+    vi.advanceTimersByTime(500);
+
+    expect(clickMock).toHaveBeenCalledTimes(1);
+    await flushPromises();
+
+    icon = wrapper.findComponent(AppLoader);
+    expect(icon.exists()).toBe(false);
+  });
+});

package/src/modules/components/AppNavigationMenu/__tests__/support-item.spec.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { RouterLinkStub, shallowMount } from '@vue/test-utils';
+import { useNavigation } from '~/modules/composables';
+import SupportItem from '../SupportItem.vue';
+
+import type { VueWrapper } from '@vue/test-utils';
+
+function createWrapper(): VueWrapper<InstanceType<typeof SupportItem>> {
+  return shallowMount(SupportItem);
+}
+
+const navigation = useNavigation();
+
+describe('the SupportItem component', () => {
+  it('should render nothing when contactRoute is set empty', () => {
+    navigation.contactRoute.value = null;
+
+    const wrapper = createWrapper();
+    expect(wrapper.element.innerHTML).toBeUndefined();
+  });
+
+  it('should render an question mark', () => {
+    navigation.contactRoute.value = 'bla';
+
+    const wrapper = createWrapper();
+    expect(wrapper.text()).toBe('?');
+  });
+
+  it('should render an "a" element as root element based on useNavigation', () => {
+    navigation.contactRoute.value = 'bla';
+
+    const wrapper = createWrapper();
+    expect(wrapper.element).toBeInstanceOf(HTMLAnchorElement);
+    expect(wrapper.attributes('href')).toBe(navigation.contactRoute.value);
+  });
+
+  it('should render an "router" element as root element based on useNavigation', () => {
+    navigation.setNavigationComponent(RouterLinkStub);
+    navigation.contactRoute.value = 'bla';
+
+    const wrapper = createWrapper();
+
+    const routerLink = wrapper.findComponent(RouterLinkStub);
+    expect(routerLink.exists()).toBe(true);
+    expect(routerLink.attributes('href')).toBe(navigation.contactRoute.value);
+    expect(routerLink.props('to')).toBe(navigation.contactRoute.value);
+  });
+});