angular 13 support

[bboydflo]

has anyone tried spectator with angular 13? any roadblocks? I've tried it myself, but get some errors and not sure where the issues are. I am currently trying to update angular, jest-preset-angular and other libs to support angular 13.

[thw0rted]

The latest release says it requires Angular 13, but I'm having problems where tests that worked before now fail. I'm using Spectator like this:

const createHost = createHostFactory({
    component: MyComponentUnderTest,
    providers: [
        { provide: MAT_DATE_LOCALE, useValue: DATE_LOCALE },
    ],
    imports: [
        // Must include Forms/ReactiveForms here again because they're used by
        // the dynamically-created host components
        FormsModule,
        ReactiveFormsModule,
        SharedModule,
    ]
});

// Inside setup function
            control = new FormControl(controlValue);

            host = createHost('<my-component [formControl]="fc" [type]="type"></my-component>', {
                hostProps: {
                    fc: control,
                    type,
                }
            });

            host.detectChanges();
            await host.fixture.whenStable();

This worked with Spectator 7.x / Angular 12, but once I upgraded to Spectator 9.0 / Angular 13, I started getting errors like

ERROR: 'NG0303: Can't bind to 'formControl' since it isn't a known property of 'my-component'.'

even though MyComponentUnderTest implements ControlValueAccessor and I'm importing the ReactiveFormsModule (as you can see in the example). It's a lot of work to make a starter project to illustrate this but I'm going to try to get a minimal example together if I can.

[grosch]

I'm using spectator with angular 14 with minimal issues, and those are all around jest integration. You'd have to provide a more contained example showing the problem.

[thw0rted]

Hi @grosch , I made this repro for my issue:

• https://github.com/thw0rted/issue-examples/tree/spectator-cva-angular12 -- works in Angular 12
• https://github.com/thw0rted/issue-examples/tree/spectator-cva -- does not work, Angular 13

It's been a few months since I looked at this but I think each repo has build instructions. If you have time to look at them, I'd really appreciate it.

[grosch]

You’re mixing testing elements. In https://github.com/thw0rted/issue-examples/blob/spectator-cva/src/app/hello.component.spec.ts <https://github.com/thw0rted/issue-examples/blob/spectator-cva/src/app/hello.component.spec.ts> at line 30 you’re calling TestBed.initTestEnvironment, which you shouldn’t be doing. Just remove the entire beforeAll() block from the test and see what happens. Also, consider whether you even need this test. You’re not testing your functionality, you’re testing other people’s code there. The fact that you implemented ControlValueAccessor guarantees that if you pass a formControl or formControlName that the value will be bound. I guess in theory that’s checking for “did I forget to implement writeValue :)

[thw0rted]

Thanks, I'll check it out.

(The minimal repro is pretty simple, I'll have to look back at what I was actually doing in my real tests but I have to assume it was more involved than that. I think I had a control that embeds the CVA-implementing control, and the harness tried to do something with the value that wasn't working, so I tracked it down to the problem I wound up reproducing.)