Add font topic tests.

packages/editor/cypress/e2e/relationship.cy.ts

@@ -6,31 +6,74 @@ context('Relationship Topics', () => {
     cy.reload();
 
     // Wait for load complate ...
-    cy.get('svg > path').should('be.visible');
+    cy.get('[aria-label="vortex-loading"]').should('not.exist');
   });
 
   it('Add Relationship', () => {
+    // Create new relationship ...
     cy.contains('Features').click({ force: true });
     cy.get(`[aria-label="Add Relationship"]`).click({ multiple: true });
     cy.contains('Try it Now!').click();
 
-    cy.get('[test-id="11-15-relationship"]').click({ force: true });
+    cy.get('[test-id="11-15-relationship"]').as('rel');
-    cy.get('[test-id="11-15-relationship"]').should('exist');
+    cy.get('@rel').click({ force: true });
+    cy.get('@rel').should('exist');
 
     cy.matchImageSnapshot('addRelationship');
+
+    // Undo relationship ...
+    cy.get('[aria-label^="Undo ').eq(1).click();
+    cy.get('@rel').should('not.exist');
   });
 
   it('Delete Relationship', () => {
+    // Add new relationship ...
     cy.contains('Features').first().click({ force: true });
     cy.get(`[aria-label="Add Relationship"]`).first().click();
     cy.contains('Try it Now!').first().click();
 
-    cy.get('[test-id="11-15-relationship"]').should('exist');
+    // Delete it ...
-    cy.get('[test-id="11-15-relationship"]').click({ force: true });
+    cy.get('[test-id="11-15-relationship"]').as('rel');
+    cy.get('@rel').should('exist');
+    cy.get('@rel').click({ force: true });
 
     cy.get('body').type('{backspace}');
 
-    cy.get('[test-id="11-15-relationship"]').should('not.exist');
+    cy.get('@rel').should('not.exist');
     cy.matchImageSnapshot('delete relationship');
+
+    // Undo relationship ...
+    cy.get('[aria-label^="Undo ').eq(1).click();
+    cy.get('@rel').should('exist');
+  });
+
+  it('Change Control Point', () => {
+    // Create new relationship ...
+    cy.contains('Features').click({ force: true });
+    cy.get(`[aria-label="Add Relationship"]`).click({ multiple: true });
+    cy.contains('Try it Now!').click();
+
+    // Select relationship ...
+    cy.get('[test-id="11-15-relationship"]').as('rel');
+    cy.get('@rel').should('exist');
+    cy.get('@rel').click({ force: true });
+
+    // Move control point start ...
+    cy.get('[test-id="relctl:0:11-15"]').first().trigger('mousedown');
+    cy.get('body').trigger('mousemove', { clientX: 350, clientY: 380 });
+    cy.get('body').trigger('mouseup');
+    cy.matchImageSnapshot('move ctl pont 0');
+
+    // Move control point end ...
+    cy.get('[test-id="relctl:1:11-15"]').first().trigger('mousedown');
+    cy.get('body').trigger('mousemove', { clientX: 350, clientY: 100 });
+    cy.get('body').trigger('mouseup');
+    cy.matchImageSnapshot('move ctl pont 1');
+
+    // Test undo and redo ...
+    cy.get('[aria-label^="Undo ').eq(1).click();
+    cy.get('[aria-label^="Undo ').eq(1).click();
+    cy.get('@rel').should('exist');
+    cy.matchImageSnapshot('rel ctl undo');
   });
 });

packages/editor/cypress/e2e/topicFontChange.cy.ts

@@ -18,56 +18,55 @@ context('Edit Topic', () => {
 
   it('Change Font Size', () => {
     // Go to the minimal size.
-    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
+    cy.get('[aria-label="Font Style"]').first().trigger('mouseover');
-    cy.get(`[aria-label="Smaller"]`).first().click();
+    cy.get('[aria-label="Smaller"]').as('smaller');
-    cy.get(`[aria-label="Smaller"]`).first().click();
+    cy.get('@smaller').eq(1).click();
+    cy.get('@smaller').eq(1).click();
 
     cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '8.1');
     cy.matchImageSnapshot('changeFontSizeSmall');
 
-    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
+    cy.get('[aria-label="Bigger"]').as('bigger');
-    cy.get(`[aria-label="Bigger"]`).first().click();
+    cy.get('@bigger').eq(1).click();
     cy.matchImageSnapshot('changeFontSizeNormal');
 
-    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
+    cy.get('@bigger').eq(1).click();
-    cy.get(`[aria-label="Bigger"]`).first().click();
     cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '13.4');
     cy.matchImageSnapshot('changeFontSizeLarge');
 
-    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
+    cy.get('@bigger').eq(1).click();
-    cy.get(`[aria-label="Bigger"]`).first().click();
-
     cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.2');
     cy.matchImageSnapshot('changeFontSizeHuge');
 
-    // Can not scale it more.
+    cy.get('@bigger').eq(1).click();
-    cy.get(`[aria-label="Bigger"]`).first().click();
     cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.2');
     cy.matchImageSnapshot('changeFontSizeHuge');
   });
 
-  it.skip('Change Font To Italic', () => {
+  it('Change Font To Italic', () => {
-    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
+    cy.get('[aria-label="Font Style"]').first().trigger('mouseover');
-    cy.get(`[data-test-id="FormatItalicIcon"]`).first().click();
+    cy.get('[aria-label^="Italic ').first().click();
-
-    cy.get('[test-id=1] > text').invoke('attr', 'font-family').should('eq', 'Times');
-    cy.matchImageSnapshot('changeFontType');
-  });
-
-  it.skip('Change Font to Bold', () => {
-    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
-    cy.contains('[data-testid="FormatItalicIcon"]').click();
 
     cy.get('[test-id=1] > text').invoke('attr', 'font-style').should('eq', 'italic');
 
     cy.matchImageSnapshot('changeFontItalic');
   });
 
-  it.skip('Change Font color', () => {
+  it('Change Font to Bold', () => {
-    cy.get('#fontColorTip').click();
+    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
-    cy.get('[title="RGB (153, 0, 255)"]').click({ force: true });
+    cy.get('[aria-label^="Bold ').first().click();
 
-    cy.get('[test-id=1] > text').invoke('attr', 'fill').should('eq', 'rgb(153, 0, 255)');
+    cy.get('[test-id=1] > text').invoke('attr', 'font-weight').should('eq', 'normal');
+
+    cy.matchImageSnapshot('changeFontBold');
+  });
+
+  it('Change Font Color', () => {
+    cy.get('[aria-label="Font Style"]').eq(1).trigger('mouseover');
+    cy.get('[aria-label="Color"]').eq(1).click();
+    cy.get('[title="#cc0000"]').click({ force: true });
+
+    cy.get('[test-id=1] > text').invoke('attr', 'fill').should('eq', '#cc0000');
 
     cy.matchImageSnapshot('changeFontColor');
   });

packages/mindplot/src/components/RelationshipControlPoints.ts

@@ -72,6 +72,11 @@ class ControlPivotLine {
       visibility: false,
     });
     this._dot.setCursor('pointer');
+    this._dot.setTestId(
+      `relctl:${pivotType}:${relationship.getSourceTopic()?.getId()}-${relationship
+        .getTargetTopic()
+        ?.getId()}`,
+    );
 
     // Build line ...
     this._line = new Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 });