diff --git a/packages/editor/cypress/e2e/relationship.cy.ts b/packages/editor/cypress/e2e/relationship.cy.ts index d9ab5b82..a075091d 100644 --- a/packages/editor/cypress/e2e/relationship.cy.ts +++ b/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"]').should('exist'); + cy.get('[test-id="11-15-relationship"]').as('rel'); + 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'); - cy.get('[test-id="11-15-relationship"]').click({ force: true }); + // Delete it ... + 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'); }); }); diff --git a/packages/editor/cypress/e2e/topicFontChange.cy.ts b/packages/editor/cypress/e2e/topicFontChange.cy.ts index 4ee29a28..77a55845 100644 --- a/packages/editor/cypress/e2e/topicFontChange.cy.ts +++ b/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="Smaller"]`).first().click(); - cy.get(`[aria-label="Smaller"]`).first().click(); + cy.get('[aria-label="Font Style"]').first().trigger('mouseover'); + cy.get('[aria-label="Smaller"]').as('smaller'); + 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"]`).first().click(); + cy.get('[aria-label="Bigger"]').as('bigger'); + cy.get('@bigger').eq(1).click(); cy.matchImageSnapshot('changeFontSizeNormal'); - cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover'); - cy.get(`[aria-label="Bigger"]`).first().click(); + cy.get('@bigger').eq(1).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(`[aria-label="Bigger"]`).first().click(); - + cy.get('@bigger').eq(1).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(`[aria-label="Bigger"]`).first().click(); + cy.get('@bigger').eq(1).click(); cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.2'); cy.matchImageSnapshot('changeFontSizeHuge'); }); - it.skip('Change Font To Italic', () => { - cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover'); - cy.get(`[data-test-id="FormatItalicIcon"]`).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(); + it('Change Font To Italic', () => { + cy.get('[aria-label="Font Style"]').first().trigger('mouseover'); + cy.get('[aria-label^="Italic ').first().click(); cy.get('[test-id=1] > text').invoke('attr', 'font-style').should('eq', 'italic'); cy.matchImageSnapshot('changeFontItalic'); }); - it.skip('Change Font color', () => { - cy.get('#fontColorTip').click(); - cy.get('[title="RGB (153, 0, 255)"]').click({ force: true }); + it('Change Font to Bold', () => { + cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover'); + 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'); }); diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 0.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 0.snap.png new file mode 100644 index 00000000..0b846b43 Binary files /dev/null and b/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 0.snap.png differ diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 1.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 1.snap.png new file mode 100644 index 00000000..ea16c41b Binary files /dev/null and b/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 1.snap.png differ diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/rel ctl undo.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/rel ctl undo.snap.png new file mode 100644 index 00000000..92770bc3 Binary files /dev/null and b/packages/editor/cypress/snapshots/relationship.cy.ts/rel ctl undo.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png new file mode 100644 index 00000000..00dd4b0d Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png new file mode 100644 index 00000000..07bbc605 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png new file mode 100644 index 00000000..312aec75 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png index d03b1f61..5a2c6ecc 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png index 5472ad9f..80b510ed 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png differ diff --git a/packages/mindplot/src/components/RelationshipControlPoints.ts b/packages/mindplot/src/components/RelationshipControlPoints.ts index 0174ba7d..6e72e0d9 100644 --- a/packages/mindplot/src/components/RelationshipControlPoints.ts +++ b/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 }); diff --git a/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png b/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png index abcf5e91..31ab1929 100644 Binary files a/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png and b/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png differ