Skip to content

Commit b544f60

Browse files
RIP21RIP21
committed
chore: added playwright test
chore: changed from react-scrips to vite for demo chore: added GH workflow chore: using tsup for building library now chore: migrated to pnpm from yarn fix: fixed typings and broken tsc run
1 parent 5db3acc commit b544f60

32 files changed

+2626
-11920
lines changed

‎.github/workflows/playwright.yml

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: Playwright Tests
2+
on:
3+
push:
4+
branches: [ master ]
5+
pull_request:
6+
branches: [ master ]
7+
jobs:
8+
test:
9+
timeout-minutes: 10
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v2
13+
- uses: actions/setup-node@v2
14+
with:
15+
node-version: '14.x'
16+
- name: Install dependencies
17+
run: pnpm install
18+
19+
- name: Install Playwright Browsers
20+
run: npx playwright install --with-deps
21+
22+
- name: Run unit tests
23+
run: pnpm test
24+
25+
- name: Run tsc
26+
run: pnpm tsc
27+
28+
- name: Run Playwright tests
29+
run: pnpm test:e2e
30+
31+
- uses: actions/upload-artifact@v2
32+
if: always()
33+
with:
34+
name: playwright-report
35+
path: playwright-report/
36+
retention-days: 5
37+

‎.gitignore

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,8 @@ node_modules
2222
npm-debug.log*
2323
yarn-debug.log*
2424
yarn-error.log*
25-
.idea
25+
.idea
26+
/test-results/
27+
/playwright-report/
28+
/playwright/.cache/
29+
dist

‎.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
auto-install-peers=true

