Component Rendering and Testing

/**
 * Creates an empty fixture
 */
function MockRender(): MockedComponentFixture<void, void>;

/**
 * Creates a fixture to access a token
 * @param template - Injection token to access
 * @param params - Parameters (should be undefined/null)
 * @param detectChangesOrOptions - Change detection or render options
 */
function MockRender<MComponent>(
  template: InjectionToken<MComponent>,
  params?: undefined | null,
  detectChangesOrOptions?: boolean | IMockRenderOptions
): MockedComponentFixture<MComponent, void>;

/**
 * Creates a fixture for a component without parameters
 * @param template - Component class to render
 * @param params - Parameters (should be undefined/null) 
 * @param detectChangesOrOptions - Change detection or render options
 */
function MockRender<MComponent>(
  template: AnyType<MComponent>,
  params: undefined | null,
  detectChangesOrOptions?: boolean | IMockRenderOptions
): MockedComponentFixture<MComponent, MComponent>;

/**
 * Creates a fixture for a component with typed parameters
 * @param template - Component class to render
 * @param params - Component input parameters
 * @param detectChangesOrOptions - Change detection or render options
 */
function MockRender<MComponent, TComponent extends object>(
  template: AnyType<MComponent>,
  params: TComponent,
  detectChangesOrOptions?: boolean | IMockRenderOptions
): MockedComponentFixture<MComponent, TComponent>;

/**
 * Creates a fixture from a string template
 * @param template - HTML template string
 * @param params - Template context parameters
 * @param detectChangesOrOptions - Change detection or render options
 */
function MockRender<MComponent = void, TComponent extends Record<keyof any, any> = Record<keyof any, any>>(
  template: string,
  params?: TComponent,
  detectChangesOrOptions?: boolean | IMockRenderOptions
): MockedComponentFixture<MComponent, TComponent>;

import { MockRender } from "ng-mocks";

// Render component without parameters
const fixture = MockRender(MyComponent);
const component = fixture.point.componentInstance;

// Render component with parameters
const fixture = MockRender(MyComponent, { 
  title: 'Test Title',
  items: ['item1', 'item2'] 
});

// Render from string template
const fixture = MockRender(`
  <my-component [title]="title" [items]="items"></my-component>
`, { 
  title: 'Test Title',
  items: ['item1', 'item2'] 
});

// Access the rendered component
const componentEl = fixture.point;
const component = componentEl.componentInstance;

// Render with options
const fixture = MockRender(MyComponent, null, {
  detectChanges: false,
  providers: [{ provide: MyService, useValue: mockService }]
});

/**
 * Creates a factory function for reusable component rendering
 * @param template - Component class or template string
 * @param params - Default parameters for rendering
 * @param options - Factory configuration options
 * @returns Factory function that creates fixtures
 */
function MockRenderFactory<MComponent, TComponent extends Record<keyof any, any> = Record<keyof any, any>>(
  template: AnyType<MComponent> | string,
  params?: TComponent,
  options?: IMockRenderFactoryOptions
): () => MockedComponentFixture<MComponent, TComponent>;

import { MockRenderFactory } from "ng-mocks";

// Create a factory for consistent test setup
const createComponent = MockRenderFactory(MyComponent, {
  title: 'Default Title',
  enabled: true
});

// Use factory in tests
beforeEach(() => {
  fixture = createComponent();
});

// Factory with TestBed configuration
const createComponentWithConfig = MockRenderFactory(MyComponent, {}, {
  configureTestBed: true,
  providers: [MyService]
});

/**
 * Enhanced ComponentFixture with point property for accessing rendered component
 */
interface MockedComponentFixture<C = any, F = DefaultRenderComponent<C>> extends ComponentFixture<F> {
  /** Direct access to the rendered component's DebugElement */
  point: MockedDebugElement<C>;
}

/**
 * Enhanced DebugElement with typed component instance
 */
interface MockedDebugElement<T = any> extends DebugElement {
  /** Typed component instance */
  componentInstance: T;
}

/**
 * Enhanced DebugNode with typed component instance
 */
interface MockedDebugNode<T = any> extends DebugNode {
  /** Typed component instance */
  componentInstance: T;
}

/**
 * Middleware component type for fixture.componentInstance
 */
type DefaultRenderComponent<MComponent> = {
  [K in keyof MComponent]: MComponent[K];
};

/**
 * Configuration options for MockRender
 */
interface IMockRenderOptions {
  /** Whether to automatically run change detection (default: true) */
  detectChanges?: boolean;
  /** Additional providers for the test environment */
  providers?: NgModule['providers'];
  /** Whether to reset TestBed before rendering (usually automatic) */
  reset?: boolean;
  /** Additional view providers for the test environment */
  viewProviders?: NgModule['providers'];
}

/**
 * Configuration options for MockRenderFactory  
 */
interface IMockRenderFactoryOptions extends IMockRenderOptions {
  /** Whether to configure TestBed (default: false) */
  configureTestBed?: boolean;
}

import { MockRender } from "ng-mocks";

// Disable automatic change detection
const fixture = MockRender(MyComponent, { title: 'Test' }, {
  detectChanges: false
});

// Manual change detection
fixture.detectChanges();

// Provide additional dependencies
const fixture = MockRender(MyComponent, null, {
  providers: [
    { provide: MyService, useValue: mockService },
    { provide: API_URL, useValue: 'http://test.com' }
  ],
  viewProviders: [
    { provide: ViewService, useClass: MockViewService }
  ]
});

// Reset TestBed manually
const fixture = MockRender(MyComponent, null, { reset: true });

const fixture = MockRender(MyComponent, { title: 'Test' });

// Access via fixture.point
const componentEl = fixture.point;
const component = componentEl.componentInstance;

// Direct property access
console.log(component.title); // 'Test'

// Update properties
component.title = 'Updated Title';
fixture.detectChanges();

const fixture = MockRender(MyComponent, { title: 'Test' });

// Access the wrapper component (created by MockRender)
const wrapper = fixture.componentInstance;
wrapper.title = 'New Title'; // Updates the input to MyComponent
fixture.detectChanges();

const fixture = MockRender(`
  <div class="container">
    <my-component [title]="title" (click)="onClick()"></my-component>
  </div>
`, {
  title: 'Test Title',
  onClick: jasmine.createSpy('onClick')
});

// Access template context
const context = fixture.componentInstance;
expect(context.title).toBe('Test Title');
expect(context.onClick).toHaveBeenCalled();