fix(tests): add validation of comment translations (#41537)
This commit is contained in:
committed by
GitHub
parent
654d66186e
commit
0d3158d4f4
@ -19,6 +19,39 @@ Some text
|
||||
</body>
|
||||
`;
|
||||
|
||||
const outsideDeclarations = `
|
||||
<style>
|
||||
.body {
|
||||
color: red;
|
||||
/* comment 1 */
|
||||
}
|
||||
|
||||
|
||||
/* comment 1 */
|
||||
/* comment 2 */
|
||||
}
|
||||
|
||||
</style>
|
||||
`;
|
||||
|
||||
const mediaQuery = `
|
||||
<style>
|
||||
.body {
|
||||
color: red;
|
||||
/* comment 1 */
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 350px) {
|
||||
:root {
|
||||
/* comment 2 */
|
||||
|
||||
/* comment 2 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
// NOTE: this is a bit finicky. If the css is, say, missing a semi-colon,
|
||||
// nearby comments may be missed.
|
||||
describe('extractCSSComments', () => {
|
||||
@ -29,4 +62,18 @@ describe('extractCSSComments', () => {
|
||||
};
|
||||
expect(extractCSSComments(someHTMLWithCSS)).toEqual(commentCounts);
|
||||
});
|
||||
it('should catch comments outside of declarations', () => {
|
||||
const commentCounts = {
|
||||
'comment 1': 2,
|
||||
'comment 2': 1
|
||||
};
|
||||
expect(extractCSSComments(outsideDeclarations)).toEqual(commentCounts);
|
||||
});
|
||||
it('should catch comments inside of media queries', () => {
|
||||
const commentCounts = {
|
||||
'comment 1': 1,
|
||||
'comment 2': 2
|
||||
};
|
||||
expect(extractCSSComments(mediaQuery)).toEqual(commentCounts);
|
||||
});
|
||||
});
|
||||
|
12
curriculum/test/utils/extract-script-js-comments.js
Normal file
12
curriculum/test/utils/extract-script-js-comments.js
Normal file
@ -0,0 +1,12 @@
|
||||
var rehype = require('rehype');
|
||||
var vfile = require('vfile');
|
||||
|
||||
var getComments = require('./plugins/get-script-js-comments');
|
||||
|
||||
const processor = rehype().use(getComments);
|
||||
|
||||
function extractComments(html) {
|
||||
return processor.processSync(vfile(html)).data;
|
||||
}
|
||||
|
||||
module.exports = extractComments;
|
77
curriculum/test/utils/extract-script-js-comments.test.js
Normal file
77
curriculum/test/utils/extract-script-js-comments.test.js
Normal file
@ -0,0 +1,77 @@
|
||||
/* global expect */
|
||||
const extractScriptJSComments = require('./extract-script-js-comments');
|
||||
|
||||
const inlineComments = `<body>
|
||||
Some text
|
||||
<script>
|
||||
|
||||
// comment 1
|
||||
|
||||
var x = 'y';
|
||||
|
||||
// comment 2
|
||||
|
||||
// comment 1
|
||||
|
||||
</script>
|
||||
</body>
|
||||
`;
|
||||
|
||||
const multilineComments = `<body>
|
||||
Some text
|
||||
<script>
|
||||
|
||||
/*
|
||||
comment 1
|
||||
*/
|
||||
var x = 'y';
|
||||
|
||||
/* comment 2 */
|
||||
|
||||
/* comment 1 */
|
||||
|
||||
</script>
|
||||
</body>
|
||||
`;
|
||||
|
||||
const outsideScript = `<body>
|
||||
Some text
|
||||
<script>
|
||||
|
||||
// comment 1
|
||||
|
||||
var x = 'y';
|
||||
|
||||
// comment 2
|
||||
|
||||
// comment 1
|
||||
|
||||
</script>
|
||||
|
||||
// comment 2
|
||||
</body>
|
||||
`;
|
||||
|
||||
describe('extractScriptJSComments', () => {
|
||||
it('should catch inline comments', () => {
|
||||
const commentCounts = {
|
||||
'comment 1': 2,
|
||||
'comment 2': 1
|
||||
};
|
||||
expect(extractScriptJSComments(inlineComments)).toEqual(commentCounts);
|
||||
});
|
||||
it('should catch multiline comments', () => {
|
||||
const commentCounts = {
|
||||
'comment 1': 2,
|
||||
'comment 2': 1
|
||||
};
|
||||
expect(extractScriptJSComments(multilineComments)).toEqual(commentCounts);
|
||||
});
|
||||
it('should ignore comments outside script tags', () => {
|
||||
const commentCounts = {
|
||||
'comment 1': 2,
|
||||
'comment 2': 1
|
||||
};
|
||||
expect(extractScriptJSComments(outsideScript)).toEqual(commentCounts);
|
||||
});
|
||||
});
|
@ -1,9 +1,28 @@
|
||||
const { isEmpty } = require('lodash');
|
||||
const visit = require('unist-util-visit');
|
||||
var css = require('css');
|
||||
var visitCss = require('rework-visit');
|
||||
const { commentToData } = require('../comment-to-data');
|
||||
|
||||
function visitComments(node, cb) {
|
||||
node.rules.forEach(rule => {
|
||||
if (rule.type === 'rule') {
|
||||
visitDeclarations(rule.declarations, cb);
|
||||
} else if (rule.type === 'comment') {
|
||||
cb(rule.comment);
|
||||
} else if (rule.type === 'media') {
|
||||
visitComments(rule, cb);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function visitDeclarations(declarations, cb) {
|
||||
declarations.forEach(dec => {
|
||||
if (dec.type === 'comment') {
|
||||
cb(dec.comment);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function plugin() {
|
||||
return transformer;
|
||||
|
||||
@ -16,12 +35,9 @@ function plugin() {
|
||||
}
|
||||
function cssVisitor(node) {
|
||||
const ast = css.parse(node.value);
|
||||
visitCss(ast.stylesheet, dec => {
|
||||
let comments = dec
|
||||
.filter(({ type }) => type === 'comment')
|
||||
.map(({ comment }) => comment.trim());
|
||||
comments.forEach(comment => commentToData(file, comment));
|
||||
});
|
||||
visitComments(ast.stylesheet, comment =>
|
||||
commentToData(file, comment.trim())
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
29
curriculum/test/utils/plugins/get-script-js-comments.js
Normal file
29
curriculum/test/utils/plugins/get-script-js-comments.js
Normal file
@ -0,0 +1,29 @@
|
||||
const { isEmpty } = require('lodash');
|
||||
const visit = require('unist-util-visit');
|
||||
const acorn = require('acorn');
|
||||
const { commentToData } = require('../comment-to-data');
|
||||
|
||||
const parser = acorn.Parser;
|
||||
|
||||
function plugin() {
|
||||
return transformer;
|
||||
|
||||
function transformer(tree, file) {
|
||||
if (isEmpty(file.data)) file.data = {};
|
||||
visit(tree, { type: 'element', tagName: 'script' }, scriptVisitor);
|
||||
|
||||
function scriptVisitor(node) {
|
||||
visit(node, 'text', jsVisitor);
|
||||
}
|
||||
function jsVisitor(node) {
|
||||
let comments = [];
|
||||
parser.parse(node.value, { onComment: comments, ecmaVersion: 2020 });
|
||||
|
||||
comments
|
||||
.map(({ value }) => value.trim())
|
||||
.forEach(comment => commentToData(file, comment));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = plugin;
|
Reference in New Issue
Block a user