‎.pnpmfile.cjs

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
"use strict"
2+
3+
/**
4+
* When using the PNPM package manager, you can use pnpmfile.js to workaround
5+
* dependencies that have mistakes in their package.json file. (This feature is
6+
* functionally similar to Yarn's "resolutions".)
7+
*
8+
* For details, see the PNPM documentation:
9+
* https://pnpm.js.org/docs/en/hooks.html
10+
*
11+
* IMPORTANT: SINCE THIS FILE CONTAINS EXECUTABLE CODE, MODIFYING IT IS LIKELY TO INVALIDATE
12+
* ANY CACHED DEPENDENCY ANALYSIS. After any modification to pnpmfile.js, it's recommended to run
13+
* "rush update --full" so that PNPM will recalculate all version selections.
14+
* Or `pnpm install --fix-lockfile` for non Rush projects
15+
*/
16+
module.exports = {
17+
hooks: {
18+
readPackage,
19+
},
20+
}
21+
22+
/**
23+
* This hook is invoked during installation before a package's dependencies
24+
* are selected.
25+
* The `packageJson` parameter is the deserialized package.json
26+
* contents for the package that is about to be installed.
27+
* The `context` parameter provides a log() function.
28+
* The return value is the updated object.
29+
*/
30+
31+
const TYPES = {
32+
PEER: "peerDependencies",
33+
DEPS: "dependencies",
34+
}
35+
36+
const prettyType = (type) => (type === TYPES.DEPS ? "dependency" : "peerDependency")
37+
38+
function readPackage(packageJson, context) {
39+
function removeGlobal(type, name, noLog) {
40+
if (packageJson[type] && packageJson[type][name]) {
41+
!noLog &&
42+
context.log(`Removed "${name}" ${prettyType(type)} for ${packageJson.name}`)
43+
delete packageJson[type][name]
44+
}
45+
}
46+
47+
function changeGlobal(type, name, ver, noLog) {
48+
if (packageJson[type] && packageJson[type][name]) {
49+
const originalVersion = packageJson[type][name]
50+
if (originalVersion !== ver) {
51+
!noLog &&
52+
context.log(
53+
`Changed "${name}" ${prettyType(
54+
type,
55+
)} from ${originalVersion} to ${ver} for ${packageJson.name}`,
56+
)
57+
packageJson[type][name] = ver
58+
}
59+
}
60+
}
61+
62+
function add(type, forPackage, dep, ver, noLog) {
63+
if (packageJson.name === forPackage) {
64+
if (!packageJson[type]) {
65+
packageJson[type] = {}
66+
}
67+
!noLog && context.log(`Added "${dep}" ${prettyType(type)} for ${packageJson.name}`)
68+
packageJson[type][dep] = ver
69+
}
70+
}
71+
72+
function remove(type, forPackage, dep, noLog) {
73+
if (packageJson.name === forPackage && !packageJson?.[type]?.[dep]) {
74+
context.log(
75+
`No ${type} "${dep}" in the package ${forPackage} to remove it. You sure about it?`,
76+
)
77+
} else if (packageJson.name === forPackage) {
78+
!noLog && context.log(`Removed "${dep}" dependency for "${packageJson.name}"`)
79+
delete packageJson[type][dep]
80+
}
81+
}
82+
83+
function change(type, forPackage, dep, ver, noLog) {
84+
if (packageJson.name === forPackage && packageJson[type]) {
85+
if (!packageJson[type][dep]) {
86+
context.log(
87+
`No such ${type} in the package ${forPackage} to change it. You sure about it?`,
88+
)
89+
} else if (packageJson.name === forPackage) {
90+
const originalVersion = packageJson[type][dep]
91+
if (originalVersion !== ver) {
92+
!noLog &&
93+
context.log(
94+
`Changed "${dep}" ${prettyType(
95+
type,
96+
)} from ${originalVersion} to ${ver} for ${packageJson.name}`,
97+
)
98+
packageJson[type][dep] = ver
99+
}
100+
}
101+
}
102+
}
103+
104+
change(TYPES.PEER, "vitest-dom", "vitest", "<1", true)
105+
106+
return packageJson
107+
}

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,7 @@ Here is how you do it. It requires mock of certain browser pieces to work, but t
301301
```tsx
302302
import { act, render, screen } from "@testing-library/react";
303303
import { useState } from "react";
304-
import { SimpleMdeReact } from "SimpleMdeReact";
304+
import { SimpleMdeReact } from "react-simplemde-editor";
305305
import userEvent from "@testing-library/user-event";
306306

307307
// @ts-ignore

‎public/favicon.ico renamed to ‎favicon.ico

File renamed without changes.

‎imports.d.ts

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎public/index.html renamed to ‎index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
manifest.json provides metadata used when your web app is added to the
99
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
1010
-->
11-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
11+
<link rel="shortcut icon" href="/favicon.ico">
1212
<title>react-simplemde-editor demo</title>
1313
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
1414

@@ -35,6 +35,7 @@
3535
<span id="forkongithub"><a href="https://github.com/RIP21/react-simplemde-editor">View the code</a></span>
3636
<div class='container'>
3737
<div id="root"></div>
38+
<script type="module" src="/src/index.tsx"></script>
3839
</div>
3940
</body>
40-
</html>
41+
</html>

‎package.json

Lines changed: 31 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -12,75 +12,51 @@
1212
}
1313
],
1414
"license": "MIT",
15-
"main": "lib/index.js",
16-
"typings": "typings/SimpleMdeReact.d.ts",
15+
"main": "dist/SimpleMdeReact.js",
16+
"module": "dist/SimpleMdeReact.mjs",
17+
"typings": "dist/SimpleMdeReact.d.ts",
1718
"files": [
1819
"lib",
1920
"typings",
2021
"src"
2122
],
23+
"scripts": {
24+
"build:lib": "tsup ./src/SimpleMdeReact.tsx",
25+
"prepare": "pnpm build:lib",
26+
"demo": "vite",
27+
"build:demo": "vite build",
28+
"test": "vitest",
29+
"test:e2e": "playwright test",
30+
"test:e2e:debug": "playwright test --debug",
31+
"tsc": "tsc"
32+
},
2233
"dependencies": {
23-
"@types/codemirror": "^5.60.5"
34+
"@types/codemirror": "~5.60.5"
2435
},
2536
"peerDependencies": {
2637
"easymde": ">= 2.0.0 < 3.0.0",
2738
"react": ">=16.8.2",
2839
"react-dom": ">=16.8.2"
2940
},
3041
"devDependencies": {
31-
"@babel/cli": "^7.13.16",
32-
"@babel/preset-typescript": "^7.13.0",
33-
"@babel/runtime": "^7.14.0",
34-
"@testing-library/jest-dom": "^5.12.0",
35-
"@testing-library/react": "^11.2.6",
36-
"@testing-library/user-event": "^13.1.8",
37-
"@types/codemirror": "^5.60.5",
38-
"@types/jest": "^26.0.23",
39-
"@types/node": "^12.20.11",
40-
"@types/react": "^17.0.4",
41-
"@types/react-dom": "^17.0.3",
42-
"easymde": "^2.0.0",
43-
"prettier": "^2.2.1",
42+
"@playwright-testing-library/test": "~4.5.0",
43+
"@playwright/test": "~1.26.1",
44+
"@testing-library/react": "~12.1.5",
45+
"@testing-library/user-event": "~14.4.3",
46+
"@types/codemirror": "~5.60.5",
47+
"@types/node": "~16.11.62",
48+
"@types/react": "~17.0.50",
49+
"@types/react-dom": "~17.0.11",
50+
"easymde": "~2.18.0",
51+
"happy-dom": "~6.0.4",
52+
"jsdom": "~20.0.0",
53+
"prettier": "~2.7.1",
4454
"react": "17.0.2",
4555
"react-dom": "17.0.2",
46-
"react-scripts": "^4.0.3",
47-
"typescript": "^4.2.4"
48-
},
49-
"scripts": {
50-
"prebuild:lib": "tsc -p tsconfig.lib.json",
51-
"build:lib": "NODE_ENV=production babel src/SimpleMdeReact.tsx --out-file lib/index.js --source-maps --extensions \".js\",\".jsx\",\".ts\",\".tsx\"",
52-
"prepare": "yarn build:lib",
53-
"demo": "react-scripts start",
54-
"build:demo": "react-scripts build",
55-
"test": "react-scripts test"
56-
},
57-
"eslintConfig": {
58-
"extends": [
59-
"react-app"
60-
]
61-
},
62-
"babel": {
63-
"presets": [
64-
[
65-
"babel-preset-react-app",
66-
{
67-
"useESModules": false,
68-
"absoluteRuntime": false,
69-
"typescript": true
70-
}
71-
]
72-
]
73-
},
74-
"browserslist": {
75-
"production": [
76-
">0.2%",
77-
"not dead",
78-
"not op_mini all"
79-
],
80-
"development": [
81-
"last 1 chrome version",
82-
"last 1 firefox version",
83-
"last 1 safari version"
84-
]
56+
"tsup": "~6.2.3",
57+
"typescript": "~4.8.4",
58+
"vite": "~3.1.4",
59+
"vitest": "0.23.4",
60+
"vitest-dom": "~0.0.4"
8561
}
8662
}

0 commit comments

Comments
 (0)