Skip to content
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

Add support for Angular 17 #5

Merged
merged 64 commits into from
May 7, 2024

Conversation

yjaaidi
Copy link

@yjaaidi yjaaidi commented Feb 23, 2024

@edbzn and I upgraded @playwright/experimental-angular-ct to fix the items below and make it work with the latest version of Playwright.

(the PR looks big because we updated it with playwright's main branch. Updating the target branch should make it more readable 😉)

sand4rt and others added 27 commits November 5, 2023 21:50
…emitter-outputs

Handle angular non-EventEmitter outputs
Co-authored-by: Edouard Bozon <bozonedouard@gmail.com>
…analogjs plugin

Co-authored-by: Edouard Bozon <bozonedouard@gmail.com>
Co-authored-by: Edouard Bozon <bozonedouard@gmail.com>
@yjaaidi
Copy link
Author

yjaaidi commented Mar 28, 2024

@sand4rt I fixed everything yesterday.
What do you think of the changes?

One last thing is that package.json and package-lock.json are the exact same ones as microsoft/playwright#main so if you update again, there shouldn't be any changes.

@yjaaidi yjaaidi requested a review from sand4rt March 29, 2024 10:35
tests/components/ct-angular/tsconfig.json Outdated Show resolved Hide resolved
packages/playwright-ct-angular/package.json Outdated Show resolved Hide resolved
packages/playwright-ct-angular/registerSource.mjs Outdated Show resolved Hide resolved
packages/playwright-ct-angular/registerSource.mjs Outdated Show resolved Hide resolved
packages/playwright-ct-angular/index.d.ts Outdated Show resolved Hide resolved
@brandonroberts
Copy link

There is also a problem when loading the analog plugin in the playwright config. The config is compiled to CJS so the import is transformed into a "require" which fails because the analog plugin is ESM.

Setting package type to "module" works but I'd love to find another solution as some users might not be able to switch their package type to "module".

(I'll copy the error here later as I am on my phone)

You can rename the vite.config.ts to vite.config.mts. This way it will use Vite in ESM-mode, you can keep the package.json without the type: "module", and your tools like Playwright can still use CJS-mode.

@yjaaidi
Copy link
Author

yjaaidi commented Apr 11, 2024

You can rename the vite.config.ts to vite.config.mts. This way it will use Vite in ESM-mode, you can keep the package.json without the type: "module", and your tools like Playwright can still use CJS-mode.

Thanks @brandonroberts!
That is what we did as we renamed the playwright.config.ts to playwright.config.mts (where the vite config is inlined)
The problem is that once the plugin is ready we will want to update create-playwright to add the plugin for Angular. (Cf. microsoft/create-playwright#106)

The thing is that it generates playwright.config.js or playwright.config.ts. Making it generate playwright.config.mts or forcing users to have package type "module" would be too intrusive.

We'll probably have to move this to an issue on the analog repo.
Do you really want to avoid producing cjs too?

@brandonroberts
Copy link

You can rename the vite.config.ts to vite.config.mts. This way it will use Vite in ESM-mode, you can keep the package.json without the type: "module", and your tools like Playwright can still use CJS-mode.

Thanks @brandonroberts! That is what we did as we renamed the playwright.config.ts to playwright.config.mts (where the vite config is inlined) The problem is that once the plugin is ready we will want to update create-playwright to add the plugin for Angular. (Cf. microsoft/create-playwright#106)

The thing is that it generates playwright.config.js or playwright.config.ts. Making it generate playwright.config.mts or forcing users to have package type "module" would be too intrusive.

We'll probably have to move this to an issue on the analog repo. Do you really want to avoid producing cjs too?

Yes, Vite is moving away from CJS altogether. There are deprecation warnings from Vite when its CJS APIs are used. We can discuss options in the Analog repo if needed.

@AbdealiLoKo
Copy link

Hi ! Can I help move this forward ?
While I have never delved into the internals of playwright - I am happy to test if that helps !

I have a large project where I was hoping I could start using this - which uses standalone components with angular 17.3.1

@sand4rt sand4rt merged commit 5c69609 into sand4rt:hello-angular-ct May 7, 2024
sand4rt added a commit that referenced this pull request May 7, 2024
* 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>
sand4rt added a commit that referenced this pull request May 7, 2024
* 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants