Added test-id to relationship and checkpoint components and also added editor tests

This commit is contained in:
Ezequiel-Vega 2022-01-25 17:57:29 -03:00
parent ddfd34d6ca
commit 7e5c16e9e1
14 changed files with 339 additions and 93 deletions

View File

@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}

View File

@ -0,0 +1,16 @@
context('Relationship Topics', () => {
beforeEach(() => {
cy.visit('/editor.html');
cy.reload();
cy.get('[test-id="30-11-relationship"]').click({ force: true });
});
it('Change shape relationship', () => {
cy.get('[test-id="control-56"]').trigger('mousedown', { force: true });
cy.get('body').trigger('mousemove', { clientX: 500, clientY: 200 });
cy.get('body').trigger('mouseup');
cy.matchImageSnapshot('changeShapeRealtionship');
cy.get('[test-id="control-56"]').invoke('attr', 'cy').should('eq', '-131.75');
});
});

View File

@ -0,0 +1,74 @@
context('Edit Topic', () => {
beforeEach(() => {
cy.visit('/editor.html');
cy.reload();
cy.get('[test-id=1]').click();
});
it('Change Main Topic Text', () => {
cy.get('body').type('New Title Main Topic{enter}');
cy.get('[test-id=1] > text > tspan').should('have.text', 'New Title Main Topic');
cy.matchImageSnapshot('changeMainTopicText');
});
it('Change Font Size', () => {
cy.get('#fontSizeTip').click();
cy.get('#small').click();
cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '8.0625');
cy.matchImageSnapshot('changeFontSizeSmall');
cy.get('#fontSizeTip').click();
// TODO: The parameter {force: true} was placed because it does not detect that the element is visible
cy.get('.popover #normal').click({ force: true });
cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '10.75');
cy.matchImageSnapshot('changeFontSizeNormal');
cy.get('#fontSizeTip').click();
// TODO: The parameter {force: true} was placed because it does not detect that the element is visible
cy.get('#large').click({ force: true });
cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '13.4375');
cy.matchImageSnapshot('changeFontSizeNormal');
cy.get('#fontSizeTip').click();
// TODO: The parameter {force: true} was placed because it does not detect that the element is visible
cy.get('#huge').click({ force: true });
cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.15625');
cy.matchImageSnapshot('changeFontSizeHuge');
});
it('Change Font type', () => {
cy.get('#fontFamilyTip').click();
// TODO: The parameter {force: true} was placed because it does not detect that the element is visible
cy.get('[model="Times"]').click({ force: true });
cy.get('[test-id=1] > text').invoke('attr', 'font-family').should('eq', 'Times');
cy.matchImageSnapshot('changeFontType');
});
it('Change Font Italic', () => {
cy.get('#fontItalicTip').click();
cy.get('[test-id=1] > text').invoke('attr', 'font-style').should('eq', 'italic');
cy.matchImageSnapshot('changeFontItalic');
});
it('Change Font color', () => {
cy.get('#fontColorTip').click();
// TODO: The parameter {force: true} was placed because it does not detect that the element is visible
cy.get('[title="RGB (153, 0, 255)"]').click({ force: true });
cy.get('[test-id=1] > text').invoke('attr', 'fill').should('eq', 'rgb(153, 0, 255)');
cy.matchImageSnapshot('changeFontColor');
});
});

View File

@ -0,0 +1,51 @@
context('Node manager', () => {
before(() => {
cy.visit('/editor.html');
});
it('shortcut add sibling node', () => {
// TODO: why is the editor appearing twice in the snapshot?
// cy.matchImageSnapshot('editor');
cy.contains('Mind Mapping').click();
cy.get('body').type('{enter}').type('Mind Mapping rocks!!').type('{enter}');
cy.get('[test-id=36] > text > tspan').should('exist');
cy.matchImageSnapshot('editor-shortcut-edit');
});
it('shortcut add child node', () => {
cy.contains('Mind Mapping rocks!!').click();
cy.get('body').type('{insert}').type('Child 1 mind Mapping rocks!!').type('{enter}');
cy.get('body').type('{enter}').type('Child 2 mind Mapping rocks!!').type('{enter}');
cy.get('[test-id=36] > text > tspan').should('exist');
cy.get('[test-id=37] > text > tspan').should('exist');
cy.matchImageSnapshot('addChildNodeSortcut');
});
it('Delete topic', () => {
cy.get('[test-id=37]').click();
cy.get('body').type('{del}');
cy.get('[test-id=37]').should('not.exist');
cy.matchImageSnapshot('deleteTopicShortcut');
});
it('undo changes', () => {
cy.get('#undoEditionTip').click();
cy.get('[test-id=36] > text > tspan').should('exist');
cy.matchImageSnapshot('undoChange');
});
it('Save changes', () => {
cy.contains('Mind Mapping rocks!!').click();
cy.get('body').type('{ctrl}s');
cy.matchImageSnapshot('saveChagesShortcut');
});
});

