const assert = require("assert");
|
|
Feature("Richtext cases").tag("@regress");
|
|
const createConfig = (tag = "Text", granularity = "symbol") => {
|
return `<View>
|
<Labels name="label" toName="text">
|
<Label value="Label" background="green"/>
|
</Labels>
|
<${tag} name="text" value="$text" inline="true" ${granularity ? `granularity="${granularity}"` : ""}/>
|
</View>`;
|
};
|
|
Scenario("Broken limits", async ({ I, LabelStudio, AtOutliner }) => {
|
I.amOnPage("/");
|
LabelStudio.init({
|
annotations: [
|
{
|
id: "test",
|
result: [
|
{
|
id: "a",
|
from_name: "label",
|
to_name: "text",
|
type: "labels",
|
value: { start: -1, end: 6, labels: ["Label"], text: "Second" },
|
},
|
],
|
},
|
],
|
config: createConfig(),
|
data: { text: "First line\nSecond line" },
|
});
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(1);
|
AtOutliner.clickRegion(1);
|
// The potential errors should be caught by `errorsCollector` plugin
|
});
|
|
Scenario("The selection in degenerate cases", async ({ I, LabelStudio, AtOutliner, AtRichText }) => {
|
I.amOnPage("/");
|
LabelStudio.init({
|
annotations: [{ id: "test", result: [] }],
|
config: createConfig(),
|
data: { text: "\n\nThird line" },
|
});
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(0);
|
I.pressKey("1");
|
await AtRichText.selectTextByGlobalOffset(0, 2);
|
// The potential errors should be caught by `errorsCollector` plugin
|
});
|
|
Scenario("Exactly 1 word", async ({ I, LabelStudio, AtOutliner, AtRichText }) => {
|
I.amOnPage("/");
|
LabelStudio.init({
|
annotations: [
|
{
|
id: "test",
|
result: [],
|
},
|
],
|
config: createConfig("Text", "word"),
|
data: { text: "Somé wórds\n\nwíth\n\nmultiline" },
|
});
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(0);
|
I.pressKey("1");
|
AtRichText.dblClickOnWord("Somé");
|
AtOutliner.see("Somé");
|
AtOutliner.dontSee("Somé wórds");
|
// The potential errors should be caught by `errorsCollector` plugin
|
});
|
|
Scenario("Trim spaces around the word", async ({ I, LabelStudio, AtOutliner, AtRichText }) => {
|
I.amOnPage("/");
|
LabelStudio.init({
|
annotations: [
|
{
|
id: "test",
|
result: [],
|
},
|
],
|
config: createConfig("Text", "word"),
|
data: { text: "One two three four five six" },
|
});
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(0);
|
I.pressKey("1");
|
AtRichText.dblClickOnWord("four");
|
AtOutliner.see("four");
|
I.pressKey("1");
|
await AtRichText.selectTextByGlobalOffset(3, 8);
|
AtOutliner.see("two");
|
const result = await LabelStudio.serialize();
|
|
assert.strictEqual(result[0].value.text, "four");
|
assert.strictEqual(result[1].value.text, "two");
|
// The potential errors should be caught by `errorsCollector` plugin
|
});
|
|
Scenario("Trim spaces with BRs", async ({ I, LabelStudio, AtOutliner, AtRichText }) => {
|
I.amOnPage("/");
|
LabelStudio.init({
|
annotations: [
|
{
|
id: "test",
|
result: [],
|
},
|
],
|
config: createConfig("Text", "word"),
|
data: { text: "Three\n\n\nBRs\n\n\ntrim test" },
|
});
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(0);
|
I.pressKey("1");
|
await AtRichText.selectTextByGlobalOffset(5, 14);
|
AtOutliner.see("BRs");
|
const result = await LabelStudio.serialize();
|
|
assert.strictEqual(result[0].value.text, "BRs");
|
// The potential errors should be caught by `errorsCollector` plugin
|
});
|
|
Scenario("Overlap checks", async ({ I, LabelStudio, AtOutliner, AtRichText }) => {
|
I.amOnPage("/");
|
LabelStudio.init({
|
annotations: [
|
{
|
id: "test",
|
result: [],
|
},
|
],
|
config: createConfig(),
|
data: { text: "Halfword" },
|
});
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(0);
|
I.pressKey("1");
|
await AtRichText.selectTextByGlobalOffset(0, 4);
|
AtOutliner.see("Half");
|
I.pressKey("1");
|
await AtRichText.selectTextByGlobalOffset(4, 8);
|
I.seeNumberOfElements(AtRichText.locate("span.htx-highlight"), 2);
|
// The potential errors should be caught by `errorsCollector` plugin
|
});
|
|
Scenario("Non-standard characters in words", async ({ I, LabelStudio, AtOutliner, AtRichText }) => {
|
I.amOnPage("/");
|
LabelStudio.init({
|
annotations: [
|
{
|
id: "test",
|
result: [],
|
},
|
],
|
config: createConfig("Text", "word"),
|
data: { text: "Somé wórds" },
|
});
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(0);
|
I.pressKey("1");
|
await AtRichText.selectTextByGlobalOffset(0, 5);
|
AtOutliner.seeRegions(1);
|
AtOutliner.see("Somé");
|
// The potential errors should be caught by `errorsCollector` plugin
|
});
|
|
Scenario("Should not select words from next line", async ({ I, LabelStudio, AtOutliner, AtRichText }) => {
|
I.amOnPage("/");
|
LabelStudio.init({
|
annotations: [
|
{
|
id: "test",
|
result: [],
|
},
|
],
|
config: createConfig("Text", "word"),
|
data: { text: "Оne\nline" },
|
});
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(0);
|
I.pressKey("1");
|
AtRichText.setSelection(AtRichText.locateText(), 0, AtRichText.locateRoot(), 2);
|
AtOutliner.seeRegions(1);
|
AtOutliner.see("Оne");
|
AtOutliner.dontSee("line");
|
// The potential errors should be caught by `errorsCollector` plugin
|
});
|
|
Scenario("Trying to select alt attr", async ({ I, LabelStudio, AtOutliner, AtRichText }) => {
|
I.amOnPage("/");
|
LabelStudio.init({
|
annotations: [
|
{
|
id: "test",
|
result: [],
|
},
|
],
|
config: createConfig("HyperText", "word"),
|
data: { text: "The bad <img alt='image'> we got here" },
|
});
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(0);
|
I.pressKey("1");
|
AtRichText.dblClickOnElement('img[alt="image"]');
|
AtOutliner.seeRegions(0);
|
// The potential errors should be caught by `errorsCollector` plugin
|
});
|
|
Scenario("Neighboring nested regions misplacement", async ({ I, LabelStudio, AtOutliner, AtRichText }) => {
|
I.amOnPage("/");
|
LabelStudio.init({
|
annotations: [
|
{
|
id: "test",
|
result: [
|
{
|
id: "Catfish",
|
from_name: "label",
|
to_name: "html",
|
type: "labels",
|
value: {
|
start: "/div[1]/text()[1]",
|
startOffset: 0,
|
end: "/div[1]/text()[1]",
|
endOffset: 7,
|
labels: ["Fish"],
|
},
|
},
|
{
|
id: "Cat",
|
from_name: "label",
|
to_name: "html",
|
type: "labels",
|
value: {
|
start: "/div[1]/text()[1]",
|
startOffset: 0,
|
end: "/div[1]/text()[1]",
|
endOffset: 3,
|
labels: ["Cat"],
|
},
|
},
|
{
|
id: "Fish",
|
from_name: "label",
|
to_name: "html",
|
type: "labels",
|
value: {
|
start: "/div[1]/text()[1]",
|
startOffset: 3,
|
end: "/div[1]/text()[1]",
|
endOffset: 7,
|
labels: ["Fish"],
|
},
|
},
|
],
|
},
|
],
|
config: `<View>
|
<Labels name="label" toName="html">
|
<Label value="Cat" background="Orange" />
|
<Label value="Fish" background="Blue" />
|
</Labels>
|
<Hypertext name="html" value="$text" />
|
</View>`,
|
data: { text: "<div>Catfish</div>" },
|
});
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(3);
|
|
within({ frame: ".lsf-richtext__iframe" }, () => {
|
I.seeElement(locate(".htx-highlight + .htx-highlight").withText("fish"));
|
});
|
I.say("Delete last region");
|
AtOutliner.clickRegion(3);
|
I.pressKey("Backspace");
|
|
I.say("Create this region again manually");
|
I.pressKey("2");
|
AtRichText.selectTextByGlobalOffset(3, 7);
|
AtOutliner.seeRegions(3);
|
within({ frame: ".lsf-richtext__iframe" }, () => {
|
I.seeElement(locate(".htx-highlight + .htx-highlight").withText("fish"));
|
});
|
});
|
|
{
|
const startBeforeEndParams = new DataTable(["tag", "content", "range"]);
|
|
startBeforeEndParams.add([
|
"Text",
|
"Beginning Region Ending",
|
{
|
start: 16,
|
end: 10,
|
},
|
]);
|
startBeforeEndParams.add([
|
"Hypertext",
|
"<div>Beginning Region Ending</div>",
|
{
|
start: "/div[1]/text()[1]",
|
startOffset: 16,
|
end: "/div[1]/text()[1]",
|
endOffset: 10,
|
},
|
]);
|
startBeforeEndParams.add([
|
"Hypertext",
|
"<div><span>Beginning</span> <span>from</span> <span>to</span> <span>Ending</span></div>",
|
{
|
start: "/div[1]/span[3]/text()[1]",
|
startOffset: 2,
|
end: "/div[1]/span[2]/text()[1]",
|
endOffset: 0,
|
},
|
]);
|
|
Data(startBeforeEndParams).Scenario("Start before end problem", async ({ I, LabelStudio, AtOutliner, current }) => {
|
const { tag, content, range } = current;
|
|
I.amOnPage("/");
|
LabelStudio.init({
|
annotations: [
|
{
|
id: "test",
|
result: [
|
{
|
id: "Region",
|
from_name: "label",
|
to_name: "text",
|
type: "labels",
|
value: {
|
...range,
|
labels: ["Region"],
|
},
|
},
|
],
|
},
|
],
|
config: `<View>
|
<Labels name="label" toName="text">
|
<Label value="Region" background="#9f0" />
|
</Labels>
|
<${tag} name="text" value="$text" />
|
</View>`,
|
data: { text: content },
|
});
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(1);
|
|
switch (tag.toLowerCase()) {
|
case "text": {
|
I.seeElement(locate(".htx-highlight"));
|
const text = await I.grabHTMLFrom(locate(".htx-highlight"));
|
|
assert.strictEqual(text, "", "Region should be collapsed and the text should be empty");
|
break;
|
}
|
case "hypertext": {
|
within({ frame: ".lsf-richtext__iframe" }, async () => {
|
const text = await I.grabHTMLFrom(locate(".htx-highlight"));
|
|
assert.strictEqual(text, "", "Region should be collapsed and the text should be empty");
|
});
|
break;
|
}
|
}
|
});
|
}
|
