feat(ct): angular component testing

[sand4rt]

closes: #14153 and https://github.com/sand4rt/playwright-ct-angular

TODO

• Enable vite-plugin-angular JIT mode: feat(vite-plugin-angular): add support for JIT mode analogjs/analog#374 (comment)
• Fix Sourcemap is likely to be incorrect: a plugin (@analogjs/vite-plugin-angular) errors when transpiling: Sourcemap is likely to be incorrect: a plugin (@analogjs/vite-plugin-angular) analogjs/analog#410
• Restructure NPM (peer)dependencies?: feat(ct): angular component testing #27783 (comment)
• Remove typeof plugin.default check: https://github.com/microsoft/playwright/pull/27783/files#diff-4592ac823d44ec894c518ba459cfab4bd544056a674739fda5fc145cdc596923R28
• Update the documentation (PR ready: docs(ct): angular sand4rt/playwright#4)
• Update https://github.com/microsoft/create-playwright
• Do not handle routing and let users use router testing harness: feat(ct): angular component testing #27783 (comment)
• Update tests to use Angular 17 ? feat(ct): angular component testing #27783 (comment)
• Remove @analogjs/vite-plugin-angular and related code and move it to create-playwright ? feat(ct): angular component testing #27783 (comment)
• Update old Angular logo: feat(ct): angular component testing #27783 (review)

[pavelfeldman]

What's out plan here, is it ready to land? Is it based on Younes's work or is this something different?

[yjaaidi]

Great job @sand4rt!
Here are a couple of things that would be nice to solve before merging.
Let me know if you want me to contribute to your branch directly with some PRs.

The main discussion here is about vite plugin replacement and configuration.

[yjaaidi]

What's out plan here, is it ready to land?

Hey @pavelfeldman! I just shared my feedback with @sand4rt.
Once we agree on that and fix what can be fixed, the PR should be ready.

Is it based on Younes's work or is this something different?

It doesn't matter anymore. There was just a misunderstanding.
We were just a bit disappointed for not merging efforts but now we are working together to provide what the community is waiting for and that's what matters.

[sand4rt]

Hey guys, thanks for the comments! I'm AFK for a couple of days. Will hopefully look at the PR by the end of next week as well

[edbzn]

The added logo is the Angular.js one, here's the link to the correct Angular logo.

[sand4rt]

The added logo is the Angular.js one, here's the link to the correct Angular logo.

Hi @edbzn, thanks for the input! Would you like to make the change by creating a PR against this branch? See #27783 (comment) for more details

edit: Angular just released their new logo: https://angular.dev/press-kit

[yjaaidi]

I just noticed that the tests themselves are using Angular 15.
Should we create a different folder for Angular 16 & Angular 17 and that would require lots of duplication?
Or should we do something at the test-all.spec.js level but that would be a bit too magical?
Or should the "experimental" CT only handle the last version of the framework?
cc. @mxschmitt @pavelfeldman @sand4rt

[yjaaidi]

Hey @sand4rt, I just created a create-playwright PR microsoft/create-playwright#106 to move the Angular vite plugin config to "user-land".

This way, we can update the todo list as this:

• Do not handle routing and let users use router testing harness
• Update tests to use Angular 17
• Update the documentation
• Remove @analogjs/vite-plugin-angular dependency & setup.
• Update https://github.com/microsoft/create-playwright to generate playwright config with @analogjs/vite-plugin-angular and add it to project dependencies.

---

Here are the advantages of moving the Angular vite plugin setup to the create-playwright generator:

• @analogjs/vite-plugin-angular has to catch up with Angular internals to make it work for future versions. Currently, the Angular internals it relies on can break at any Angular minor or patch version. Meaning that @playwright/experimental-ct-angular will have to catch up to by updating the dependency which also means a new Playwright release.
• Users can easily choose the @analogjs/vite-plugin-angular version of their choice.
• Users can easily choose the @analogjs/vite-plugin-angular configuration of their choice.
• Users can easily choose another plugin.
• This doesn't add any dependency to this workspace.

The drawbacks are:

• It doesn't work out of the box if users don't use the generator or if they use the package manually without reading the docs.
• Users will have to manually keep @analogjs/vite-plugin-angular up-to-date.

Of course, this is just a temporary solution until the Angular team releases an official vite plugin which will at least warranty major version compatibility.

[yjaaidi]

Hey @sand4rt are you available in the upcoming days or weeks so we can finish this 😊
Maybe if you could just update your branch I could send you a PR.
Thanks!

[flobacher]

Great news @yjaaidi and @sand4rt! Thank you so much for your effort time and persistence!!!

[sand4rt]

Maybe if you could just update your branch I could send you a PR.

Hey @yjaaidi, #29544 needs to be resolved before i can update. I could resolve the merge conflicts later on if needed, so don't let that hold you back.

For the people willing to contribute; beta testing would also help a lot to ensure everything operates as expected, your feedback is very welcome!

[yjaaidi]

Thanks @sand4rt!
@edbzn and I had to update and fix #29544 before moving forward.

I think that we have everything now 😊:

• ✨ it works with thew new transformation
• ✨ template rendering (thanks to the new transformation system, amazing job @pavelfeldman)
• ✨ signal inputs support
• ✨ moved out analog vite plugin from the package
• ✨ Angular 17 support
• ✨ and passing providers

Cf. sand4rt#5

[maartentibau]

Great great great work! Thank you!!
At this moment this will only support standalone components right?

[zargham-leanix]

Great work @sand4rt @yjaaidi
When this PR is expected to be merged ?

[github-actions]

Test results for "tests 1"

27323 passed, 661 skipped
✔️✔️✔️

Merge workflow run.

[sand4rt]

Hey @pavelfeldman, the PR is finally set for review by the Playwright team! We have deliberately kept the adapter minimal for now and postponed the documentation until more people have tested it and shared their feedback. We would like to gradually make improvements here and there after the merge.

[rainerhahnekamp]

Congratulations to all of you. That's a milestone in Angular testing history!

Just a small remark: From what I've seen, there is no possibility to provide services, right?

If that's the case, it would be great to add this as the next feature once this branch is merged.

As you know, the vast majority of Angular Components usually depend on Services. If we could mock these services, the number of people who could test on a large scale would increase "exponentially."

Either way, congratulations and a thousand thanks again. I'm looking forward to it

[sand4rt]

Congratulations to all of you. That's a milestone in Angular testing history!

Just a small remark: From what I've seen, there is no possibility to provide services, right?

If that's the case, it would be great to add this as the next feature once this branch is merged.

As you know, the vast majority of Angular Components usually depend on Services. If we could mock these services, the number of people who could test on a large scale would increase "exponentially."

Either way, congratulations and a thousand thanks again. I'm looking forward to it

Providers/imports are still open for discussion indeed. We've decided to merge the library first before continuing the discussion: sand4rt#5 (comment)

I think it could either be supported like the other frameworks through the hooksConfig:

// playwright/index.ts
beforeMount(async ({ TestBed, hooksConfig }) => {
  TestBed.configureTestingModule({
    imports: hooksConfig?.imports,
    providers: hooksConfig?.providers
  });
});

test('hooks config', async ({ mount }) => {
  const component = await mount(AngularComponent, {
    hooksConfig: {
      imports: [Component],
      providers: [Service],
    }
  });
  await expect(component).toContainText('boop');
});

or with dedicated APIs:

test('imports and providers', async ({ mount }) => {
  const component = await mount(AngularComponent, {
    imports: [Component],
    providers: [Service],
  });
  await expect(component).toContainText('boop');
});

[rainerhahnekamp]

Understood, then let's wait for the merge and then continue the discussion. Congrats again.

[maartentibau]

Amazing work @sand4rt @yjaaidi ... this really is a milestone.
Can't thank you guys enough for this effort! 👏 👏 👏

[chronospatian]

@yjaaidi I am running into some issues while testing this library.
sand4rt/playwright-ct-angular#50 Resolved
sand4rt/playwright-ct-angular#51 Resolved
sand4rt/playwright-ct-angular#52 Resolved

I have pulled and linked the PR branch and still face these errors. I also cannot import from @angular/material without adding "type": "module" to my package.json, or changing all my files to .mts.

Other than that it's working great so far. Thanks so much for this.

[yjaaidi]

@yjaaidi I am running into some issues while testing this library. sand4rt/playwright-ct-angular#50 sand4rt/playwright-ct-angular#51 Resolved sand4rt/playwright-ct-angular#52 Resolved

I have pulled and linked the PR branch and still face these errors. I also cannot import from @angular/material without adding "type": "module" to my package.json, or changing all my files to .mts.

Other than that it's working great so far. Thanks so much for this.

Hi @chronospatian, what is the value of ctViteConfig in the playwright config file?
Did you try this:

    ctViteConfig: {
      plugins: [analog()], // or [swc.vite(swcAngularUnpluginOptions())]
      resolve: {
        /* @angular/material is using "style" as a Custom Conditional export to expose prebuilt styles etc... */
        conditions: ['style'],
      },
    },

[yjaaidi]

@rainerhahnekamp note that there are some known limitations on what can be used in providers.
We've documented this here https://github.com/jscutlery/devkit/tree/main/packages/playwright-ct-angular#%EF%B8%8F-known-limitations but we will add this to playwright docs once this is merged.

[chronospatian]

@yjaaidi I am using the same config as you have it here: https://github.com/sand4rt/playwright/blob/hello-angular-ct/tests/components/ct-angular/playwright.config.mts

Except I also added globalThis.window = globalThis to work around window being undefined when using the beforeMount hook.

[chronospatian]

Actually it doesn't appear that the beforeMount hook is being called at all... Not sure what I'm doing wrong. I was putting beforeMount in the wrong file, apologies.

[sand4rt]

@chronospatain you might want to check out #23662 for the esm/cjs issues

[chronospatian]

The last thing I did to get hooks working was to make sure playwright/index.ts was included in the tsconfig files referenced by the vite plugin.

[yjaaidi]

I was putting beforeMount in the wrong file, apologies.

In which file did you put it initially?
I'm curious about common mistakes/problems. 😉