View File

@ -0,0 +1,35 @@
context('Change topic position', () => {
beforeEach(() => {
cy.visit('/editor.html');
cy.reload();
});
it('Move up node "Mind Mapping"', () => {
const position = { clientX: 270, clientY: 160 };
cy.contains('Mind Mapping').trigger('mousedown');
cy.get('body').trigger('mousemove', position);
cy.get('body').trigger('mouseup');
cy.matchImageSnapshot('moveupNode');
});
it('Move down node "Mind Mapping"', () => {
cy.contains('Mind Mapping').trigger('mousedown');
cy.get('body').trigger('mousemove', { clientX: 350, clientY: 380 });
cy.get('body').trigger('mouseup');
cy.matchImageSnapshot('movedownNode');
});
it('Move default position node "Mind Mapping"', () => {
cy.contains('Mind Mapping').trigger('mousedown');
cy.get('body').trigger('mousemove', { clientX: 270, clientY: 240 });
cy.get('body').trigger('mouseup');
cy.matchImageSnapshot('moveDefaultPosition');
});
it('Move left node "Mind Mapping"', () => {
cy.contains('Mind Mapping').trigger('mousedown');
cy.get('body').trigger('mousemove', { clientX: 700, clientY: 240 });
cy.get('body').trigger('mouseup');
cy.matchImageSnapshot('moveleftNode');
});
});

View File

@ -0,0 +1,50 @@
context('Change Topic shape', () => {
beforeEach(() => {
cy.visit('/editor.html');
cy.reload();
cy.contains('Try it Now!').click();
});
it('change to square shape', () => {
cy.get('#topicShapeTip').click();
cy.get('#rectagle').click();
cy.get('[test-id=11] > rect').each((element, index, $list) => {
cy.get($list[1]).invoke('attr', 'rx').should('eq', '0');
});
cy.matchImageSnapshot('changeToSquareShape');
});
it('change to rounded rectagle', () => {
cy.get('#topicShapeTip').click();
// TODO: The parameter {force: true} was placed because it does not detect that the element is visible
cy.get('#rounded_rectagle').click({ force: true });
cy.get('[test-id=11] > rect').each((element, index, $list) => {
cy.get($list[1]).invoke('attr', 'rx').should('eq', '4.6499999999999995');
});
cy.matchImageSnapshot('changeToRoundedRectagle');
});
it('change to line', () => {
cy.get('#topicShapeTip').click();
// TODO: The parameter {force: true} was placed because it does not detect that the element is visible
cy.get('#line').click({ force: true });
cy.matchImageSnapshot('changeToLine');
});
it('change to elipse shape', () => {
cy.get('#topicShapeTip').click();
// TODO: The parameter {force: true} was placed because it does not detect that the element is visible
cy.get('#elipse').click({ force: true });
cy.get('[test-id=11] > rect').each((element, index, $list) => {
cy.get($list[1]).invoke('attr', 'rx').should('eq', '13.950000000000001');
});
cy.matchImageSnapshot('changeToElipseShape');
});
});

View File

@ -67,4 +67,4 @@ Sibling]]></text>
</topic>
</topic>
<relationship srcTopicId="30" destTopicId="11" lineType="3" srcCtrlPoint="-80,-56" destCtrlPoint="110,-116" endArrow="false" startArrow="true"/>
</map>
</map>

View File

