Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

chore: move playwright gallery into a subfolder (#13695)

Browse source
This commit is contained in:
Pavel Feldman 2022-04-21 20:07:43 -08:00 committed by GitHub
parent 801dbe0699
commit 3d4caab153
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 50 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/components-vue/README.md
View file

@ -67,7 +67,7 @@ npm run test
<style>@import '/src/assets/base.css';</style> <style>@import '/src/assets/base.css';</style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="root"></div>
<script type="module" src="/tests.js"></script> <script type="module" src="/tests.js"></script>
</body> </body>
</html> </html>

2
examples/components-vue/tests.html
View file

@ -4,7 +4,7 @@
<style>@import '/src/assets/base.css';</style> <style>@import '/src/assets/base.css';</style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="root"></div>
<script type="module" src="/tests.js"></script> <script type="module" src="/tests.js"></script>
</body> </body>
</html> </html>

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

@ -28,13 +28,13 @@ const config: PlaywrightTestConfig = {
['html', { open: 'on-failure' }] ['html', { open: 'on-failure' }]
], ],
webServer: { webServer: {
url: 'http://localhost:3101/playwright.html', url: 'http://localhost:3101/playwright/index.html',
command: 'npm run playwright-dev', command: 'npm run playwright-dev',
cwd: __dirname, cwd: __dirname,
reuseExistingServer: !process.env.CI, reuseExistingServer: !process.env.CI,
}, },
use: { use: {
baseURL: 'http://localhost:3101/playwright.html', baseURL: 'http://localhost:3101/playwright/index.html',
trace: 'on-first-retry', trace: 'on-first-retry',
}, },
projects: [ ], projects: [ ],

6
packages/html-reporter/playwright.vite.config.ts
View file

@ -16,16 +16,14 @@
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react';
import playwrightPlugin from '@playwright/experimental-ct-react/vitePlugin'; import playwright from '@playwright/experimental-ct-react/vitePlugin';
import path from 'path'; import path from 'path';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
react(), react(),
playwrightPlugin({ playwright(),
imports: ['./src/theme.css']
}),
], ],
resolve: { resolve: {
alias: { alias: {

2
packages/html-reporter/playwright.html → packages/html-reporter/playwright/index.html
View file

@ -24,6 +24,6 @@
</head> </head>
<body> <body>
<div id='root'></div> <div id='root'></div>
<script type='module' src='/playwright.app.ts'></script> <script type='module' src='/playwright/index.ts'></script>
</body> </body>
</html> </html>

2
packages/html-reporter/playwright.app.ts → packages/html-reporter/playwright/index.ts
View file

@ -14,4 +14,4 @@
* limitations under the License. * limitations under the License.
*/ */
// Playwright's Vite plugin is dynamically populating this file with the components. import '../src/theme.css';

2
packages/playwright-ct-react/vitePlugin.d.ts vendored
View file

@ -14,4 +14,4 @@
* limitations under the License. * limitations under the License.
*/ */
export default function(options?: { include?: string, imports?: string[] }): any; export default function(options?: { include?: string }): any;

4
packages/playwright-ct-svelte/register.mjs
View file

@ -41,11 +41,11 @@ const playwrightMount = component => {
throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...registry.keys()]}`); throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...registry.keys()]}`);
const wrapper = new componentCtor({ const wrapper = new componentCtor({
target: document.getElementById('app'), target: document.getElementById('root'),
props: component.options?.props, props: component.options?.props,
}); });
for (const [key, listener] of Object.entries(component.options?.on || {})) for (const [key, listener] of Object.entries(component.options?.on || {}))
wrapper.$on(key, event => listener(event.detail)); wrapper.$on(key, event => listener(event.detail));
return '#app > *'; return '#root > *';
}; };

2
packages/playwright-ct-svelte/vitePlugin.d.ts vendored
View file

@ -14,4 +14,4 @@
* limitations under the License. * limitations under the License.
*/ */
export default function(options?: { include?: string, imports?: string[] }): any; export default function(options?: { include?: string }): any;

4
packages/playwright-ct-vue/register.mjs
View file

@ -129,6 +129,6 @@ window.playwrightMount = async component => {
render: () => render(component) render: () => render(component)
}); });
instance.setDevtoolsHook(createDevTools(), {}); instance.setDevtoolsHook(createDevTools(), {});
app.mount('#app'); app.mount('#root');
return '#app > *'; return '#root > *';
}; };

2
packages/playwright-ct-vue/vitePlugin.d.ts vendored
View file

@ -14,4 +14,4 @@
* limitations under the License. * limitations under the License.
*/ */
export default function(options?: { include?: string, imports?: string[] }): any; export default function(options?: { include?: string }): any;

17
packages/playwright-test/src/vitePlugin.ts
View file

