Commit 96f5fcfd authored by David Sveningsson's avatar David Sveningsson

feat(rules): new rule no-unknown-elements

[skip release]
parent 89b69fc0
Pipeline #76962771 passed with stages
in 10 minutes and 30 seconds
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`docs/rules/no-unknown-elements.md inline validation: correct 1`] = `Array []`;
exports[`docs/rules/no-unknown-elements.md inline validation: incorrect 1`] = `
Array [
Object {
"errorCount": 1,
"filePath": "inline",
"messages": Array [
Object {
"column": 1,
"context": "custom-element",
"line": 1,
"message": "Unknown element <custom-element>",
"offset": 0,
"ruleId": "no-unknown-elements",
"severity": 2,
"size": 15,
},
],
"source": "<custom-element></custom-element>",
"warningCount": 0,
},
]
`;
import HtmlValidate from "../../../src/htmlvalidate";
const markup: { [key: string]: string } = {};
markup["incorrect"] = `<custom-element></custom-element>`;
markup["correct"] = `<div></div>`;
describe("docs/rules/no-unknown-elements.md", () => {
it("inline validation: incorrect", () => {
const htmlvalidate = new HtmlValidate({"rules":{"no-unknown-elements":"error"}});
const report = htmlvalidate.validateString(markup["incorrect"]);
expect(report.results).toMatchSnapshot();
});
it("inline validation: correct", () => {
const htmlvalidate = new HtmlValidate({"rules":{"no-unknown-elements":"error"}});
const report = htmlvalidate.validateString(markup["correct"]);
expect(report.results).toMatchSnapshot();
});
});
@ngdoc rule
@module rules
@name no-unknown-elements
@summary Disallow usage of unknown elements
@description
# Disallow usage of unknown elements (`no-unknown-elements`)
This rule requires all elements to have a corresponding metadata element
describing its content model.
All HTML5 elements are bundled and can be used with:
"extends": ["html5"]
For custom elements (and framework components) you need supply your [own
metadata](../usage/elements.html).
## Rule details
Examples of **incorrect** code for this rule:
<validate name="incorrect" rules="no-unknown-elements">
<custom-element></custom-element>
</validate>
Examples of **correct** code for this rule:
<validate name="correct" rules="no-unknown-elements">
<div></div>
</validate>
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rule no-unknown-elements should contain contextual documentation 1`] = `
Object {
"description": "An unknown element <my-element> was used. If this is a Custom Element you need to supply element metadata for it.",
"url": "https://html-validate.org/rules/no-unknown-elements.html",
}
`;
exports[`rule no-unknown-elements should contain documentation 1`] = `
Object {
"description": "An unknown element was used. If this is a Custom Element you need to supply element metadata for it.",
"url": "https://html-validate.org/rules/no-unknown-elements.html",
}
`;
import HtmlValidate from "../htmlvalidate";
import "../matchers";
describe("rule no-unknown-elements", () => {
let htmlvalidate: HtmlValidate;
beforeAll(() => {
htmlvalidate = new HtmlValidate({
rules: { "no-unknown-elements": "error" },
});
});
it("should not report for known elements", () => {
const report = htmlvalidate.validateString("<div></div>");
expect(report).toBeValid();
});
it("should report error for unknown elements", () => {
const report = htmlvalidate.validateString("<my-element></my-element>");
expect(report).toBeInvalid();
expect(report).toHaveError(
"no-unknown-elements",
"Unknown element <my-element>"
);
});
it("should contain documentation", () => {
expect(
htmlvalidate.getRuleDocumentation("no-unknown-elements")
).toMatchSnapshot();
});
it("should contain contextual documentation", () => {
expect(
htmlvalidate.getRuleDocumentation(
"no-unknown-elements",
null,
"my-element"
)
).toMatchSnapshot();
});
});
import { TagOpenEvent } from "../event";
import { Rule, RuleDocumentation, ruleDocumentationUrl } from "../rule";
class NoUnknownElements extends Rule<string> {
public documentation(context: string): RuleDocumentation {
const element = context ? ` <${context}>` : "";
return {
description: `An unknown element${element} was used. If this is a Custom Element you need to supply element metadata for it.`,
url: ruleDocumentationUrl(__filename),
};
}
public setup(): void {
this.on("tag:open", (event: TagOpenEvent) => {
const node = event.target;
if (!node.meta) {
this.report(
node,
`Unknown element <${node.tagName}>`,
null,
node.tagName
);
}
});
}
}
module.exports = NoUnknownElements;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment