parsel-js
Version:
A tiny, permissive CSS selector parser
128 lines (119 loc) • 3.61 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parsel Tests</title>
<link rel="stylesheet" href="https://test.mavo.io/style.css" />
<style>
td {
white-space: pre;
font-family: Consolas, Monaco, monospace;
}
</style>
</head>
<body>
<script>
const request = new XMLHttpRequest();
// We need to synchronously fetch here.
request.open('GET', './test.json', false);
request.send();
const cases = JSON.parse(request.responseText);
const tests = {
testTokenize: {
name: 'Tokens',
tests: []
},
testParse: {
name: 'Parsing',
tests: []
},
testStringifyTokens: {
name: 'Stringifying tokens',
tests: []
},
testStringifyAST: {
name: 'Stringifying AST',
tests: []
},
testSpecificity: {
name: 'Specificity',
tests: []
}
}
for (const testCase of cases) {
switch (testCase.type) {
case 'tokenize':
tests.testTokenize.tests.push(testCase);
break;
case 'parse':
tests.testParse.tests.push(testCase);
break;
case 'stringify':
tests.testStringifyTokens.tests.push(testCase);
tests.testStringifyAST.tests.push(testCase);
break;
case 'specificity':
tests.testSpecificity.tests.push(testCase);
break;
}
}
const createSection = (name) => {
const section = document.createElement('section');
document.body.prepend(section);
const header = section.appendChild(document.createElement('h1'));
header.textContent = name;
return section;
}
for (const [fnName, spec] of Object.entries(tests).reverse()) {
const section = createSection(spec.name);
for (const testCase of spec.tests) {
const table = section.appendChild(document.createElement('table'));
table.className = 'reftest';
table.dataset.test = fnName;
table.dataset.columns = '3';
table.innerHTML = `<tr><td>${testCase.input}</td><td>${JSON.stringify(testCase.expected, null, "\t")}</td></tr>`;
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blissfuljs/1.0.4/bliss.min.js"></script>
<script src="https://test.mavo.io/test.js"></script>
<script type="module">
import * as parsel from "./dist/parsel.js";
window.testTokenize = function(test, result, expected) {
console.log(arguments)
const tokens = parsel.tokenize(test.textContent);
const actual = JSON.stringify(tokens, null, "\t");
result.textContent = actual;
return Test.equals(JSON.stringify(JSON.parse(expected.textContent), null, "\t"), actual);
}
window.testParse = function(test, result, expected) {
console.log(arguments)
const ast = parsel.parse(test.textContent);
const actual = JSON.stringify(ast, null, "\t");
result.textContent = actual;
return Test.equals(JSON.stringify(JSON.parse(expected.textContent), null, "\t"), actual);
}
window.testStringifyTokens = function(test, result, expected) {
console.log(arguments)
const tokens = parsel.tokenize(test.textContent);
const actual = parsel.stringify(tokens);
result.textContent = JSON.stringify(actual);
return Test.equals(JSON.parse(expected.textContent), actual);
}
window.testStringifyAST = function(test, result, expected) {
console.log(arguments)
const tokens = parsel.parse(test.textContent);
const actual = parsel.stringify(tokens);
result.textContent = JSON.stringify(actual);
return Test.equals(JSON.parse(expected.textContent), actual);
}
window.testSpecificity = function(test, result, expected) {
console.log(arguments)
const specificity = parsel.specificity(test.textContent);
const actual = JSON.stringify(specificity, null, "\t");
result.textContent = actual;
return Test.equals(JSON.stringify(JSON.parse(expected.textContent), null, "\t"), actual);
}
</script>
</body>
</html>