dees-wcctools/test/elements/test-edgecases.ts

import {
  DeesElement,
  customElement,
  type TemplateResult,
  html,
  property,
  css,
} from '@design.estate/dees-element';

@customElement('test-edgecases')
export class TestEdgeCases extends DeesElement {
  public static demo = () => html`<test-edgecases></test-edgecases>`;

  // Property with null value
  @property({ type: String })
  public nullableString: string | null = null;

  // Property with undefined value
  @property({ type: Number })
  public undefinedNumber: number | undefined = undefined;

  // Very long string
  @property({ type: String })
  public longString: string = 'Lorem ipsum '.repeat(50);

  // Property with special characters
  @property({ type: String })
  public specialChars: string = '!@#$%^&*()_+-=[]{}|;\':",./<>?`~';

  // Property that could cause rendering issues
  @property({ type: String })
  public htmlString: string = '<script>alert("test")</script><b>Bold text</b>';

  // Numeric edge cases
  @property({ type: Number })
  public infinityNumber: number = Infinity;

  @property({ type: Number })
  public nanNumber: number = NaN;

  @property({ type: Number })
  public veryLargeNumber: number = Number.MAX_SAFE_INTEGER;

  @property({ type: Number })
  public verySmallNumber: number = Number.MIN_SAFE_INTEGER;

  @property({ type: Number })
  public floatNumber: number = 3.14159265359;

  // Boolean-like values
  @property({ type: String })
  public booleanString: string = 'false';

  @property({ type: Number })
  public booleanNumber: number = 0;

  // Empty values
  @property({ type: String })
  public emptyString: string = '';

  @property({ type: Array })
  public emptyArray: any[] = [];

  @property({ type: Object })
  public emptyObject: {} = {};

  // Circular reference (should not break properties panel)
  @property({ attribute: false })
  public circularRef: any = (() => {
    const obj: any = { name: 'circular' };
    obj.self = obj;
    return obj;
  })();

  public static styles = [
    css`
      :host {
        display: block;
        padding: 20px;
        background: #fff3e0;
        border: 2px solid #ff9800;
        border-radius: 8px;
        font-family: monospace;
        font-size: 12px;
      }
      .warning {
        background: #ffe0b2;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 10px;
        color: #e65100;
      }
      .property {
        margin: 5px 0;
        padding: 5px;
        background: white;
        border-radius: 2px;
        word-break: break-all;
      }
      .label {
        font-weight: bold;
        color: #f57c00;
      }
      .value {
        color: #666;
      }
      .special {
        background: #ffccbc;
        padding: 2px 4px;
        border-radius: 2px;
      }
    `
  ];

  private formatValue(value: any): string {
    if (value === null) return 'null';
    if (value === undefined) return 'undefined';
    if (value === Infinity) return 'Infinity';
    if (Number.isNaN(value)) return 'NaN';
    if (typeof value === 'string' && value.length > 50) {
      return value.substring(0, 50) + '...';
    }
    if (typeof value === 'object') {
      try {
        return JSON.stringify(value);
      } catch (e) {
        return '[Circular Reference]';
      }
    }
    return String(value);
  }

  public render() {
    return html`
      <div class="warning">
        ⚠️ This element tests edge cases and problematic values
      </div>
      
      <div class="property">
        <span class="label">Nullable String:</span>
        <span class="value special">${this.formatValue(this.nullableString)}</span>
      </div>
      
      <div class="property">
        <span class="label">Undefined Number:</span>
        <span class="value special">${this.formatValue(this.undefinedNumber)}</span>
      </div>
      
      <div class="property">
        <span class="label">Long String:</span>
        <span class="value">${this.formatValue(this.longString)}</span>
      </div>
      
      <div class="property">
        <span class="label">Special Characters:</span>
        <span class="value">${this.specialChars}</span>
      </div>
      
      <div class="property">
        <span class="label">HTML String (escaped):</span>
        <span class="value">${this.htmlString}</span>
      </div>
      
      <div class="property">
        <span class="label">Infinity:</span>
        <span class="value special">${this.formatValue(this.infinityNumber)}</span>
      </div>
      
      <div class="property">
        <span class="label">NaN:</span>
        <span class="value special">${this.formatValue(this.nanNumber)}</span>
      </div>
      
      <div class="property">
        <span class="label">Very Large Number:</span>
        <span class="value">${this.veryLargeNumber}</span>
      </div>
      
      <div class="property">
        <span class="label">Float Number:</span>
        <span class="value">${this.floatNumber}</span>
      </div>
      
      <div class="property">
        <span class="label">Empty String:</span>
        <span class="value special">[empty]</span>
      </div>
      
      <div class="property">
        <span class="label">Circular Reference:</span>
        <span class="value special">${this.formatValue(this.circularRef)}</span>
      </div>
    `;
  }
}