mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-01 22:55:23 +00:00
efe328f1b2
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. --HG-- extra : commitid : F2ItGm8ptRz extra : rebase_source : b082fe4bf77e22e297e303fc601165ceff1c4cbc
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();
|
|
}
|
|
}
|
|
});
|