Added browser tests and set up esbuild for tests running

This commit is contained in:
Dmitriy Shishkov 2021-08-04 15:03:21 +03:00
parent 460d58d4d6
commit 91f976326a
No known key found for this signature in database
GPG Key ID: 14358F96FCDD8060
4 changed files with 81 additions and 3 deletions

View File

@ -1,6 +1,6 @@
{ {
"transform": { "transform": {
"^.+\\.(t|j)sx?$": "ts-jest" "^.+\\.(t|j)sx?$": "esbuild-jest"
}, },
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$", "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
"moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"] "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"]

View File

@ -8,6 +8,7 @@
"./lib/**/*" "./lib/**/*"
], ],
"scripts": { "scripts": {
"test:browser": "npm run build && cp ./src/__tests__/index.html ./lib/ && bash -c 'for module in \".\\/cache\" \".\\/types\" \".\\/utils\"; do sed -i \"s/$module/$module.js/g\" ./lib/index.js; done' && serve -s lib",
"build": "tsc", "build": "tsc",
"test": "jest --config jestconfig.json --passWithNoTests", "test": "jest --config jestconfig.json --passWithNoTests",
"prepare": "npm run build", "prepare": "npm run build",
@ -32,8 +33,9 @@
"homepage": "https://github.com/dm1sh/html-pagination#readme", "homepage": "https://github.com/dm1sh/html-pagination#readme",
"devDependencies": { "devDependencies": {
"@types/jest": "^26.0.24", "@types/jest": "^26.0.24",
"esbuild": "^0.12.17",
"esbuild-jest": "^0.5.0",
"jest": "^27.0.6", "jest": "^27.0.6",
"ts-jest": "^27.0.4",
"typescript": "^4.3.5" "typescript": "^4.3.5"
} }
} }

75
src/__tests__/index.html Normal file
View File

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
* {
padding: 0;
margin: 0;
}
#content {
display: none;
}
.appContainer {
height: 200px;
width: 200px;
display: flex;
border: 1px black solid;
}
#container {
overflow: auto;
}
</style>
<div id="content">
<div>
<h1>Hello, my dear friend</h1>
<p>
You can run npm list -g to see which global libraries are installed
and where they're located. Use npm list -g | head -1 for truncated
output showing just the path. If you want to display only main
packages not its sub-packages which installs along with it - you can
use - npm list --depth=0 which will show all packages and for getting
only globally installed packages, just add -g i.e. npm list -g
--depth=0.
</p>
</div>
</div>
<div class="appContainer">
<div id="container"></div>
</div>
<script type="module">
import { HTMLPagination } from "./index.js";
const content = document.getElementById("content");
const container = document.getElementById("container");
class ci {
g(key) {
localStorage.setItem("book" + key);
}
s(key, value) {
localStorage.getItem("book" + key, value);
}
}
const pg = new HTMLPagination(content, container, ci);
const r = async (prev) => {
try {
const res = pg.getPageBreak(prev, 100);
await setTimeout(() => r(res), 1000);
} catch (e) {
r(0);
}
};
r(0);
</script>
</body>
</html>

View File

@ -1,7 +1,8 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"module": "commonjs", "module": "ESNext",
"moduleResolution": "node",
"declaration": true, "declaration": true,
"outDir": "./lib", "outDir": "./lib",
"strict": true "strict": true