{test &&
+ {test && !!test.projectName &&
{test.annotations.map(a => }
+ }
{test && ({
id: String(index),
diff --git a/packages/html-reporter/src/testFileView.tsx b/packages/html-reporter/src/testFileView.tsx
index cf55ca1450..b969a52deb 100644
--- a/packages/html-reporter/src/testFileView.tsx
+++ b/packages/html-reporter/src/testFileView.tsx
@@ -42,7 +42,7 @@ export const TestFileView: React.FC<{
{test.path.join(' › ')}
}
{test && {test?.title}
}
{test && {test.location.file}:{test.location.line}
}
- {test && !!test.projectName &&
{a.type}
{a.description && : {a.description}}
)}
-
{msToString(test.duration)}
{report.projectNames.length > 1 && !!test.projectName &&
- ;
+ render: (component: { type: string, props: Object }) => Promise;
webpack: string;
};
export const test = baseTest.extend({
webpack: '',
- renderComponent: async ({ page, webpack }, use, testInfo) => {
+ render: async ({ page, webpack }, use) => {
const webpackConfig = require(webpack);
const outputPath = webpackConfig.output.path;
const filename = webpackConfig.output.filename.replace('[name]', 'playwright');
- await use(async (component: string, optionalParams?: Object) => {
+ await use(async (component: { type: string, props: Object }) => {
await page.route('http://component/index.html', route => {
route.fulfill({
body: `
@@ -49,27 +48,23 @@ export const test = baseTest.extend({
await page.goto('http://component/index.html');
await page.addScriptTag({ path: path.resolve(__dirname, outputPath, filename) });
- const options = await page.evaluate((component: string) => {
- return window.__playwright_options(component);
- }, component);
- await page.setViewportSize(options.viewport);
- const params = { ...optionalParams };
- for (const [key, value] of Object.entries(params)) {
+ const props = { ...component.props };
+ for (const [key, value] of Object.entries(props)) {
if (typeof value === 'function') {
const functionName = '__pw_func_' + key;
await page.exposeFunction(functionName, value);
- (params as any)[key] = functionName;
+ (props as any)[key] = functionName;
}
}
await page.evaluate(v => {
- const params = v.params;
- for (const [key, value] of Object.entries(params)) {
+ const props = v.props;
+ for (const [key, value] of Object.entries(props)) {
if (typeof value === 'string' && (value as string).startsWith('__pw_func_'))
- (params as any)[key] = window[value];
+ (props as any)[key] = (window as any)[value];
}
- window.__playwright_render(v.component, params);
- }, { component, params });
+ window.__playwright_render(v.type, props);
+ }, { type: component.type, props });
return page.locator('#pw-root');
});
},
diff --git a/packages/html-reporter/webpack.config.js b/packages/html-reporter/webpack.config.js
index f22a09a72c..e8e9cfab92 100644
--- a/packages/html-reporter/webpack.config.js
+++ b/packages/html-reporter/webpack.config.js
@@ -25,7 +25,7 @@ module.exports = {
entry: {
zip: require.resolve('@zip.js/zip.js/dist/zip-no-worker-inflate.min.js'),
app: path.join(__dirname, 'src', 'index.tsx'),
- playwright: path.join(__dirname, 'playwright.stories.tsx'),
+ playwright: path.join(__dirname, 'playwright.components.tsx'),
},
resolve: {
extensions: ['.ts', '.js', '.tsx', '.jsx']
diff --git a/packages/playwright-test/package.json b/packages/playwright-test/package.json
index 6c62971d7f..30528659e2 100644
--- a/packages/playwright-test/package.json
+++ b/packages/playwright-test/package.json
@@ -43,6 +43,7 @@
"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
"@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
"@babel/plugin-transform-modules-commonjs": "^7.14.5",
+ "@babel/plugin-transform-react-jsx": "^7.14.5",
"@babel/preset-typescript": "^7.14.5",
"babel-plugin-module-resolver": "^4.1.0",
"colors": "^1.4.0",
diff --git a/packages/playwright-test/src/experimentalLoader.ts b/packages/playwright-test/src/experimentalLoader.ts
index 4b996ac429..ca16535a65 100644
--- a/packages/playwright-test/src/experimentalLoader.ts
+++ b/packages/playwright-test/src/experimentalLoader.ts
@@ -26,15 +26,15 @@ async function resolve(specifier: string, context: { parentURL: string }, defaul
return defaultResolve(specifier, context, defaultResolve);
let url = new URL(specifier, context.parentURL).toString();
url = url.substring('file://'.length);
- if (fs.existsSync(url + '.ts'))
- return defaultResolve(specifier + '.ts', context, defaultResolve);
- if (fs.existsSync(url + '.js'))
- return defaultResolve(specifier + '.js', context, defaultResolve);
+ for (const extension of ['.ts', '.js', '.tsx', '.jsx']) {
+ if (fs.existsSync(url + extension))
+ return defaultResolve(specifier + extension, context, defaultResolve);
+ }
return defaultResolve(specifier, context, defaultResolve);
}
async function load(url: string, context: any, defaultLoad: any) {
- if (url.endsWith('.ts')) {
+ if (url.endsWith('.ts') || url.endsWith('.tsx')) {
const filename = url.substring('file://'.length);
const cwd = path.dirname(filename);
let tsconfig = tsConfigCache.get(cwd);
diff --git a/packages/playwright-test/src/loader.ts b/packages/playwright-test/src/loader.ts
index b85c48763b..f344196e56 100644
--- a/packages/playwright-test/src/loader.ts
+++ b/packages/playwright-test/src/loader.ts
@@ -185,7 +185,7 @@ export class Loader {
testDir,
snapshotDir,
testIgnore: takeFirst(this._configOverrides.testIgnore, projectConfig.testIgnore, this._config.testIgnore, []),
- testMatch: takeFirst(this._configOverrides.testMatch, projectConfig.testMatch, this._config.testMatch, '**/?(*.)@(spec|test).@(ts|js|mjs)'),
+ testMatch: takeFirst(this._configOverrides.testMatch, projectConfig.testMatch, this._config.testMatch, '**/?(*.)@(spec|test).*'),
timeout: takeFirst(this._configOverrides.timeout, projectConfig.timeout, this._config.timeout, 10000),
use: mergeObjects(mergeObjects(this._config.use, projectConfig.use), this._configOverrides.use),
};
diff --git a/packages/playwright-test/src/runner.ts b/packages/playwright-test/src/runner.ts
index 6fdfb52223..d121c87f65 100644
--- a/packages/playwright-test/src/runner.ts
+++ b/packages/playwright-test/src/runner.ts
@@ -161,7 +161,8 @@ export class Runner {
const allFiles = await collectFiles(project.config.testDir);
const testMatch = createFileMatcher(project.config.testMatch);
const testIgnore = createFileMatcher(project.config.testIgnore);
- const testFileExtension = (file: string) => ['.js', '.ts', '.mjs'].includes(path.extname(file));
+ const extensions = ['.js', '.ts', '.mjs', ...(process.env.PW_COMPONENT_TESTING ? ['.tsx', '.jsx'] : [])];
+ const testFileExtension = (file: string) => extensions.includes(path.extname(file));
const testFiles = allFiles.filter(file => !testIgnore(file) && testMatch(file) && testFileFilter(file) && testFileExtension(file));
files.set(project, testFiles);
testFiles.forEach(file => allTestFiles.add(file));
diff --git a/packages/playwright-test/src/transform.ts b/packages/playwright-test/src/transform.ts
index aa20f6e629..29694fb430 100644
--- a/packages/playwright-test/src/transform.ts
+++ b/packages/playwright-test/src/transform.ts
@@ -24,7 +24,7 @@ import * as url from 'url';
import type { Location } from './types';
import { TsConfigLoaderResult } from './third_party/tsconfig-loader';
-const version = 4;
+const version = 5;
const cacheDir = process.env.PWTEST_CACHE_DIR || path.join(os.tmpdir(), 'playwright-transform-cache');
const sourceMaps: Map = new Map();
@@ -54,6 +54,8 @@ function calculateCachePath(content: string, filePath: string): string {
}
export function transformHook(code: string, filename: string, tsconfig: TsConfigLoaderResult, isModule = false): string {
+ if (isComponentImport(filename))
+ return componentStub();
const cachePath = calculateCachePath(code, filename);
const codePath = cachePath + '.js';
const sourceMapPath = cachePath + '.map';
@@ -65,7 +67,7 @@ export function transformHook(code: string, filename: string, tsconfig: TsConfig
process.env.BROWSERSLIST_IGNORE_OLD_DATA = 'true';
const babel: typeof import('@babel/core') = require('@babel/core');
- const alias: { [key: string]: string | ((s: string[]) => string) } = {};
+ const extensions = ['', '.js', '.ts', '.mjs', ...(process.env.PW_COMPONENT_TESTING ? ['.tsx', '.jsx'] : [])]; const alias: { [key: string]: string | ((s: string[]) => string) } = {};
for (const [key, values] of Object.entries(tsconfig.paths || {})) {
const regexKey = '^' + key.replace('*', '.*');
alias[regexKey] = ([name]) => {
@@ -73,8 +75,10 @@ export function transformHook(code: string, filename: string, tsconfig: TsConfig
const relative = (key.endsWith('/*') ? value.substring(0, value.length - 1) + name.substring(key.length - 1) : value)
.replace(/\//g, path.sep);
const result = path.resolve(tsconfig.baseUrl || '', relative);
- if (fs.existsSync(result) || fs.existsSync(result + '.js') || fs.existsSync(result + '.ts'))
- return result;
+ for (const extension of extensions) {
+ if (fs.existsSync(result + extension))
+ return result;
+ }
}
return name;
};
@@ -96,6 +100,10 @@ export function transformHook(code: string, filename: string, tsconfig: TsConfig
alias
}],
];
+
+ if (process.env.PW_COMPONENT_TESTING)
+ plugins.unshift([require.resolve('@babel/plugin-transform-react-jsx')]);
+
if (!isModule) {
plugins.push([require.resolve('@babel/plugin-transform-modules-commonjs')]);
plugins.push([require.resolve('@babel/plugin-proposal-dynamic-import')]);
@@ -125,7 +133,7 @@ export function transformHook(code: string, filename: string, tsconfig: TsConfig
}
export function installTransform(tsconfig: TsConfigLoaderResult): () => void {
- return pirates.addHook((code: string, filename: string) => transformHook(code, filename, tsconfig), { exts: ['.ts'] });
+ return pirates.addHook((code: string, filename: string) => transformHook(code, filename, tsconfig), { exts: ['.ts', '.tsx'] });
}
export function wrapFunctionWithLocation(func: (location: Location, ...args: A) => R): (...args: A) => R {
@@ -151,3 +159,20 @@ export function wrapFunctionWithLocation(func: (location: Lo
return func(location, ...args);
};
}
+
+// Experimental components support for internal testing.
+function isComponentImport(filename: string): boolean {
+ if (!process.env.PW_COMPONENT_TESTING)
+ return false;
+ if (filename.endsWith('.tsx') && !filename.endsWith('spec.tsx') && !filename.endsWith('test.tsx'))
+ return true;
+ if (filename.endsWith('.jsx') && !filename.endsWith('spec.jsx') && !filename.endsWith('test.jsx'))
+ return true;
+ return false;
+}
+
+function componentStub(): string {
+ return `module.exports = new Proxy({}, {
+ get: (obj, prop) => prop
+ });`;
+}
- {result.error &&
+ {result.error &&
}
- {!!result.steps.length &&
+ }
+ {!!result.steps.length &&
{result.steps.map((step, i) => }
+ }
- {expected && actual &&
+ {expected && actual &&
}
+ }
- {!!screenshots.length &&
+ {!!screenshots.length &&
{screenshots.map((a, i) => {
return
}
+ }
- {!!traces.length &&
+ {!!traces.length &&
{traces.map((a, i) =>
}
+ }
- {!!videos.length &&
+ {!!videos.length &&
{videos.map((a, i) =>
}
+ }
- {!!otherAttachments.length &&
+ {!!otherAttachments.length &&
{otherAttachments.map((a, i) => }
+ }
;
};
diff --git a/packages/html-reporter/test/component.js b/packages/html-reporter/test/component.js
index faf4f65445..bd1b916b91 100644
--- a/packages/html-reporter/test/component.js
+++ b/packages/html-reporter/test/component.js
@@ -57,21 +57,15 @@ const Component = ({ style, children }) => {
const registry = new Map();
-export const registerComponent = (name, component, options) => {
- registry.set(name, { component, options });
+export const registerComponent = (name, component) => {
+ registry.set(name, component);
};
function render(name, params) {
- const entry = registry.get(name);
+ const component = registry.get(name);
ReactDOM.render(
- React.createElement(Component, null, React.createElement(entry.component, params || null)),
+ React.createElement(Component, null, React.createElement(component, params || null)),
document.getElementById('root'));
}
-function options(name) {
- const entry = registry.get(name);
- return entry.options;
-}
-
window.__playwright_render = render;
-window.__playwright_options = options;
diff --git a/packages/html-reporter/test/componentTest.ts b/packages/html-reporter/test/componentTest.ts
index 7834ff2af1..bac8e2de4a 100644
--- a/packages/html-reporter/test/componentTest.ts
+++ b/packages/html-reporter/test/componentTest.ts
@@ -20,22 +20,21 @@ import { test as baseTest, Locator } from '@playwright/test';
declare global {
interface Window {
__playwright_render: (component: string, props: any) => void;
- __playwright_options: (component: string) => { viewport: { width: number, height: number } };
}
}
type TestFixtures = {
- renderComponent: (component: string, params?: any) => Promise