862 lines
40 KiB
JavaScript
862 lines
40 KiB
JavaScript
/**
|
|
* Tests for input and output of various types to ensure the editors work as expected
|
|
* and retain data integrity, especially when it comes to special characters.
|
|
*
|
|
* @author n1474335 [n1474335@gmail.com]
|
|
* @copyright Crown Copyright 2023
|
|
* @license Apache-2.0
|
|
*/
|
|
|
|
const SPECIAL_CHARS = [
|
|
"\u0000\u0001\u0002\u0003\u0004\u0005\u0006\u0007\u0008\u0009\u000a\u000b\u000c\u000d\u000e\u000f",
|
|
"\u0010\u0011\u0012\u0013\u0014\u0015\u0016\u0017\u0018\u0019\u001a\u001b\u001c\u001d\u001e\u001f",
|
|
"\u007f",
|
|
"\u0080\u0081\u0082\u0083\u0084\u0085\u0086\u0087\u0088\u0089\u008a\u008b\u008c\u008d\u008e\u008f",
|
|
"\u0090\u0091\u0092\u0093\u0094\u0095\u0096\u0097\u0098\u0099\u009a\u009b\u009c\u009d\u009e\u009f",
|
|
"\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\u202d\u202e\u2066\u2067\u2069\ufeff\ufff9\ufffa\ufffb\ufffc"
|
|
].join("");
|
|
|
|
const ALL_BYTES = [
|
|
"\x00\x01\x02\x03\x04\x05\x06\x07\x08\x09\x0a\x0b\x0c\x0d\x0e\x0f",
|
|
"\x10\x11\x12\x13\x14\x15\x16\x17\x18\x19\x1a\x1b\x1c\x1d\x1e\x1f",
|
|
"\x20\x21\x22\x23\x24\x25\x26\x27\x28\x29\x2a\x2b\x2c\x2d\x2e\x2f",
|
|
"\x30\x31\x32\x33\x34\x35\x36\x37\x38\x39\x3a\x3b\x3c\x3d\x3e\x3f",
|
|
"\x40\x41\x42\x43\x44\x45\x46\x47\x48\x49\x4a\x4b\x4c\x4d\x4e\x4f",
|
|
"\x50\x51\x52\x53\x54\x55\x56\x57\x58\x59\x5a\x5b\x5c\x5d\x5e\x5f",
|
|
"\x60\x61\x62\x63\x64\x65\x66\x67\x68\x69\x6a\x6b\x6c\x6d\x6e\x6f",
|
|
"\x70\x71\x72\x73\x74\x75\x76\x77\x78\x79\x7a\x7b\x7c\x7d\x7e\x7f",
|
|
"\x80\x81\x82\x83\x84\x85\x86\x87\x88\x89\x8a\x8b\x8c\x8d\x8e\x8f",
|
|
"\x90\x91\x92\x93\x94\x95\x96\x97\x98\x99\x9a\x9b\x9c\x9d\x9e\x9f",
|
|
"\xa0\xa1\xa2\xa3\xa4\xa5\xa6\xa7\xa8\xa9\xaa\xab\xac\xad\xae\xaf",
|
|
"\xb0\xb1\xb2\xb3\xb4\xb5\xb6\xb7\xb8\xb9\xba\xbb\xbc\xbd\xbe\xbf",
|
|
"\xc0\xc1\xc2\xc3\xc4\xc5\xc6\xc7\xc8\xc9\xca\xcb\xcc\xcd\xce\xcf",
|
|
"\xd0\xd1\xd2\xd3\xd4\xd5\xd6\xd7\xd8\xd9\xda\xdb\xdc\xdd\xde\xdf",
|
|
"\xe0\xe1\xe2\xe3\xe4\xe5\xe6\xe7\xe8\xe9\xea\xeb\xec\xed\xee\xef",
|
|
"\xf0\xf1\xf2\xf3\xf4\xf5\xf6\xf7\xf8\xf9\xfa\xfb\xfc\xfd\xfe\xff",
|
|
].join("");
|
|
|
|
const PUA_CHARS = "\ue000\ue001\uf8fe\uf8ff";
|
|
|
|
const MULTI_LINE_STRING =`"You know," said Arthur, "it's at times like this, when I'm trapped in a Vogon airlock with a man from Betelgeuse, and about to die of asphyxiation in deep space that I really wish I'd listened to what my mother told me when I was young."
|
|
"Why, what did she tell you?"
|
|
"I don't know, I didn't listen."`;
|
|
|
|
const SELECTABLE_STRING = `ONE
|
|
two
|
|
ONE
|
|
three
|
|
ONE
|
|
four
|
|
ONE`;
|
|
|
|
// Descriptions for named control characters
|
|
const CONTROL_CHAR_NAMES = {
|
|
0: "null",
|
|
7: "bell",
|
|
8: "backspace",
|
|
10: "line feed",
|
|
11: "vertical tab",
|
|
13: "carriage return",
|
|
27: "escape",
|
|
8203: "zero width space",
|
|
8204: "zero width non-joiner",
|
|
8205: "zero width joiner",
|
|
8206: "left-to-right mark",
|
|
8207: "right-to-left mark",
|
|
8232: "line separator",
|
|
8237: "left-to-right override",
|
|
8238: "right-to-left override",
|
|
8294: "left-to-right isolate",
|
|
8295: "right-to-left isolate",
|
|
8297: "pop directional isolate",
|
|
8233: "paragraph separator",
|
|
65279: "zero width no-break space",
|
|
65532: "object replacement"
|
|
};
|
|
|
|
module.exports = {
|
|
before: browser => {
|
|
browser
|
|
.resizeWindow(1280, 800)
|
|
.url(browser.launchUrl)
|
|
.useCss()
|
|
.waitForElementNotPresent("#preloader", 10000)
|
|
.click("#auto-bake-label");
|
|
},
|
|
|
|
"CodeMirror has loaded correctly": browser => {
|
|
/* Editor has initialised */
|
|
browser
|
|
.useCss()
|
|
// Input
|
|
.waitForElementVisible("#input-text")
|
|
.waitForElementVisible("#input-text .cm-editor")
|
|
.waitForElementVisible("#input-text .cm-editor .cm-scroller")
|
|
.waitForElementVisible("#input-text .cm-editor .cm-scroller .cm-content")
|
|
.waitForElementVisible("#input-text .cm-editor .cm-scroller .cm-content .cm-line")
|
|
// Output
|
|
.waitForElementVisible("#output-text")
|
|
.waitForElementVisible("#output-text .cm-editor")
|
|
.waitForElementVisible("#output-text .cm-editor .cm-scroller")
|
|
.waitForElementVisible("#output-text .cm-editor .cm-scroller .cm-content")
|
|
.waitForElementVisible("#output-text .cm-editor .cm-scroller .cm-content .cm-line");
|
|
|
|
/* Status bar is showing and has correct values */
|
|
browser // Input
|
|
.waitForElementVisible("#input-text .cm-status-bar")
|
|
.waitForElementVisible("#input-text .cm-status-bar .stats-length-value")
|
|
.expect.element("#input-text .cm-status-bar .stats-length-value").text.to.equal("0");
|
|
browser.waitForElementVisible("#input-text .cm-status-bar .stats-lines-value")
|
|
.expect.element("#input-text .cm-status-bar .stats-lines-value").text.to.equal("1");
|
|
browser.waitForElementVisible("#input-text .cm-status-bar .chr-enc-value")
|
|
.expect.element("#input-text .cm-status-bar .chr-enc-value").text.to.equal("Raw Bytes");
|
|
browser.waitForElementVisible("#input-text .cm-status-bar .eol-value")
|
|
.expect.element("#input-text .cm-status-bar .eol-value").text.to.equal("LF");
|
|
|
|
browser // Output
|
|
.waitForElementVisible("#output-text .cm-status-bar")
|
|
.waitForElementVisible("#output-text .cm-status-bar .stats-length-value")
|
|
.expect.element("#output-text .cm-status-bar .stats-length-value").text.to.equal("0");
|
|
browser.waitForElementVisible("#output-text .cm-status-bar .stats-lines-value")
|
|
.expect.element("#output-text .cm-status-bar .stats-lines-value").text.to.equal("1");
|
|
browser.waitForElementVisible("#output-text .cm-status-bar .baking-time-info")
|
|
.expect.element("#output-text .cm-status-bar .baking-time-info").text.to.contain("ms");
|
|
browser.waitForElementVisible("#output-text .cm-status-bar .chr-enc-value")
|
|
.expect.element("#output-text .cm-status-bar .chr-enc-value").text.to.equal("Raw Bytes");
|
|
browser.waitForElementVisible("#output-text .cm-status-bar .eol-value")
|
|
.expect.element("#output-text .cm-status-bar .eol-value").text.to.equal("LF");
|
|
},
|
|
|
|
"Adding content": browser => {
|
|
/* Status bar updates correctly */
|
|
setInput(browser, MULTI_LINE_STRING);
|
|
|
|
browser.expect.element("#input-text .cm-status-bar .stats-length-value").text.to.equal("301");
|
|
browser.expect.element("#input-text .cm-status-bar .stats-lines-value").text.to.equal("3");
|
|
browser.expect.element("#input-text .cm-status-bar .chr-enc-value").text.to.equal("Raw Bytes");
|
|
browser.expect.element("#input-text .cm-status-bar .eol-value").text.to.equal("LF");
|
|
|
|
browser.expect.element("#output-text .cm-status-bar .stats-length-value").text.to.equal("0");
|
|
browser.expect.element("#output-text .cm-status-bar .stats-lines-value").text.to.equal("1");
|
|
browser.expect.element("#output-text .cm-status-bar .baking-time-info").text.to.contain("ms");
|
|
browser.expect.element("#output-text .cm-status-bar .chr-enc-value").text.to.equal("Raw Bytes");
|
|
browser.expect.element("#output-text .cm-status-bar .eol-value").text.to.equal("LF");
|
|
|
|
/* Output updates correctly */
|
|
bake(browser);
|
|
browser.expect.element("#output-text .cm-status-bar .stats-length-value").text.to.equal("301");
|
|
browser.expect.element("#output-text .cm-status-bar .stats-lines-value").text.to.equal("3");
|
|
browser.expect.element("#output-text .cm-status-bar .baking-time-info").text.to.contain("ms");
|
|
browser.expect.element("#output-text .cm-status-bar .chr-enc-value").text.to.equal("Raw Bytes");
|
|
browser.expect.element("#output-text .cm-status-bar .eol-value").text.to.equal("LF");
|
|
},
|
|
|
|
"Special content": browser => {
|
|
/* Special characters are rendered correctly */
|
|
setInput(browser, SPECIAL_CHARS, false);
|
|
|
|
// First line
|
|
for (let i = 0x0; i <= 0x8; i++) {
|
|
browser.expect.element(`#input-text .cm-line:nth-of-type(1) .cm-specialChar:nth-of-type(${i+1})`)
|
|
.to.have.property("title").equals(`Control character ${CONTROL_CHAR_NAMES[i] || "0x" + i.toString(16)}`);
|
|
browser.expect.element(`#input-text .cm-line:nth-of-type(1) .cm-specialChar:nth-of-type(${i+1})`)
|
|
.text.to.equal(String.fromCharCode(0x2400 + i));
|
|
}
|
|
|
|
// Tab \u0009
|
|
browser.expect.element(`#input-text .cm-line:nth-of-type(1)`).to.have.property("textContent").match(/\u0009$/);
|
|
|
|
// Line feed \u000a
|
|
browser.expect.element(`#input-text .cm-line:nth-of-type(1)`).to.have.property("textContent").match(/^.{10}$/);
|
|
browser.expect.element("#input-text .cm-status-bar .stats-lines-value").text.to.equal("2");
|
|
|
|
// Second line
|
|
for (let i = 0x0b; i < SPECIAL_CHARS.length; i++) {
|
|
const index = SPECIAL_CHARS.charCodeAt(i);
|
|
const name = CONTROL_CHAR_NAMES[index] || "0x" + index.toString(16);
|
|
const value = index >= 32 ? "\u2022" : String.fromCharCode(0x2400 + index);
|
|
|
|
browser.expect.element(`#input-text .cm-line:nth-of-type(2) .cm-specialChar:nth-of-type(${i-10})`)
|
|
.to.have.property("title").equals(`Control character ${name}`);
|
|
browser.expect.element(`#input-text .cm-line:nth-of-type(2) .cm-specialChar:nth-of-type(${i-10})`)
|
|
.text.to.equal(value);
|
|
}
|
|
|
|
/* Output renders correctly */
|
|
setChrEnc(browser, "output", "UTF-8");
|
|
bake(browser);
|
|
|
|
// First line
|
|
for (let i = 0x0; i <= 0x8; i++) {
|
|
browser.expect.element(`#output-text .cm-line:nth-of-type(1) .cm-specialChar:nth-of-type(${i+1})`)
|
|
.to.have.property("title").equals(`Control character ${CONTROL_CHAR_NAMES[i] || "0x" + i.toString(16)}`);
|
|
browser.expect.element(`#output-text .cm-line:nth-of-type(1) .cm-specialChar:nth-of-type(${i+1})`)
|
|
.text.to.equal(String.fromCharCode(0x2400 + i));
|
|
}
|
|
|
|
// Tab \u0009
|
|
browser.expect.element(`#output-text .cm-line:nth-of-type(1)`).to.have.property("textContent").match(/\u0009$/);
|
|
|
|
// Line feed \u000a
|
|
browser.expect.element(`#output-text .cm-line:nth-of-type(1)`).to.have.property("textContent").match(/^.{10}$/);
|
|
browser.expect.element("#output-text .cm-status-bar .stats-lines-value").text.to.equal("2");
|
|
|
|
// Second line
|
|
for (let i = 0x0b; i < SPECIAL_CHARS.length; i++) {
|
|
const index = SPECIAL_CHARS.charCodeAt(i);
|
|
const name = CONTROL_CHAR_NAMES[index] || "0x" + index.toString(16);
|
|
const value = index >= 32 ? "\u2022" : String.fromCharCode(0x2400 + index);
|
|
|
|
browser.expect.element(`#output-text .cm-content .cm-line:nth-of-type(2) .cm-specialChar:nth-of-type(${i-10})`)
|
|
.to.have.property("title").equals(`Control character ${name}`);
|
|
browser.expect.element(`#output-text .cm-content .cm-line:nth-of-type(2) .cm-specialChar:nth-of-type(${i-10})`)
|
|
.text.to.equal(value);
|
|
}
|
|
|
|
/* Bytes are rendered correctly */
|
|
setInput(browser, ALL_BYTES, false);
|
|
// Expect length to be 255, since one character is creating a newline
|
|
browser.expect.element(`#input-text .cm-content`).to.have.property("textContent").match(/^.{255}$/);
|
|
browser.expect.element("#input-text .cm-status-bar .stats-length-value").text.to.equal("256");
|
|
browser.expect.element("#input-text .cm-status-bar .stats-lines-value").text.to.equal("2");
|
|
|
|
|
|
/* PUA \ue000-\uf8ff */
|
|
setInput(browser, PUA_CHARS, false);
|
|
setChrEnc(browser, "output", "UTF-8");
|
|
bake(browser);
|
|
|
|
// Confirm input and output as expected
|
|
/* In order to render whitespace characters as control character pictures in the output, even
|
|
when they are the designated line separator, CyberChef sometimes chooses to represent them
|
|
internally using the Unicode Private Use Area (https://en.wikipedia.org/wiki/Private_Use_Areas).
|
|
See `Utils.escapeWhitespace()` for an example of this.
|
|
Therefore, PUA characters should be rendered normally in the Input but as control character
|
|
pictures in the output.
|
|
*/
|
|
browser.expect.element(`#input-text .cm-content`).to.have.property("textContent").match(/^\ue000\ue001\uf8fe\uf8ff$/);
|
|
browser.expect.element(`#output-text .cm-content`).to.have.property("textContent").match(/^\u2400\u2401\u3cfe\u3cff$/);
|
|
|
|
/* Can be copied */
|
|
setInput(browser, SPECIAL_CHARS, false);
|
|
setChrEnc(browser, "output", "UTF-8");
|
|
bake(browser);
|
|
|
|
// Manual copy
|
|
browser
|
|
.doubleClick("#output-text .cm-content .cm-line:nth-of-type(1) .cm-specialChar:nth-of-type(1)")
|
|
.waitForElementVisible("#output-text .cm-selectionBackground");
|
|
copy(browser);
|
|
paste(browser, "#search"); // Paste into search box as this won't mess with the values
|
|
|
|
// Ensure that the values are as expected
|
|
browser.expect.element("#search").to.have.value.that.equals("\u0000\u0001\u0002\u0003\u0004\u0005\u0006\u0007\u0008");
|
|
browser.clearValue("#search");
|
|
|
|
// Raw copy
|
|
browser
|
|
.click("#copy-output")
|
|
.pause(100);
|
|
paste(browser, "#search"); // Paste into search box as this won't mess with the values
|
|
|
|
// Ensure that the values are as expected
|
|
browser.expect.element("#search").to.have.value.that.matches(/^\u0000\u0001\u0002\u0003\u0004\u0005\u0006\u0007\u0008\u0009/);
|
|
browser.clearValue("#search");
|
|
},
|
|
|
|
"HTML output": browser => {
|
|
/* Displays correctly */
|
|
loadRecipe(browser, "Entropy", ALL_BYTES);
|
|
bake(browser);
|
|
|
|
browser
|
|
.waitForElementVisible("#output-html")
|
|
.waitForElementVisible("#output-html #chart-area");
|
|
|
|
/* Status bar widgets are disabled */
|
|
browser.expect.element("#output-text .cm-status-bar .disabled .stats-length-value").to.be.visible;
|
|
browser.expect.element("#output-text .cm-status-bar .disabled .stats-lines-value").to.be.visible;
|
|
browser.expect.element("#output-text .cm-status-bar .disabled .chr-enc-value").to.be.visible;
|
|
browser.expect.element("#output-text .cm-status-bar .disabled .eol-value").to.be.visible;
|
|
|
|
/* Displays special chars correctly */
|
|
loadRecipe(browser, "To Table", ",\u0000\u0001\u0002\u0003\u0004", [",", "\\r\\n", false, "HTML"]);
|
|
bake(browser);
|
|
|
|
for (let i = 0x0; i <= 0x4; i++) {
|
|
browser.expect.element(`#output-html .cm-specialChar:nth-of-type(${i+1})`)
|
|
.to.have.property("title").equals(`Control character ${CONTROL_CHAR_NAMES[i] || "0x" + i.toString(16)}`);
|
|
browser.expect.element(`#output-html .cm-specialChar:nth-of-type(${i+1})`)
|
|
.text.to.equal(String.fromCharCode(0x2400 + i));
|
|
}
|
|
|
|
/* Can be copied */
|
|
// Raw copy
|
|
browser
|
|
.click("#copy-output")
|
|
.pause(100);
|
|
paste(browser, "#search"); // Paste into search box as this won't mess with the values
|
|
|
|
// Ensure that the values are as expected
|
|
browser.expect.element("#search").to.have.value.that.matches(/\u0000\u0001\u0002\u0003\u0004/);
|
|
browser.clearValue("#search");
|
|
},
|
|
|
|
"Highlighting": browser => {
|
|
setInput(browser, SELECTABLE_STRING);
|
|
bake(browser);
|
|
|
|
/* Selecting input text also selects other instances in input and output */
|
|
browser // Input
|
|
.click("#auto-bake-label")
|
|
.doubleClick("#input-text .cm-content .cm-line:nth-of-type(1)")
|
|
.waitForElementVisible("#input-text .cm-selectionLayer .cm-selectionBackground")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line:nth-of-type(1) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line:nth-of-type(2) .cm-selectionMatch")
|
|
.waitForElementVisible("#input-text .cm-content .cm-line:nth-of-type(3) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line:nth-of-type(4) .cm-selectionMatch")
|
|
.waitForElementVisible("#input-text .cm-content .cm-line:nth-of-type(5) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line:nth-of-type(6) .cm-selectionMatch")
|
|
.waitForElementVisible("#input-text .cm-content .cm-line:nth-of-type(7) .cm-selectionMatch");
|
|
|
|
browser // Output
|
|
.waitForElementVisible("#output-text .cm-selectionLayer .cm-selectionBackground")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line:nth-of-type(1) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line:nth-of-type(2) .cm-selectionMatch")
|
|
.waitForElementVisible("#output-text .cm-content .cm-line:nth-of-type(3) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line:nth-of-type(4) .cm-selectionMatch")
|
|
.waitForElementVisible("#output-text .cm-content .cm-line:nth-of-type(5) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line:nth-of-type(6) .cm-selectionMatch")
|
|
.waitForElementVisible("#output-text .cm-content .cm-line:nth-of-type(7) .cm-selectionMatch");
|
|
|
|
/* Selecting output text highlights in input */
|
|
browser // Output
|
|
.click("#output-text")
|
|
.waitForElementNotPresent("#input-text .cm-selectionLayer .cm-selectionBackground")
|
|
.waitForElementNotPresent("#output-text .cm-selectionLayer .cm-selectionBackground")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line .cm-selectionMatch")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line .cm-selectionMatch")
|
|
.doubleClick("#output-text .cm-content .cm-line:nth-of-type(7)")
|
|
.waitForElementVisible("#output-text .cm-selectionLayer .cm-selectionBackground")
|
|
.waitForElementVisible("#output-text .cm-content .cm-line:nth-of-type(1) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line:nth-of-type(2) .cm-selectionMatch")
|
|
.waitForElementVisible("#output-text .cm-content .cm-line:nth-of-type(3) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line:nth-of-type(4) .cm-selectionMatch")
|
|
.waitForElementVisible("#output-text .cm-content .cm-line:nth-of-type(5) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line:nth-of-type(6) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line:nth-of-type(7) .cm-selectionMatch");
|
|
|
|
browser // Input
|
|
.waitForElementVisible("#input-text .cm-selectionLayer .cm-selectionBackground")
|
|
.waitForElementVisible("#input-text .cm-content .cm-line:nth-of-type(1) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line:nth-of-type(2) .cm-selectionMatch")
|
|
.waitForElementVisible("#input-text .cm-content .cm-line:nth-of-type(3) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line:nth-of-type(4) .cm-selectionMatch")
|
|
.waitForElementVisible("#input-text .cm-content .cm-line:nth-of-type(5) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line:nth-of-type(6) .cm-selectionMatch")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line:nth-of-type(7) .cm-selectionMatch");
|
|
|
|
// Turn autobake off again
|
|
browser.click("#auto-bake-label");
|
|
},
|
|
|
|
"Character encoding": browser => {
|
|
const CHINESE_CHARS = "不要恐慌。";
|
|
/* Dropup works */
|
|
/* Selecting changes output correctly */
|
|
setInput(browser, CHINESE_CHARS, false);
|
|
setChrEnc(browser, "input", "UTF-8");
|
|
bake(browser);
|
|
expectOutput(browser, "\u00E4\u00B8\u008D\u00E8\u00A6\u0081\u00E6\u0081\u0090\u00E6\u0085\u008C\u00E3\u0080\u0082");
|
|
|
|
/* Changing output to match input works as expected */
|
|
setChrEnc(browser, "output", "UTF-8");
|
|
bake(browser);
|
|
expectOutput(browser, CHINESE_CHARS);
|
|
|
|
/* Encodings appear in the URL */
|
|
browser.assert.urlContains("ienc=65001");
|
|
browser.assert.urlContains("oenc=65001");
|
|
|
|
/* Preserved when changing tabs */
|
|
browser
|
|
.click("#btn-new-tab")
|
|
.waitForElementVisible("#input-tabs li:nth-of-type(2).active-input-tab");
|
|
browser.expect.element("#input-text .chr-enc-value").text.that.equals("Raw Bytes");
|
|
browser.expect.element("#output-text .chr-enc-value").text.that.equals("Raw Bytes");
|
|
|
|
setChrEnc(browser, "input", "UTF-7");
|
|
setChrEnc(browser, "output", "UTF-7");
|
|
|
|
browser
|
|
.click("#input-tabs li:nth-of-type(1)")
|
|
.waitForElementVisible("#input-tabs li:nth-of-type(1).active-input-tab");
|
|
browser.expect.element("#input-text .chr-enc-value").text.that.equals("UTF-8");
|
|
browser.expect.element("#output-text .chr-enc-value").text.that.equals("UTF-8");
|
|
|
|
/* Try various encodings */
|
|
// These are not meant to be realistic encodings for this data
|
|
setInput(browser, CHINESE_CHARS, false);
|
|
setChrEnc(browser, "input", "UTF-8");
|
|
setChrEnc(browser, "output", "UTF-16LE");
|
|
bake(browser);
|
|
expectOutput(browser, "\uB8E4\uE88D\u81A6\u81E6\uE690\u8C85\u80E3");
|
|
|
|
setChrEnc(browser, "output", "Simplified Chinese GBK");
|
|
bake(browser);
|
|
expectOutput(browser, "\u6D93\u5D88\uFDFF\u93AD\u612D\u53A1\u9286\u0000");
|
|
|
|
setChrEnc(browser, "input", "UTF-7");
|
|
bake(browser);
|
|
expectOutput(browser, "+Tg0-+iYE-+YFA-+YUw-");
|
|
|
|
setChrEnc(browser, "input", "Traditional Chinese Big5");
|
|
bake(browser);
|
|
expectOutput(browser, "\u3043\u74B6\uFDFF\u7A3A\uFDFF");
|
|
|
|
setChrEnc(browser, "output", "Windows-1251 Cyrillic");
|
|
bake(browser);
|
|
expectOutput(browser, "\u00A4\u0408\u00ADn\u00AE\u0408\u00B7W\u040EC");
|
|
},
|
|
|
|
"Line endings": browser => {
|
|
/* Dropup works */
|
|
/* Selecting changes view in input */
|
|
setInput(browser, MULTI_LINE_STRING);
|
|
|
|
// Line endings: LF
|
|
|
|
// Input
|
|
browser
|
|
.waitForElementPresent("#input-text .cm-content .cm-line:nth-of-type(3)")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line:nth-of-type(4)")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-specialChar");
|
|
browser.expect.element("#input-text .cm-status-bar .stats-length-value").text.to.equal("301");
|
|
browser.expect.element("#input-text .cm-status-bar .stats-lines-value").text.to.equal("3");
|
|
|
|
// Output
|
|
bake(browser);
|
|
browser
|
|
.waitForElementPresent("#output-text .cm-content .cm-line:nth-of-type(3)")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line:nth-of-type(4)")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-specialChar");
|
|
browser.expect.element("#output-text .cm-status-bar .stats-length-value").text.to.equal("301");
|
|
browser.expect.element("#output-text .cm-status-bar .stats-lines-value").text.to.equal("3");
|
|
|
|
// Input EOL: VT
|
|
setEOLSeq(browser, "input", "VT");
|
|
|
|
// Input
|
|
browser
|
|
.waitForElementPresent("#input-text .cm-content .cm-line:nth-of-type(1)")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line:nth-of-type(2)")
|
|
.waitForElementPresent("#input-text .cm-content .cm-specialChar");
|
|
browser.expect.element("#input-text .cm-content .cm-specialChar").text.to.equal("␊");
|
|
browser.expect.element("#input-text .cm-status-bar .stats-length-value").text.to.equal("301");
|
|
browser.expect.element("#input-text .cm-status-bar .stats-lines-value").text.to.equal("1");
|
|
|
|
// Output
|
|
bake(browser);
|
|
browser
|
|
.waitForElementPresent("#output-text .cm-content .cm-line:nth-of-type(3)")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line:nth-of-type(4)")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-specialChar");
|
|
browser.expect.element("#output-text .cm-status-bar .stats-length-value").text.to.equal("301");
|
|
browser.expect.element("#output-text .cm-status-bar .stats-lines-value").text.to.equal("3");
|
|
|
|
// Output EOL: VT
|
|
setEOLSeq(browser, "output", "VT");
|
|
|
|
// Input
|
|
browser
|
|
.waitForElementPresent("#input-text .cm-content .cm-line:nth-of-type(1)")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line:nth-of-type(2)")
|
|
.waitForElementPresent("#input-text .cm-content .cm-specialChar");
|
|
browser.expect.element("#input-text .cm-content .cm-specialChar").text.to.equal("␊");
|
|
browser.expect.element("#input-text .cm-status-bar .stats-length-value").text.to.equal("301");
|
|
browser.expect.element("#input-text .cm-status-bar .stats-lines-value").text.to.equal("1");
|
|
|
|
// Output
|
|
browser
|
|
.waitForElementPresent("#output-text .cm-content .cm-line:nth-of-type(1)")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line:nth-of-type(2)")
|
|
.waitForElementPresent("#output-text .cm-content .cm-specialChar");
|
|
browser.expect.element("#output-text .cm-content .cm-specialChar").text.to.equal("␊");
|
|
browser.expect.element("#output-text .cm-status-bar .stats-length-value").text.to.equal("301");
|
|
browser.expect.element("#output-text .cm-status-bar .stats-lines-value").text.to.equal("1");
|
|
|
|
/* Adding new line ending changes output correctly */
|
|
browser.sendKeys("#input-text .cm-content", browser.Keys.RETURN);
|
|
|
|
// Input
|
|
browser
|
|
.waitForElementPresent("#input-text .cm-content .cm-line:nth-of-type(2)")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line:nth-of-type(3)");
|
|
browser.expect.element("#input-text .cm-status-bar .stats-length-value").text.to.equal("302");
|
|
browser.expect.element("#input-text .cm-status-bar .stats-lines-value").text.to.equal("2");
|
|
|
|
// Output
|
|
bake(browser);
|
|
browser
|
|
.waitForElementPresent("#output-text .cm-content .cm-line:nth-of-type(2)")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line:nth-of-type(3)");
|
|
browser.expect.element("#output-text .cm-status-bar .stats-length-value").text.to.equal("302");
|
|
browser.expect.element("#output-text .cm-status-bar .stats-lines-value").text.to.equal("2");
|
|
|
|
// Input EOL: CRLF
|
|
setEOLSeq(browser, "input", "CRLF");
|
|
// Output EOL: CR
|
|
setEOLSeq(browser, "output", "CR");
|
|
browser.sendKeys("#input-text .cm-content", browser.Keys.RETURN);
|
|
|
|
// Input
|
|
browser
|
|
.waitForElementPresent("#input-text .cm-content .cm-line:nth-of-type(2)")
|
|
.waitForElementNotPresent("#input-text .cm-content .cm-line:nth-of-type(3)")
|
|
.waitForElementPresent("#input-text .cm-content .cm-line:nth-of-type(1) .cm-specialChar:nth-of-type(3)");
|
|
browser.expect.element("#input-text .cm-content .cm-line:nth-of-type(1) .cm-specialChar:nth-of-type(3)").text.to.equal("␋");
|
|
browser.expect.element("#input-text .cm-status-bar .stats-length-value").text.to.equal("304");
|
|
browser.expect.element("#input-text .cm-status-bar .stats-lines-value").text.to.equal("2");
|
|
|
|
// Output
|
|
bake(browser);
|
|
browser
|
|
.waitForElementPresent("#output-text .cm-content .cm-line:nth-of-type(2)")
|
|
.waitForElementNotPresent("#output-text .cm-content .cm-line:nth-of-type(3)")
|
|
.waitForElementPresent("#output-text .cm-content .cm-line:nth-of-type(2) .cm-specialChar");
|
|
browser.expect.element("#output-text .cm-content .cm-line:nth-of-type(2) .cm-specialChar").text.to.equal("␊");
|
|
browser.expect.element("#output-text .cm-status-bar .stats-length-value").text.to.equal("304");
|
|
browser.expect.element("#output-text .cm-status-bar .stats-lines-value").text.to.equal("2");
|
|
|
|
/* Line endings appear in the URL */
|
|
browser.assert.urlContains("ieol=%0D%0A");
|
|
browser.assert.urlContains("oeol=%0D");
|
|
|
|
/* Preserved when changing tabs */
|
|
browser
|
|
.click("#btn-new-tab")
|
|
.waitForElementVisible("#input-tabs li:nth-of-type(2).active-input-tab");
|
|
browser.expect.element("#input-text .eol-value").text.that.equals("LF");
|
|
browser.expect.element("#output-text .eol-value").text.that.equals("LF");
|
|
|
|
setEOLSeq(browser, "input", "FF");
|
|
setEOLSeq(browser, "output", "LS");
|
|
|
|
browser
|
|
.click("#input-tabs li:nth-of-type(1)")
|
|
.waitForElementVisible("#input-tabs li:nth-of-type(1).active-input-tab");
|
|
browser.expect.element("#input-text .eol-value").text.that.equals("CRLF");
|
|
browser.expect.element("#output-text .eol-value").text.that.equals("CR");
|
|
},
|
|
|
|
"File inputs": browser => {
|
|
clear(browser);
|
|
|
|
/* Side panel displays correct info */
|
|
uploadFile(browser, "files/TowelDay.jpeg");
|
|
|
|
browser
|
|
.waitForElementVisible("#input-text .cm-file-details")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-toggle-shown")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-thumbnail")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-name")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-size")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-type")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-loaded");
|
|
browser.expect.element("#input-text .cm-file-details .file-details-name").text.that.equals("TowelDay.jpeg");
|
|
browser.expect.element("#input-text .cm-file-details .file-details-size").text.that.equals("61,379 bytes");
|
|
browser.expect.element("#input-text .cm-file-details .file-details-type").text.that.equals("image/jpeg");
|
|
browser.expect.element("#input-text .cm-file-details .file-details-loaded").text.that.equals("100%");
|
|
|
|
/* Side panel can be hidden */
|
|
browser
|
|
.click("#input-text .cm-file-details .file-details-toggle-shown")
|
|
.waitForElementNotPresent("#input-text .cm-file-details .file-details-toggle-shown")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-toggle-hidden")
|
|
.expect.element("#input-text .cm-file-details").to.have.css("width").which.equals("1px");
|
|
|
|
browser
|
|
.click("#input-text .cm-file-details .file-details-toggle-hidden")
|
|
.waitForElementNotPresent("#input-text .cm-file-details .file-details-toggle-hidden")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-toggle-shown")
|
|
.expect.element("#input-text .cm-file-details").to.have.css("width").which.equals("200px");
|
|
},
|
|
|
|
"Folder inputs": browser => {
|
|
clear(browser);
|
|
|
|
/* Side panel displays correct info */
|
|
uploadFolder(browser, "files");
|
|
|
|
// Tab 1
|
|
browser
|
|
.click("#input-tabs li:nth-of-type(1)")
|
|
.waitForElementVisible("#input-tabs li:nth-of-type(1).active-input-tab");
|
|
|
|
browser
|
|
.waitForElementVisible("#input-text .cm-file-details")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-toggle-shown")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-thumbnail")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-name")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-size")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-type")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-loaded");
|
|
browser.expect.element("#input-text .cm-file-details .file-details-name").text.that.equals("TowelDay.jpeg");
|
|
browser.expect.element("#input-text .cm-file-details .file-details-size").text.that.equals("61,379 bytes");
|
|
browser.expect.element("#input-text .cm-file-details .file-details-type").text.that.equals("image/jpeg");
|
|
browser.expect.element("#input-text .cm-file-details .file-details-loaded").text.that.equals("100%");
|
|
|
|
// Tab 2
|
|
browser
|
|
.click("#input-tabs li:nth-of-type(2)")
|
|
.waitForElementVisible("#input-tabs li:nth-of-type(2).active-input-tab");
|
|
|
|
browser
|
|
.waitForElementVisible("#input-text .cm-file-details")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-toggle-shown")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-thumbnail")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-name")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-size")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-type")
|
|
.waitForElementVisible("#input-text .cm-file-details .file-details-loaded");
|
|
browser.expect.element("#input-text .cm-file-details .file-details-name").text.that.equals("Hitchhikers_Guide.jpeg");
|
|
browser.expect.element("#input-text .cm-file-details .file-details-size").text.that.equals("36,595 bytes");
|
|
browser.expect.element("#input-text .cm-file-details .file-details-type").text.that.equals("image/jpeg");
|
|
browser.expect.element("#input-text .cm-file-details .file-details-loaded").text.that.equals("100%");
|
|
},
|
|
|
|
"Loading from URL": browser => {
|
|
/* Complex deep link populates the input correctly (encoding, eol, input) */
|
|
},
|
|
|
|
"Replace input with output": browser => {
|
|
/* Input is correctly populated */
|
|
/* Special characters, encodings and line endings all as expected */
|
|
},
|
|
|
|
|
|
after: browser => {
|
|
browser.end();
|
|
}
|
|
};
|
|
|
|
/** @function
|
|
* Clears the recipe and input
|
|
*
|
|
* @param {Browser} browser - Nightwatch client
|
|
*/
|
|
function clear(browser) {
|
|
browser
|
|
.useCss()
|
|
.click("#clr-recipe")
|
|
.click("#clr-io")
|
|
.waitForElementNotPresent("#rec-list li.operation")
|
|
.expect.element("#input-text .cm-content").text.that.equals("");
|
|
}
|
|
|
|
/** @function
|
|
* Sets the input to the desired string
|
|
*
|
|
* @param {Browser} browser - Nightwatch client
|
|
* @param {string} input - The text to populate the input with
|
|
* @param {boolean} [type=true] - Whether to type the characters in by using sendKeys,
|
|
* or to set the value of the editor directly (useful for special characters)
|
|
*/
|
|
function setInput(browser, input, type=true) {
|
|
clear(browser);
|
|
if (type) {
|
|
browser
|
|
.useCss()
|
|
.sendKeys("#input-text .cm-content", input)
|
|
.pause(100);
|
|
} else {
|
|
browser.execute(text => {
|
|
window.app.setInput(text);
|
|
}, [input]);
|
|
}
|
|
}
|
|
|
|
/** @function
|
|
* Triggers a bake
|
|
*
|
|
* @param {Browser} browser - Nightwatch client
|
|
*/
|
|
function bake(browser) {
|
|
browser
|
|
.click("#bake")
|
|
.pause(100)
|
|
.waitForElementPresent("#stale-indicator.hidden", 5000);
|
|
}
|
|
|
|
/** @function
|
|
* Sets the character encoding in the input or output
|
|
*
|
|
* @param {Browser} browser - Nightwatch client
|
|
* @param {string} io - Either "input" or "output"
|
|
* @param {string} enc - The encoding to be set
|
|
*/
|
|
function setChrEnc(browser, io, enc) {
|
|
io = `#${io}-text`;
|
|
browser
|
|
.useCss()
|
|
.click(io + " .chr-enc-value")
|
|
.waitForElementVisible(io + " .chr-enc-select .cm-status-bar-select-scroll")
|
|
.click("link text", enc)
|
|
.waitForElementNotVisible(io + " .chr-enc-select .cm-status-bar-select-scroll")
|
|
.expect.element(io + " .chr-enc-value").text.that.equals(enc);
|
|
}
|
|
|
|
/** @function
|
|
* Sets the end of line sequence in the input or output
|
|
*
|
|
* @param {Browser} browser - Nightwatch client
|
|
* @param {string} io - Either "input" or "output"
|
|
* @param {string} eol - The sequence to set
|
|
*/
|
|
function setEOLSeq(browser, io, eol) {
|
|
io = `#${io}-text`;
|
|
browser
|
|
.useCss()
|
|
.click(io + " .eol-value")
|
|
.waitForElementVisible(io + " .eol-select .cm-status-bar-select-content")
|
|
.click(`${io} .cm-status-bar-select-content a[data-val=${eol}]`)
|
|
.waitForElementNotVisible(io + " .eol-select .cm-status-bar-select-content")
|
|
.expect.element(io + " .eol-value").text.that.equals(eol);
|
|
}
|
|
|
|
/** @function
|
|
* Copies whatever is currently selected
|
|
*
|
|
* @param {Browser} browser - Nightwatch client
|
|
*/
|
|
function copy(browser) {
|
|
browser.perform(function() {
|
|
const actions = this.actions({async: true});
|
|
|
|
// Ctrl + Ins used as this works on Windows, Linux and Mac
|
|
return actions
|
|
.keyDown(browser.Keys.CONTROL)
|
|
.keyDown(browser.Keys.INSERT)
|
|
.keyUp(browser.Keys.INSERT)
|
|
.keyUp(browser.Keys.CONTROL);
|
|
});
|
|
}
|
|
|
|
/** @function
|
|
* Pastes into the target element
|
|
*
|
|
* @param {Browser} browser - Nightwatch client
|
|
* @param {string} el - Target element selector
|
|
*/
|
|
function paste(browser, el) {
|
|
browser
|
|
.click(el)
|
|
.perform(function() {
|
|
const actions = this.actions({async: true});
|
|
|
|
// Shift + Ins used as this works on Windows, Linux and Mac
|
|
return actions
|
|
.keyDown(browser.Keys.SHIFT)
|
|
.keyDown(browser.Keys.INSERT)
|
|
.keyUp(browser.Keys.INSERT)
|
|
.keyUp(browser.Keys.SHIFT);
|
|
})
|
|
.pause(100);
|
|
}
|
|
|
|
/** @function
|
|
* Loads a recipe and input
|
|
*
|
|
* @param {Browser} browser - Nightwatch client
|
|
* @param {string|Array<string>} opName - name of operation to be loaded, array for multiple ops
|
|
* @param {string} input - input text for test
|
|
* @param {Array<string>|Array<Array<string>>} args - arguments, nested if multiple ops
|
|
*/
|
|
function loadRecipe(browser, opName, input, args) {
|
|
let recipeConfig;
|
|
|
|
if (typeof(opName) === "string") {
|
|
recipeConfig = JSON.stringify([{
|
|
"op": opName,
|
|
"args": args
|
|
}]);
|
|
} else if (opName instanceof Array) {
|
|
recipeConfig = JSON.stringify(
|
|
opName.map((op, i) => {
|
|
return {
|
|
op: op,
|
|
args: args.length ? args[i] : []
|
|
};
|
|
})
|
|
);
|
|
} else {
|
|
throw new Error("Invalid operation type. Must be string or array of strings. Received: " + typeof(opName));
|
|
}
|
|
|
|
clear(browser);
|
|
setInput(browser, input, false);
|
|
browser
|
|
.urlHash("recipe=" + recipeConfig)
|
|
.waitForElementPresent("#rec-list li.operation");
|
|
}
|
|
|
|
/** @function
|
|
* Tests whether the output matches a given value
|
|
*
|
|
* @param {Browser} browser - Nightwatch client
|
|
* @param {string} expected - The expected output value
|
|
*/
|
|
function expectOutput(browser, expected) {
|
|
browser.execute(expected => {
|
|
return expected === window.app.manager.output.outputEditorView.state.doc.toString();
|
|
}, [expected]);
|
|
}
|
|
|
|
/** @function
|
|
* Uploads a file using the #open-file input
|
|
*
|
|
* @param {Browser} browser - Nightwatch client
|
|
* @param {string} filename - A path to a file in the samples directory
|
|
*/
|
|
function uploadFile(browser, filename) {
|
|
const filepath = require("path").resolve(__dirname + "/../samples/" + filename);
|
|
|
|
// The file input cannot be interacted with by nightwatch while it is hidden,
|
|
// so we temporarily expose it for the purposes of this test.
|
|
browser.execute(() => {
|
|
document.getElementById("open-file").style.display = "block";
|
|
});
|
|
browser
|
|
.pause(100)
|
|
.setValue("#open-file", filepath)
|
|
.pause(100);
|
|
browser.execute(() => {
|
|
document.getElementById("open-file").style.display = "none";
|
|
});
|
|
browser.waitForElementVisible("#input-text .cm-file-details");
|
|
}
|
|
|
|
/** @function
|
|
* Uploads a folder using the #open-folder input
|
|
*
|
|
* @param {Browser} browser - Nightwatch client
|
|
* @param {string} foldername - A path to a folder in the samples directory
|
|
*/
|
|
function uploadFolder(browser, foldername) {
|
|
const folderpath = require("path").resolve(__dirname + "/../samples/" + foldername);
|
|
|
|
// The folder input cannot be interacted with by nightwatch while it is hidden,
|
|
// so we temporarily expose it for the purposes of this test.
|
|
browser.execute(() => {
|
|
document.getElementById("open-folder").style.display = "block";
|
|
});
|
|
browser
|
|
.pause(100)
|
|
.setValue("#open-folder", folderpath)
|
|
.pause(500);
|
|
browser.execute(() => {
|
|
document.getElementById("open-folder").style.display = "none";
|
|
});
|
|
browser.waitForElementVisible("#input-text .cm-file-details");
|
|
}
|