feat(ct): class and object components #30269
Conversation
This comment has been minimized.
This comment has been minimized.
sand4rt
force-pushed
the
component-detection
branch
from
2c3149b
to
b1119c1
Compare
Test results for "tests 1"2 flaky26930 passed, 619 skipped Merge workflow run. |
|
@pavelfeldman any chance this one could passthrough? |
|
👋 @sand4rt 👋 taking care of our review debt. is this something you'd like me to look at? |
|
👋 @pavelfeldman, yes please. Let me know if more info is needed. I think @dgozman also has an opinion about this BTW. He mentioned something about this during the Angular PR review (a similar change is proposed there): #27783 (comment) |
| @@ -2,6 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-vue'; | |||
| import Button from '@/components/Button.vue'; | |||
| import EmptyTemplate from '@/components/EmptyTemplate.vue'; | |||
| import Component from '@/components/Component.vue'; | |||
| import { Story } from '@/components/Story'; | |||
There was a problem hiding this comment.
It depends on the app, but I don't it's that typical; its useful when a wrapper/story needs to be created to test components, where Playwright cannot serialise the data sent to the browser (such as unserialisable props). It's possible to create multiple .vue files but that's quite cumbersome.
There are additional use cases where importing components from a .ts file would be beneficial tho, such as supporting Angular and web components (without relying on a specific file extension).
There was a problem hiding this comment.
This use case is very typical for Vue and is not possible without this PR: #31217
| traverse(node, { | ||
| enter: p => { | ||
| // Treat calls to mount and all identifiers in arguments as component usages e.g. mount(Component) | ||
| if (t.isCallExpression(p.node) && t.isIdentifier(p.node.callee) && p.node.callee.name === 'mount') { |
There was a problem hiding this comment.
We used to have this as you probably know. But the isIdentifier(p.node.callee) felt overly restrictive and limited us a couple of times.
There was a problem hiding this comment.
I don't see how? What approach would you recommend to address this? In my opinion, relying solely on file extension is not a viable option.
|
We are slow on it, let me close it as we are figuring out what we do with CT. The code is not the problem, so there is no good reason for this PR to be here held back by the reviews. |
closes #29544, #29928, partially #31217 and introduces an improved approach for creating multiple wrapper/story components within a single file (considering it's only possible to define one component in a
.vuefile). @yjaaidi made the change intsxTransform.ts