Skip to content

Commit

Permalink
test: use playwright for e2e tests with coverage 🔥😎🔥
Browse files Browse the repository at this point in the history
  • Loading branch information
nerdyman committed Apr 25, 2022
1 parent 1eea10d commit 3ceeacb
Show file tree
Hide file tree
Showing 13 changed files with 2,115 additions and 727 deletions.
13 changes: 3 additions & 10 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,14 @@
"jsx": true
}
},
"plugins": ["testing-library", "@typescript-eslint", "react", "testing-library"],
"plugins": ["@typescript-eslint", "react"],
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:testing-library/react"
"plugin:@typescript-eslint/recommended"
],
"env": {
"browser": true,
Expand Down Expand Up @@ -45,11 +44,5 @@
}
],
"@typescript-eslint/no-use-before-define": "warn"
},
"overrides": [
{
"files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
"extends": ["plugin:testing-library/react"]
}
]
}
}
2 changes: 1 addition & 1 deletion example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<title>React Image Turntable &ndash; Example</title>
</head>
<body class="container">
<div id="root" class="container"></div>
<div id="root" class="container" role="main"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
12 changes: 6 additions & 6 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@
},
"dependencies": {
"pepjs": "^0.5.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-image-turntable": "next"
},
"devDependencies": {
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"@vitejs/plugin-react": "^1.0.7",
"@types/react": "^18.0.6",
"@types/react-dom": "^18.0.2",
"@vitejs/plugin-react": "^1.3.1",
"typescript": "^4.6.3",
"vite": "^2.8.0"
"vite": "^2.9.5"
}
}
8 changes: 4 additions & 4 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ReactImageTurntable } from 'react-image-turntable';
import { ReactImageTurntable, ReactImageTurntableProps } from 'react-image-turntable';

const images = [
export const images = [
'https://static2.zerolight.com/web/df3a45687480167bb4451d79c02f67bd/img/2d-explorer/bmw/P0C1G__S022B__FX3A9/P0C1G__S022B__FX3A9__Spin_01.jpg?v=1',
'https://static2.zerolight.com/web/df3a45687480167bb4451d79c02f67bd/img/2d-explorer/bmw/P0C1G__S022B__FX3A9/P0C1G__S022B__FX3A9__Spin_02.jpg?v=1',
'https://static2.zerolight.com/web/df3a45687480167bb4451d79c02f67bd/img/2d-explorer/bmw/P0C1G__S022B__FX3A9/P0C1G__S022B__FX3A9__Spin_03.jpg?v=1',
Expand Down Expand Up @@ -39,8 +39,8 @@ const images = [
'https://static2.zerolight.com/web/df3a45687480167bb4451d79c02f67bd/img/2d-explorer/bmw/P0C1G__S022B__FX3A9/P0C1G__S022B__FX3A9__Spin_36.jpg?v=1',
];

function App() {
return <ReactImageTurntable images={images} />;
function App(props: Partial<ReactImageTurntableProps>) {
return <ReactImageTurntable images={images} {...props} />;
}

export default App;
35 changes: 35 additions & 0 deletions example/src/Test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { useState } from 'react';

import App, { images as baseImages } from './App';

/**
* Wrapper to manipulate props on the component in E2E tests.
* @NOTE This is only for internal testing, it is not required to use the library.
*/
export const Test = () => {
const [images, setImages] = useState(baseImages);
const [initialImageIndex, setInitialImageIndex] = useState(0);

return (
<>
<App images={images} initialImageIndex={initialImageIndex} />
<div>
<button
onClick={() =>
setImages((prev) =>
prev.length == baseImages.length ? baseImages.slice(0, 12) : baseImages,
)
}
>
Toggle image set
</button>

<button
onClick={() => setInitialImageIndex((prev) => (prev === 0 ? images.length - 1 : 0))}
>
Toggle initial index
</button>
</div>
</>
);
};
7 changes: 4 additions & 3 deletions example/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import ReactDOM from 'react-dom';

import './index.css';
import App from './App';
import { Test } from './Test';

const isDebug = new URLSearchParams(window.location.search).get('debug') !== null;

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
<React.StrictMode>{isDebug ? <Test /> : <App />}</React.StrictMode>,
document.getElementById('root'),
);
37 changes: 24 additions & 13 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"author": "nerdyman",
"license": "MIT",
"sideEffects": false,
"packageManager": "[email protected].3",
"packageManager": "[email protected].9",
"module": "dist/index.mjs",
"typings": "dist/index.d.ts",
"files": [
Expand All @@ -18,10 +18,12 @@
],
"scripts": {
"bootstrap": "corepack disable && corepack enable && pnpm i --frozen-lockfile",
"dev": "pnpm -r --stream run start",
"dx": "npm run bootstrap && pnpm exec husky install",
"start": "tsup --watch",
"build": "tsup",
"test": "jest",
"test": "rm -rf {.nyc_output,coverage} && playwright test && pnpm nyc report --reporter=lcov",
"test:debug": "env PWDEBUG=1 NODE_ENV=test playwright test && pnpm nyc report --reporter=lcov",
"lint": "eslint . && prettier --check .",
"prepare": "husky install",
"prepublish": "pnpm run build",
Expand Down Expand Up @@ -56,24 +58,33 @@
"react": ">=16.8"
},
"devDependencies": {
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@playwright/test": "^1.21.1",
"@size-limit/preset-small-lib": "^7.0.8",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"@typescript-eslint/eslint-plugin": "^5.18.0",
"@typescript-eslint/parser": "^5.18.0",
"eslint": "^8.12.0",
"@types/jest-axe": "^3.5.3",
"@types/react": "^18.0.6",
"@types/react-dom": "^18.0.2",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",
"axe-core": "^4.4.1",
"axe-playwright": "^1.1.11",
"babel-plugin-istanbul": "^6.1.1",
"esbuild-plugin-babel": "^0.2.3",
"eslint": "^8.14.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0",
"eslint-plugin-testing-library": "^5.2.1",
"husky": "^7.0.4",
"lint-staged": "^12.3.7",
"lint-staged": "^12.4.0",
"nyc": "^15.1.0",
"playwright-core": "^1.21.1",
"prettier": "^2.6.2",
"pretty-quick": "^3.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"size-limit": "^7.0.8",
"tslib": "^2.3.1",
"tsup": "^5.12.4",
"tslib": "^2.4.0",
"tsup": "^5.12.6",
"typescript": "^4.6.3"
}
}
38 changes: 38 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { PlaywrightTestConfig, devices } from '@playwright/test';

const config: PlaywrightTestConfig = {
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
testDir: './test',
outputDir: './test/results',
webServer: {
command: 'pnpm run dev',
url: 'http://localhost:3000',
env: {
NODE_ENV: 'test',
USE_BABEL_PLUGIN_ISTANBUL: '1',
},
},
use: {
trace: 'on-first-retry',
},
expect: {
toMatchSnapshot: { threshold: 0.1 },
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
// {
// name: 'firefox',
// use: { ...devices['Desktop Firefox'] },
// },
// {
// name: 'webkit',
// use: { ...devices['Desktop Safari'] },
// },
],
};

export default config;
Loading

0 comments on commit 3ceeacb

Please sign in to comment.