[Feature] Support for Component Tests in Angular apps #14153

jhanink · 2022-05-13T21:54:31Z

Please support Component Testing for Angular.

In v1.22.0, there is experimental support for react, vue, and svelte Component Tests

https://github.com/microsoft/playwright/releases/tag/v1.22.0

vitalics · 2022-05-14T04:44:39Z

@jhanink please provide how your see API in ideal world for component testing angular app.

vitalics · 2022-05-14T06:54:27Z

@mxschmitt @jhanink I thing is a good idea to support angular applications. But let me put some notes.

React/vue has a simple API (aka ReactDOM.render function) to put the component in your DOM node. Angular applications has not such API. The minimal repro:

index.html

<body>
  <app-root></app-root>
// angular runtime
<script src="runtime.js" type="module"></script> 
<script src="polyfills.js" type="module"></script>
// compiled app
<script src="main.js" type="module"></script>
</body>

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template:'<span>{{ title }} app is running!</span>' 
})
export class AppComponent {
  title = 'my-app';
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


platformBrowserDynamic().bootstrapModule(AppModule)

tytusplanck-8451 · 2022-05-19T14:28:26Z

Does Angular v14 help resolve and make this simpler? With standalone components coming I think this could be similar to the React/Vue/Svelte examples.

RFC from Anular for context.

ExFlo · 2022-06-30T11:06:54Z

Does Angular v14 help resolve and make this simpler? With standalone components coming I think this could be similar to the React/Vue/Svelte examples.

RFC from Anular for context.

About the new setup with standalone component angular docs

Tallyb · 2022-09-06T10:53:43Z

That will be great.
In order for this to work with traditional component (read: not standalone), you will need to do something like Testbed which is the compilation context for an angular component. Only that will give you a renderable component. You might want to look at storybook angular library, which is dealing with the same thing basically (render a single component in isolation).

e-oz · 2022-09-06T14:00:28Z

Playwright is so amazing that I want to replace all our e2e tests, including tests in libraries, with Playwright.
Would be amazing to have Angular components support, at least standalone components.

Waterstraal · 2022-09-19T07:57:58Z

Support for Angular would be great! Cypress has proven it is technically possible, even without standalone components, if I'm not mistaken :).

sand4rt · 2022-11-15T21:29:10Z

Another obstacle is that Playwright transpiles the components with Vite and Angular has no Vite support as far as i know.

yjaaidi · 2022-12-07T16:21:43Z

Just released Angular support here: https://github.com/jscutlery/devkit/tree/main/packages/playwright-ct-angular
but you'll have to follow the Versatile Angular Style: standalone, inject(), inline templates & styles.

e-oz · 2022-12-07T23:39:20Z

I hope PW team will not postpone this feature because of previous comment :)

yjaaidi · 2022-12-09T13:35:23Z

While the current implementation only works with Versatile Angular Style.
Using this angular vite plugin might help supporting most use cases. https://github.com/analogjs/analog/tree/main/packages/vite-plugin-angular

yjaaidi · 2022-12-09T13:35:56Z

I also opened an issue to merge efforts.

#19380

sand4rt · 2022-12-20T16:49:54Z

@brandonroberts May I ask if you think it is realistic/desirable to use your Vite plugin for Angular? Saw you said something about it earlier in: analogjs/analog#20 (comment) 😄

brandonroberts · 2022-12-20T17:24:54Z

@sand4rt yes, it's possible to use it. I've tested a working solution with Playwright Component Tests and Angular using the Vite plugin. Supports inline/external styles and constructor DI

sand4rt · 2022-12-20T17:52:44Z

Awesome! Do you still have the solution? Perhaps it can help with the integration if the Playwright team decides to use it?

brandonroberts · 2022-12-20T22:16:59Z

I don't have the solution I worked on before, but I remember the steps to get it working. I'll recreate it and push up a repo and we can decide what to do from there

