framit/app/components/AppNavbar.test.ts

import { describe, it, expect } from 'vitest';

describe('AppNavbar', () => {
  describe('navigation items logic', () => {
    const mockT = (key: string) => {
      const translations: Record<string, string> = {
        'pages.home.name': 'Home',
        'pages.resume.name': 'Resume',
        'pages.vocal-synthesis.name': 'Vocal Synthesis',
        'pages.languages.name': 'Languages',
        'pages.contact.name': 'Contact',
      };
      return translations[key] || key;
    };

    it('should generate navigation items with correct structure', () => {
      const mockRoute = { path: '/' };

      const items = computed(() => [
        {
          label: mockT('pages.home.name'),
          to: '/',
          active: mockRoute.path === '/',
        },
        ...['resume', 'vocal-synthesis', 'languages', 'contact'].map((page) => ({
          label: mockT(`pages.${page}.name`),
          to: `/${page}`,
          active: mockRoute.path.startsWith(`/${page}`),
        })),
      ]);

      expect(items.value).toHaveLength(5);
      expect(items.value[0]).toEqual({
        label: 'Home',
        to: '/',
        active: true,
      });
    });

    it('should include all required pages', () => {
      const mockRoute = { path: '/' };

      const items = computed(() => [
        {
          label: mockT('pages.home.name'),
          to: '/',
          active: mockRoute.path === '/',
        },
        ...['resume', 'vocal-synthesis', 'languages', 'contact'].map((page) => ({
          label: mockT(`pages.${page}.name`),
          to: `/${page}`,
          active: mockRoute.path.startsWith(`/${page}`),
        })),
      ]);

      const labels = items.value.map((item) => item.label);
      expect(labels).toContain('Home');
      expect(labels).toContain('Resume');
      expect(labels).toContain('Vocal Synthesis');
      expect(labels).toContain('Languages');
      expect(labels).toContain('Contact');
    });

    it('should mark home as active when on root path', () => {
      const mockRoute = { path: '/' };

      const items = computed(() => [
        {
          label: mockT('pages.home.name'),
          to: '/',
          active: mockRoute.path === '/',
        },
        ...['resume', 'vocal-synthesis', 'languages', 'contact'].map((page) => ({
          label: mockT(`pages.${page}.name`),
          to: `/${page}`,
          active: mockRoute.path.startsWith(`/${page}`),
        })),
      ]);

      expect(items.value[0].active).toBe(true);
      expect(items.value[1].active).toBe(false);
    });

    it('should mark resume as active when on resume path', () => {
      const mockRoute = { path: '/resume' };

      const items = computed(() => [
        {
          label: mockT('pages.home.name'),
          to: '/',
          active: mockRoute.path === '/',
        },
        ...['resume', 'vocal-synthesis', 'languages', 'contact'].map((page) => ({
          label: mockT(`pages.${page}.name`),
          to: `/${page}`,
          active: mockRoute.path.startsWith(`/${page}`),
        })),
      ]);

      expect(items.value[0].active).toBe(false);
      expect(items.value[1].active).toBe(true);
    });

    it('should mark vocal-synthesis as active for subpages', () => {
      const mockRoute = { path: '/vocal-synthesis/project' };

      const items = computed(() => [
        {
          label: mockT('pages.home.name'),
          to: '/',
          active: mockRoute.path === '/',
        },
        ...['resume', 'vocal-synthesis', 'languages', 'contact'].map((page) => ({
          label: mockT(`pages.${page}.name`),
          to: `/${page}`,
          active: mockRoute.path.startsWith(`/${page}`),
        })),
      ]);

      expect(items.value[2].active).toBe(true);
    });
  });
});