2dada8f365
In a following patch, all DevTools moz.build files will use DevToolsModules to install JS modules at a path that corresponds directly to their source tree location. Here we rewrite all require and import calls to match the new location that these files are installed to.
278 lines
12 KiB
JavaScript
278 lines
12 KiB
JavaScript
/* 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();
|
|
}
|
|
}
|
|
});
|