brandonroberts · 2022-12-22T21:58:10Z

Here's the repo! https://github.com/brandonroberts/analog-playwright-component-tests

Of course it will need more work to override providers and such, but its a start

sand4rt · 2023-03-29T14:03:46Z

Hi all, i'm also building a library for testing Angular components with Playwright due to the absence of @yjaaidi. ~~It is still work in progress:~~ https://github.com/sand4rt/playwright-ct-angular.

edit: It is ready for use. If you have any feedback, let me know. @brandon thanks for the repo, managed to integrate your Vite plugin!

edbzn · 2023-04-22T10:25:18Z

Hi all, i'm also building a library for testing Angular components with Playwright due to the absence of @yjaaidi.

@sand4rt Why have you not opened issues against our repository? We could have joined the effort instead of splitting the work with multiple community solutions.

sand4rt · 2023-04-22T10:42:12Z

@edbzn I worked on it before @yjaaidi released the lib. Tried to collaborate and combine efforts several times without luck see: #19395 for example. So then i decided to publish a separate one.

yjaaidi · 2023-04-22T10:49:24Z

Hi @sand4rt, I was off for a while and catching up now.
As mentioned by @edbzn, we were ok with merging efforts in Playwright, not another library. In addition to this, I am not the only maintainer of @jscutlery/devkit and @edbzn could have helped.

Also, we are sad to see that there is no credit for our work in your library.

sand4rt · 2023-04-22T11:30:09Z

Also, we are sad to see that there is no credit for our work in your library.

Which part do you think i should have give credit for? I think that the library i made looks/works nothing like yours right?

Edit: Not sure if the Playwright team is focusing on other things, but im still open to collaborate on official support.

the-ult · 2023-06-20T12:05:52Z

Any news on combining/merging any of the above Angular Component Testing solutions in Playwright?

yjaaidi · 2023-10-23T21:39:34Z

Hey! Sorry everyone for catching up so late.
I just had a quick chat with @sand4rt, and we definitely have to provide official Angular support.

@sand4rt would you be willing to recreate a fresh PR?

Also, I have a couple of suggestions concerning the integration and customization of analog's vite plugin.

@sand4rt @mxschmitt what would be the most efficient approach?

Start the PR and discuss the details on the PR? (my favorite)
Discuss the details on @sand4rt's repo?
Create a playwright-community repo? (that would be temporary and act as an incubator because Angular plugin deserves its place next to its fellow libs/fmwks)

Tallyb · 2023-10-24T10:56:45Z

I think official Vite support is coming to Angular 17 next month.

the-ult · 2023-10-24T11:18:17Z

That would be awesome news... counting down to the 6th of november!

sand4rt · 2023-10-24T13:11:48Z

Hey! Sorry everyone for catching up so late. I just had a quick chat with @sand4rt, and we definitely have to provide official Angular support.

@sand4rt would you be willing to recreate a fresh PR?

Also, I have a couple of suggestions concerning the integration and customization of analog's vite plugin.

@sand4rt @mxschmitt what would be the most efficient approach?

Start the PR and discuss the details on the PR? (my favorite)

Discuss the details on @sand4rt's repo?

Create a playwright-community repo? (that would be temporary and act as an incubator because Angular plugin deserves its place next to its fellow libs/fmwks)

Would like to create a PR, but it is up to the Playwright team. It's also an option to discuss it at my repo or create a community repo, all fine with me :)

yjaaidi · 2023-10-24T13:20:13Z

@pavelfeldman @mxschmitt can we go ahead and open a PR?

brandonroberts · 2023-10-24T13:27:08Z

I think official Vite support is coming to Angular 17 next month.

@Tallyb was this discussed somewhere? Official support would be great.

yjaaidi · 2023-10-24T13:31:01Z

I think official Vite support is coming to Angular 17 next month.

