chore: migrate vue component example to a new vite plugin (#13750)

This commit is contained in:
Pavel Feldman 2022-04-25 21:10:08 -08:00 committed by GitHub
parent 6fe02eb5f1
commit f933f766f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 237 additions and 4113 deletions

File diff suppressed because it is too large Load diff

View file

@ -11,9 +11,9 @@
"vue": "^3.2.31" "vue": "^3.2.31"
}, },
"devDependencies": { "devDependencies": {
"@playwright/experimental-ct-vue": "^0.0.2", "@playwright/experimental-ct-vue": "^0.0.5",
"@playwright/test": "^1.21.0-alpha-mar-12-2022", "@playwright/test": "1.22.0-alpha-apr-26-2022",
"@vitejs/plugin-vue": "^2.2.2", "@vitejs/plugin-vue": "^2.3.1",
"vite": "^2.8.4" "vite": "^2.9.5"
} }
} }

View file

@ -1,4 +1,6 @@
import { PlaywrightTestConfig, devices } from '@playwright/test'; import { PlaywrightTestConfig, devices } from '@playwright/test';
import vite from '@playwright/experimental-ct-vue/vitePlugin';
import vue from '@vitejs/plugin-vue';
const config: PlaywrightTestConfig = { const config: PlaywrightTestConfig = {
testDir: 'src', testDir: 'src',
@ -9,13 +11,10 @@ const config: PlaywrightTestConfig = {
] : [ ] : [
['html', { open: 'on-failure' }] ['html', { open: 'on-failure' }]
], ],
webServer: { plugins: [
url: 'http://localhost:3000/tests.html', vite({ config: { plugins: [ vue() ] }}),
command: 'npm run dev', ],
reuseExistingServer: !process.env.CI,
},
use: { use: {
baseURL: 'http://localhost:3000/tests.html',
trace: 'on-first-retry', trace: 'on-first-retry',
}, },
projects: [ projects: [

View file

@ -1,10 +1,9 @@
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>@import '/src/assets/base.css';</style>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/tests.js"></script> <script type="module" src="/playwright/index.js"></script>
</body> </body>
</html> </html>

View file

@ -0,0 +1 @@
import '../src/assets/base.css'

View file

@ -1,6 +1,6 @@
import { test, expect } from '@playwright/experimental-ct-vue/test' import { test, expect } from '@playwright/experimental-ct-vue/test'
import NamedSlots from './components/NamedSlots.vue' import NamedSlots from './NamedSlots.vue'
test.use({ viewport: { width: 500, height: 500 } }) test.use({ viewport: { width: 500, height: 500 } })

View file

@ -1,5 +1,6 @@
import { test, expect } from '@playwright/experimental-ct-vue/test' import { test, expect } from '@playwright/experimental-ct-vue/test'
import NamedSlots from './components/NamedSlots.vue'
import NamedSlots from './NamedSlots.vue'
test.use({ viewport: { width: 500, height: 500 } }) test.use({ viewport: { width: 500, height: 500 } })

View file

@ -1,6 +1,6 @@
import { test, expect } from '@playwright/experimental-ct-vue/test' import { test, expect } from '@playwright/experimental-ct-vue/test'
import DocumentationIcon from './icons/DocumentationIcon.vue' import DocumentationIcon from './icons/IconDocumentation.vue'
import WelcomeItem from './WelcomeItem.vue' import WelcomeItem from './WelcomeItem.vue'
test.use({ viewport: { width: 500, height: 500 } }) test.use({ viewport: { width: 500, height: 500 } })

View file

@ -1,17 +0,0 @@
import register from '@playwright/experimental-ct-vue/register'
import Counter from './src/components/Counter.vue'
import DocumentationIcon from './src/components/icons/IconDocumentation.vue'
import HelloWorld from './src/components/HelloWorld.vue'
import NamedSlots from './src/components/NamedSlots.vue'
import TheWelcome from './src/components/TheWelcome.vue'
import WelcomeItem from './src/components/WelcomeItem.vue'
register({
Counter,
DocumentationIcon,
HelloWorld,
NamedSlots,
TheWelcome,
WelcomeItem,
})