Reputation: 1
I am testing a component in my Angular v15 app. So far only one test fails, my snapshot test:
describe('Snapshot', () => {
it('basic', waitForAsync(() => {
fixture.detectChanges();
expect(fixture).toMatchSnapshot();
}));
});
Test Fixture:
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [
CommonModule,
<ComponentName>StyleModule,
FormsModule,
LabelModule,
ReactiveFormsModule,
TranslateModule.forRoot({}),
ValidationErrorsModule
],
declarations: [
<ComponentName>FormComponent,
<ComponentName>FormComponent,
<ComponentName>LayoutSelectComponent
],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: <ComponentName>FormComponent,
multi: true
},
{
provide: AppConfig,
useValue: appConfigMock
},
{
provide: FeatureTogglesService,
useValue: featureTogglesServiceMock
},
{
provide: PermissionsService,
useValue: permissionsServiceMock
},
ConfirmationDialogService,
<ComponentName>FormUtilsService,
<ComponentName>ImageSelectDialogService,
{
provide: SimpleModalService,
useClass: SimpleModalServiceMock
},
TranslateService
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(<ComponentName>FormComponent);
<ComponentName>FormUtilsService = TestBed.inject(<ComponentName>FormUtilsService);
confirmationDialogService = TestBed.inject(ConfirmationDialogService);
<ComponentName>ImageSelectDialogService = TestBed.inject(
<ComponentName>ImageSelectDialogService
);
translateService = TestBed.inject(TranslateService);
component = fixture.componentInstance;
});
... tests
... the only failing test (see code block above)
Every other test passes. The error I get is this:
TypeError: Cannot read properties of undefined (reading 'value')
at <ComponentName>_Template (ng:/<ComponentName>.js:360:65)
at executeTemplate (node_modules/@angular/core/fesm2020/core.mjs:10441:9)
at refreshView (node_modules/@angular/core/fesm2020/core.mjs:10326:13)
at refreshComponent (node_modules/@angular/core/fesm2020/core.mjs:11385:13)
at refreshChildComponents (node_modules/@angular/core/fesm2020/core.mjs:10116:9)
at refreshView (node_modules/@angular/core/fesm2020/core.mjs:10376:13)
at detectChangesInternal (node_modules/@angular/core/fesm2020/core.mjs:11529:9)
at RootViewRef.detectChanges (node_modules/@angular/core/fesm2020/core.mjs:12020:9)
at ComponentFixture._tick (node_modules/@angular/core/fesm2020/testing.mjs:126:32)
at node_modules/@angular/core/fesm2020/testing.mjs:139:22
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:400:30)
at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvoke (node_modules/zone.js/dist/async-test.js:127:47)
at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:123:43)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:399:56)
at Object.onInvoke (node_modules/@angular/core/fesm2020/core.mjs:24210:33)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:399:56)
at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone-node.js:160:47)
at NgZone.run (node_modules/@angular/core/fesm2020/core.mjs:24064:28)
at ComponentFixture.detectChanges (node_modules/@angular/core/fesm2020/testing.mjs:138:25)
at src/modules/action-template/media-type-form/<ComponentName>/<ComponentName>.component.spec.ts:685:15
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:400:30)
at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvoke (node_modules/zone.js/dist/async-test.js:127:47)
at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:123:43)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:399:56)
at Zone.Object.<anonymous>.Zone.runGuarded (node_modules/zone.js/dist/zone-node.js:171:51)
at runInTestZone (node_modules/zone.js/dist/async-test.js:272:33)
at node_modules/zone.js/dist/async-test.js:223:21
at new ZoneAwarePromise (node_modules/zone.js/dist/zone-node.js:1270:25)
at node_modules/zone.js/dist/async-test.js:222:24
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:400:30)
at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:126:43)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/dist/zone-node.js:399:56)
at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone-node.js:160:47)
at Object.<anonymous> (node_modules/jest-zone-patch/index.js:50:27)
The HTML uses a formGroup with the form being named form
so it can be referenced with this.form.value.<formControlName>
.
As the error log is very undescriptive, I am unsure of where to look for remediation. The page works perfectly, no errors. Just the tests fail.
HTML excerpt:
<CompanyCustomTextInput label-position="above">
<label slot="label" for="title-input">{{'TITLE' | translate}}</label>
<input
slot="input"
type="text"
class="text-input"
id="title-input"
placeholder="{{'TITLE_PLACEHOLDER' | translate}}"
formControlName="title"
[maxlength]="maxLengthTitle"
/>
</CompanyCustomTextInput>
There are more inputs of different and of the same type, but they all follow this type of pattern.
I have tried to remove all the this.form.value
from inputs, tried changing formControlName
. No luck.
Upvotes: 0
Views: 55