mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-22 06:37:56 +01:00
Added test-id to relationship and checkpoint components and also added editor tests
This commit is contained in:
parent
ddfd34d6ca
commit
7e5c16e9e1
5
packages/editor/cypress/fixtures/example.json
Normal file
5
packages/editor/cypress/fixtures/example.json
Normal 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"
|
||||
}
|
16
packages/editor/cypress/integration/relationship.test.js
Normal file
16
packages/editor/cypress/integration/relationship.test.js
Normal 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');
|
||||
});
|
||||
});
|
74
packages/editor/cypress/integration/topicFontChange.test.js
Normal file
74
packages/editor/cypress/integration/topicFontChange.test.js
Normal 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');
|
||||
});
|
||||
});
|
51
packages/editor/cypress/integration/topicManager.test.js
Normal file
51
packages/editor/cypress/integration/topicManager.test.js
Normal 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');
|
||||
});
|
||||
});
|
35
packages/editor/cypress/integration/topicPosition.test.js
Normal file
35
packages/editor/cypress/integration/topicPosition.test.js
Normal 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');
|
||||
});
|
||||
});
|
50
packages/editor/cypress/integration/topicShape.test.js
Normal file
50
packages/editor/cypress/integration/topicShape.test.js
Normal 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');
|
||||
});
|
||||
});
|
@ -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();
|
||||
}
|
||||
|
@ -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() };
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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,12 +34,8 @@ 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;
|
||||
|
||||
@ -648,6 +637,9 @@ class Topic extends NodeGraph {
|
||||
|
||||
// Register listeners ...
|
||||
this._registerDefaultListenersToElement(group, this);
|
||||
|
||||
// Set test id
|
||||
group.setTestId(model.getId());
|
||||
}
|
||||
|
||||
_registerDefaultListenersToElement(elem, topic) {
|
||||
@ -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());
|
||||
}
|
||||
|
||||
/** */
|
||||
@ -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);
|
||||
|
||||
|
@ -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()}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user