Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
switch from puppeteer to playwright
  • Loading branch information
KingSora committed Jan 24, 2021
1 parent 4eecc6f commit be25d8a
Show file tree
Hide file tree
Showing 42 changed files with 1,058 additions and 953 deletions.
2 changes: 1 addition & 1 deletion .eslintignore
Expand Up @@ -3,4 +3,4 @@ dist
types
.build
.coverage
.pptr
.nyc_output
14 changes: 4 additions & 10 deletions .eslintrc.js
@@ -1,8 +1,8 @@
const resolve = require('./resolve.config');
const puppeteerRollupConfig = require('./config/jest-puppeteer.rollup.config.js');
const browserRollupConfig = require('./config/jest-puppeteer.rollup.config.js');

module.exports = {
extends: ['plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'airbnb', 'prettier'],
extends: ['plugin:jest-playwright/recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'airbnb', 'prettier'],
env: {
browser: true,
es2020: true,
Expand Down Expand Up @@ -73,7 +73,7 @@ module.exports = {
},
overrides: [
{
files: ['*.test.*', `*${puppeteerRollupConfig.js.input}.*`],
files: ['*.test.*', `*${browserRollupConfig.js.input}.*`],
rules: {
'no-restricted-syntax': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
Expand All @@ -90,16 +90,10 @@ module.exports = {
'import/no-unresolved': [
'error',
{
ignore: [`\\./${puppeteerRollupConfig.build}/${puppeteerRollupConfig.html.output}$`, `^@/.*`],
ignore: [`\\./${browserRollupConfig.build}/${browserRollupConfig.html.output}$`, `^@/.*`],
},
],
},
globals: {
page: true,
browser: true,
context: true,
jestPuppeteer: true,
},
},
{
files: ['rollup.config.*'],
Expand Down
2 changes: 1 addition & 1 deletion .gitignore
Expand Up @@ -6,7 +6,7 @@ node_modules/
# generated
.build/
.coverage/
.pptr/
.nyc_output/

# local env files
.env.local
Expand Down
2 changes: 1 addition & 1 deletion .prettierignore
Expand Up @@ -3,4 +3,4 @@ dist
types
.coverage
.build
.pptr
.nyc_output
32 changes: 32 additions & 0 deletions config/jest-browser.env.js
@@ -0,0 +1,32 @@
const PlaywrightEnvironment = require('jest-playwright-preset/lib/PlaywrightEnvironment').default;
const { setupRollupTest, cleanupRollupTest } = require('./jest-browser.rollup.js');

const buildTests = [];

class BrowserRollupEnvironment extends PlaywrightEnvironment {
constructor(envConfig, envContext) {
super(envConfig, envContext);

this.watch = (envConfig.displayName.name || '').includes('-dev');
this.ctx = envContext;
this.cfg = envConfig;
}

async setup() {
const { testPath } = this.ctx;

if (!buildTests.includes(testPath)) {
await cleanupRollupTest(testPath, this.cfg.cache);
await setupRollupTest(this.cfg.rootDir, this.ctx.testPath, this.cfg.cache && this.cfg.cacheDirectory, this.watch);
buildTests.push(testPath);
}

await super.setup();
}

async teardown() {
await super.teardown();
}
}

module.exports = BrowserRollupEnvironment;
File renamed without changes.
Expand Up @@ -8,10 +8,10 @@ const rollupPluginHtml = require('@rollup/plugin-html');
const rollupPluginStyles = require('rollup-plugin-styles');
const rollupPluginServe = require('rollup-plugin-serve');
const rollupPluginLivereload = require('rollup-plugin-livereload');
const deploymentConfig = require('./jest-puppeteer.rollup.config.js');
const deploymentConfig = require('./jest-browser.rollup.config.js');

const rollupConfigName = 'rollup.config.js';
const cacheFilePrefix = 'jest-puppeteer-overlayscrollbars-cache-';
const cacheFilePrefix = 'jest-browser-overlayscrollbars-cache-';
const cacheEncoding = 'utf8';
const cacheHash = 'md5';

Expand Down Expand Up @@ -194,7 +194,7 @@ const setupRollupTest = async (rootDir, testPath, cacheDir, watch) => {
rollupPluginStyles(),
...defaultConfig.pipeline,
rollupPluginHtml({
title: `Jest-Puppeteer: ${testName}`,
title: `Jest-Browser: ${testName}`,
fileName: deploymentConfig.html.output,
template: genHtmlTemplateFunc(getHtmlFileContent),
meta: [{ charset: 'utf-8' }, { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' }],
Expand Down Expand Up @@ -327,9 +327,9 @@ const setupRollupTest = async (rootDir, testPath, cacheDir, watch) => {
}
};

const cleanupRollupTest = (testPath, cache) => {
const cleanupRollupTest = async (testPath, cache) => {
if (!cache) {
del(path.resolve(path.dirname(testPath), deploymentConfig.build));
await del(path.resolve(path.dirname(testPath), deploymentConfig.build));
}
};

Expand Down
2 changes: 2 additions & 0 deletions config/jest-browser.setup.js
@@ -0,0 +1,2 @@
jest.setTimeout(60000);
context.setDefaultTimeout(60000);
36 changes: 0 additions & 36 deletions config/jest-puppeteer.env.js

This file was deleted.

4 changes: 0 additions & 4 deletions config/jest-puppeteer.setup.js

This file was deleted.

2 changes: 1 addition & 1 deletion config/jest-test-server.js
@@ -1,5 +1,5 @@
const express = require('express');
const deploymentConfig = require('./jest-puppeteer.rollup.config.js');
const deploymentConfig = require('./jest-browser.rollup.config.js');

const app = express();

Expand Down
2 changes: 1 addition & 1 deletion config/jest-test-server.loader.js
@@ -1,5 +1,5 @@
const path = require('path');
const deploymentConfig = require('./jest-puppeteer.rollup.config.js');
const deploymentConfig = require('./jest-browser.rollup.config.js');

module.exports = {
process: (src, filePath) => {
Expand Down
11 changes: 6 additions & 5 deletions jest-puppeteer.config.base.js → jest-playwright.config.base.js
@@ -1,15 +1,16 @@
const path = require('path');

const deploymentConfig = path.resolve(__dirname, './config/jest-puppeteer.rollup.config.js');
const deploymentConfig = path.resolve(__dirname, './config/jest-browser.rollup.config.js');
const testServerPath = path.resolve(__dirname, './config/jest-test-server.js');

module.exports = {
browser: 'chromium',
browserContext: 'incognito',
launch: {
browsers: ['chromium', 'firefox'],
collectCoverage: true,
launchType: 'LAUNCH',
launchOptions: {
headless: false,
},
server: {
serverOptions: {
command: `node ${testServerPath}`,
port: deploymentConfig.port,
launchTimeout: 10000,
Expand Down
34 changes: 20 additions & 14 deletions jest.config.base.js
@@ -1,11 +1,11 @@
const path = require('path');
const resolve = require('./resolve.config');
const puppeteerRollupConfig = require('./config/jest-puppeteer.rollup.config.js');
const browserRollupConfig = require('./config/jest-browser.rollup.config.js');

const testServerLoaderPath = path.resolve(__dirname, './config/jest-test-server.loader.js');
const jsdomSetupFile = path.resolve(__dirname, './config/jest-jsdom.setup.js');
const puppeteerTestEnvironmentPath = path.resolve(__dirname, './config/jest-puppeteer.env.js');
const puppeteerSetupFile = path.resolve(__dirname, './config/jest-puppeteer.setup.js');
const browserTestEnvironmentPath = path.resolve(__dirname, './config/jest-browser.env.js');
const browserSetupFile = path.resolve(__dirname, './config/jest-browser.setup.js');

// For a detailed explanation regarding each configuration property, visit:
// https://jestjs.io/docs/en/configuration.html
Expand All @@ -19,16 +19,16 @@ const base = {
testPathIgnorePatterns: ['\\\\node_modules\\\\'],
};

const pptrBase = {
const browserBase = {
...base,
preset: 'jest-puppeteer',
setupFilesAfterEnv: ['expect-puppeteer', puppeteerSetupFile],
testMatch: ['**/tests/puppeteer/**/*.test.[jt]s?(x)'],
testEnvironment: puppeteerTestEnvironmentPath,
coveragePathIgnorePatterns: ['/node_modules/', `/${puppeteerRollupConfig.build}/`],
preset: 'jest-playwright-preset',
setupFilesAfterEnv: [browserSetupFile],
testMatch: ['**/tests/browser/**/*.test.[jt]s?(x)'],
testEnvironment: browserTestEnvironmentPath,
coveragePathIgnorePatterns: ['/node_modules/', `/${browserRollupConfig.build}/`],
transform: {
'^.+\\.[jt]sx?$': 'babel-jest',
[`^.+${puppeteerRollupConfig.build}.+${puppeteerRollupConfig.html.output}?$`]: testServerLoaderPath,
[`^.+${browserRollupConfig.build}.+${browserRollupConfig.html.output}?$`]: testServerLoaderPath,
},
};

Expand All @@ -42,12 +42,18 @@ module.exports = {
testMatch: ['**/tests/jsdom/**/*.test.[jt]s?(x)'],
},
{
...pptrBase,
displayName: 'puppeteer',
...browserBase,
displayName: {
name: 'browser',
color: 'white',
},
},
{
...pptrBase,
displayName: 'puppeteer-dev',
...browserBase,
displayName: {
name: 'browser-dev',
color: 'white',
},
collectCoverage: false,
},
],
Expand Down
22 changes: 12 additions & 10 deletions package.json
Expand Up @@ -15,13 +15,11 @@
"@rollup/plugin-node-resolve": "^11.0.1",
"@rollup/plugin-typescript": "^5.0.2",
"@testing-library/dom": "^7.26.3",
"@types/expect-puppeteer": "^4.4.3",
"@types/jest": "^25.2.3",
"@types/jest-environment-puppeteer": "^4.3.2",
"@types/puppeteer": "^3.0.1",
"@typescript-eslint/eslint-plugin": "^3.7.0",
"@typescript-eslint/parser": "^3.7.0",
"babel-jest": "^26.0.1",
"babel-plugin-istanbul": "^6.0.0",
"bufferutil": "^4.0.1",
"canvas": "^2.6.1",
"core-js": "^3.6.5",
Expand All @@ -31,22 +29,26 @@
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^23.18.0",
"eslint-plugin-jest-playwright": "^0.2.1",
"eslint-plugin-json": "^2.1.2",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.8",
"expect-puppeteer": "^4.4.0",
"expect-playwright": "^0.3.1",
"express": "^4.17.1",
"jest": "^26.0.1",
"jest": "^26.6.0",
"jest-dev-server": "^4.4.0",
"jest-puppeteer": "^4.4.0",
"jest-playwright-preset": "^1.4.5",
"mkdirp": "^1.0.4",
"node-sass": "^4.14.1",
"playwright": "^1.8.0",
"playwright-chromium": "^1.8.0",
"playwright-core": "^1.8.0",
"playwright-firefox": "^1.8.0",
"playwright-webkit": "^1.8.0",
"prettier": "^2.0.5",
"prettier-eslint": "^11.0.0",
"puppeteer": "^5.2.1",
"puppeteer-to-istanbul": "^1.4.0",
"rollup": "^2.36.1",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-prettier": "^2.1.0",
Expand All @@ -62,8 +64,8 @@
"scripts": {
"test": "yarn workspaces run test",
"test:jsdom": "yarn workspaces run test:jsdom",
"test:pptr": "yarn workspaces run test:pptr",
"test:pptr-dev": "yarn workspaces run test:pptr-dev",
"test:browser": "yarn workspaces run test:browser",
"test:browser-dev": "yarn workspaces run test:browser-dev",
"build": "yarn workspaces run build",
"lint": "npx eslint --fix ."
}
Expand Down

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/overlayscrollbars/dist/overlayscrollbars.js.map

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions packages/overlayscrollbars/index_.html
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OverlayScrollbars</title>
</head>

<body>
<div id="hi">hi</div>
<script type="text/javascript" src="./dist_/overlayscrollbars.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions packages/overlayscrollbars/jest-playwright.config.js
@@ -0,0 +1 @@
module.exports = require('../../jest-playwright.config.base');
1 change: 0 additions & 1 deletion packages/overlayscrollbars/jest-puppeteer.config.js

This file was deleted.

4 changes: 2 additions & 2 deletions packages/overlayscrollbars/package.json
Expand Up @@ -6,8 +6,8 @@
"scripts": {
"test": "jest --coverage --runInBand --detectOpenHandles",
"test:jsdom": "jest --coverage --runInBand --detectOpenHandles --selectProjects jsdom --testPathPattern",
"test:pptr": "jest --coverage --runInBand --detectOpenHandles --selectProjects puppeteer --testPathPattern",
"test:pptr-dev": "jest --coverage --runInBand --detectOpenHandles --selectProjects puppeteer-dev --testPathPattern",
"test:browser": "jest --coverage --runInBand --detectOpenHandles --selectProjects browser --testPathPattern",
"test:browser-dev": "jest --coverage --runInBand --detectOpenHandles --selectProjects browser-dev --testPathPattern",
"build": "rollup -c"
}
}
@@ -1,3 +1,5 @@
import 'jest-playwright-preset';
import 'expect-playwright';
import { Environment } from 'environment';
import url from './.build/build.html';

Expand Down
@@ -1,3 +1,5 @@
import 'jest-playwright-preset';
import 'expect-playwright';
import { Environment } from 'environment';
import url from './.build/build.html';

Expand Down
@@ -1,4 +1,5 @@
import expectPuppeteer from 'expect-puppeteer';
import 'jest-playwright-preset';
import 'expect-playwright';
import url from './.build/build.html';

describe('DOMObserver', () => {
Expand All @@ -7,7 +8,7 @@ describe('DOMObserver', () => {
});

test('test', async () => {
await expectPuppeteer(page).toClick('#start');
await expectPuppeteer(page).toMatchElement('#testResult.passed');
await page.click('#start');
await expect(page).toHaveSelector('#testResult.passed');
});
});

0 comments on commit be25d8a

Please sign in to comment.