@ -23,25 +23,25 @@ import ActionDispatcher from './ActionDispatcher';
class ControlPoint {
constructor() {
const control1 = new Elipse({
this.control1 = new Elipse({
width: 6,
height: 6,
stroke: '1 solid #6589de',
fillColor: 'gray',
visibility: false,
});
control1.setCursor('pointer');
this.control1.setCursor('pointer');
const control2 = new Elipse({
this.control2 = new Elipse({
width: 6,
height: 6,
stroke: '1 solid #6589de',
fillColor: 'gray',
visibility: false,
});
control2.setCursor('pointer');
this.control2.setCursor('pointer');
this._controlPointsController = [control1, control2];
this._controlPointsController = [this.control1, this.control2];
this._controlLines = [
new Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 }),
new Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 }),
@ -84,6 +84,11 @@ class ControlPoint {
this._endPoint[1] = { ...this._line.getLine().getTo() };
}
setControlPointTestId(ctrlPoint1, ctrlPoint2) {
this.control1.setTestId(ctrlPoint1);
this.control2.setTestId(ctrlPoint2);
}
redraw() {
if ($defined(this._line)) this._createControlPoint();
}

View File

@ -56,6 +56,7 @@ class Relationship extends ConnectionLine {
this._line2d.setCursor('pointer');
this._line2d.setStroke(1, 'solid', strokeColor);
this._line2d.setDashed(4, 2);
this._line2d.setTestId(`${model.getFromNode()}-${model.getToNode()}-relationship`);
this._focusShape = this._createLine(this.getLineType(), ConnectionLine.SIMPLE_CURVED);
this._focusShape.setStroke(2, 'solid', '#3f96ff');
@ -83,6 +84,12 @@ class Relationship extends ConnectionLine {
if ($defined(model.getSrcCtrlPoint())) {
const srcPoint = { ...model.getSrcCtrlPoint() };
this.setSrcControlPoint(srcPoint);
// Set test id in control point
this._controlPointsController.setControlPointTestId(
`control-${Math.abs(srcPoint.x)}`,
`control-${Math.abs(srcPoint.y)}`,
);
}
if ($defined(model.getDestCtrlPoint())) {
const destPoint = { ...model.getDestCtrlPoint() };

View File

@ -103,9 +103,9 @@ class RelationshipPivot {
const model = this._designer.getModel();
const topics = model.getTopics();
topics.forEach(((topic) => {
topics.forEach((topic) => {
topic.removeEvent('ontfocus', this._onTopicClick);
}));
});
workspace.removeChild(this._pivot);
workspace.removeChild(this._startArrow);
@ -166,9 +166,7 @@ class RelationshipPivot {
// Avoid circular connections ...
if (targetTopic.getId() !== sourceTopic.getId()) {
const relModel = mindmap.createRelationship(targetTopic.getId(), sourceTopic.getId());
this._designer
.getActionDispatcher()
.addRelationship(relModel);
this._designer.getActionDispatcher().addRelationship(relModel);
}
this.dispose();
}

View File

@ -16,16 +16,9 @@
* limitations under the License.
*/
import $ from 'jquery';
import { $assert, $defined } from '@wisemapping/core-js';
import {
$assert,
$defined,
} from '@wisemapping/core-js';
import {
Rect,
Image,
Line,
Text,
Group,
Rect, Image, Line, Text, Group,
} from '@wisemapping/web2d';
import NodeGraph from './NodeGraph';
@ -41,22 +34,18 @@ import NoteEditor from './widget/NoteEditor';
import ActionDispatcher from './ActionDispatcher';
import LinkEditor from './widget/LinkEditor';
import TopicEventDispatcher, {
TopicEvent,
} from './TopicEventDispatcher';
import {
TopicShape,
} from './model/INodeModel';
import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
import { TopicShape } from './model/INodeModel';
const ICON_SCALING_FACTOR = 1.3;
class Topic extends NodeGraph {
/**
* @extends mindplot.NodeGraph
* @constructs
* @param model
* @param options
*/
* @extends mindplot.NodeGraph
* @constructs
* @param model
* @param options
*/
constructor(model, options) {
super(model, options);
this._children = [];
@ -92,9 +81,9 @@ class Topic extends NodeGraph {
}
/**
* @param {String} type the topic shape type
* @see {@link mindplot.model.INodeModel}
*/
* @param {String} type the topic shape type
* @see {@link mindplot.model.INodeModel}
*/
setShapeType(type) {
this._setShapeType(type, true);
}
@ -331,10 +320,10 @@ class Topic extends NodeGraph {
}
/**
* assigns the new feature model to the topic's node model and adds the respective icon
* @param {mindplot.model.FeatureModel} featureModel
* @return {mindplot.Icon} the icon corresponding to the feature model
*/
* assigns the new feature model to the topic's node model and adds the respective icon
* @param {mindplot.model.FeatureModel} featureModel
* @return {mindplot.Icon} the icon corresponding to the feature model
*/
addFeature(featureModel) {
const iconGroup = this.getOrBuildIconGroup();
this.closeEditors();
@ -648,6 +637,9 @@ class Topic extends NodeGraph {
// Register listeners ...
this._registerDefaultListenersToElement(group, this);
// Set test id
group.setTestId(model.getId());
}
_registerDefaultListenersToElement(elem, topic) {
@ -852,8 +844,8 @@ class Topic extends NodeGraph {
}
/**
* Point: references the center of the rect shape.!!!
*/
* Point: references the center of the rect shape.!!!
*/
setPosition(point) {
$assert(point, 'position can not be null');
// allowed param reassign to avoid risks of existing code relying in this side-effect
@ -890,8 +882,9 @@ class Topic extends NodeGraph {
getIncomingLines() {
const children = this.getChildren();
return children.filter((node) => $defined(node.getOutgoingLine()))
.map(((node) => node.getOutgoingLine()));
return children
.filter((node) => $defined(node.getOutgoingLine()))
.map((node) => node.getOutgoingLine());
}
/** */
@ -986,8 +979,8 @@ class Topic extends NodeGraph {
const sourceParent = sourceTopic.getModel().getParent();
relationship.setVisibility(
value
&& (targetParent == null || !targetParent.areChildrenShrunken())
&& (sourceParent == null || !sourceParent.areChildrenShrunken()),
&& (targetParent == null || !targetParent.areChildrenShrunken())
&& (sourceParent == null || !sourceParent.areChildrenShrunken()),
);
});
}
@ -1055,8 +1048,7 @@ class Topic extends NodeGraph {
};
const oldSize = this.getSize();
const hasSizeChanged = oldSize.width !== roundedSize.width
|| oldSize.height !== roundedSize.height;
const hasSizeChanged = oldSize.width !== roundedSize.width || oldSize.height !== roundedSize.height;
if (hasSizeChanged || force) {
NodeGraph.prototype.setSize.call(this, roundedSize);
@ -1329,9 +1321,9 @@ class Topic extends NodeGraph {
}
/**
* @param childTopic
* @return {Boolean} true if childtopic is a child topic of this topic or the topic itself
*/
* @param childTopic
* @return {Boolean} true if childtopic is a child topic of this topic or the topic itself
*/
isChildTopic(childTopic) {
let result = this.getId() === childTopic.getId();
if (!result) {

View File

@ -61,7 +61,7 @@ class XMLSerializerPela implements XMLMindmapSerializer {
relationships.forEach((relationship) => {
if (
mindmap.findNodeById(relationship.getFromNode()) !== null
&& mindmap.findNodeById(relationship.getToNode()) !== null
&& mindmap.findNodeById(relationship.getToNode()) !== null
) {
// Isolated relationships are not persisted ....
const relationDom = XMLSerializerPela._relationshipToXML(document, relationship);
@ -83,7 +83,9 @@ class XMLSerializerPela implements XMLMindmapSerializer {
parentTopic.setAttribute('position', `${pos.x},${pos.y}`);
const order = topic.getOrder();
if (typeof order === 'number' && Number.isFinite(order)) { parentTopic.setAttribute('order', order.toString()); }
if (typeof order === 'number' && Number.isFinite(order)) {
parentTopic.setAttribute('order', order.toString());
}
}
const text = topic.getText();
@ -99,8 +101,7 @@ class XMLSerializerPela implements XMLMindmapSerializer {
const size = topic.getImageSize();
parentTopic.setAttribute(
'image',
`${size.width},${size.height
}:${topic.getImageUrl()}`,
`${size.width},${size.height}:${topic.getImageUrl()}`,
);
}
}
@ -132,10 +133,10 @@ class XMLSerializerPela implements XMLMindmapSerializer {
if (
$defined(fontFamily)
|| $defined(fontSize)
|| $defined(fontColor)
|| $defined(fontWeight)
|| $defined(fontStyle)
|| $defined(fontSize)
|| $defined(fontColor)
|| $defined(fontWeight)
|| $defined(fontStyle)
) {
parentTopic.setAttribute('fontStyle', font);
}
@ -226,13 +227,13 @@ class XMLSerializerPela implements XMLMindmapSerializer {
}
/**
* @param dom
* @param mapId
* @throws will throw an error if dom is null or undefined
* @throws will throw an error if mapId is null or undefined
* @throws will throw an error if the document element is not consistent with a wisemap's root
* element
*/
* @param dom
* @param mapId
* @throws will throw an error if dom is null or undefined
* @throws will throw an error if mapId is null or undefined
* @throws will throw an error if the document element is not consistent with a wisemap's root
* element
*/
loadFromDom(dom: Document, mapId: string) {
$assert(dom, 'dom can not be null');
$assert(mapId, 'mapId can not be null');
@ -253,7 +254,9 @@ class XMLSerializerPela implements XMLMindmapSerializer {
// Add all the topics nodes ...
const childNodes = Array.from(rootElem.childNodes);
const topicsNodes = childNodes
.filter((child: ChildNode) => (child.nodeType === 1 && (child as Element).tagName === 'topic'))
.filter(
(child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'topic',
)
.map((c) => c as Element);
topicsNodes.forEach((child) => {
const topic = this._deserializeNode(child, mindmap);
@ -262,7 +265,9 @@ class XMLSerializerPela implements XMLMindmapSerializer {
// Then all relationshops, they are connected to topics ...
const relationshipsNodes = childNodes
.filter((child: ChildNode) => (child.nodeType === 1 && (child as Element).tagName === 'relationship'))
.filter(
(child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'relationship',
)
.map((c) => c as Element);
relationshipsNodes.forEach((child) => {
try {
@ -280,9 +285,7 @@ class XMLSerializerPela implements XMLMindmapSerializer {
}
_deserializeNode(domElem: Element, mindmap: Mindmap) {
const type = domElem.getAttribute('central') != null
? 'CentralTopic'
: 'MainTopic';
const type = domElem.getAttribute('central') != null ? 'CentralTopic' : 'MainTopic';
// Load attributes...
let id: number | null = null;
@ -480,16 +483,16 @@ class XMLSerializerPela implements XMLMindmapSerializer {
}
/**
* This method ensures that the output String has only
* valid XML unicode characters as specified by the
* XML 1.0 standard. For reference, please see
* <a href="http://www.w3.org/TR/2000/REC-xml-20001006#NT-Char">the
* standard</a>. This method will return an empty
* String if the input is null or empty.
*
* @param in The String whose non-valid characters we want to remove.
* @return The in String, stripped of non-valid characters.
*/
* This method ensures that the output String has only
* valid XML unicode characters as specified by the
* XML 1.0 standard. For reference, please see
* <a href="http://www.w3.org/TR/2000/REC-xml-20001006#NT-Char">the
* standard</a>. This method will return an empty
* String if the input is null or empty.
*
* @param in The String whose non-valid characters we want to remove.
* @return The in String, stripped of non-valid characters.
*/
// eslint-disable-next-line class-methods-use-this
rmXmlInv(str) {
if (str == null || str === undefined) return null;
@ -499,11 +502,11 @@ class XMLSerializerPela implements XMLMindmapSerializer {
const c = str.charCodeAt(i);
if (
c === 0x9
|| c === 0xa
|| c === 0xd
|| (c >= 0x20 && c <= 0xd7ff)
|| (c >= 0xe000 && c <= 0xfffd)
|| (c >= 0x10000 && c <= 0x10ffff)
|| c === 0xa
|| c === 0xd
|| (c >= 0x20 && c <= 0xd7ff)
|| (c >= 0xe000 && c <= 0xfffd)
|| (c >= 0x10000 && c <= 0x10ffff)
) {
result += str.charAt(i);
}

View File

@ -117,9 +117,9 @@ class ElementClass {
}
/**
* /*
* Returns element type name.
*/
* /*
* Returns element type name.
*/
// eslint-disable-next-line class-methods-use-this
getType() {
throw new Error(
@ -161,12 +161,12 @@ class ElementClass {
setStroke(width, style, color, opacity) {
if (
style != null
&& style !== undefined
&& style !== 'dash'
&& style !== 'dot'
&& style !== 'solid'
&& style !== 'longdash'
&& style !== 'dashdot'
&& style !== undefined
&& style !== 'dash'
&& style !== 'dot'
&& style !== 'solid'
&& style !== 'longdash'
&& style !== 'dashdot'
) {
throw new Error(`Unsupported stroke style: '${style}'`);
}
@ -288,6 +288,10 @@ class ElementClass {
getParent() {
return this.peer.getParent();
}
setTestId(testId) {
this.peer._native.setAttribute('test-id', testId);
}
}
Element._SIGNATURE_MULTIPLE_ARGUMENTS = -1;

View File

@ -144,6 +144,12 @@ class Group extends ElementClass {
setOpacity(value) {
this.peer.setOpacity(value);
}
/*
setTestId(testId) {
this.peer._native.setAttribute('test-id', testId);
}
*/
}
export default Group;