timmal/app/composables/__tests__/usePageTitle.test.ts

import { describe, it, expect, beforeEach, vi } from 'vitest';
import { usePageTitle } from '../usePageTitle';

/**
 * Unit tests for usePageTitle composable
 *
 * This composable manages page titles throughout the application.
 */

describe('usePageTitle', () => {
  beforeEach(() => {
    // Reset modules to ensure clean state
    vi.resetModules();
  });

  describe('Initialization', () => {
    it('should initialize with default title "Tímmál"', () => {
      const { title } = usePageTitle();
      expect(title.value).toBe('Tímmál');
    });

    it('should initialize with empty page name', () => {
      const { pageName } = usePageTitle();
      expect(pageName.value).toBe(null);
    });
  });

  describe('Setting Page Name', () => {
    it('should update page name when setPageName is called', () => {
      const { pageName, setPageName } = usePageTitle();

      setPageName('Dashboard');

      expect(pageName.value).toBe('Dashboard');
    });

    it('should update title to include page name', () => {
      const { title, setPageName } = usePageTitle();

      setPageName('Dashboard');

      expect(title.value).toBe('Dashboard - Tímmál');
    });

    it('should handle empty string gracefully', () => {
      const { title, setPageName } = usePageTitle();

      // First set a name
      setPageName('Dashboard');
      expect(title.value).toBe('Dashboard - Tímmál');

      // Then clear it
      setPageName('');
      expect(title.value).toBe('Tímmál');
    });

    it('should handle multiple page name changes', () => {
      const { title, setPageName } = usePageTitle();

      setPageName('Dashboard');
      expect(title.value).toBe('Dashboard - Tímmál');

      setPageName('Projects');
      expect(title.value).toBe('Projects - Tímmál');

      setPageName('Settings');
      expect(title.value).toBe('Settings - Tímmál');
    });
  });

  describe('Title Formatting', () => {
    it('should format title as "PageName - Tímmál" when page name is set', () => {
      const { title, setPageName } = usePageTitle();

      setPageName('Reports');

      expect(title.value).toBe('Reports - Tímmál');
    });

    it('should format title as "Tímmál" when page name is empty', () => {
      const { title, setPageName } = usePageTitle();
      setPageName(null);

      expect(title.value).toBe('Tímmál');
    });

    it('should preserve special characters in page name', () => {
      const { title, setPageName } = usePageTitle();

      setPageName('Reports & Analytics');

      expect(title.value).toBe('Reports & Analytics - Tímmál');
    });

    it('should preserve unicode characters', () => {
      const { title, setPageName } = usePageTitle();

      setPageName('Paramètres');

      expect(title.value).toBe('Paramètres - Tímmál');
    });
  });

  describe('State Sharing', () => {
    it('should share state across multiple calls', () => {
      const instance1 = usePageTitle();
      const instance2 = usePageTitle();

      // Set via first instance
      instance1.setPageName('Dashboard');

      // Should be visible in second instance
      expect(instance2.title.value).toBe('Dashboard - Tímmál');
      expect(instance2.pageName.value).toBe('Dashboard');
    });
  });

  describe('Exposed API', () => {
    it('should expose title as computed', () => {
      const { title } = usePageTitle();

      expect(title).toBeDefined();
      expect(title.value).toBeDefined();
    });

    it('should expose pageName as readonly', () => {
      const { pageName } = usePageTitle();

      expect(pageName).toBeDefined();
      expect(pageName.value).toBeDefined();
    });

    it('should expose setPageName method', () => {
      const { setPageName } = usePageTitle();

      expect(setPageName).toBeDefined();
      expect(typeof setPageName).toBe('function');
    });

    it('title should be readonly (TypeScript enforced)', () => {
      const { title } = usePageTitle();

      // readonly() is enforced by TypeScript, not at runtime
      // This test just verifies the property exists
      expect(title).toBeDefined();
      expect(title.value).toBeDefined();
    });

    it('pageName should be readonly (TypeScript enforced)', () => {
      const { pageName } = usePageTitle();

      // readonly() is enforced by TypeScript, not at runtime
      // This test just verifies the property exists
      expect(pageName).toBeDefined();
      expect(pageName.value).toBeDefined();
    });
  });
});