migrate to jest (#721)
* migrate rrweb-snapshot tests to jest * migrate rrweb tests to jest
This commit is contained in:
yz-yu
6
packages/rrweb-snapshot/jest.config.js
Normal file
6
packages/rrweb-snapshot/jest.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
|
||||
module.exports = {
|
||||
preset: 'ts-jest',
|
||||
testEnvironment: 'node',
|
||||
testMatch: ['**/**.test.ts'],
|
||||
};
|
||||
@@ -5,7 +5,7 @@
|
||||
"scripts": {
|
||||
"prepare": "npm run prepack",
|
||||
"prepack": "npm run bundle && npm run typings",
|
||||
"test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
|
||||
"test": "jest",
|
||||
"bundle": "rollup --config",
|
||||
"bundle:es-only": "cross-env ES_ONLY=true rollup --config",
|
||||
"typings": "tsc -d --declarationDir typings",
|
||||
@@ -39,18 +39,18 @@
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-typescript": "^8.2.5",
|
||||
"@types/chai": "^4.1.4",
|
||||
"@types/jest": "^27.0.2",
|
||||
"@types/jsdom": "^16.2.4",
|
||||
"@types/mocha": "^5.2.5",
|
||||
"@types/node": "^10.11.3",
|
||||
"@types/puppeteer": "^1.12.4",
|
||||
"chai": "^4.1.2",
|
||||
"cross-env": "^5.2.0",
|
||||
"jest": "^27.2.4",
|
||||
"jest-snapshot": "^23.6.0",
|
||||
"jsdom": "^16.4.0",
|
||||
"mocha": "^5.2.0",
|
||||
"puppeteer": "^1.15.0",
|
||||
"rollup": "^2.45.2",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"ts-jest": "^27.0.5",
|
||||
"ts-node": "^7.0.1",
|
||||
"tslib": "^1.9.3",
|
||||
"tslint": "^4.5.1",
|
||||
|
||||
21
packages/rrweb-snapshot/test.d.ts
vendored
21
packages/rrweb-snapshot/test.d.ts
vendored
@@ -1,21 +0,0 @@
|
||||
declare module 'rollup-plugin-typescript' {
|
||||
function typescript(): any;
|
||||
export = typescript;
|
||||
}
|
||||
|
||||
declare module 'jest-snapshot' {
|
||||
export class SnapshotState {
|
||||
constructor(testFile: string, options: any);
|
||||
|
||||
save(): any;
|
||||
}
|
||||
type matchResult = {
|
||||
pass: boolean;
|
||||
report(): string;
|
||||
};
|
||||
export function toMatchSnapshot(
|
||||
received: any,
|
||||
propertyMatchers?: any,
|
||||
testName?: string,
|
||||
): matchResult;
|
||||
}
|
||||
@@ -1,344 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`[html file]: about-mozilla.html 1`] = `
|
||||
"<!DOCTYPE html><html><head>
|
||||
<title>The Book of Mozilla, 11:9</title>
|
||||
<style type=\\"text/css\\">
|
||||
html {
|
||||
background: maroon;
|
||||
color: white;
|
||||
font-style: italic;
|
||||
} #moztext {
|
||||
margin-top: 15%;
|
||||
font-size: 1.1em;
|
||||
font-family: serif;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
} #from {
|
||||
font-size: 1.95em;
|
||||
font-family: serif;
|
||||
text-align: right;
|
||||
} em {
|
||||
font-size: 1.3em;
|
||||
line-height: 0;
|
||||
} a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head><body> <p id=\\"moztext\\">
|
||||
Mammon slept. And the <em>beast reborn</em> spread over the earth and its numbers
|
||||
grew legion. And they proclaimed the times and <em>sacrificed</em> crops unto the
|
||||
fire, with the <em>cunning of foxes</em>. And they built a new world in their own
|
||||
image as promised by the <em><a href=\\"http://www.mozilla.org/about/mozilla-manifesto.html\\">
|
||||
sacred words</a></em>, and <em><a href=\\"http://wiki.mozilla.org/About:mozilla\\">spoke
|
||||
</a></em> of the beast with their children. Mammon awoke, and lo! it was
|
||||
<em>naught</em> but a follower.
|
||||
</p> <p id=\\"from\\">
|
||||
from <strong>The Book of Mozilla,</strong> 11:9<br /><small>(10th Edition)</small>
|
||||
</p></body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: basic.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>Document</title>
|
||||
</head><body>
|
||||
<h1>Title</h1></body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: block-element.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.big {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.small {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head> <body>
|
||||
<div class=\\"rr-block big\\" style=\\"width: 50px; height: 50px;\\"></div>
|
||||
<div>record 2</div>
|
||||
<div class=\\"rr-block small\\" style=\\"width: 50px; height: 100px;\\"></div>
|
||||
<div class=\\"rr-block\\" style=\\"width: 100px; height: 200px;\\"></div>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: compat-mode.html 1`] = `
|
||||
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><!-- no doctype! --><html><head>
|
||||
<title>Compat Mode; image resizing</title>
|
||||
</head>
|
||||
<body>
|
||||
<center>
|
||||
<a href=\\"http://localhost:3030/html#\\" class=\\"should-be-square-shaped\\">
|
||||
<img width=\\"40%\\" height=\\"35%\\" src=\\"http://localhost:3030/images/compat-top-left.png\\" />
|
||||
<img width=\\"40%\\" height=\\"35%\\" src=\\"http://localhost:3030/images/compat-top-right.png\\" />
|
||||
<br /><img width=\\"80%\\" height=\\"20%\\" src=\\"http://localhost:3030/images/compat-bottom.png\\" /></a>
|
||||
</center>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: cors-style-sheet.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>with style sheet</title>
|
||||
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css\\" />
|
||||
<link rel=\\"stylesheet\\" href=\\"\\" />
|
||||
</head>
|
||||
<body></body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: dynamic-stylesheet.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>dynamic stylesheet</title>
|
||||
<style>body { margin: 0px; }p { background: lightpink; }</style>
|
||||
<noscript>SCRIPT_PLACEHOLDER</noscript>
|
||||
</head>
|
||||
<body>
|
||||
<p>p tag</p>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: form-fields.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>form fields</title>
|
||||
</head> <body>
|
||||
<form>
|
||||
<label for=\\"text\\">
|
||||
<input type=\\"text\\" value=\\"1\\" />
|
||||
</label>
|
||||
<label for=\\"radio\\">
|
||||
<input type=\\"radio\\" checked=\\"\\" />
|
||||
</label>
|
||||
<label for=\\"checkbox\\">
|
||||
<input type=\\"checkbox\\" checked=\\"\\" />
|
||||
</label>
|
||||
<label for=\\"textarea\\">
|
||||
<textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\">1234</textarea>
|
||||
</label>
|
||||
<label for=\\"select\\">
|
||||
<select name=\\"\\" id=\\"\\" value=\\"2\\">
|
||||
<option value=\\"1\\">1</option>
|
||||
<option value=\\"2\\" selected=\\"\\">2</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<input name=\\"tagName\\" />
|
||||
</label>
|
||||
</form>
|
||||
|
||||
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: hover.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>hover selector</title>
|
||||
<style> div:hover, div.\\\\:hover {
|
||||
background: orange;
|
||||
} div:hover::after, div.\\\\:hover::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
content: 'dropdown';
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<div>hover me</div>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: iframe.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>iframe</title>
|
||||
</head>
|
||||
<body>
|
||||
<iframe width=\\"100\\" height=\\"50\\"></iframe>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: iframe-inner.html 1`] = `
|
||||
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html><head></head><body><button>inner iframe button</button>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: invalid-attribute.html 1`] = `
|
||||
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html foo=\\"bar\\"><head></head><body>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: invalid-doctype.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<title>Invalid Doctype</title>
|
||||
</head>
|
||||
<body></body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: invalid-tagname.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>Hello</div>
|
||||
<div>Hello</div>
|
||||
<div></div>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: mask-text.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>Document</title>
|
||||
</head> <body>
|
||||
<p class=\\"rr-mask\\">**** *</p>
|
||||
<div class=\\"rr-mask\\">
|
||||
<span>**** *</span>
|
||||
</div>
|
||||
<div class=\\"rr-mask\\">**** *</div>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: picture.html 1`] = `
|
||||
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\"><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
|
||||
<picture>
|
||||
<source type=\\"image/webp\\" srcset=\\"http://localhost:3030/assets/img/characters/robot.webp\\" />
|
||||
<img src=\\"http://localhost:3030/assets/img/characters/robot.png\\" />
|
||||
</picture>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: preload.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<title>Document</title>
|
||||
<link />
|
||||
<link />
|
||||
</head>
|
||||
<body></body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: shadow-dom.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<title>shadow DOM</title>
|
||||
</head>
|
||||
<body>
|
||||
<fancy-tabs background=\\"\\" role=\\"tablist\\" selected=\\"1\\">
|
||||
<button slot=\\"title\\" role=\\"tab\\" tabindex=\\"-1\\" aria-selected=\\"false\\">Tab 1</button>
|
||||
<button slot=\\"title\\" selected=\\"\\" role=\\"tab\\" tabindex=\\"0\\" aria-selected=\\"true\\">Tab 2</button>
|
||||
<button slot=\\"title\\" role=\\"tab\\" tabindex=\\"-1\\" aria-selected=\\"false\\">Tab 3</button>
|
||||
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"true\\">content panel 1</section>
|
||||
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"false\\">content panel 2</section>
|
||||
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"true\\">content panel 3</section>
|
||||
</fancy-tabs>
|
||||
<noscript>SCRIPT_PLACEHOLDER</noscript>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: video.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>video</title>
|
||||
</head>
|
||||
<body>
|
||||
<video controls=\\"\\">
|
||||
<source src=\\"http://techslides.com/demos/sample-videos/small.webm\\" type=\\"video/webm\\" /> <source src=\\"http://techslides.com/demos/sample-videos/small.ogv\\" type=\\"video/ogg\\" />
|
||||
<source src=\\"http://techslides.com/demos/sample-videos/small.mp4\\" type=\\"video/mp4\\" /> <source src=\\"http://techslides.com/demos/sample-videos/small.3gp\\" type=\\"video/3gp\\" />
|
||||
</video>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: with-relative-res.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<a href=\\"http://localhost:3030/basic.html\\"></a>
|
||||
<div>Hello</div>
|
||||
<alt34>Hello</alt34>
|
||||
<div>Hello</div>
|
||||
<div></div>
|
||||
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" />
|
||||
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg\\" />
|
||||
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://exmple.com/a.jpg\\" />
|
||||
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg 3x, http://localhost:3030/a.jpg 45x, http://localhost:3030/b.png\\" />
|
||||
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/300,400/a.jpg 300w, http://localhost:3030/b.png\\" /></body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: with-script.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>with script</title>
|
||||
</head><body>
|
||||
<noscript src=\\"http://localhost:3030/js/a.js\\"></noscript>
|
||||
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: with-style-sheet.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>with style sheet</title>
|
||||
<style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,<svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"><g><g><polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/></g></g></svg>\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body > p { color: yellow; }</style>
|
||||
</head><body>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`[html file]: with-style-sheet-with-import.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>with style sheet with import</title>
|
||||
<style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,<svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"><g><g><polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/></g></g></svg>\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body > p { color: yellow; }</style>
|
||||
</head><body>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`iframe integration tests 1`] = `
|
||||
exports[`iframe integration tests snapshot async iframes 1`] = `
|
||||
"{
|
||||
\\"type\\": 0,
|
||||
\\"childNodes\\": [
|
||||
@@ -470,7 +132,345 @@ exports[`iframe integration tests 1`] = `
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`shadow DOM integration tests 1`] = `
|
||||
exports[`integration tests [html file]: about-mozilla.html 1`] = `
|
||||
"<!DOCTYPE html><html><head>
|
||||
<title>The Book of Mozilla, 11:9</title>
|
||||
<style type=\\"text/css\\">
|
||||
html {
|
||||
background: maroon;
|
||||
color: white;
|
||||
font-style: italic;
|
||||
} #moztext {
|
||||
margin-top: 15%;
|
||||
font-size: 1.1em;
|
||||
font-family: serif;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
} #from {
|
||||
font-size: 1.95em;
|
||||
font-family: serif;
|
||||
text-align: right;
|
||||
} em {
|
||||
font-size: 1.3em;
|
||||
line-height: 0;
|
||||
} a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head><body> <p id=\\"moztext\\">
|
||||
Mammon slept. And the <em>beast reborn</em> spread over the earth and its numbers
|
||||
grew legion. And they proclaimed the times and <em>sacrificed</em> crops unto the
|
||||
fire, with the <em>cunning of foxes</em>. And they built a new world in their own
|
||||
image as promised by the <em><a href=\\"http://www.mozilla.org/about/mozilla-manifesto.html\\">
|
||||
sacred words</a></em>, and <em><a href=\\"http://wiki.mozilla.org/About:mozilla\\">spoke
|
||||
</a></em> of the beast with their children. Mammon awoke, and lo! it was
|
||||
<em>naught</em> but a follower.
|
||||
</p> <p id=\\"from\\">
|
||||
from <strong>The Book of Mozilla,</strong> 11:9<br /><small>(10th Edition)</small>
|
||||
</p></body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: basic.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>Document</title>
|
||||
</head><body>
|
||||
<h1>Title</h1></body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: block-element.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.big {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.small {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head> <body>
|
||||
<div class=\\"rr-block big\\" style=\\"width: 50px; height: 50px;\\"></div>
|
||||
<div>record 2</div>
|
||||
<div class=\\"rr-block small\\" style=\\"width: 50px; height: 100px;\\"></div>
|
||||
<div class=\\"rr-block\\" style=\\"width: 100px; height: 200px;\\"></div>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: compat-mode.html 1`] = `
|
||||
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><!-- no doctype! --><html><head>
|
||||
<title>Compat Mode; image resizing</title>
|
||||
</head>
|
||||
<body>
|
||||
<center>
|
||||
<a href=\\"http://localhost:3030/html#\\" class=\\"should-be-square-shaped\\">
|
||||
<img width=\\"40%\\" height=\\"35%\\" src=\\"http://localhost:3030/images/compat-top-left.png\\" />
|
||||
<img width=\\"40%\\" height=\\"35%\\" src=\\"http://localhost:3030/images/compat-top-right.png\\" />
|
||||
<br /><img width=\\"80%\\" height=\\"20%\\" src=\\"http://localhost:3030/images/compat-bottom.png\\" /></a>
|
||||
</center>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: cors-style-sheet.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>with style sheet</title>
|
||||
<link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css\\" />
|
||||
<link rel=\\"stylesheet\\" href=\\"\\" />
|
||||
</head>
|
||||
<body></body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: dynamic-stylesheet.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>dynamic stylesheet</title>
|
||||
<style>body { margin: 0px; }p { background: lightpink; }</style>
|
||||
<noscript>SCRIPT_PLACEHOLDER</noscript>
|
||||
</head>
|
||||
<body>
|
||||
<p>p tag</p>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: form-fields.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>form fields</title>
|
||||
</head> <body>
|
||||
<form>
|
||||
<label for=\\"text\\">
|
||||
<input type=\\"text\\" value=\\"1\\" />
|
||||
</label>
|
||||
<label for=\\"radio\\">
|
||||
<input type=\\"radio\\" checked=\\"\\" />
|
||||
</label>
|
||||
<label for=\\"checkbox\\">
|
||||
<input type=\\"checkbox\\" checked=\\"\\" />
|
||||
</label>
|
||||
<label for=\\"textarea\\">
|
||||
<textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\">1234</textarea>
|
||||
</label>
|
||||
<label for=\\"select\\">
|
||||
<select name=\\"\\" id=\\"\\" value=\\"2\\">
|
||||
<option value=\\"1\\">1</option>
|
||||
<option value=\\"2\\" selected=\\"\\">2</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<input name=\\"tagName\\" />
|
||||
</label>
|
||||
</form>
|
||||
|
||||
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: hover.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>hover selector</title>
|
||||
<style> div:hover, div.\\\\:hover {
|
||||
background: orange;
|
||||
} div:hover::after, div.\\\\:hover::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
content: 'dropdown';
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<div>hover me</div>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: iframe.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>iframe</title>
|
||||
</head>
|
||||
<body>
|
||||
<iframe width=\\"100\\" height=\\"50\\"></iframe>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: iframe-inner.html 1`] = `
|
||||
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html><head></head><body><button>inner iframe button</button>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: invalid-attribute.html 1`] = `
|
||||
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html foo=\\"bar\\"><head></head><body>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: invalid-doctype.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<title>Invalid Doctype</title>
|
||||
</head>
|
||||
<body></body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: invalid-tagname.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>Hello</div>
|
||||
<div>Hello</div>
|
||||
<div></div>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: mask-text.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>Document</title>
|
||||
</head> <body>
|
||||
<p class=\\"rr-mask\\">**** *</p>
|
||||
<div class=\\"rr-mask\\">
|
||||
<span>**** *</span>
|
||||
</div>
|
||||
<div class=\\"rr-mask\\">**** *</div>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: picture.html 1`] = `
|
||||
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\"><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
|
||||
<picture>
|
||||
<source type=\\"image/webp\\" srcset=\\"http://localhost:3030/assets/img/characters/robot.webp\\" />
|
||||
<img src=\\"http://localhost:3030/assets/img/characters/robot.png\\" />
|
||||
</picture>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: preload.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<title>Document</title>
|
||||
<link />
|
||||
<link />
|
||||
</head>
|
||||
<body></body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: shadow-dom.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<title>shadow DOM</title>
|
||||
</head>
|
||||
<body>
|
||||
<fancy-tabs background=\\"\\" role=\\"tablist\\" selected=\\"1\\">
|
||||
<button slot=\\"title\\" role=\\"tab\\" tabindex=\\"-1\\" aria-selected=\\"false\\">Tab 1</button>
|
||||
<button slot=\\"title\\" selected=\\"\\" role=\\"tab\\" tabindex=\\"0\\" aria-selected=\\"true\\">Tab 2</button>
|
||||
<button slot=\\"title\\" role=\\"tab\\" tabindex=\\"-1\\" aria-selected=\\"false\\">Tab 3</button>
|
||||
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"true\\">content panel 1</section>
|
||||
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"false\\">content panel 2</section>
|
||||
<section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"true\\">content panel 3</section>
|
||||
</fancy-tabs>
|
||||
<noscript>SCRIPT_PLACEHOLDER</noscript>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: video.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>video</title>
|
||||
</head>
|
||||
<body>
|
||||
<video controls=\\"\\">
|
||||
<source src=\\"http://techslides.com/demos/sample-videos/small.webm\\" type=\\"video/webm\\" /> <source src=\\"http://techslides.com/demos/sample-videos/small.ogv\\" type=\\"video/ogg\\" />
|
||||
<source src=\\"http://techslides.com/demos/sample-videos/small.mp4\\" type=\\"video/mp4\\" /> <source src=\\"http://techslides.com/demos/sample-videos/small.3gp\\" type=\\"video/3gp\\" />
|
||||
</video>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: with-relative-res.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<a href=\\"http://localhost:3030/basic.html\\"></a>
|
||||
<div>Hello</div>
|
||||
<alt34>Hello</alt34>
|
||||
<div>Hello</div>
|
||||
<div></div>
|
||||
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" />
|
||||
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg\\" />
|
||||
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://exmple.com/a.jpg\\" />
|
||||
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg 3x, http://localhost:3030/a.jpg 45x, http://localhost:3030/b.png\\" />
|
||||
<img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/300,400/a.jpg 300w, http://localhost:3030/b.png\\" /></body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: with-script.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>with script</title>
|
||||
</head><body>
|
||||
<noscript src=\\"http://localhost:3030/js/a.js\\"></noscript>
|
||||
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: with-style-sheet.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>with style sheet</title>
|
||||
<style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,<svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"><g><g><polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/></g></g></svg>\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body > p { color: yellow; }</style>
|
||||
</head><body>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`integration tests [html file]: with-style-sheet-with-import.html 1`] = `
|
||||
"<!DOCTYPE html><html lang=\\"en\\"><head>
|
||||
<meta charset=\\"UTF-8\\" />
|
||||
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
|
||||
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
|
||||
<title>with style sheet with import</title>
|
||||
<style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,<svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"><g><g><polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/></g></g></svg>\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body > p { color: yellow; }</style>
|
||||
</head><body>
|
||||
</body></html>"
|
||||
`;
|
||||
|
||||
exports[`shadow DOM integration tests snapshot shadow DOM 1`] = `
|
||||
"{
|
||||
\\"type\\": 0,
|
||||
\\"childNodes\\": [
|
||||
@@ -1,5 +1,3 @@
|
||||
import 'mocha';
|
||||
import { expect } from 'chai';
|
||||
import { parse, Rule, Media } from '../src/css';
|
||||
|
||||
describe('css parser', () => {
|
||||
@@ -9,50 +7,50 @@ describe('css parser', () => {
|
||||
source: 'booty.css',
|
||||
});
|
||||
|
||||
expect(ast.stylesheet!.source).to.equal('booty.css');
|
||||
expect(ast.stylesheet!.source).toEqual('booty.css');
|
||||
|
||||
const position = ast.stylesheet!.rules[0].position!;
|
||||
expect(position.start).to.be.ok;
|
||||
expect(position.end).to.be.ok;
|
||||
expect(position.source).to.equal('booty.css');
|
||||
expect(position.content).to.equal(css);
|
||||
expect(position.start).toBeTruthy();
|
||||
expect(position.end).toBeTruthy();
|
||||
expect(position.source).toEqual('booty.css');
|
||||
expect(position.content).toEqual(css);
|
||||
});
|
||||
|
||||
it('should throw when a selector is missing', () => {
|
||||
expect(() => {
|
||||
parse('{size: large}');
|
||||
}).to.throw();
|
||||
}).toThrow();
|
||||
|
||||
expect(() => {
|
||||
parse('b { color: red; }\n{ color: green; }\na { color: blue; }');
|
||||
}).to.throw();
|
||||
}).toThrow();
|
||||
});
|
||||
|
||||
it('should throw when a broken comment is found', () => {
|
||||
expect(() => {
|
||||
parse('thing { color: red; } /* b { color: blue; }');
|
||||
}).to.throw();
|
||||
}).toThrow();
|
||||
|
||||
expect(() => {
|
||||
parse('/*');
|
||||
}).to.throw();
|
||||
}).toThrow();
|
||||
|
||||
/* Nested comments should be fine */
|
||||
expect(() => {
|
||||
parse('/* /* */');
|
||||
}).to.not.throw();
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('should allow empty property value', () => {
|
||||
expect(() => {
|
||||
parse('p { color:; }');
|
||||
}).to.not.throw();
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('should not throw with silent option', () => {
|
||||
expect(() => {
|
||||
parse('thing { color: red; } /* b { color: blue; }', { silent: true });
|
||||
}).to.not.throw();
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('should list the parsing errors and continue parsing', () => {
|
||||
@@ -65,18 +63,18 @@ describe('css parser', () => {
|
||||
);
|
||||
|
||||
const rules = result.stylesheet!.rules;
|
||||
expect(rules.length).to.above(2);
|
||||
expect(rules.length).toBeGreaterThan(2);
|
||||
|
||||
const errors = result.stylesheet!.parsingErrors!;
|
||||
expect(errors.length).to.equal(2);
|
||||
expect(errors.length).toEqual(2);
|
||||
|
||||
expect(errors[0]).to.have.property('message');
|
||||
expect(errors[0]).to.have.property('reason');
|
||||
expect(errors[0]).to.have.property('filename');
|
||||
expect(errors[0]).to.have.property('line');
|
||||
expect(errors[0]).to.have.property('column');
|
||||
expect(errors[0]).to.have.property('source');
|
||||
expect(errors[0].filename).to.equal('foo.css');
|
||||
expect(errors[0]).toHaveProperty('message');
|
||||
expect(errors[0]).toHaveProperty('reason');
|
||||
expect(errors[0]).toHaveProperty('filename');
|
||||
expect(errors[0]).toHaveProperty('line');
|
||||
expect(errors[0]).toHaveProperty('column');
|
||||
expect(errors[0]).toHaveProperty('source');
|
||||
expect(errors[0].filename).toEqual('foo.css');
|
||||
});
|
||||
|
||||
it('should set parent property', () => {
|
||||
@@ -85,27 +83,27 @@ describe('css parser', () => {
|
||||
'@media (min-width: 100px) { thing { test: value; } }',
|
||||
);
|
||||
|
||||
expect(result.parent).to.equal(null);
|
||||
expect(result.parent).toEqual(null);
|
||||
|
||||
const rules = result.stylesheet!.rules;
|
||||
expect(rules.length).to.equal(2);
|
||||
expect(rules.length).toEqual(2);
|
||||
|
||||
let rule = rules[0] as Rule;
|
||||
expect(rule.parent).to.equal(result);
|
||||
expect(rule.declarations!.length).to.equal(1);
|
||||
expect(rule.parent).toEqual(result);
|
||||
expect(rule.declarations!.length).toEqual(1);
|
||||
|
||||
let decl = rule.declarations![0];
|
||||
expect(decl.parent).to.equal(rule);
|
||||
expect(decl.parent).toEqual(rule);
|
||||
|
||||
const media = rules[1] as Media;
|
||||
expect(media.parent).to.equal(result);
|
||||
expect(media.rules!.length).to.equal(1);
|
||||
expect(media.parent).toEqual(result);
|
||||
expect(media.rules!.length).toEqual(1);
|
||||
|
||||
rule = media.rules![0] as Rule;
|
||||
expect(rule.parent).to.equal(media);
|
||||
expect(rule.parent).toEqual(media);
|
||||
|
||||
expect(rule.declarations!.length).to.equal(1);
|
||||
expect(rule.declarations!.length).toEqual(1);
|
||||
decl = rule.declarations![0];
|
||||
expect(decl.parent).to.equal(rule);
|
||||
expect(decl.parent).toEqual(rule);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2,13 +2,12 @@ import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as http from 'http';
|
||||
import * as url from 'url';
|
||||
import 'mocha';
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import * as rollup from 'rollup';
|
||||
import typescript = require('rollup-plugin-typescript');
|
||||
import { assert } from 'chai';
|
||||
import { SnapshotState, toMatchSnapshot } from 'jest-snapshot';
|
||||
import { Suite } from 'mocha';
|
||||
import * as typescript from '@rollup/plugin-typescript';
|
||||
import * as assert from 'assert';
|
||||
|
||||
const _typescript = (typescript as unknown) as typeof typescript.default;
|
||||
|
||||
const htmlFolder = path.join(__dirname, 'html');
|
||||
const htmls = fs.readdirSync(htmlFolder).map((filePath) => {
|
||||
@@ -23,7 +22,7 @@ interface IMimeType {
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
const server = () =>
|
||||
const startServer = () =>
|
||||
new Promise<http.Server>((resolve) => {
|
||||
const mimeType: IMimeType = {
|
||||
'.html': 'text/html',
|
||||
@@ -53,49 +52,40 @@ const server = () =>
|
||||
});
|
||||
});
|
||||
|
||||
function matchSnapshot(actual: string, testFile: string, testTitle: string) {
|
||||
const snapshotState = new SnapshotState(testFile, {
|
||||
updateSnapshot: process.env.SNAPSHOT_UPDATE ? 'all' : 'new',
|
||||
});
|
||||
|
||||
const matcher = toMatchSnapshot.bind({
|
||||
snapshotState,
|
||||
currentTestName: testTitle,
|
||||
});
|
||||
const result = matcher(actual);
|
||||
snapshotState.save();
|
||||
return result;
|
||||
}
|
||||
|
||||
interface ISuite extends Suite {
|
||||
interface ISuite {
|
||||
server: http.Server;
|
||||
browser: puppeteer.Browser;
|
||||
code: string;
|
||||
}
|
||||
|
||||
describe('integration tests', function (this: ISuite) {
|
||||
this.timeout(10_000);
|
||||
jest.setTimeout(30_000);
|
||||
let server: ISuite['server'];
|
||||
let browser: ISuite['browser'];
|
||||
let code: ISuite['code'];
|
||||
|
||||
before(async () => {
|
||||
this.server = await server();
|
||||
this.browser = await puppeteer.launch({
|
||||
beforeAll(async () => {
|
||||
server = await startServer();
|
||||
browser = await puppeteer.launch({
|
||||
// headless: false,
|
||||
});
|
||||
|
||||
const bundle = await rollup.rollup({
|
||||
input: path.resolve(__dirname, '../src/index.ts'),
|
||||
plugins: [typescript()],
|
||||
plugins: [_typescript()],
|
||||
});
|
||||
const { code } = await bundle.generate({
|
||||
const {
|
||||
output: [{ code: _code }],
|
||||
} = await bundle.generate({
|
||||
name: 'rrweb',
|
||||
format: 'iife',
|
||||
});
|
||||
this.code = code;
|
||||
code = _code;
|
||||
});
|
||||
|
||||
after(async () => {
|
||||
await this.browser.close();
|
||||
await this.server.close();
|
||||
afterAll(async () => {
|
||||
await browser.close();
|
||||
await server.close();
|
||||
});
|
||||
|
||||
for (const html of htmls) {
|
||||
@@ -104,7 +94,7 @@ describe('integration tests', function (this: ISuite) {
|
||||
}
|
||||
const title = '[html file]: ' + html.filePath;
|
||||
it(title, async () => {
|
||||
const page: puppeteer.Page = await this.browser.newPage();
|
||||
const page: puppeteer.Page = await browser.newPage();
|
||||
// console for debug
|
||||
// tslint:disable-next-line: no-console
|
||||
page.on('console', (msg) => console.log(msg.text()));
|
||||
@@ -115,11 +105,21 @@ describe('integration tests', function (this: ISuite) {
|
||||
waitUntil: 'load',
|
||||
});
|
||||
const outerCompatMode = await page.evaluate('document.compatMode');
|
||||
const innerCompatMode = await page.evaluate('document.querySelector("iframe").contentDocument.compatMode');
|
||||
assert(outerCompatMode === 'CSS1Compat', outerCompatMode + ' for outer iframe.html should be CSS1Compat as it has "<!DOCTYPE html>"');
|
||||
const innerCompatMode = await page.evaluate(
|
||||
'document.querySelector("iframe").contentDocument.compatMode',
|
||||
);
|
||||
assert(
|
||||
outerCompatMode === 'CSS1Compat',
|
||||
outerCompatMode +
|
||||
' for outer iframe.html should be CSS1Compat as it has "<!DOCTYPE html>"',
|
||||
);
|
||||
// inner omits a doctype so gets rendered in backwards compat mode
|
||||
// although this was originally accidental, we'll add a synthetic doctype to the rebuild to recreate this
|
||||
assert(innerCompatMode === 'BackCompat', innerCompatMode + ' for iframe-inner.html should be BackCompat as it lacks "<!DOCTYPE html>"');
|
||||
assert(
|
||||
innerCompatMode === 'BackCompat',
|
||||
innerCompatMode +
|
||||
' for iframe-inner.html should be BackCompat as it lacks "<!DOCTYPE html>"',
|
||||
);
|
||||
} else {
|
||||
// loading indirectly is improtant for relative path testing
|
||||
await page.goto(`http://localhost:3030/html`);
|
||||
@@ -128,7 +128,7 @@ describe('integration tests', function (this: ISuite) {
|
||||
});
|
||||
}
|
||||
const rebuildHtml = (
|
||||
await page.evaluate(`${this.code}
|
||||
await page.evaluate(`${code}
|
||||
const x = new XMLSerializer();
|
||||
const [snap] = rrweb.snapshot(document);
|
||||
let out = x.serializeToString(rrweb.rebuild(snap, { doc: document })[0]);
|
||||
@@ -139,13 +139,12 @@ describe('integration tests', function (this: ISuite) {
|
||||
out; // return
|
||||
`)
|
||||
).replace(/\n\n/g, '');
|
||||
const result = matchSnapshot(rebuildHtml, __filename, title);
|
||||
assert(result.pass, result.pass ? '' : result.report());
|
||||
}).timeout(5000);
|
||||
expect(rebuildHtml).toMatchSnapshot();
|
||||
});
|
||||
}
|
||||
|
||||
it('correctly triggers backCompat mode and rendering', async () => {
|
||||
const page: puppeteer.Page = await this.browser.newPage();
|
||||
const page: puppeteer.Page = await browser.newPage();
|
||||
// console for debug
|
||||
// tslint:disable-next-line: no-console
|
||||
page.on('console', (msg) => console.log(msg.text()));
|
||||
@@ -154,11 +153,20 @@ describe('integration tests', function (this: ISuite) {
|
||||
waitUntil: 'load',
|
||||
});
|
||||
const compatMode = await page.evaluate('document.compatMode');
|
||||
assert(compatMode === 'BackCompat', compatMode + ' for compat-mode.html should be BackCompat as DOCTYPE is deliberately omitted');
|
||||
const renderedHeight = await page.evaluate('document.querySelector("center").clientHeight');
|
||||
assert(
|
||||
compatMode === 'BackCompat',
|
||||
compatMode +
|
||||
' for compat-mode.html should be BackCompat as DOCTYPE is deliberately omitted',
|
||||
);
|
||||
const renderedHeight = await page.evaluate(
|
||||
'document.querySelector("center").clientHeight',
|
||||
);
|
||||
// can remove following assertion if dimensions of page change
|
||||
assert(renderedHeight < 400, `pre-check: images will be rendered ~326px high in BackCompat mode, and ~588px in CSS1Compat mode; getting: ${renderedHeight}px`)
|
||||
const rebuildRenderedHeight = await page.evaluate(`${this.code}
|
||||
assert(
|
||||
renderedHeight < 400,
|
||||
`pre-check: images will be rendered ~326px high in BackCompat mode, and ~588px in CSS1Compat mode; getting: ${renderedHeight}px`,
|
||||
);
|
||||
const rebuildRenderedHeight = await page.evaluate(`${code}
|
||||
const [snap] = rrweb.snapshot(document);
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.setAttribute('width', document.body.clientWidth)
|
||||
@@ -169,39 +177,53 @@ document.body.appendChild(iframe);
|
||||
const rebuildNode = rrweb.rebuild(snap, { doc: iframe.contentDocument })[0];
|
||||
iframe.contentDocument.querySelector('center').clientHeight
|
||||
`);
|
||||
const rebuildCompatMode = await page.evaluate('document.querySelector("iframe").contentDocument.compatMode');
|
||||
assert(rebuildCompatMode === 'BackCompat', 'rebuilt compatMode should match source compatMode, but doesn\'t: ' + rebuildCompatMode);
|
||||
assert(rebuildRenderedHeight === renderedHeight, 'rebuilt height (${rebuildRenderedHeight}) should equal original height (${renderedHeight})')
|
||||
}).timeout(5000);
|
||||
|
||||
const rebuildCompatMode = await page.evaluate(
|
||||
'document.querySelector("iframe").contentDocument.compatMode',
|
||||
);
|
||||
assert(
|
||||
rebuildCompatMode === 'BackCompat',
|
||||
"rebuilt compatMode should match source compatMode, but doesn't: " +
|
||||
rebuildCompatMode,
|
||||
);
|
||||
assert(
|
||||
rebuildRenderedHeight === renderedHeight,
|
||||
'rebuilt height (${rebuildRenderedHeight}) should equal original height (${renderedHeight})',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('iframe integration tests', function (this: ISuite) {
|
||||
jest.setTimeout(30_000);
|
||||
let server: ISuite['server'];
|
||||
let browser: ISuite['browser'];
|
||||
let code: ISuite['code'];
|
||||
|
||||
before(async () => {
|
||||
this.server = await server();
|
||||
this.browser = await puppeteer.launch({
|
||||
beforeAll(async () => {
|
||||
server = await startServer();
|
||||
browser = await puppeteer.launch({
|
||||
// headless: false,
|
||||
});
|
||||
|
||||
const bundle = await rollup.rollup({
|
||||
input: path.resolve(__dirname, '../src/index.ts'),
|
||||
plugins: [typescript()],
|
||||
plugins: [_typescript()],
|
||||
});
|
||||
const { code } = await bundle.generate({
|
||||
const {
|
||||
output: [{ code: _code }],
|
||||
} = await bundle.generate({
|
||||
name: 'rrweb',
|
||||
format: 'iife',
|
||||
});
|
||||
this.code = code;
|
||||
code = _code;
|
||||
});
|
||||
|
||||
after(async () => {
|
||||
await this.browser.close();
|
||||
await this.server.close();
|
||||
afterAll(async () => {
|
||||
await browser.close();
|
||||
await server.close();
|
||||
});
|
||||
|
||||
it('snapshot async iframes', async () => {
|
||||
const page: puppeteer.Page = await this.browser.newPage();
|
||||
const page: puppeteer.Page = await browser.newPage();
|
||||
// console for debug
|
||||
// tslint:disable-next-line: no-console
|
||||
page.on('console', (msg) => console.log(msg.text()));
|
||||
@@ -209,43 +231,48 @@ describe('iframe integration tests', function (this: ISuite) {
|
||||
waitUntil: 'load',
|
||||
});
|
||||
const snapshotResult = JSON.stringify(
|
||||
await page.evaluate(`${this.code};
|
||||
await page.evaluate(`${code};
|
||||
rrweb.snapshot(document)[0];
|
||||
`),
|
||||
null,
|
||||
2,
|
||||
);
|
||||
const result = matchSnapshot(snapshotResult, __filename, this.title);
|
||||
assert(result.pass, result.pass ? '' : result.report());
|
||||
}).timeout(5000);
|
||||
expect(snapshotResult).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('shadow DOM integration tests', function (this: ISuite) {
|
||||
jest.setTimeout(30_000);
|
||||
let server: ISuite['server'];
|
||||
let browser: ISuite['browser'];
|
||||
let code: ISuite['code'];
|
||||
|
||||
before(async () => {
|
||||
this.server = await server();
|
||||
this.browser = await puppeteer.launch({
|
||||
beforeAll(async () => {
|
||||
server = await startServer();
|
||||
browser = await puppeteer.launch({
|
||||
// headless: false,
|
||||
});
|
||||
|
||||
const bundle = await rollup.rollup({
|
||||
input: path.resolve(__dirname, '../src/index.ts'),
|
||||
plugins: [typescript()],
|
||||
plugins: [_typescript()],
|
||||
});
|
||||
const { code } = await bundle.generate({
|
||||
const {
|
||||
output: [{ code: _code }],
|
||||
} = await bundle.generate({
|
||||
name: 'rrweb',
|
||||
format: 'iife',
|
||||
});
|
||||
this.code = code;
|
||||
code = _code;
|
||||
});
|
||||
|
||||
after(async () => {
|
||||
await this.browser.close();
|
||||
await this.server.close();
|
||||
afterAll(async () => {
|
||||
await browser.close();
|
||||
await server.close();
|
||||
});
|
||||
|
||||
it('snapshot shadow DOM', async () => {
|
||||
const page: puppeteer.Page = await this.browser.newPage();
|
||||
const page: puppeteer.Page = await browser.newPage();
|
||||
// console for debug
|
||||
// tslint:disable-next-line: no-console
|
||||
page.on('console', (msg) => console.log(msg.text()));
|
||||
@@ -253,13 +280,12 @@ describe('shadow DOM integration tests', function (this: ISuite) {
|
||||
waitUntil: 'load',
|
||||
});
|
||||
const snapshotResult = JSON.stringify(
|
||||
await page.evaluate(`${this.code};
|
||||
await page.evaluate(`${code};
|
||||
rrweb.snapshot(document)[0];
|
||||
`),
|
||||
null,
|
||||
2,
|
||||
);
|
||||
const result = matchSnapshot(snapshotResult, __filename, this.title);
|
||||
assert(result.pass, result.pass ? '' : result.report());
|
||||
}).timeout(5000);
|
||||
expect(snapshotResult).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,67 +1,62 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import { Suite } from 'mocha';
|
||||
import { expect } from 'chai';
|
||||
import { addHoverClass, createCache } from '../src/rebuild';
|
||||
import { BuildCache } from '../src/types';
|
||||
|
||||
function getDuration(hrtime: [number, number]) {
|
||||
const [seconds, nanoseconds] = hrtime;
|
||||
return seconds * 1000 + nanoseconds / 1000000;
|
||||
}
|
||||
|
||||
interface ISuite extends Suite {
|
||||
cache: BuildCache;
|
||||
}
|
||||
describe('add hover class to hover selector related rules', function () {
|
||||
let cache: ReturnType<typeof createCache>;
|
||||
|
||||
describe('add hover class to hover selector related rules', function (this: ISuite) {
|
||||
beforeEach(() => {
|
||||
this.cache = createCache();
|
||||
cache = createCache();
|
||||
});
|
||||
|
||||
it('will do nothing to css text without :hover', () => {
|
||||
const cssText = 'body { color: white }';
|
||||
expect(addHoverClass(cssText, this.cache)).to.equal(cssText);
|
||||
expect(addHoverClass(cssText, cache)).toEqual(cssText);
|
||||
});
|
||||
|
||||
it('can add hover class to css text', () => {
|
||||
const cssText = '.a:hover { color: white }';
|
||||
expect(addHoverClass(cssText, this.cache)).to.equal(
|
||||
expect(addHoverClass(cssText, cache)).toEqual(
|
||||
'.a:hover, .a.\\:hover { color: white }',
|
||||
);
|
||||
});
|
||||
|
||||
it('can add hover class when there is multi selector', () => {
|
||||
const cssText = '.a, .b:hover, .c { color: white }';
|
||||
expect(addHoverClass(cssText, this.cache)).to.equal(
|
||||
expect(addHoverClass(cssText, cache)).toEqual(
|
||||
'.a, .b:hover, .b.\\:hover, .c { color: white }',
|
||||
);
|
||||
});
|
||||
|
||||
it('can add hover class when there is a multi selector with the same prefix', () => {
|
||||
const cssText = '.a:hover, .a:hover::after { color: white }';
|
||||
expect(addHoverClass(cssText, this.cache)).to.equal(
|
||||
expect(addHoverClass(cssText, cache)).toEqual(
|
||||
'.a:hover, .a.\\:hover, .a:hover::after, .a.\\:hover::after { color: white }',
|
||||
);
|
||||
});
|
||||
|
||||
it('can add hover class when :hover is not the end of selector', () => {
|
||||
const cssText = 'div:hover::after { color: white }';
|
||||
expect(addHoverClass(cssText, this.cache)).to.equal(
|
||||
expect(addHoverClass(cssText, cache)).toEqual(
|
||||
'div:hover::after, div.\\:hover::after { color: white }',
|
||||
);
|
||||
});
|
||||
|
||||
it('can add hover class when the selector has multi :hover', () => {
|
||||
const cssText = 'a:hover b:hover { color: white }';
|
||||
expect(addHoverClass(cssText, this.cache)).to.equal(
|
||||
expect(addHoverClass(cssText, cache)).toEqual(
|
||||
'a:hover b:hover, a.\\:hover b.\\:hover { color: white }',
|
||||
);
|
||||
});
|
||||
|
||||
it('will ignore :hover in css value', () => {
|
||||
const cssText = '.a::after { content: ":hover" }';
|
||||
expect(addHoverClass(cssText, this.cache)).to.equal(cssText);
|
||||
expect(addHoverClass(cssText, cache)).toEqual(cssText);
|
||||
});
|
||||
|
||||
it('benchmark', () => {
|
||||
@@ -70,10 +65,10 @@ describe('add hover class to hover selector related rules', function (this: ISui
|
||||
'utf8',
|
||||
);
|
||||
const start = process.hrtime();
|
||||
addHoverClass(cssText, this.cache);
|
||||
addHoverClass(cssText, cache);
|
||||
const end = process.hrtime(start);
|
||||
const duration = getDuration(end);
|
||||
expect(duration).to.below(100);
|
||||
expect(duration).toBeLessThan(100);
|
||||
});
|
||||
|
||||
it('should be a lot faster to add a hover class to a previously processed css string', () => {
|
||||
@@ -85,13 +80,13 @@ describe('add hover class to hover selector related rules', function (this: ISui
|
||||
);
|
||||
|
||||
const start = process.hrtime();
|
||||
addHoverClass(cssText, this.cache);
|
||||
addHoverClass(cssText, cache);
|
||||
const end = process.hrtime(start);
|
||||
|
||||
const cachedStart = process.hrtime();
|
||||
addHoverClass(cssText, this.cache);
|
||||
addHoverClass(cssText, cache);
|
||||
const cachedEnd = process.hrtime(cachedStart);
|
||||
|
||||
expect(getDuration(cachedEnd) * factor).to.below(getDuration(end));
|
||||
expect(getDuration(cachedEnd) * factor).toBeLessThan(getDuration(end));
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,49 +1,47 @@
|
||||
import 'mocha';
|
||||
import { JSDOM } from 'jsdom';
|
||||
import { expect } from 'chai';
|
||||
import { absoluteToStylesheet, _isBlockedElement } from '../src/snapshot';
|
||||
|
||||
describe('absolute url to stylesheet', () => {
|
||||
const href = 'http://localhost/css/style.css';
|
||||
|
||||
it('can handle relative path', () => {
|
||||
expect(absoluteToStylesheet('url(a.jpg)', href)).to.equal(
|
||||
expect(absoluteToStylesheet('url(a.jpg)', href)).toEqual(
|
||||
`url(http://localhost/css/a.jpg)`,
|
||||
);
|
||||
});
|
||||
|
||||
it('can handle same level path', () => {
|
||||
expect(absoluteToStylesheet('url("./a.jpg")', href)).to.equal(
|
||||
expect(absoluteToStylesheet('url("./a.jpg")', href)).toEqual(
|
||||
`url("http://localhost/css/a.jpg")`,
|
||||
);
|
||||
});
|
||||
|
||||
it('can handle parent level path', () => {
|
||||
expect(absoluteToStylesheet('url("../a.jpg")', href)).to.equal(
|
||||
expect(absoluteToStylesheet('url("../a.jpg")', href)).toEqual(
|
||||
`url("http://localhost/a.jpg")`,
|
||||
);
|
||||
});
|
||||
|
||||
it('can handle absolute path', () => {
|
||||
expect(absoluteToStylesheet('url("/a.jpg")', href)).to.equal(
|
||||
expect(absoluteToStylesheet('url("/a.jpg")', href)).toEqual(
|
||||
`url("http://localhost/a.jpg")`,
|
||||
);
|
||||
});
|
||||
|
||||
it('can handle external path', () => {
|
||||
expect(
|
||||
absoluteToStylesheet('url("http://localhost/a.jpg")', href),
|
||||
).to.equal(`url("http://localhost/a.jpg")`);
|
||||
expect(absoluteToStylesheet('url("http://localhost/a.jpg")', href)).toEqual(
|
||||
`url("http://localhost/a.jpg")`,
|
||||
);
|
||||
});
|
||||
|
||||
it('can handle single quote path', () => {
|
||||
expect(absoluteToStylesheet(`url('./a.jpg')`, href)).to.equal(
|
||||
expect(absoluteToStylesheet(`url('./a.jpg')`, href)).toEqual(
|
||||
`url('http://localhost/css/a.jpg')`,
|
||||
);
|
||||
});
|
||||
|
||||
it('can handle no quote path', () => {
|
||||
expect(absoluteToStylesheet('url(./a.jpg)', href)).to.equal(
|
||||
expect(absoluteToStylesheet('url(./a.jpg)', href)).toEqual(
|
||||
`url(http://localhost/css/a.jpg)`,
|
||||
);
|
||||
});
|
||||
@@ -54,7 +52,7 @@ describe('absolute url to stylesheet', () => {
|
||||
'background-image: url(images/b.jpg);background: #aabbcc url(images/a.jpg) 50% 50% repeat;',
|
||||
href,
|
||||
),
|
||||
).to.equal(
|
||||
).toEqual(
|
||||
`background-image: url(http://localhost/css/images/b.jpg);` +
|
||||
`background: #aabbcc url(http://localhost/css/images/a.jpg) 50% 50% repeat;`,
|
||||
);
|
||||
@@ -63,13 +61,13 @@ describe('absolute url to stylesheet', () => {
|
||||
it('can handle data url image', () => {
|
||||
expect(
|
||||
absoluteToStylesheet('url(data:image/gif;base64,ABC)', href),
|
||||
).to.equal('url(data:image/gif;base64,ABC)');
|
||||
).toEqual('url(data:image/gif;base64,ABC)');
|
||||
expect(
|
||||
absoluteToStylesheet(
|
||||
'url(data:application/font-woff;base64,d09GMgABAAAAAAm)',
|
||||
href,
|
||||
),
|
||||
).to.equal('url(data:application/font-woff;base64,d09GMgABAAAAAAm)');
|
||||
).toEqual('url(data:application/font-woff;base64,d09GMgABAAAAAAm)');
|
||||
});
|
||||
|
||||
it('preserves quotes around inline svgs with spaces', () => {
|
||||
@@ -78,7 +76,7 @@ describe('absolute url to stylesheet', () => {
|
||||
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")",
|
||||
href,
|
||||
),
|
||||
).to.equal(
|
||||
).toEqual(
|
||||
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")",
|
||||
);
|
||||
expect(
|
||||
@@ -86,20 +84,20 @@ describe('absolute url to stylesheet', () => {
|
||||
'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
|
||||
href,
|
||||
),
|
||||
).to.equal(
|
||||
).toEqual(
|
||||
'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
|
||||
);
|
||||
expect(
|
||||
absoluteToStylesheet(
|
||||
'url("data:image/svg+xml;utf8,<svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M27 14C28\" fill=\"white\"/></svg>")',
|
||||
'url("data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>")',
|
||||
href,
|
||||
),
|
||||
).to.equal(
|
||||
'url("data:image/svg+xml;utf8,<svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M27 14C28\" fill=\"white\"/></svg>")',
|
||||
).toEqual(
|
||||
'url("data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>")',
|
||||
);
|
||||
});
|
||||
it('can handle empty path', () => {
|
||||
expect(absoluteToStylesheet(`url('')`, href)).to.equal(`url('')`);
|
||||
expect(absoluteToStylesheet(`url('')`, href)).toEqual(`url('')`);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -111,20 +109,20 @@ describe('isBlockedElement()', () => {
|
||||
JSDOM.fragment(html).querySelector('div')!;
|
||||
|
||||
it('can handle empty elements', () => {
|
||||
expect(subject('<div />')).to.equal(false);
|
||||
expect(subject('<div />')).toEqual(false);
|
||||
});
|
||||
|
||||
it('blocks prohibited className', () => {
|
||||
expect(subject('<div class="foo rr-block bar" />')).to.equal(true);
|
||||
expect(subject('<div class="foo rr-block bar" />')).toEqual(true);
|
||||
});
|
||||
|
||||
it('does not block random data selector', () => {
|
||||
expect(subject('<div data-rr-block />')).to.equal(false);
|
||||
expect(subject('<div data-rr-block />')).toEqual(false);
|
||||
});
|
||||
|
||||
it('blocks blocked selector', () => {
|
||||
expect(
|
||||
subject('<div data-rr-block />', { blockSelector: '[data-rr-block]' }),
|
||||
).to.equal(true);
|
||||
).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -11,5 +11,5 @@
|
||||
"lib": ["es6", "dom"]
|
||||
},
|
||||
"exclude": ["test"],
|
||||
"include": ["src", "test.d.ts"]
|
||||
"include": ["src"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user