0
# Component Rendering and Testing
1

2
Component rendering system with MockRender for creating test fixtures, accessing component instances, and managing lifecycle. Provides powerful fixture management with type-safe access to rendered components.
3

4
## Capabilities
5

6
### MockRender Function
7

8
Creates component fixtures for testing with various input options and configuration.
9

10
```typescript { .api }
11
/**
12
 * Creates an empty fixture
13
 */
14
function MockRender(): MockedComponentFixture<void, void>;
15

16
/**
17
 * Creates a fixture to access a token
18
 * @param template - Injection token to access
19
 * @param params - Parameters (should be undefined/null)
20
 * @param detectChangesOrOptions - Change detection or render options
21
 */
22
function MockRender<MComponent>(
23
  template: InjectionToken<MComponent>,
24
  params?: undefined | null,
25
  detectChangesOrOptions?: boolean | IMockRenderOptions
26
): MockedComponentFixture<MComponent, void>;
27

28
/**
29
 * Creates a fixture for a component without parameters
30
 * @param template - Component class to render
31
 * @param params - Parameters (should be undefined/null) 
32
 * @param detectChangesOrOptions - Change detection or render options
33
 */
34
function MockRender<MComponent>(
35
  template: AnyType<MComponent>,
36
  params: undefined | null,
37
  detectChangesOrOptions?: boolean | IMockRenderOptions
38
): MockedComponentFixture<MComponent, MComponent>;
39

40
/**
41
 * Creates a fixture for a component with typed parameters
42
 * @param template - Component class to render
43
 * @param params - Component input parameters
44
 * @param detectChangesOrOptions - Change detection or render options
45
 */
46
function MockRender<MComponent, TComponent extends object>(
47
  template: AnyType<MComponent>,
48
  params: TComponent,
49
  detectChangesOrOptions?: boolean | IMockRenderOptions
50
): MockedComponentFixture<MComponent, TComponent>;
51

52
/**
53
 * Creates a fixture from a string template
54
 * @param template - HTML template string
55
 * @param params - Template context parameters
56
 * @param detectChangesOrOptions - Change detection or render options
57
 */
58
function MockRender<MComponent = void, TComponent extends Record<keyof any, any> = Record<keyof any, any>>(
59
  template: string,
60
  params?: TComponent,
61
  detectChangesOrOptions?: boolean | IMockRenderOptions
62
): MockedComponentFixture<MComponent, TComponent>;
63
```
64

65
**Usage Examples:**
66

67
```typescript
68
import { MockRender } from "ng-mocks";
69

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

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

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

88
// Access the rendered component
89
const componentEl = fixture.point;
90
const component = componentEl.componentInstance;
91

92
// Render with options
93
const fixture = MockRender(MyComponent, null, {
94
  detectChanges: false,
95
  providers: [{ provide: MyService, useValue: mockService }]
96
});
97
```
98

99
### MockRenderFactory Function
100

101
Creates reusable render factories for consistent test setup.
102

103
```typescript { .api }
104
/**
105
 * Creates a factory function for reusable component rendering
106
 * @param template - Component class or template string
107
 * @param params - Default parameters for rendering
108
 * @param options - Factory configuration options
109
 * @returns Factory function that creates fixtures
110
 */
111
function MockRenderFactory<MComponent, TComponent extends Record<keyof any, any> = Record<keyof any, any>>(
112
  template: AnyType<MComponent> | string,
113
  params?: TComponent,
114
  options?: IMockRenderFactoryOptions
115
): () => MockedComponentFixture<MComponent, TComponent>;
116
```
117

118
**Usage Examples:**
119

120
```typescript
121
import { MockRenderFactory } from "ng-mocks";
122

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

129
// Use factory in tests
130
beforeEach(() => {
131
  fixture = createComponent();
132
});
133

134
// Factory with TestBed configuration
135
const createComponentWithConfig = MockRenderFactory(MyComponent, {}, {
136
  configureTestBed: true,
137
  providers: [MyService]
138
});
139
```
140

