etherpad-lite/src/tests/frontend/specs/importexport.js

603 lines
20 KiB
JavaScript

'use strict';
describe('importexport.js', function () {
const testCases = [
{
name: 'text with newlines',
inputText: [
'imported text\n',
'newline',
].join(''),
wantPadLines: [
'<span class="">imported text</span>',
'<span class="">newline</span>',
],
wantExportHtmlBody: [
'imported text<br>',
'newline<br>',
].join(''),
wantExportText: [
'imported text\n',
'newline\n',
].join(''),
},
{
name: 'HTML with newlines',
inputHtmlBody: [
'htmltext<br>',
'newline',
].join(''),
wantPadLines: [
'<span class="">htmltext</span>',
'<span class="">newline</span>',
'<br>',
],
wantExportHtmlBody: [
'htmltext<br>',
'newline<br>',
'<br>',
].join(''),
wantExportText: [
'htmltext\n',
'newline\n',
'\n',
].join(''),
},
{
name: 'HTML with attributes',
inputHtmlBody: [
'htmltext<br>',
'<span class="b s i u"><b><i><s><u>newline</u></s></i></b>',
].join(''),
wantPadLines: [
'<span class="">htmltext</span>',
'<span class="b i s u"><b><i><s><u>newline</u></s></i></b></span>',
'<br>',
],
wantExportHtmlBody: [
'htmltext<br>',
'<strong><em><s><u>newline</u></s></em></strong><br>',
'<br>',
].join(''),
wantExportText: [
'htmltext\n',
'newline\n',
'\n',
].join(''),
},
{
name: 'HTML with bullets',
inputHtmlBody: [
'<ul class="list-bullet1">',
' <li>bullet line 1</li>',
' <li>bullet line 2',
' <ul class="list-bullet2">',
' <li>bullet2 line 1</li>',
' <li>bullet2 line 2</li>',
' </ul>',
' </li>',
'</ul>',
].join(''),
wantPadLines: [
'<ul class="list-bullet1"><li><span class="">bullet line 1</span></li></ul>',
'<ul class="list-bullet1"><li><span class="">bullet line 2</span></li></ul>',
'<ul class="list-bullet2"><li><span class="">bullet2 line 1</span></li></ul>',
'<ul class="list-bullet2"><li><span class="">bullet2 line 2</span></li></ul>',
'<br>',
],
wantExportHtmlBody: [
'<ul class=bullet>',
' <li>bullet line 1</li>',
' <li>bullet line 2',
' <ul class=bullet>',
' <li>bullet2 line 1</li>',
' <li>bullet2 line 2</li>',
' </ul>',
' </li>',
'</ul>',
'<br>',
].map((l) => l.replace(/^\s+/, '')).join(''),
wantExportText: [
'\t* bullet line 1\n',
'\t* bullet line 2\n',
'\t\t* bullet2 line 1\n',
'\t\t* bullet2 line 2\n',
'\n',
].join(''),
},
{
name: 'HTML with bullets and newlines',
inputHtmlBody: [
'<ul class="list-bullet1">',
' <li>bullet line 1</li>',
'</ul>',
'<br>',
'<ul class="list-bullet1">',
' <li>bullet line 2',
' <ul class="list-bullet2">',
' <li>bullet2 line 1</li>',
' </ul>',
' </li>',
'</ul>',
'<br>',
'<ul class="list-bullet1">',
' <li>',
' <ul class="list-bullet2">',
' <li>bullet2 line 2</li>',
' </ul>',
' </li>',
'</ul>',
].join(''),
wantPadLines: [
'<ul class="list-bullet1"><li><span class="">bullet line 1</span></li></ul>',
'<br>',
'<ul class="list-bullet1"><li><span class="">bullet line 2</span></li></ul>',
'<ul class="list-bullet2"><li><span class="">bullet2 line 1</span></li></ul>',
'<br>',
'<ul class="list-bullet2"><li><span class="">bullet2 line 2</span></li></ul>',
'<br>',
],
wantExportHtmlBody: [
'<ul class=bullet>',
' <li>bullet line 1</li>',
'</ul>',
'<br>',
'<ul class=bullet>',
' <li>bullet line 2',
' <ul class=bullet>',
' <li>bullet2 line 1</li>',
' </ul>',
' </li>',
'</ul>',
'<br>',
'<ul class=bullet>',
' <li>',
' <ul class=bullet>',
' <li>bullet2 line 2</li>',
' </ul>',
' </li>',
'</ul>',
'<br>',
].map((l) => l.replace(/^\s+/, '')).join(''),
wantExportText: [
'\t* bullet line 1\n',
'\n',
'\t* bullet line 2\n',
'\t\t* bullet2 line 1\n',
'\n',
'\t\t* bullet2 line 2\n',
'\n',
].join(''),
},
{
name: 'HTML with bullets, newlines, and attributes',
inputHtmlBody: [
'<ul class="list-bullet1">',
' <li>bullet line 1</li>',
'</ul>',
'<br>',
'<ul class="list-bullet1">',
' <li>bullet line 2',
' <ul class="list-bullet2">',
' <li>bullet2 line 1</li>',
' </ul>',
' </li>',
'</ul>',
'<br>',
'<ul class="list-bullet1">',
' <li>',
' <ul class="list-bullet2">',
' <li>',
' <ul class="list-bullet3">',
' <li>',
' <ul class="list-bullet4">',
' <li><span class="b s i u"><b><i><s><u>bullet4 line 2 bisu</u>' +
'</s></i></b></span></li>',
' <li><span class="b s "><b><s>bullet4 line 2 bs</s></b></span></li>',
' <li><span class="u"><u>bullet4 line 2 u</u></span>' +
'<span class="u i s"><i><s><u>uis</u></s></i></span></li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
'</ul>',
].join(''),
wantPadLines: [
'<ul class="list-bullet1"><li><span class="">bullet line 1</span></li></ul>',
'<br>',
'<ul class="list-bullet1"><li><span class="">bullet line 2</span></li></ul>',
'<ul class="list-bullet2"><li><span class="">bullet2 line 1</span></li></ul>',
'<br>',
'<ul class="list-bullet4"><li><span class="b i s u"><b><i><s><u>' +
'bullet4 line 2 bisu</u></s></i></b></span></li></ul>',
'<ul class="list-bullet4"><li><span class="b s"><b><s>bullet4 line 2 bs</s>' +
'</b></span></li></ul>',
'<ul class="list-bullet4"><li><span class="u"><u>bullet4 line 2 u</u></span>' +
'<span class="i s u"><i><s><u>uis</u></s></i></span></li></ul>',
'<br>',
],
wantExportHtmlBody: [
'<ul class=bullet><li>bullet line 1</li></ul>',
'<br>',
'<ul class=bullet>',
' <li>bullet line 2',
' <ul class=bullet><li>bullet2 line 1</li></ul>',
' </li>',
'</ul>',
'<br>',
'<ul class=bullet>',
' <li>',
' <ul class=bullet>',
' <li>',
' <ul class=bullet>',
' <li>',
' <ul class=bullet>',
' <li><strong><em><s><u>bullet4 line 2 bisu</u></s></em></strong></li>',
' <li><strong><s>bullet4 line 2 bs</s></strong></li>',
' <li><u>bullet4 line 2 u<em><s>uis</s></em></u></li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
'</ul>',
'<br>',
].map((l) => l.replace(/^\s+/, '')).join(''),
wantExportText: [
'\t* bullet line 1\n',
'\n',
'\t* bullet line 2\n',
'\t\t* bullet2 line 1\n',
'\n',
'\t\t\t\t* bullet4 line 2 bisu\n',
'\t\t\t\t* bullet4 line 2 bs\n',
'\t\t\t\t* bullet4 line 2 uuis\n',
'\n',
].join(''),
},
{
name: 'HTML with nested bullets',
inputHtmlBody: [
'<ul class="list-bullet1"><li>bullet line 1</li></ul>',
'<ul class="list-bullet1">',
' <li>bullet line 2',
' <ul class="list-bullet2">',
' <li>bullet2 line 1</li>',
' </ul>',
' </li>',
'</ul>',
'<ul class="list-bullet1">',
' <li>',
' <ul class="list-bullet2">',
' <li>',
' <ul class="list-bullet3">',
' <li>',
' <ul class="list-bullet4">',
' <li>bullet4 line 2</li>',
' <li>bullet4 line 2</li>',
' <li>bullet4 line 2</li>',
' </ul>',
' </li>',
' <li>bullet3 line 1</li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
'</ul>',
].join(''),
wantPadLines: [
'<ul class="list-bullet1"><li><span class="">bullet line 1</span></li></ul>',
'<ul class="list-bullet1"><li><span class="">bullet line 2</span></li></ul>',
'<ul class="list-bullet2"><li><span class="">bullet2 line 1</span></li></ul>',
'<ul class="list-bullet4"><li><span class="">bullet4 line 2</span></li></ul>',
'<ul class="list-bullet4"><li><span class="">bullet4 line 2</span></li></ul>',
'<ul class="list-bullet4"><li><span class="">bullet4 line 2</span></li></ul>',
'<ul class="list-bullet3"><li><span class="">bullet3 line 1</span></li></ul>',
'<br>',
],
wantExportHtmlBody: [
'<ul class=bullet>',
' <li>bullet line 1</li>',
' <li>bullet line 2',
' <ul class=bullet>',
' <li>bullet2 line 1',
' <ul class=bullet>',
' <li>',
' <ul class=bullet>',
' <li>bullet4 line 2</li>',
' <li>bullet4 line 2</li>',
' <li>bullet4 line 2</li>',
' </ul>',
' </li>',
' <li>bullet3 line 1</li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
'</ul>',
'<br>',
].map((l) => l.replace(/^\s+/, '')).join(''),
wantExportText: [
'\t* bullet line 1\n',
'\t* bullet line 2\n',
'\t\t* bullet2 line 1\n',
'\t\t\t\t* bullet4 line 2\n',
'\t\t\t\t* bullet4 line 2\n',
'\t\t\t\t* bullet4 line 2\n',
'\t\t\t* bullet3 line 1\n',
'\n',
].join(''),
},
{
name: 'HTML with 8 levels of bullets, newlines, and attributes',
inputHtmlBody: [
'<ul class="list-bullet1">',
' <li>bullet line 1</li>',
'</ul>',
'<br>',
'<ul class="list-bullet1">',
' <li>bullet line 2',
' <ul class="list-bullet2">',
' <li>bullet2 line 1</li>',
' </ul>',
' </li>',
'</ul>',
'<br>',
'<ul class="list-bullet1">',
' <li>',
' <ul class="list-bullet2">',
' <li>',
' <ul class="list-bullet3">',
' <li>',
' <ul class="list-bullet4">',
' <li><span class="b s i u"><b><i><s><u>bullet4 line 2 bisu' +
'</u></s></i></b></span></li>',
' <li><span class="b s "><b><s>bullet4 line 2 bs</s></b></span></li>',
' <li><span class="u"><u>bullet4 line 2 u</u></span>' +
'<span class="u i s"><i><s><u>uis</u></s></i></span></li>',
' <li>',
' <ul class="list-bullet5">',
' <li>',
' <ul class="list-bullet6">',
' <li>',
' <ul class="list-bullet7">',
' <li>',
' <ul class="list-bullet8">',
' <li><span class="">foo</span></li>',
' <li><span class="b s"><b><s>foobar bs</b></s></span></li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
' <li>',
' <ul class="list-bullet5">',
' <li>foobar</li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
'</ul>',
].join(''),
wantPadLines: [
'<ul class="list-bullet1"><li><span class="">bullet line 1</span></li></ul>',
'<br>',
'<ul class="list-bullet1"><li><span class="">bullet line 2</span></li></ul>',
'<ul class="list-bullet2"><li><span class="">bullet2 line 1</span></li></ul>',
'<br>',
'<ul class="list-bullet4"><li><span class="b i s u"><b><i><s><u>' +
'bullet4 line 2 bisu</u></s></i></b></span></li></ul>',
'<ul class="list-bullet4"><li><span class="b s"><b><s>bullet4 line 2 bs</s>' +
'</b></span></li></ul>',
'<ul class="list-bullet4"><li><span class="u"><u>bullet4 line 2 u</u></span>' +
'<span class="i s u"><i><s><u>uis</u></s></i></span></li></ul>',
'<ul class="list-bullet8"><li><span class="">foo</span></li></ul>',
'<ul class="list-bullet8"><li><span class="b s"><b><s>foobar bs</s></b></span></li></ul>',
'<ul class="list-bullet5"><li><span class="">foobar</span></li></ul>',
'<br>',
],
wantExportHtmlBody: [
'<ul class=bullet>',
' <li>bullet line 1</li>',
'</ul>',
'<br>',
'<ul class=bullet>',
' <li>bullet line 2',
' <ul class=bullet>',
' <li>bullet2 line 1</li>',
' </ul>',
' </li>',
'</ul>',
'<br>',
'<ul class=bullet>',
' <li>',
' <ul class=bullet>',
' <li>',
' <ul class=bullet>',
' <li>',
' <ul class=bullet>',
' <li><strong><em><s><u>bullet4 line 2 bisu</u></s></em></strong></li>',
' <li><strong><s>bullet4 line 2 bs</s></strong></li>',
' <li><u>bullet4 line 2 u<em><s>uis</s></em></u>',
' <ul class=bullet>',
' <li>',
' <ul class=bullet>',
' <li>',
' <ul class=bullet>',
' <li>',
' <ul class=bullet>',
' <li>foo</li>',
' <li><strong><s>foobar bs</s></strong></li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
' <li>foobar</li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
' </ul>',
' </li>',
'</ul>',
'<br>',
].map((l) => l.replace(/^\s+/, '')).join(''),
wantExportText: [
'\t* bullet line 1\n',
'\n',
'\t* bullet line 2\n',
'\t\t* bullet2 line 1\n',
'\n',
'\t\t\t\t* bullet4 line 2 bisu\n',
'\t\t\t\t* bullet4 line 2 bs\n',
'\t\t\t\t* bullet4 line 2 uuis\n',
'\t\t\t\t\t\t\t\t* foo\n',
'\t\t\t\t\t\t\t\t* foobar bs\n',
'\t\t\t\t\t* foobar\n',
'\n',
].join(''),
},
{
name: 'HTML with ordered lists',
inputHtmlBody: [
'<ol class="list-number1" start="1"><li>number 1 line 1</li></ol>',
'<ol class="list-number1" start="2"><li>number 2 line 2</li></ol>',
].join(''),
wantPadLines: [
'<ol start="1" class="list-number1"><li><span class="">number 1 line 1</span></li></ol>',
'<ol start="2" class="list-number1"><li><span class="">number 2 line 2</span></li></ol>',
'<br>',
],
wantExportHtmlBody: [
'<ol start=1 class=number>',
' <li>number 1 line 1</li>',
' <li>number 2 line 2</li>',
'</ol>',
'<br>',
].map((l) => l.replace(/^\s+/, '')).join(''),
wantExportText: [
'\t1. number 1 line 1\n',
'\t2. number 2 line 2\n',
'\n',
].join(''),
},
];
let confirm;
before(async function () {
await helper.aNewPad();
confirm = helper.padChrome$.window.confirm;
helper.padChrome$.window.confirm = () => true;
// As of 2021-02-22 a mutable FileList cannot be directly created so DataTransfer is used as a
// hack to access a mutable FileList for testing the '<input type="file">' element. DataTransfer
// itself is quite new so support for it is tested here. See:
// * https://github.com/whatwg/html/issues/3269
// * https://stackoverflow.com/q/47119426
try {
const dt = new DataTransfer();
dt.items.add(new File(['testing'], 'file.txt', {type: 'text/plain'}));
// Supposedly all modern browsers support a settable HTMLInputElement.files property, but
// Firefox 52 complains.
helper.padChrome$('#importform input[type=file]')[0].files = dt.files;
} catch (err) {
return this.skip();
}
});
after(async function () {
helper.padChrome$.window.confirm = confirm;
});
beforeEach(async function () {
const popup = helper.padChrome$('#import_export');
const isVisible = () => popup.hasClass('popup-show');
if (isVisible()) return;
const button = helper.padChrome$('button[data-l10n-id="pad.toolbar.import_export.title"]');
button.click();
await helper.waitForPromise(isVisible);
});
const docToHtml = (() => {
const s = new XMLSerializer();
return (doc) => s.serializeToString(doc);
})();
const htmlToDoc = (() => {
const p = new DOMParser();
return (html) => p.parseFromString(html, 'text/html');
})();
const htmlBodyToDoc = (htmlBody) => {
const doc = document.implementation.createHTMLDocument();
$('body', doc).html(htmlBody);
return doc;
};
for (const tc of testCases) {
describe(tc.name, function () {
it('import', async function () {
const ext = tc.inputHtmlBody ? 'html' : 'txt';
const contents = ext === 'html' ? docToHtml(htmlBodyToDoc(tc.inputHtmlBody)) : tc.inputText;
// DataTransfer is used as a hacky way to get a mutable FileList. For details, see:
// https://stackoverflow.com/q/47119426
const dt = new DataTransfer();
dt.items.add(new File([contents], `file.${ext}`, {type: 'text/plain'}));
const form = helper.padChrome$('#importform');
form.find('input[type=file]')[0].files = dt.files;
form.find('#importsubmitinput').submit();
try {
await helper.waitForPromise(() => {
const got = helper.linesDiv();
if (got.length !== tc.wantPadLines.length) return false;
for (let i = 0; i < got.length; i++) {
const gotDiv = $('<div>').html(got[i].html());
const wantDiv = $('<div>').html(tc.wantPadLines[i]);
if (!gotDiv[0].isEqualNode(wantDiv[0])) return false;
}
return true;
});
} catch (err) {
const formatLine = (l) => ` ${JSON.stringify(l)}`;
const g = helper.linesDiv().map((div) => formatLine(div.html())).join('\n');
const w = tc.wantPadLines.map(formatLine).join('\n');
throw new Error(`Import failed. Got pad lines:\n${g}\nWant pad lines:\n${w}`);
}
});
it('export to HTML', async function () {
const link = helper.padChrome$('#exporthtmla').attr('href');
const url = new URL(link, helper.padChrome$.window.location.href).href;
const gotHtml = await $.ajax({url, dataType: 'html'});
const gotBody = $('body', htmlToDoc(gotHtml));
gotBody.html(gotBody.html().replace(/^\s+|\s+$/g, ''));
const wantBody = $('body', htmlBodyToDoc(tc.wantExportHtmlBody));
if (!gotBody[0].isEqualNode(wantBody[0])) {
throw new Error(`Got exported HTML body:\n ${JSON.stringify(gotBody.html())}\n` +
`Want HTML body:\n ${JSON.stringify(wantBody.html())}`);
}
});
it('export to text', async function () {
const link = helper.padChrome$('#exportplaina').attr('href');
const url = new URL(link, helper.padChrome$.window.location.href).href;
const got = await $.ajax({url, dataType: 'text'});
expect(got).to.be(tc.wantExportText);
});
});
}
});