const assert = require("assert");
|
|
Feature("Richtext regions displaying");
|
|
Scenario("Display correct colors", async ({ I, LabelStudio, AtLabels, AtRichText }) => {
|
I.amOnPage("/");
|
LabelStudio.init({
|
config: `<View>
|
<Labels name="label" toName="text">
|
<Label value="Red" background="rgb(255,0,0)" />
|
<Label value="Green" background="rgb(0,255,0)" />
|
<Label value="Blue" background="rgb(0,0,255)" />
|
<Label value="Yellow" background="rgb(255,255,0)" />
|
</Labels>
|
<Text name="text" value="$text" />
|
</View>`,
|
data: {
|
text: "Red. Green. Blue. Yellow.",
|
},
|
annotations: [
|
{
|
id: "test",
|
result: [
|
{
|
id: "Red",
|
from_name: "label",
|
to_name: "text",
|
type: "labels",
|
value: { start: 0, end: 3, labels: ["Red"] },
|
},
|
{
|
id: "Green",
|
from_name: "label",
|
to_name: "text",
|
type: "labels",
|
value: { start: 5, end: 10, labels: ["Green"] },
|
},
|
],
|
},
|
],
|
settings: {
|
selectAfterCreate: true,
|
},
|
});
|
|
LabelStudio.waitForObjectsReady();
|
|
{
|
I.pressKey("u");
|
const elementLocator = locate(".htx-highlight").withText("Red");
|
|
I.say("Red is red");
|
const color = await I.grabCssPropertyFrom(elementLocator, "background-color");
|
|
I.say(`The color of it is ${color}`);
|
assert(color.includes("(255, 0, 0"), "Oh no! Red is not red!");
|
I.say("even if it's selected");
|
|
I.click(elementLocator);
|
const selectedColor = await I.grabCssPropertyFrom(elementLocator, "background-color");
|
|
I.say(`The color of it is ${selectedColor}`);
|
assert(selectedColor.includes("(255, 0, 0"), "Oh no! Red is not red!");
|
}
|
{
|
I.pressKey("u");
|
const elementLocator = locate(".htx-highlight").withText("Green");
|
|
I.say("Green is green");
|
const color = await I.grabCssPropertyFrom(elementLocator, "background-color");
|
|
I.say(`The color of it is ${color}`);
|
assert(color.includes("(0, 255, 0"), "Oh no! Green is not green!");
|
I.say("even if it's selected");
|
|
I.click(elementLocator);
|
const selectedColor = await I.grabCssPropertyFrom(elementLocator, "background-color");
|
|
I.say(`The color of it is ${selectedColor}`);
|
assert(selectedColor.includes("(0, 255, 0"), "Oh no! Green is not green!");
|
}
|
{
|
I.pressKey("u");
|
I.say('Let\'s label "Blue" as `Blue`.');
|
AtLabels.clickLabel("Blue");
|
AtRichText.selectTextByGlobalOffset(12, 16);
|
|
const elementLocator = locate(".htx-highlight").withText("Blue");
|
|
I.say("Now Blue is blue");
|
const color = await I.grabCssPropertyFrom(elementLocator, "background-color");
|
|
I.say(`The color of it is ${color}`);
|
assert(color.includes("(0, 0, 255"), "Oh no! Blue is not blue!");
|
I.say("even if it's unselected");
|
|
I.pressKey("u");
|
const unselectedColor = await I.grabCssPropertyFrom(elementLocator, "background-color");
|
|
I.say(`The color of it is ${unselectedColor}`);
|
assert(unselectedColor.includes("(0, 0, 255"), "Oh no! Blue is not blue!");
|
}
|
{
|
I.pressKey("u");
|
I.say('Let\'s label "Yellow" as `Red`.');
|
AtLabels.clickLabel("Red");
|
AtRichText.selectTextByGlobalOffset(18, 24);
|
I.say("Change it to Green");
|
AtLabels.clickLabel("Green");
|
I.say("and finally to Yellow");
|
AtLabels.clickLabel("Yellow");
|
|
const elementLocator = locate(".htx-highlight").withText("Yellow");
|
|
I.say("It's really yellow now");
|
const color = await I.grabCssPropertyFrom(elementLocator, "background-color");
|
|
I.say(`The color of it is ${color}`);
|
assert(color.includes("(255, 255, 0"), "Oh no! Yellow is not yellow!");
|
I.say("even if it's unselected");
|
|
I.pressKey("u");
|
const unselectedColor = await I.grabCssPropertyFrom(elementLocator, "background-color");
|
|
I.say(`The color of it is ${unselectedColor}`);
|
assert(unselectedColor.includes("(255, 255, 0"), "Oh no! Yellow is not yellow!");
|
}
|
});
|
|
Scenario("Displaying selected and highlighted regions", async ({ I, LabelStudio, AtOutliner, AtDetails }) => {
|
I.amOnPage("/");
|
LabelStudio.init({
|
config: `<View>
|
<Labels name="label" toName="text" allowempty="true">
|
<Label value="Region" background="rgb(255,0,255)" />
|
</Labels>
|
<Text name="text" value="$text" />
|
</View>`,
|
data: {
|
text: "Region. Blank.",
|
},
|
annotations: [
|
{
|
id: "test",
|
result: [
|
{
|
id: "Region",
|
from_name: "label",
|
to_name: "text",
|
type: "labels",
|
value: { start: 0, end: 6, labels: ["Region"] },
|
},
|
{
|
id: "Blank",
|
from_name: "label",
|
to_name: "text",
|
type: "labels",
|
value: { start: 8, end: 13, labels: [] },
|
},
|
],
|
},
|
],
|
});
|
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(2);
|
|
{
|
I.say("Highlighted regions should have a different border");
|
const originalBorder = await I.grabCssPropertyFrom(".htx-highlight", "border");
|
|
{
|
I.say("The different border should appears on hovering region");
|
AtOutliner.hoverRegion(1);
|
|
const hoveredBorder = await I.grabCssPropertyFrom(".htx-highlight", "border");
|
|
assert.notEqual(
|
originalBorder,
|
hoveredBorder,
|
"The border of the region hovered in outliner tree should be different from the normal state's value",
|
);
|
}
|
{
|
I.say("Unhover the region");
|
I.moveCursorTo("#logo");
|
const unhoveredBorder = await I.grabCssPropertyFrom(".htx-highlight", "border");
|
|
assert.equal(
|
originalBorder,
|
unhoveredBorder,
|
"The border of the region that was unhovered should be equal to the original state's value",
|
);
|
}
|
{
|
I.say('The other way to get hovered state id using the "Create relation" tool...');
|
AtOutliner.clickRegion(2);
|
AtDetails.clickCreateRelation();
|
|
I.say("...and hover it inside the editor.");
|
I.moveCursorTo(".htx-highlight");
|
const hoveredBorder = await I.grabCssPropertyFrom(".htx-highlight", "border");
|
|
assert.notEqual(
|
originalBorder,
|
hoveredBorder,
|
"The border of the region hovered inside the editor tree should be different from the normal state's value",
|
);
|
}
|
}
|
|
I.say("Exit relation mode");
|
I.pressKey("Escape"); // Exit linking mode
|
I.say("Region should be still selected");
|
I.seeElement(".htx-highlight.__active");
|
I.pressKey("Escape"); // Unselect region
|
|
{
|
I.say("The background of the element should be visually different on selection");
|
const originalBackground = await I.grabCssPropertyFrom(".htx-highlight", "background");
|
|
AtOutliner.clickRegion(1);
|
const selectedBackground = await I.grabCssPropertyFrom(".htx-highlight", "background");
|
|
assert.notEqual(
|
originalBackground,
|
selectedBackground,
|
"The background of the element should be visually different on selection",
|
);
|
}
|
});
|
|
Scenario("Displaying label in the region", async ({ I, LabelStudio, AtOutliner, AtSettings }) => {
|
async function checkLabelVisibility(locator, content, shouldBeVisible = true) {
|
const text = await I.grabCssPropertyFromPseudo(locator, "content", "after");
|
const display = await I.grabCssPropertyFromPseudo(locator, "display", "after");
|
|
assert.strictEqual(text, content, `Label name should be "${content}" but "${text}" was seen.`);
|
if (shouldBeVisible) {
|
assert.strictEqual(display, "inline", "Label should be visible.");
|
} else {
|
assert.strictEqual(display, "none", "Label should be hidden.");
|
}
|
}
|
|
I.amOnPage("/");
|
LabelStudio.init({
|
config: `<View>
|
<Labels name="label" toName="text" allowempty="true">
|
<Label value="Region" background="rgb(255,0,255)" />
|
</Labels>
|
<Text name="text" value="$text" />
|
</View>`,
|
data: {
|
text: "Region. Blank.",
|
},
|
annotations: [
|
{
|
id: "test",
|
result: [
|
{
|
id: "Region",
|
from_name: "label",
|
to_name: "text",
|
type: "labels",
|
value: { start: 0, end: 6, labels: ["Region"] },
|
},
|
{
|
id: "Blank",
|
from_name: "label",
|
to_name: "text",
|
type: "labels",
|
value: { start: 8, end: 13, labels: [] },
|
},
|
],
|
},
|
],
|
settings: {
|
showLabels: true,
|
},
|
});
|
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(2);
|
|
await checkLabelVisibility(locate(".htx-highlight").at(1), '"1:Region"', true);
|
await checkLabelVisibility(locate(".htx-highlight").at(2), '"2"', true);
|
|
I.say("Hide labels in settings");
|
AtSettings.open();
|
AtSettings.setGeneralSettings({
|
[AtSettings.GENERAL_SETTINGS.SHOW_LABELS]: false,
|
});
|
AtSettings.close();
|
I.say("Make sure that label is hidden");
|
await checkLabelVisibility(locate(".htx-highlight").at(1), '"1:Region"', false);
|
await checkLabelVisibility(locate(".htx-highlight").at(2), '"2"', false);
|
});
|
