-
Notifications
You must be signed in to change notification settings - Fork 3.6k
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): class and object components #30269
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { defineComponent, h } from 'vue'; | ||
|
||
export const Story = defineComponent( | ||
(props) => { | ||
return () => h('div', props.title); | ||
}, | ||
{ | ||
props: ['title'], | ||
} | ||
); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. How typical is this? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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 There are additional use cases where importing components from a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This use case is very typical for Vue and is not possible without this PR: #31217 |
||
|
||
test('render props', async ({ mount }) => { | ||
const component = await mount(Button, { | ||
|
@@ -23,3 +24,12 @@ test('render a component without options', async ({ mount }) => { | |
const component = await mount(Component); | ||
await expect(component).toContainText('test'); | ||
}); | ||
|
||
test('render props with defineComponent syntax', async ({ mount }) => { | ||
const component = await mount(Story, { | ||
props: { | ||
title: 'story/wrapper' | ||
} | ||
}); | ||
await expect(component).toContainText('story/wrapper'); | ||
}); |
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.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.