141
### Fixture Types
142

143
The MockRender system provides enhanced fixture types with additional functionality.
144

145
```typescript { .api }
146
/**
147
 * Enhanced ComponentFixture with point property for accessing rendered component
148
 */
149
interface MockedComponentFixture<C = any, F = DefaultRenderComponent<C>> extends ComponentFixture<F> {
150
  /** Direct access to the rendered component's DebugElement */
151
  point: MockedDebugElement<C>;
152
}
153

154
/**
155
 * Enhanced DebugElement with typed component instance
156
 */
157
interface MockedDebugElement<T = any> extends DebugElement {
158
  /** Typed component instance */
159
  componentInstance: T;
160
}
161

162
/**
163
 * Enhanced DebugNode with typed component instance
164
 */
165
interface MockedDebugNode<T = any> extends DebugNode {
166
  /** Typed component instance */
167
  componentInstance: T;
168
}
169

170
/**
171
 * Middleware component type for fixture.componentInstance
172
 */
173
type DefaultRenderComponent<MComponent> = {
174
  [K in keyof MComponent]: MComponent[K];
175
};
176
```
177

178
### Render Options
179

180
Configuration options for controlling render behavior.
181

182
```typescript { .api }
183
/**
184
 * Configuration options for MockRender
185
 */
186
interface IMockRenderOptions {
187
  /** Whether to automatically run change detection (default: true) */
188
  detectChanges?: boolean;
189
  /** Additional providers for the test environment */
190
  providers?: NgModule['providers'];
191
  /** Whether to reset TestBed before rendering (usually automatic) */
192
  reset?: boolean;
193
  /** Additional view providers for the test environment */
194
  viewProviders?: NgModule['providers'];
195
}
196

197
/**
198
 * Configuration options for MockRenderFactory  
199
 */
200
interface IMockRenderFactoryOptions extends IMockRenderOptions {
201
  /** Whether to configure TestBed (default: false) */
202
  configureTestBed?: boolean;
203
}
204
```
205

206
**Usage Examples:**
207

208
```typescript
209
import { MockRender } from "ng-mocks";
210

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

216
// Manual change detection
217
fixture.detectChanges();
218

219
// Provide additional dependencies
220
const fixture = MockRender(MyComponent, null, {
221
  providers: [
222
    { provide: MyService, useValue: mockService },
223
    { provide: API_URL, useValue: 'http://test.com' }
224
  ],
225
  viewProviders: [
226
    { provide: ViewService, useClass: MockViewService }
227
  ]
228
});
229

230
// Reset TestBed manually
231
const fixture = MockRender(MyComponent, null, { reset: true });
232
```
233

234
### Component Access Patterns
235

236
Different ways to access and interact with rendered components.
237

238
**Accessing the Main Component:**
239

240
```typescript
241
const fixture = MockRender(MyComponent, { title: 'Test' });
242

243
// Access via fixture.point
244
const componentEl = fixture.point;
245
const component = componentEl.componentInstance;
246

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

250
// Update properties
251
component.title = 'Updated Title';
252
fixture.detectChanges();
253
```
254

255
**Accessing Wrapper Component:**
256

257
```typescript
258
const fixture = MockRender(MyComponent, { title: 'Test' });
259

260
// Access the wrapper component (created by MockRender)
261
const wrapper = fixture.componentInstance;
262
wrapper.title = 'New Title'; // Updates the input to MyComponent
263
fixture.detectChanges();
264
```
265

266
**Working with String Templates:**
267

268
```typescript
269
const fixture = MockRender(`
270
  <div class="container">
271
    <my-component [title]="title" (click)="onClick()"></my-component>
272
  </div>
273
`, {
274
  title: 'Test Title',
275
  onClick: jasmine.createSpy('onClick')
276
});
277

278
// Access template context
279
const context = fixture.componentInstance;
280
expect(context.title).toBe('Test Title');
281
expect(context.onClick).toHaveBeenCalled();
282
```