@ -23,20 +23,18 @@ import { componentInfo, collectComponentUsages } from './tsxTransform';
import type { ComponentInfo } from './tsxTransform'; import type { ComponentInfo } from './tsxTransform';
const imports: Map<string, ComponentInfo> = new Map(); const imports: Map<string, ComponentInfo> = new Map();
let configDir: string;
export function createVitePlugin(registerFunction: string) { export function createVitePlugin(registerFunction: string) {
return (options?: { include: string, imports?: string[] }) => { return (options?: { include: string }) => {
return vitePlugin({ ...(options || {}), registerFunction }); return vitePlugin({ ...(options || {}), registerFunction });
}; };
} }
function vitePlugin(options: { include?: string, imports?: string[], registerFunction: string }): Plugin { function vitePlugin(options: { include?: string, registerFunction: string }): Plugin {
return { return {
name: 'playwright-gallery', name: 'playwright-gallery',
configResolved: async config => { configResolved: async config => {
configDir = path.dirname(config.configFile || '');
const files = await new Promise<string[]>((f, r) => { const files = await new Promise<string[]>((f, r) => {
glob(options.include || config.root + '/**/*.{test,spec}.[tj]s{x,}', {}, function(err, files) { glob(options.include || config.root + '/**/*.{test,spec}.[tj]s{x,}', {}, function(err, files) {
if (err) if (err)
@ -72,12 +70,12 @@ function vitePlugin(options: { include?: string, imports?: string[], registerFun
} }
}, },
transform: async (_, id) => { transform: async (content, id) => {
if (!id.includes('playwright.app.ts') && !id.includes('playwright.app.js')) if (!id.endsWith('playwright/index.ts') && !id.endsWith('playwright/index.tsx') && !id.endsWith('playwright/index.js'))
return; return;
const folder = path.dirname(id); const folder = path.dirname(id);
const lines = []; const lines = [content, ''];
lines.push(`import register from '${options.registerFunction}';`); lines.push(`import register from '${options.registerFunction}';`);
for (const [alias, value] of imports) { for (const [alias, value] of imports) {
@ -88,11 +86,6 @@ function vitePlugin(options: { include?: string, imports?: string[], registerFun
lines.push(`import ${alias} from '${importPath}';`); lines.push(`import ${alias} from '${importPath}';`);
} }
for (const i of options.imports || []) {
const importPath = configDir && i.startsWith('.') ? './' + path.relative(folder, path.resolve(configDir, i)).replace(/\\/g, '/') : i;
lines.push(`import '${importPath}';`);
}
lines.push(`register({ ${[...imports.keys()].join(',\n ')} });`); lines.push(`register({ ${[...imports.keys()].join(',\n ')} });`);
return lines.join('\n'); return lines.join('\n');
}, },

4
packages/web/playwright.config.ts
View file

@ -27,13 +27,13 @@ const config: PlaywrightTestConfig = {
['html', { open: 'on-failure' }] ['html', { open: 'on-failure' }]
], ],
webServer: { webServer: {
url: 'http://localhost:3102/playwright.html', url: 'http://localhost:3102/playwright/index.html',
command: 'npx vite --config playwright.vite.config.ts dev', command: 'npx vite --config playwright.vite.config.ts dev',
cwd: __dirname, cwd: __dirname,
reuseExistingServer: !process.env.CI, reuseExistingServer: !process.env.CI,
}, },
use: { use: {
baseURL: 'http://localhost:3102/playwright.html', baseURL: 'http://localhost:3102/playwright/index.html',
trace: 'on-first-retry', trace: 'on-first-retry',
}, },
projects: [ projects: [

10
packages/web/playwright.vite.config.ts
View file

@ -16,19 +16,13 @@
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react';
import playwrightPlugin from '@playwright/experimental-ct-react/vitePlugin'; import playwright from '@playwright/experimental-ct-react/vitePlugin';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
react(), react(),
playwrightPlugin({ playwright(),
imports: [
'./src/common.css',
'./src/theme.ts',
'./src/third_party/vscode/codicon.css',
],
}),
], ],
server: { server: {
port: 3102, port: 3102,

2
packages/web/playwright.html → packages/web/playwright/index.html
View file

@ -24,6 +24,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/playwright.app.ts"></script> <script type="module" src="/playwright/index.ts"></script>
</body> </body>
</html> </html>

4
packages/web/playwright.app.ts → packages/web/playwright/index.ts
View file

@ -14,4 +14,6 @@
* limitations under the License. * limitations under the License.
*/ */
// Playwright's Vite plugin is dynamically populating this file with the components. import '../src/common.css';
import '../src/theme.ts';
import '../src/third_party/vscode/codicon.css';

1
tests/components/ct-react-vite/playwright.app.ts
View file

@ -1 +0,0 @@
// Playwright's Vite plugin is dynamically populating this file with the components.

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

@ -26,12 +26,12 @@ const config: PlaywrightTestConfig = {
['html', { open: 'on-failure' }] ['html', { open: 'on-failure' }]
], ],
webServer: { webServer: {
url: 'http://localhost:3000/playwright.html', url: 'http://localhost:3000/playwright/index.html',
command: 'npm run playwright-dev', command: 'npm run playwright-dev',
reuseExistingServer: !process.env.CI, reuseExistingServer: !process.env.CI,
}, },
use: { use: {
baseURL: 'http://localhost:3000/playwright.html', baseURL: 'http://localhost:3000/playwright/index.html',
trace: 'on-first-retry', trace: 'on-first-retry',
}, },
projects: [ projects: [

6
tests/components/ct-react-vite/playwright.vite.config.ts
View file

@ -1,13 +1,11 @@
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react';
import playwrightPlugin from '@playwright/experimental-ct-react/vitePlugin'; import playwright from '@playwright/experimental-ct-react/vitePlugin';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
react(), react(),
playwrightPlugin({ playwright(),
imports: ['./src/index.css']
}),
] ]
}); });

2
tests/components/ct-react-vite/playwright.html → tests/components/ct-react-vite/playwright/index.html
View file

@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/playwright.app.ts"></script> <script type="module" src="/playwright/index.ts"></script>
</body> </body>
</html> </html>

1
tests/components/ct-react-vite/playwright/index.ts Normal file
View file

@ -0,0 +1 @@
import '../src/index.css';

2
tests/components/ct-svelte-kit/src/routes/tests/index.svelte
View file

@ -12,4 +12,4 @@ onMount(async () => {
}); });
</script> </script>
<div id="app"></div> <div id="root"></div>

1
tests/components/ct-svelte-vite/playwright.app.ts
View file

@ -1 +0,0 @@
// Playwright's Vite plugin is dynamically populating this file with the components.

4
tests/components/ct-svelte-vite/playwright.config.ts
View file

@ -27,12 +27,12 @@ const config: PlaywrightTestConfig = {
['html', { open: 'on-failure' }] ['html', { open: 'on-failure' }]
], ],
webServer: { webServer: {
url: 'http://localhost:3000/playwright.html', url: 'http://localhost:3000/playwright/index.html',
command: 'npm run playwright-dev', command: 'npm run playwright-dev',
reuseExistingServer: !process.env.CI, reuseExistingServer: !process.env.CI,
}, },
use: { use: {
baseURL: 'http://localhost:3000/playwright.html', baseURL: 'http://localhost:3000/playwright/index.html',
trace: 'on-first-retry', trace: 'on-first-retry',
}, },
projects: [ projects: [

4
tests/components/ct-svelte-vite/playwright.vite.config.ts
View file

@ -1,11 +1,11 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte' import { svelte } from '@sveltejs/vite-plugin-svelte'
import playwrightPlugin from '@playwright/experimental-ct-svelte/vitePlugin'; import playwright from '@playwright/experimental-ct-svelte/vitePlugin';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
svelte(), svelte(),
playwrightPlugin(), playwright(),
] ]
}) })

4
tests/components/ct-svelte-vite/playwright.html → tests/components/ct-svelte-vite/playwright/index.html
View file

@ -7,7 +7,7 @@
<title>Svelte + TS + Vite App</title> <title>Svelte + TS + Vite App</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="root"></div>
<script type="module" src="/playwright.app.ts"></script> <script type="module" src="/playwright/index.ts"></script>
</body> </body>
</html> </html>

0
tests/components/ct-svelte-vite/playwright/index.ts Normal file
View file

2
tests/components/ct-svelte/public/tests.html
View file

@ -14,6 +14,6 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="root"></div>
</body> </body>
</html> </html>

2
tests/components/ct-vue-cli/src/tests.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head> </head>
<body> <body>
<div id="app"></div> <div id="root"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

1
tests/components/ct-vue-vite/playwright.app.js
View file

@ -1 +0,0 @@
// Playwright's Vite plugin is dynamically populating this file with the components.

4
tests/components/ct-vue-vite/playwright.config.ts
View file

@ -26,12 +26,12 @@ const config: PlaywrightTestConfig = {
['html', { open: 'on-failure' }] ['html', { open: 'on-failure' }]
], ],
webServer: { webServer: {
url: 'http://localhost:3000/playwright.html', url: 'http://localhost:3000/playwright/index.html',
command: 'npm run playwright-dev', command: 'npm run playwright-dev',
reuseExistingServer: !process.env.CI, reuseExistingServer: !process.env.CI,
}, },
use: { use: {
baseURL: 'http://localhost:3000/playwright.html', baseURL: 'http://localhost:3000/playwright/index.html',
trace: 'on-first-retry', trace: 'on-first-retry',
}, },
projects: [ projects: [

13
tests/components/ct-vue-vite/playwright.vite.config.js
View file

@ -1,18 +1,11 @@
import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import playwrightPlugin from '@playwright/experimental-ct-vue/vitePlugin'; import playwright from '@playwright/experimental-ct-vue/vitePlugin';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
vue(), vue(),
playwrightPlugin(), playwright(),
], ]
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
}) })

4
tests/components/ct-vue-vite/playwright.html → tests/components/ct-vue-vite/playwright/index.html
View file

@ -7,7 +7,7 @@
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="root"></div>
<script type="module" src="/playwright.app.js"></script> <script type="module" src="/playwright/index.js"></script>
</body> </body>
</html> </html>

0
tests/components/ct-vue-vite/playwright/index.js Normal file
View file