Yes @Tallyb! Actually, you can already opt-in to vite since v16 by replacing @angular-devkit/build-angular:browser with @angular-devkit/build-angular:browser-esbuild

That said, this doesn't change things concerning the integration with Playwright etc... as Angular will not expose a vite plugin yet.
But Brandon is here to bridge the gap.

yjaaidi · 2023-10-24T13:31:18Z

@brandonroberts I think that @Tallyb meant that Angular 17 has official vite support.

brandonroberts · 2023-10-24T13:38:44Z

@brandonroberts I think that @Tallyb meant that Angular 17 has official vite support.

Ahh, ok

mxschmitt · 2023-10-24T17:05:08Z

Would like to create a PR, but it is up to the Playwright team. It's also an option to discuss it at my repo or create a community repo, all fine with me :)

We discussed it in our team meeting. We are interested in landing the Angular support inside the Playwright repository if its like the other frameworks covered with tests/does not depend on a lot of external dependencies. Thanks!

yjaaidi · 2023-10-24T18:06:50Z

Perfect! Thank you @mxschmitt!
@sand4rt do you mind creating the PR based on @sand4rt/playwright-ct-angular then we can discuss the details directly on the PR? This way the decisions will be easier to track. What do you think?

Thank you in advance.

sand4rt · 2023-10-24T18:13:09Z

Awesome! The repo i currently have is like the other frameworks, covered with tests and no external dependencies other than Angular and @brandonroberts's Vite plugin. Will create an PR ASP so we can attack it from multiple angles:)

sand4rt · 2023-10-24T21:02:42Z

Hi all, see the PR above. Curious to hear what you all think! I'll go through it again as well later on this week.

yjaaidi · 2023-10-25T20:11:36Z

Cool! Thx @sand4rt!

kddsultan · 2023-11-06T15:07:34Z

I think official Vite support is coming to Angular 17 next month.

How is that support relevant for this discussion/issue? Thanks

R-Bower · 2023-11-21T02:25:35Z

I think official Vite support is coming to Angular 17 next month.

How is that support relevant for this discussion/issue? Thanks

https://playwright.dev/docs/test-components#under-the-hood

Playwright is using Vite to create the components bundle and serve it.

muhamedkarajic · 2024-02-14T18:28:53Z

I think official Vite support is coming to Angular 17 next month.

How is that support relevant for this discussion/issue? Thanks

Its cause Playwright is using vite under the hood thats why Angular is not able to run with it.

muhamedkarajic · 2024-02-14T18:29:11Z

Any update on this, I would be really interested to give it a try in the production? Angular 17 shipped with official esmodule builder, that might help push this issue forward.

Waterstraal · 2024-03-11T13:48:19Z

@yjaaidi @pavelfeldman @mxschmitt @sand4rt Kindly requesting an update on this issue. Is this still expected to land somewhere this year?

Thank you!

yjaaidi · 2024-03-11T14:18:41Z

Hey @Waterstraal! we are working on that 😊

SerkanSipahi · 2024-04-16T05:11:34Z

we are working on that 😊

@yjaaidi this is awesome, thanks. What is the current status?

yjaaidi · 2024-04-16T07:04:49Z

Everything's ready here sand4rt#5
We're just waiting for any feedback from @sand4rt and eventually the merge and the review by the team.

zargham-leanix · 2024-04-17T13:06:46Z

@yjaaidi is there any way to try this out locally ?

yjaaidi · 2024-05-02T19:55:04Z

Hey @zargham-leanix, if you just want to play around with it you can clone this https://github.com/yjaaidi/playwright/tree/hello-angular-ct, head to tests/components/ct-angular and run npm test.

Otherwise, you can cd packages/playwright-ct-angular; npm link then npm link @playwright/playwright-ct-angular to use it wherever you want.

muhamedkarajic · 2024-05-09T19:30:49Z

Everything's ready here sand4rt#5 We're just waiting for any feedback from @sand4rt and eventually the merge and the review by the team.

