basic-renderers.test.tsx

/**
 * ObjectUI
 * Copyright (c) 2024-present ObjectStack Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { describe, it, expect } from 'vitest';
import {
  renderComponent,
  validateComponentRegistration,
  getAllDisplayIssues,
  checkDOMStructure,
} from './test-utils';
// Registers the renderers at module scope, NOT inside a `beforeAll` — there the
// cold transform is billed to `hookTimeout`, which is why this carried a raised
// timeout. See object-ui/no-dynamic-import-in-test-hook (objectui#3010/#3021).
import '../renderers';

/**
 * Comprehensive tests for basic renderer components
 * These tests automatically detect display and rendering issues
 */
describe('Basic Renderers - Display Issue Detection', () => {
  describe('Text Renderer', () => {
    it('should be properly registered', () => {
      const validation = validateComponentRegistration('text');
      expect(validation.isRegistered).toBe(true);
      expect(validation.hasConfig).toBe(true);
      expect(validation.hasLabel).toBe(true);
    });

    it('should render text content without issues', () => {
      const { container } = renderComponent({
        type: 'text',
        content: 'Hello World',
      });

      expect(container.textContent).toContain('Hello World');
      const issues = getAllDisplayIssues(container);
      expect(issues).toHaveLength(0);
    });

    it('should handle empty content gracefully', () => {
      const { container } = renderComponent({
        type: 'text',
        content: '',
      });

      const domCheck = checkDOMStructure(container);
      // Empty text is acceptable, just verify it doesn't crash
      expect(domCheck).toBeDefined();
    });

    it('should support value property as alias', () => {
      const { container } = renderComponent({
        type: 'text',
        value: 'Test Value',
      });

      expect(container.textContent).toContain('Test Value');
    });

    it('should render with designer props correctly', () => {
      const { container } = renderComponent(
        { type: 'text', content: 'Designer Test' },
      );

      // Verify it renders without errors
      expect(container).toBeDefined();
    });
  });

  describe('Div Renderer', () => {
    it('should be properly registered', () => {
      const validation = validateComponentRegistration('div');
      expect(validation.isRegistered).toBe(true);
      expect(validation.hasConfig).toBe(true);
    });

    it('should render container without issues', () => {
      const { container } = renderComponent({
        type: 'div',
        className: 'test-class',
      });

      const div = container.querySelector('div');
      expect(div).toBeTruthy();
      // className might be applied differently, just verify div exists
      expect(div).toBeDefined();
    });

    it('should render children correctly', () => {
      const { container } = renderComponent({
        type: 'div',
        body: [
          { type: 'text', content: 'Child 1' },
          { type: 'text', content: 'Child 2' },
        ],
      });

      expect(container.textContent).toContain('Child 1');
      expect(container.textContent).toContain('Child 2');
    });

    it('should not have display issues', () => {
      const { container } = renderComponent({
        type: 'div',
        body: [{ type: 'text', content: 'Content' }],
      });

      const issues = getAllDisplayIssues(container);
      // Should have no critical issues
      expect(issues.filter(i => i.includes('missing accessible label'))).toHaveLength(0);
    });
  });

  describe('Span Renderer', () => {
    it('should be properly registered', () => {
      const validation = validateComponentRegistration('span');
      expect(validation.isRegistered).toBe(true);
    });

    it('should render inline content', () => {
      const { container } = renderComponent({
        type: 'span',
        body: [{ type: 'text', content: 'Inline text' }],
      });

      const span = container.querySelector('span');
      expect(span).toBeTruthy();
      expect(span?.textContent).toContain('Inline text');
    });
  });

  describe('Image Renderer', () => {
    it('should be properly registered', () => {
      const validation = validateComponentRegistration('image');
      expect(validation.isRegistered).toBe(true);
    });

    it('should render with required alt attribute', () => {
      const { container } = renderComponent({
        type: 'image',
        src: 'https://example.com/image.jpg',
        alt: 'Test image',
      });

      const img = container.querySelector('img');
      expect(img).toBeTruthy();
      expect(img?.getAttribute('alt')).toBe('Test image');
      expect(img?.getAttribute('src')).toBe('https://example.com/image.jpg');
    });

    it('should detect missing alt attribute', () => {
      const { container } = renderComponent({
        type: 'image',
        src: 'https://example.com/image.jpg',
      });

      const img = container.querySelector('img');
      // If img has alt, it's good; if not, our check should detect it
      if (img && !img.hasAttribute('alt')) {
        const issues = getAllDisplayIssues(container);
        const altIssues = issues.filter(i => i.includes('alt'));
        expect(altIssues.length).toBeGreaterThan(0);
      } else {
        // Image renderer provides default alt, which is good
        expect(img?.hasAttribute('alt') || true).toBe(true);
      }
    });
  });

  describe('Icon Renderer', () => {
    it('should be properly registered', () => {
      const validation = validateComponentRegistration('icon');
      expect(validation.isRegistered).toBe(true);
      // Icon may or may not have defaultProps, both are acceptable
      expect(validation.hasConfig).toBe(true);
    });

    it('should render icon without issues', () => {
      const { container } = renderComponent({
        type: 'icon',
        name: 'star',
      });

      // Icon should render an SVG
      const svg = container.querySelector('svg');
      expect(svg).toBeTruthy();
    });

    it('should apply size classes correctly', () => {
      const { container } = renderComponent({
        type: 'icon',
        name: 'heart',
        size: 24,
      });

      const svg = container.querySelector('svg');
      expect(svg).toBeTruthy();
    });
  });

  describe('Separator Renderer', () => {
    it('should be properly registered', () => {
      const validation = validateComponentRegistration('separator');
      expect(validation.isRegistered).toBe(true);
    });

    it('should render separator with proper role', () => {
      const { container } = renderComponent({
        type: 'separator',
      });

      const separator = container.querySelector('[role="separator"], hr, [data-orientation]');
      expect(separator).toBeTruthy();
    });

    it('should support both orientations', () => {
      const { container: horizontal } = renderComponent({
        type: 'separator',
        orientation: 'horizontal',
      });

      const { container: vertical } = renderComponent({
        type: 'separator',
        orientation: 'vertical',
      });

      expect(horizontal.querySelector('*')).toBeTruthy();
      expect(vertical.querySelector('*')).toBeTruthy();
    });
  });

  describe('HTML Renderer', () => {
    it('should be properly registered', () => {
      const validation = validateComponentRegistration('html');
      expect(validation.isRegistered).toBe(true);
    });

    it('should render HTML content safely', () => {
      const { container } = renderComponent({
        type: 'html',
        html: '<p>HTML Content</p>',
      });

      // HTML renderer uses dangerouslySetInnerHTML
      const hasContent = container.querySelector('p') || container.textContent?.includes('HTML Content');
      expect(hasContent).toBeTruthy();
    });
  });
});