Browse Source

chore: vite all frameworks (#13780)

pull/13787/head
Pavel Feldman 2 months ago committed by GitHub
parent
commit
2bc36794d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 5
      examples/components-vue/playwright.config.ts
  2. 794
      package-lock.json
  3. 4
      packages/html-reporter/playwright.config.ts
  4. 4
      packages/playwright-ct-react/package.json
  5. 5
      packages/playwright-ct-react/vitePlugin.js
  6. 4
      packages/playwright-ct-svelte/package.json
  7. 5
      packages/playwright-ct-svelte/vitePlugin.js
  8. 4
      packages/playwright-ct-vue/package.json
  9. 5
      packages/playwright-ct-vue/vitePlugin.js
  10. 5
      packages/playwright-test/src/plugins/vitePlugin.ts
  11. 4
      packages/web/playwright.config.ts
  12. 4
      tests/components/ct-react-vite/playwright.config.ts
  13. 15
      tests/components/ct-react/playwright.config.ts
  14. 2
      tests/components/ct-react/playwright/index.html
  15. 0
      tests/components/ct-react/playwright/index.js
  16. 11
      tests/components/ct-react/src/index-app.tsx
  17. 4
      tests/components/ct-react/src/index-tests.tsx
  18. 15
      tests/components/ct-react/src/index.tsx
  19. 10
      tests/components/ct-svelte-kit/playwright.config.ts
  20. 13
      tests/components/ct-svelte-kit/playwright/index.html
  21. 0
      tests/components/ct-svelte-kit/playwright/index.ts
  22. 15
      tests/components/ct-svelte-kit/src/routes/tests/index.svelte
  23. 7
      tests/components/ct-svelte-vite/playwright.config.ts
  24. 10
      tests/components/ct-svelte/playwright.config.ts
  25. 13
      tests/components/ct-svelte/playwright/index.html
  26. 0
      tests/components/ct-svelte/playwright/index.ts
  27. 19
      tests/components/ct-svelte/public/tests.html
  28. 4
      tests/components/ct-svelte/src/tests.js
  29. 10
      tests/components/ct-vue-cli/playwright.config.ts
  30. 12
      tests/components/ct-vue-cli/playwright/index.html
  31. 0
      tests/components/ct-vue-cli/playwright/index.js
  32. 18
      tests/components/ct-vue-cli/src/tests.js
  33. 9
      tests/components/ct-vue-vite/playwright.config.ts
  34. 3
      tsconfig.json

5
examples/components-vue/playwright.config.ts

@ -1,6 +1,5 @@
import { PlaywrightTestConfig, devices } from '@playwright/test';
import vite from '@playwright/experimental-ct-vue/vitePlugin';
import vue from '@vitejs/plugin-vue';
import viteCT from '@playwright/experimental-ct-vue/vitePlugin';
const config: PlaywrightTestConfig = {
testDir: 'src',
@ -12,7 +11,7 @@ const config: PlaywrightTestConfig = {
['html', { open: 'on-failure' }]
],
plugins: [
vite({ config: { plugins: [ vue() ] }}),
viteCT()
],
use: {
trace: 'on-first-retry',

794
package-lock.json generated

File diff suppressed because it is too large Load Diff

4
packages/html-reporter/playwright.config.ts

@ -17,7 +17,7 @@
import type { PlaywrightTestConfig } from '@playwright/test';
import path from 'path';
import { devices } from '@playwright/test';
import vite from '@playwright/experimental-ct-react/vitePlugin';
import viteCT from '@playwright/experimental-ct-react/vitePlugin';
const config: PlaywrightTestConfig = {
testDir: 'src',
@ -29,7 +29,7 @@ const config: PlaywrightTestConfig = {
['html', { open: 'on-failure' }]
],
plugins: [
vite({ port: 3101 })
viteCT({ port: 3101 })
],
use: {
trace: 'on-first-retry',

4
packages/playwright-ct-react/package.json

@ -17,6 +17,10 @@
"./test": "./test.js",
"./vitePlugin": "./vitePlugin.js"
},
"dependencies": {
"@vitejs/plugin-react": "^1.0.7",
"vite": "^2.9.5"
},
"devDependencies": {
"@playwright/test": "1.22.0-next"
}

5
packages/playwright-ct-react/vitePlugin.js

@ -17,5 +17,8 @@
const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
module.exports = (options = {}) => {
return createPlugin('@playwright/experimental-ct-react/register', options);
return createPlugin(
'@playwright/experimental-ct-react/register',
() => require('@vitejs/plugin-react')(),
options);
};

4
packages/playwright-ct-svelte/package.json

@ -17,6 +17,10 @@
"./test": "./test.js",
"./vitePlugin": "./vitePlugin.js"
},
"dependencies": {
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
"vite": "^2.9.5"
},
"devDependencies": {
"@playwright/test": "1.22.0-next"
}

5
packages/playwright-ct-svelte/vitePlugin.js

@ -17,5 +17,8 @@
const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
module.exports = (options = {}) => {
return createPlugin('@playwright/experimental-ct-svelte/register', options);
return createPlugin(
'@playwright/experimental-ct-svelte/register',
() => require('@sveltejs/vite-plugin-svelte').svelte(),
options);
};

4
packages/playwright-ct-vue/package.json

@ -17,6 +17,10 @@
"./test": "./test.js",
"./vitePlugin": "./vitePlugin.js"
},
"dependencies": {
"@vitejs/plugin-vue": "^2.3.1",
"vite": "^2.9.5"
},
"devDependencies": {
"@playwright/test": "1.22.0-next"
}

5
packages/playwright-ct-vue/vitePlugin.js

@ -17,5 +17,8 @@
const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
module.exports = (options = {}) => {
return createPlugin('@playwright/experimental-ct-vue/register', options);
return createPlugin(
'@playwright/experimental-ct-vue/register',
() => require('@vitejs/plugin-vue')(),
options);
};

5
packages/playwright-test/src/plugins/vitePlugin.ts

@ -27,6 +27,7 @@ let viteDevServer: ViteDevServer;
export function createPlugin(
registerFunction: string,
frameworkPluginFactory: () => Plugin,
options: {
include?: string,
port?: number,
@ -46,7 +47,9 @@ export function createPlugin(
setup: async () => {
viteConfig.root = viteConfig.root || configDir;
viteConfig.plugins = viteConfig.plugins || [];
viteConfig.plugins = viteConfig.plugins || [
frameworkPluginFactory()
];
viteConfig.plugins.push(vitePlugin(registerFunction, options.include));
viteConfig.configFile = viteConfig.configFile || false;
viteConfig.server = viteConfig.server || {};

4
packages/web/playwright.config.ts

@ -16,7 +16,7 @@
import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';
import vite from '@playwright/experimental-ct-react/vitePlugin';
import viteCT from '@playwright/experimental-ct-react/vitePlugin';
const config: PlaywrightTestConfig = {
testDir: 'src',
@ -28,7 +28,7 @@ const config: PlaywrightTestConfig = {
['html', { open: 'on-failure' }]
],
plugins: [
vite({ port: 3101 })
viteCT({ port: 3101 })
],
use: {
trace: 'on-first-retry',

4
tests/components/ct-react-vite/playwright.config.ts

@ -15,7 +15,7 @@
*/
import { PlaywrightTestConfig, devices } from '@playwright/test';
import vite from '@playwright/experimental-ct-react/vitePlugin';
import viteCT from '@playwright/experimental-ct-react/vitePlugin';
const config: PlaywrightTestConfig = {
testDir: 'src',
@ -27,7 +27,7 @@ const config: PlaywrightTestConfig = {
['html', { open: 'on-failure' }]
],
plugins: [
vite(),
viteCT(),
],
use: {
trace: 'on-first-retry',

15
tests/components/ct-react/playwright.config.ts

@ -15,6 +15,7 @@
*/
import { PlaywrightTestConfig, devices } from '@playwright/test';
import viteCT from '@playwright/experimental-ct-react/vitePlugin';
const config: PlaywrightTestConfig = {
testDir: 'src',
@ -25,18 +26,10 @@ const config: PlaywrightTestConfig = {
] : [
['html', { open: 'on-failure' }]
],
webServer: {
url: 'http://localhost:3001/',
command: 'npm run start',
reuseExistingServer: !process.env.CI,
env: {
BROWSER: 'none',
PORT: '3001',
REACT_APP_TESTING: '1',
}
},
plugins: [
viteCT(),
],
use: {
baseURL: 'http://localhost:3001/',
trace: 'on-first-retry',
},
projects: [

2
tests/components/ct-vue-cli/src/tests.html → tests/components/ct-react/playwright/index.html

@ -7,6 +7,6 @@
</head>
<body>
<div id="root"></div>
<!-- built files will be auto injected -->
<script type="module" src="/playwright/index.js"></script>
</body>
</html>

0
tests/components/ct-react/playwright/index.js

11
tests/components/ct-react/src/index-app.tsx

@ -1,11 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

4
tests/components/ct-react/src/index-tests.tsx

@ -1,4 +0,0 @@
import register from '@playwright/experimental-ct-react/register';
import App from './App';
register({ App });

15
tests/components/ct-react/src/index.tsx

@ -1,6 +1,11 @@
if (process.env.REACT_APP_TESTING)
import('./index-tests');
else
import('./index-app');
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
export {};
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

10
tests/components/ct-svelte-kit/playwright.config.ts

@ -16,6 +16,7 @@
import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';
import viteCT from '@playwright/experimental-ct-svelte/vitePlugin';
const config: PlaywrightTestConfig = {
testDir: 'src',
@ -26,13 +27,10 @@ const config: PlaywrightTestConfig = {
] : [
['html', { open: 'on-failure' }]
],
webServer: {
url: 'http://localhost:3000/tests',
command: 'npm run dev',
reuseExistingServer: !process.env.CI,
},
plugins: [
viteCT(),
],
use: {
baseURL: 'http://localhost:3000/tests',
trace: 'on-first-retry',
},
projects: [

13
tests/components/ct-svelte-kit/playwright/index.html

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Svelte Test</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/playwright/index.ts"></script>
</body>
</html>

0
tests/components/ct-svelte-kit/playwright/index.ts

15
tests/components/ct-svelte-kit/src/routes/tests/index.svelte

@ -1,15 +0,0 @@
<script>
import { onMount } from 'svelte';
import Counter from '../../lib/Counter.svelte';
import register from '@playwright/experimental-ct-svelte/register';
onMount(async () => {
register({
Counter
}, {
window
});
});
</script>
<div id="root"></div>

7
tests/components/ct-svelte-vite/playwright.config.ts

@ -16,8 +16,7 @@
import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';
import vite from '@playwright/experimental-ct-svelte/vitePlugin';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import viteCT from '@playwright/experimental-ct-svelte/vitePlugin';
const config: PlaywrightTestConfig = {
testDir: 'src',
@ -29,9 +28,7 @@ const config: PlaywrightTestConfig = {
['html', { open: 'on-failure' }]
],
plugins: [
vite({
config: { plugins: [ svelte() ] }
}),
viteCT(),
],
use: {
trace: 'on-first-retry',

10
tests/components/ct-svelte/playwright.config.ts

@ -16,6 +16,7 @@
import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';
import viteCT from '@playwright/experimental-ct-svelte/vitePlugin';
const config: PlaywrightTestConfig = {
testDir: 'src',
@ -26,13 +27,10 @@ const config: PlaywrightTestConfig = {
] : [
['html', { open: 'on-failure' }]
],
webServer: {
url: 'http://localhost:8080/tests.html',
command: 'npm run dev',
reuseExistingServer: !process.env.CI,
},
plugins: [
viteCT(),
],
use: {
baseURL: 'http://localhost:8080/tests.html',
trace: 'on-first-retry',
},
projects: [

13
tests/components/ct-svelte/playwright/index.html

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Svelte Test</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/playwright/index.ts"></script>
</body>
</html>

0
tests/components/ct-svelte/playwright/index.ts

19
tests/components/ct-svelte/public/tests.html

@ -1,19 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/tests/bundle.css'>
<script defer src='/tests/bundle.js'></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

4
tests/components/ct-svelte/src/tests.js

@ -1,4 +0,0 @@
import register from '@playwright/experimental-ct-svelte/register';
import App from './App.svelte';
register({ App });

10
tests/components/ct-vue-cli/playwright.config.ts

@ -15,6 +15,7 @@
*/
import { PlaywrightTestConfig, devices } from '@playwright/test';
import viteCT from '@playwright/experimental-ct-vue/vitePlugin';
const config: PlaywrightTestConfig = {
testDir: 'src',
@ -25,13 +26,10 @@ const config: PlaywrightTestConfig = {
] : [
['html', { open: 'on-failure' }]
],
webServer: {
url: 'http://localhost:8080/tests.html',
command: 'npm run serve',
reuseExistingServer: !process.env.CI,
},
plugins: [
viteCT(),
],
use: {
baseURL: 'http://localhost:8080/tests.html',
trace: 'on-first-retry',
},
projects: [

12
tests/components/ct-vue-cli/playwright/index.html

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="root"></div>
<script type="module" src="/playwright/index.js"></script>
</body>
</html>

0
tests/components/ct-vue-cli/playwright/index.js

18
tests/components/ct-vue-cli/src/tests.js

@ -1,18 +0,0 @@
import { createApp, setDevtoolsHook, h } from 'vue'
import register from '@playwright/experimental-ct-vue/register'
import Button from './components/Button.vue'
import DefaultSlot from './components/DefaultSlot.vue'
import NamedSlots from './components/NamedSlots.vue'
register({
Button,
DefaultSlot,
NamedSlots
}, {
// This is only needed if you are using Vue CLI (webpack).
// Vite does not need this line.
createApp,
setDevtoolsHook,
h
})

9
tests/components/ct-vue-vite/playwright.config.ts

@ -15,8 +15,7 @@
*/
import { PlaywrightTestConfig, devices } from '@playwright/test';
import vite from '@playwright/experimental-ct-vue/vitePlugin';
import vue from '@vitejs/plugin-vue'
import viteCT from '@playwright/experimental-ct-vue/vitePlugin';
const config: PlaywrightTestConfig = {
testDir: 'src',
@ -28,11 +27,7 @@ const config: PlaywrightTestConfig = {
['html', { open: 'on-failure' }]
],
plugins: [
vite({
config: {
plugins: [ vue() ]
}
}),
viteCT(),
],
use: {
trace: 'on-first-retry',

3
tsconfig.json

@ -27,6 +27,9 @@
"exclude": [
"packages/*/lib",
"packages/html-reporter",
"packages/playwright-ct-react",
"packages/playwright-ct-svelte",
"packages/playwright-ct-vue",
"packages/recorder",
"packages/trace-viewer",
"packages/web",

Loading…
Cancel
Save