0
# Snapshot Serializers
1

2
Built-in snapshot serializers for clean, readable Angular component test snapshots with Angular-specific attribute handling.
3

4
## Capabilities
5

6
### HTML Comment Serializer
7

8
Serializer for handling HTML comments in Angular component snapshots.
9

10
```typescript { .api }
11
/**
12
 * Snapshot serializer for HTML comments
13
 * Provides clean serialization of HTML comment nodes in component snapshots
14
 */
15
const htmlCommentSerializer: SnapshotSerializer;
16
```
17

18
**Path**: `'jest-preset-angular/build/serializers/html-comment'`
19

20
**Usage Example:**
21

22
```javascript
23
// Automatically included in presets, or manually configure:
24
module.exports = {
25
  snapshotSerializers: [
26
    'jest-preset-angular/build/serializers/html-comment'
27
  ]
28
};
29
```
30

31
### Angular Snapshot Serializer
32

33
Main serializer for Angular components that provides clean, readable snapshots with customizable attribute handling.
34

35
```typescript { .api }
36
/**
37
 * Angular component snapshot serializer
38
 * Handles ComponentFixture instances and provides clean snapshot output
39
 */
40
const ngSnapshotSerializer: SnapshotSerializer;
41

42
interface NgSnapshotOptions {
43
  /** Whether to omit all component attributes from snapshots */
44
  omitAllCompAttrs?: boolean;
45
}
46
```
47

48
**Path**: `'jest-preset-angular/build/serializers/ng-snapshot'`
49

50
**Features:**
51
- Serializes Angular `ComponentFixture` instances
52
- Removes Angular-specific runtime attributes
53
- Provides clean, readable component snapshots
54
- Supports component hierarchy serialization
55

56
**Usage Examples:**
57

58
```typescript
59
import { ComponentFixture, TestBed } from '@angular/core/testing';
60
import { MyComponent } from './my-component';
61

62
describe('MyComponent', () => {
63
  let component: MyComponent;
64
  let fixture: ComponentFixture<MyComponent>;
65

66
  beforeEach(() => {
67
    TestBed.configureTestingModule({
68
      declarations: [MyComponent]
69
    });
70
    fixture = TestBed.createComponent(MyComponent);
71
    component = fixture.componentInstance;
72
  });
73

74
  it('should create', () => {
75
    expect(fixture).toMatchSnapshot();
76
  });
77
});
78
```
79

80
### No Angular Attributes Serializer
81

82
Serializer that removes Angular-specific attributes from DOM snapshots for cleaner output.
83

84
```typescript { .api }
85
/**
86
 * Serializer that removes Angular-specific attributes
87
 * Cleans up snapshots by removing runtime Angular attributes
88
 */
89
const noNgAttributesSerializer: SnapshotSerializer;
90
```
91

92
**Path**: `'jest-preset-angular/build/serializers/no-ng-attributes'`
93

94
**Removed Attributes:**
95
- `__ngContext__` - Angular runtime context
96
- Angular-specific debug attributes
97
- Runtime binding attributes
98

99
**Usage Example:**
100

101
```javascript
102
// Automatically included in presets, or manually configure:
103
module.exports = {
104
  snapshotSerializers: [
105
    'jest-preset-angular/build/serializers/no-ng-attributes'
106
  ]
107
};
108
```
109

110
### Serializer Configuration
111

112
All serializers are automatically included when using preset functions:
113

114
```javascript
115
const { createCjsPreset } = require('jest-preset-angular/presets');
116

117
// Serializers automatically included
118
const config = createCjsPreset();
119

120
// config.snapshotSerializers includes:
121
// - 'jest-preset-angular/build/serializers/html-comment'
122
// - 'jest-preset-angular/build/serializers/ng-snapshot'  
123
// - 'jest-preset-angular/build/serializers/no-ng-attributes'
124
```
125

126
### Manual Configuration
127

128
You can also configure serializers manually if not using presets:
129

130
```javascript
131
module.exports = {
132
  snapshotSerializers: [
133
    'jest-preset-angular/build/serializers/html-comment',
134
    'jest-preset-angular/build/serializers/ng-snapshot',
135
    'jest-preset-angular/build/serializers/no-ng-attributes'
136
  ]
137
};
138
```
139

140
### Snapshot Output
141

142
The serializers work together to provide clean, readable snapshots:
143

144
**Before (without serializers):**
145
```html
146
<app-my-component __ngContext__="LContext{...}">
147
  <!-- Angular comment nodes -->
148
  <div _ngcontent-c0="" class="container">
149
    <p _ngcontent-c0="">Hello World</p>
150
  </div>
151
</app-my-component>
152
```
153

154
**After (with serializers):**
155
```html
156
<app-my-component>
157
  <div class="container">
158
    <p>Hello World</p>
159
  </div>
160
</app-my-component>
161
```
162

163
### Component Fixture Serialization
164

165
The ng-snapshot serializer specifically handles Angular `ComponentFixture` instances:
166

167
```typescript
168
// Test file
169
it('should render component', () => {
170
  fixture.detectChanges();
171
  expect(fixture).toMatchSnapshot(); // Uses ng-snapshot serializer
172
});
173

174
// Generated snapshot
175
exports[`MyComponent should render component 1`] = `
176
<app-my-component>
177
  <h1>My Component</h1>
178
  <p>Component content</p>
179
</app-my-component>
180
`;
181
```
182

183
### Customization Options
184

185
The ng-snapshot serializer supports customization through options:
186

187
```typescript { .api }
188
interface NgSnapshotOptions {
189
  /** Remove all component attributes from snapshots */
190
  omitAllCompAttrs?: boolean;
191
}
192
```
193

194
These options can be configured through Jest's snapshot serializer configuration if needed for advanced use cases.
195

196
### Serializer Order
197

198
The serializers are applied in the following order:
199
1. `html-comment` - Handles HTML comments
200
2. `ng-snapshot` - Processes Angular components
201
3. `no-ng-attributes` - Cleans up Angular attributes
202

203
This order ensures proper processing and clean output for Angular component snapshots.