New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(ct): angular component testing #27783
base: main
Are you sure you want to change the base?
Conversation
aa9b3fe
to
71599da
Compare
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
What's out plan here, is it ready to land? Is it based on Younes's work or is this something different? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Hey @pavelfeldman! I just shared my feedback with @sand4rt.
It doesn't matter anymore. There was just a misunderstanding. |
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The added logo is the Angular.js one, here's the link to the correct Angular logo.
720980b
to
71599da
Compare
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 |
71599da
to
8ccb3bb
Compare
This comment has been minimized.
This comment has been minimized.
I just noticed that the tests themselves are using Angular 15. |
Hey @sand4rt, I just created a This way, we can update the todo list as this:
Here are the advantages of moving the Angular vite plugin setup to the
The drawbacks are:
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. |
Hey @sand4rt are you available in the upcoming days or weeks so we can finish this 😊 |
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! |
Thanks @sand4rt! I think that we have everything now 😊:
Cf. sand4rt#5 |
9e88b09
to
31e8817
Compare
Great great great work! Thank you!! |
31e8817
to
3226aa5
Compare
* feat(ct): angular component testing * test(ct): test non-event-emitter outputs * test(ct): test output listener replacement * feat(ct): support non-event-emitter outputs * docs(ct): angular * fix(ct): angular source maps * chore(ct): new angular logo * refactor(ct-angular): bump to Angular 17 and move out analogjs plugin Co-authored-by: Edouard Bozon <bozonedouard@gmail.com> * refactor(ct-angular): fix component resolution by temporary removing analogjs plugin Co-authored-by: Edouard Bozon <bozonedouard@gmail.com> * refactor(ct-angular): fix mount Co-authored-by: Edouard Bozon <bozonedouard@gmail.com> * refactor(ct-angular): disable analog plugin as it breaks component registration * refactor(ct-angular): fix input forwarding * refactor(ct-angular): fix angular outputs * refactor(ct-angular): fix angular slots * test(ct-angular): fix all tests * test(ct-angular): fix all angular tests * test(ct-angular): use analog's vite plugin to handle template files * refactor(ct-angular): remove router-specific code * refactor(ct-angular): clean up dependencies * refactor(ct-angular): remove compiler import * refactor(ct-angular): fix vite version mismatch in tests * refactor(ct-angular): bump @playwright/experimental-ct-angular to 1.42.0-next * test(ct-angular): add tests for template rendering * feat(ct-angular): render simple template * feat(ct-angular): render template with child components * feat(ct-angular): render component with signal inputs * test(ct-angular): make input required * test(ct-angular): remove now useless import * feat(ct-angular): allow setting providers * refactor(ct-angular): clean up slots remains * feat(ct): angular component testing * test(ct): test non-event-emitter outputs * test(ct): test output listener replacement * feat(ct): support non-event-emitter outputs * fix(ct): angular source maps * docs(ct): angular * chore(ct): new angular logo * feat(ct-angular): add pw-angular bin * test(ct-angular): fix type check use strict dependencies versions to reduce unpredictable behavior as package-lock.json is gitignored * refactor(ct-angular): remove useless NODE_ENV=test as we are setting the tsconfig manually Cf. #5 (comment) * refactor(ct-angular): use playwright.config.mts as analog vite plugin is esm only * chore(ct-angular): lint * fix(ct-angular): resolve Angular component usages * fix(ct-angular): resolve Angular imports/providers usages * test(ct-angular): test url change * test(ct-angular): remove duplicate test * chore(ct-angular): remove useless pw-angular cli * chore(ct-angular): remove duplicate PlaywrightTestConfig type * feat(ct-angular): export the right types * chore(ct-angular): tidy up * feat(ct-angular): throw an explicit error when mounting JSX * chore(ct-angular): remove vite from devDependencies as not used anymore * chore(ct-angular): remove useless skipLibCheck flag * chore(ct-angular): remove useless @angular/compiler Angular's esbuild plugin will automatically add it in jit mode anyway. Users who really want to use another plugin that requires it can still add it manually to their playwright/index.ts. * test(ct-angular): improve output listener update test * chore(ct): revert adapters imports and template --------- Co-authored-by: sand4rt <info@mesander.com> Co-authored-by: Edouard Bozon <bozonedouard@gmail.com>
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Test results for "tests 1"27323 passed, 661 skipped Merge workflow run. |
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. |
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 // 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');
}); |
Understood, then let's wait for the merge and then continue the discussion. Congrats again. |
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)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#410typeof plugin.default
check: https://github.com/microsoft/playwright/pull/27783/files#diff-4592ac823d44ec894c518ba459cfab4bd544056a674739fda5fc145cdc596923R28@analogjs/vite-plugin-angular
and related code and move it tocreate-playwright
? feat(ct): angular component testing #27783 (comment)