OMG. Thank you for this, incredable!

mxschmitt added feature-components P3-collecting-feedback labels May 13, 2022

sand4rt mentioned this issue Dec 10, 2022

feat(ct): initial angular #19395

Closed

This was referenced Feb 24, 2023

fix: undefined viteServer analogjs/analog#279

Merged

feat(ct): angular component testing #21208

Closed

sand4rt mentioned this issue Apr 22, 2023

[Feature] Make component testing possible for React, Vue etc. #7148

Open

mxschmitt mentioned this issue Oct 23, 2023

[Feature] add official angular component testing support #27753

Closed

sand4rt linked a pull request Oct 24, 2023 that will close this issue

feat(ct): angular component testing #27783

Open

10 tasks

[Feature] Support for Component Tests in Angular apps #14153

[Feature] Support for Component Tests in Angular apps #14153

Comments

jhanink commented May 13, 2022 • edited

vitalics commented May 14, 2022

vitalics commented May 14, 2022

tytusplanck-8451 commented May 19, 2022

ExFlo commented Jun 30, 2022 • edited

Tallyb commented Sep 6, 2022

e-oz commented Sep 6, 2022

Waterstraal commented Sep 19, 2022

sand4rt commented Nov 15, 2022

yjaaidi commented Dec 7, 2022

e-oz commented Dec 7, 2022

yjaaidi commented Dec 9, 2022

yjaaidi commented Dec 9, 2022 • edited

sand4rt commented Dec 20, 2022 • edited

brandonroberts commented Dec 20, 2022

sand4rt commented Dec 20, 2022 • edited

brandonroberts commented Dec 20, 2022

brandonroberts commented Dec 22, 2022 • edited

sand4rt commented Mar 29, 2023 • edited

edbzn commented Apr 22, 2023

sand4rt commented Apr 22, 2023 • edited

yjaaidi commented Apr 22, 2023 • edited

sand4rt commented Apr 22, 2023 • edited

the-ult commented Jun 20, 2023

yjaaidi commented Oct 23, 2023

Tallyb commented Oct 24, 2023

the-ult commented Oct 24, 2023

sand4rt commented Oct 24, 2023

yjaaidi commented Oct 24, 2023

brandonroberts commented Oct 24, 2023

yjaaidi commented Oct 24, 2023

yjaaidi commented Oct 24, 2023

brandonroberts commented Oct 24, 2023

mxschmitt commented Oct 24, 2023

yjaaidi commented Oct 24, 2023

sand4rt commented Oct 24, 2023

sand4rt commented Oct 24, 2023

yjaaidi commented Oct 25, 2023

kddsultan commented Nov 6, 2023

R-Bower commented Nov 21, 2023 • edited

muhamedkarajic commented Feb 14, 2024

muhamedkarajic commented Feb 14, 2024 • edited

Waterstraal commented Mar 11, 2024

yjaaidi commented Mar 11, 2024

SerkanSipahi commented Apr 16, 2024

yjaaidi commented Apr 16, 2024

zargham-leanix commented Apr 17, 2024

yjaaidi commented May 2, 2024

muhamedkarajic commented May 9, 2024 • edited

jhanink commented May 13, 2022 •

edited

ExFlo commented Jun 30, 2022 •

edited

yjaaidi commented Dec 9, 2022 •

edited

sand4rt commented Dec 20, 2022 •

edited

sand4rt commented Dec 20, 2022 •

edited

brandonroberts commented Dec 22, 2022 •

edited

sand4rt commented Mar 29, 2023 •

edited

sand4rt commented Apr 22, 2023 •

edited

yjaaidi commented Apr 22, 2023 •

edited

sand4rt commented Apr 22, 2023 •

edited

R-Bower commented Nov 21, 2023 •

edited

muhamedkarajic commented Feb 14, 2024 •

edited

muhamedkarajic commented May 9, 2024 •

edited