summaryrefslogtreecommitdiffstats
path: root/devtools/client/shared/test/browser_mdn-docs-03.js
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/shared/test/browser_mdn-docs-03.js')
-rw-r--r--devtools/client/shared/test/browser_mdn-docs-03.js277
1 files changed, 277 insertions, 0 deletions
diff --git a/devtools/client/shared/test/browser_mdn-docs-03.js b/devtools/client/shared/test/browser_mdn-docs-03.js
new file mode 100644
index 000000000..c686aa6a9
--- /dev/null
+++ b/devtools/client/shared/test/browser_mdn-docs-03.js
@@ -0,0 +1,277 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * This file tests the CSS syntax highlighter in the MdnDocsWidget object.
+ *
+ * The CSS syntax highlighter accepts:
+ * - a string containing CSS
+ * - a DOM node
+ *
+ * It parses the string and creates a collection of DOM nodes for different
+ * CSS token types. These DOM nodes have CSS classes applied to them,
+ * to apply the right style for that particular token type. The DOM nodes
+ * are returned as children of the node that was passed to the function.
+ *
+ * This test code defines a number of different strings containing valid and
+ * invalid CSS in various forms. For each string it defines the DOM nodes
+ * that it expects to get from the syntax highlighter.
+ *
+ * It then calls the syntax highlighter, and checks that the resulting
+ * collection of DOM nodes is what we expected.
+ */
+
+"use strict";
+
+const {appendSyntaxHighlightedCSS} = require("devtools/client/shared/widgets/MdnDocsWidget");
+
+/**
+ * An array containing the actual test cases.
+ *
+ * The test code tests every case in the array. If you want to add more
+ * test cases, just add more items to the array.
+ *
+ * Each test case consists of:
+ * - description: string describing the salient features of this test case
+ * - example: the string to test
+ * - expected: an array of objects, one for each DOM node we expect, that
+ * captures the information about the node that we expect to test.
+ */
+const TEST_DATA = [{
+ description: "Valid syntax, string value.",
+ example: "name: stringValue;",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, numeric value.",
+ example: "name: 1;",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "1"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, url value.",
+ example: "name: url(./name);",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "url(./name)"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, space before ':'.",
+ example: "name : stringValue;",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: " "},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, space before ';'.",
+ example: "name: stringValue ;",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: " "},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, trailing space.",
+ example: "name: stringValue; ",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: ";"},
+ {type: "text", text: " "}
+ ]}, {
+ description: "Valid syntax, leading space.",
+ example: " name: stringValue;",
+ expected: [{type: "text", text: " "},
+ {type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, two spaces.",
+ example: "name: stringValue;",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, no spaces.",
+ example: "name:stringValue;",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, two-part value.",
+ example: "name: stringValue 1;",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "1"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, two declarations.",
+ example: "name: stringValue;\n" +
+ "name: 1;",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: ";"},
+ {type: "text", text: "\n"},
+ {type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "1"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, commented, numeric value.",
+ example: "/* comment */\n" +
+ "name: 1;",
+ expected: [{type: "comment", text: "/* comment */"},
+ {type: "text", text: "\n"},
+ {type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "1"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, multiline commented, string value.",
+ example: "/* multiline \n" +
+ "comment */\n" +
+ "name: stringValue;",
+ expected: [{type: "comment", text: "/* multiline \ncomment */"},
+ {type: "text", text: "\n"},
+ {type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, commented, two declarations.",
+ example: "/* comment 1 */\n" +
+ "name: 1;\n" +
+ "/* comment 2 */\n" +
+ "name: stringValue;",
+ expected: [{type: "comment", text: "/* comment 1 */"},
+ {type: "text", text: "\n"},
+ {type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "1"},
+ {type: "text", text: ";"},
+ {type: "text", text: "\n"},
+ {type: "comment", text: "/* comment 2 */"},
+ {type: "text", text: "\n"},
+ {type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, multiline.",
+ example: "name: \n" +
+ "stringValue;",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " \n"},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Valid syntax, multiline, two declarations.",
+ example: "name: \n" +
+ "stringValue \n" +
+ "stringValue2;",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " \n"},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: " \n"},
+ {type: "property-value", text: "stringValue2"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Invalid: not CSS at all.",
+ example: "not CSS at all",
+ expected: [{type: "property-name", text: "not"},
+ {type: "text", text: " "},
+ {type: "property-name", text: "CSS"},
+ {type: "text", text: " "},
+ {type: "property-name", text: "at"},
+ {type: "text", text: " "},
+ {type: "property-name", text: "all"}
+ ]}, {
+ description: "Invalid: switched ':' and ';'.",
+ example: "name; stringValue:",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: ";"},
+ {type: "text", text: " "},
+ {type: "property-name", text: "stringValue"},
+ {type: "text", text: ":"}
+ ]}, {
+ description: "Invalid: unterminated comment.",
+ example: "/* unterminated comment\n" +
+ "name: stringValue;",
+ expected: [{type: "comment", text: "/* unterminated comment\nname: stringValue;"}
+ ]}, {
+ description: "Invalid: bad comment syntax.",
+ example: "// invalid comment\n" +
+ "name: stringValue;",
+ expected: [{type: "text", text: "/"},
+ {type: "text", text: "/"},
+ {type: "text", text: " "},
+ {type: "property-name", text: "invalid"},
+ {type: "text", text: " "},
+ {type: "property-name", text: "comment"},
+ {type: "text", text: "\n"},
+ {type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: ";"}
+ ]}, {
+ description: "Invalid: no trailing ';'.",
+ example: "name: stringValue\n" +
+ "name: stringValue2",
+ expected: [{type: "property-name", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "stringValue"},
+ {type: "text", text: "\n"},
+ {type: "property-value", text: "name"},
+ {type: "text", text: ":"},
+ {type: "text", text: " "},
+ {type: "property-value", text: "stringValue2"},
+ ]}
+];
+
+/**
+ * Iterate through every test case, calling the syntax highlighter,
+ * then calling a helper function to check the output.
+ */
+add_task(function* () {
+ let doc = gBrowser.selectedTab.ownerDocument;
+ let parent = doc.createElement("div");
+ info("Testing all CSS syntax highlighter test cases");
+ for (let {description, example, expected} of TEST_DATA) {
+ info("Testing: " + description);
+ appendSyntaxHighlightedCSS(example, parent);
+ checkCssSyntaxHighlighterOutput(expected, parent);
+ while (parent.firstChild) {
+ parent.firstChild.remove();
+ }
+ }
+});
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-24 14:14:16 +0000