Add test on push
@ -2,9 +2,11 @@ import { defineConfig } from 'cypress';
|
||||
|
||||
export default defineConfig({
|
||||
projectId: 'it9g7s',
|
||||
video: false,
|
||||
video: true,
|
||||
videoUploadOnPasses: false,
|
||||
includeShadowDom: true,
|
||||
viewportWidth: 1000,
|
||||
viewportHeight: 660,
|
||||
e2e: {
|
||||
// We've imported your old cypress plugins here.
|
||||
// You may want to clean this up later by importing these.
|
||||
|
@ -1,30 +1,36 @@
|
||||
context('Relationship Topics', () => {
|
||||
beforeEach(() => {
|
||||
// Remove storage for autosave ...
|
||||
cy.visit('/editor.html');
|
||||
cy.clearLocalStorage('welcome-xml');
|
||||
cy.reload();
|
||||
cy.get('[test-id="30-11-relationship"]').first().click({ force: true });
|
||||
|
||||
// Wait for load complate ...
|
||||
cy.get('svg > path').should('be.visible');
|
||||
});
|
||||
|
||||
it('Add Relationship', () => {
|
||||
cy.contains('Features').first().click();
|
||||
cy.contains('Features').click();
|
||||
cy.get(`[aria-label="Add Relationship"]`).first().click();
|
||||
cy.contains('Try it Now!').first().click();
|
||||
cy.contains('Try it Now!').click();
|
||||
|
||||
cy.get('[test-id="11-15-relationship"]').first().click({ force: true });
|
||||
cy.get('[test-id="11-15-relationship"]').click();
|
||||
cy.get('[test-id="11-15-relationship"]').should('exist');
|
||||
|
||||
cy.matchImageSnapshot('addRelationship');
|
||||
});
|
||||
|
||||
it.skip('Delete Relationship', () => {
|
||||
it('Delete Relationship', () => {
|
||||
cy.contains('Features').first().click();
|
||||
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();
|
||||
|
||||
cy.get('body').type('{backspace}');
|
||||
|
||||
// cy.get('[test-id="11-15-relationship"]').should('not.exist');
|
||||
cy.get('[test-id="11-15-relationship"]').should('not.exist');
|
||||
cy.matchImageSnapshot('delete relationship');
|
||||
});
|
||||
});
|
@ -1,30 +0,0 @@
|
||||
context('Render all sample maps', () => {
|
||||
['complex',
|
||||
'emoji',
|
||||
'emptyNodes',
|
||||
'error-on-load',
|
||||
'huge',
|
||||
'huge2',
|
||||
'icon-sample',
|
||||
'img-support',
|
||||
'order',
|
||||
'rel-error',
|
||||
'sample1',
|
||||
'sample2',
|
||||
'sample3',
|
||||
'sample4',
|
||||
'sample5',
|
||||
'sample6',
|
||||
'sample8',
|
||||
'welcome'].forEach((mapId) => {
|
||||
it(`Render map => ${mapId}`, () => {
|
||||
cy.visit(`/viewmode.html?id=${mapId}`);
|
||||
cy.reload();
|
||||
|
||||
|
||||
cy.get('svg > path').should('be.visible');
|
||||
cy.get('[aria-label="vortex-loading"]', { timeout: 20000 }).should('not.exist');
|
||||
cy.matchImageSnapshot(`map-${mapId}`);
|
||||
});
|
||||
});
|
||||
});
|
31
packages/editor/cypress/e2e/renderAll.cy.ts
Normal file
@ -0,0 +1,31 @@
|
||||
context('Render all sample maps', () => {
|
||||
[
|
||||
'complex',
|
||||
'emoji',
|
||||
'emptyNodes',
|
||||
'error-on-load',
|
||||
'huge',
|
||||
'huge2',
|
||||
'icon-sample',
|
||||
'img-support',
|
||||
'order',
|
||||
'rel-error',
|
||||
'sample1',
|
||||
'sample2',
|
||||
'sample3',
|
||||
'sample4',
|
||||
'sample5',
|
||||
'sample6',
|
||||
'sample8',
|
||||
'welcome',
|
||||
].forEach((mapId) => {
|
||||
it(`Render map => ${mapId}`, () => {
|
||||
cy.visit(`/viewmode.html?id=${mapId}`);
|
||||
cy.reload();
|
||||
|
||||
cy.get('svg > path').should('be.visible');
|
||||
cy.get('[aria-label="vortex-loading"]', { timeout: 40000 }).should('not.exist');
|
||||
cy.matchImageSnapshot(`map-${mapId}`);
|
||||
});
|
||||
});
|
||||
});
|
@ -1,75 +0,0 @@
|
||||
context('Edit Topic', () => {
|
||||
// TODO: review why click({force: true}) is needed in these tests
|
||||
// also, why is the element outside the viewport in screenshots?
|
||||
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', () => {
|
||||
|
||||
// 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('[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('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '10.8');
|
||||
cy.matchImageSnapshot('changeFontSizeNormal');
|
||||
|
||||
cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
|
||||
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(`[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(`[aria-label="Bigger"]`).first().click();
|
||||
// cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.2');
|
||||
cy.matchImageSnapshot('changeFontSizeHuge');
|
||||
|
||||
});
|
||||
|
||||
// it('Change Font To Italic', () => {
|
||||
// cy.get(`[aria-label="Font Style"]`).trigger('mouseover');
|
||||
// cy.contains(`[data-test-id="FormactItalicIcon"]`).click();
|
||||
|
||||
// cy.get('[test-id=1] > text').invoke('attr', 'font-family').should('eq', 'Times');
|
||||
// cy.matchImageSnapshot('changeFontType');
|
||||
// });
|
||||
|
||||
// it('Change Font Italic', () => {
|
||||
// cy.get(`[aria-label="Font Style"]`).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('Change Font color', () => {
|
||||
// cy.get('#fontColorTip').click();
|
||||
// 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');
|
||||
// });
|
||||
});
|
74
packages/editor/cypress/e2e/topicFontChange.cy.ts
Normal file
@ -0,0 +1,74 @@
|
||||
context('Edit Topic', () => {
|
||||
beforeEach(() => {
|
||||
// Remove storage for autosave ...
|
||||
cy.visit('/editor.html');
|
||||
cy.clearLocalStorage('welcome-xml');
|
||||
cy.reload();
|
||||
|
||||
// Wait for load complate ...
|
||||
cy.get('[aria-label="vortex-loading"]').should('not.exist');
|
||||
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', () => {
|
||||
// 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('[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.matchImageSnapshot('changeFontSizeNormal');
|
||||
|
||||
cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
|
||||
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(`[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(`[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', () => {
|
||||
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();
|
||||
|
||||
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 });
|
||||
|
||||
cy.get('[test-id=1] > text').invoke('attr', 'fill').should('eq', 'rgb(153, 0, 255)');
|
||||
|
||||
cy.matchImageSnapshot('changeFontColor');
|
||||
});
|
||||
});
|
@ -1,7 +1,12 @@
|
||||
context('Change topic position', () => {
|
||||
beforeEach(() => {
|
||||
// Remove storage for autosave ...
|
||||
cy.visit('/editor.html');
|
||||
cy.clearLocalStorage('welcome-xml');
|
||||
cy.reload();
|
||||
|
||||
// Wait for load complate ...
|
||||
cy.get('[aria-label="vortex-loading"]').should('not.exist');
|
||||
});
|
||||
|
||||
it('Move up node "Mind Mapping"', () => {
|
@ -9,7 +9,12 @@ context('Change Topic shape', () => {
|
||||
cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover');
|
||||
cy.get(`[aria-label="Rectangle shape"]`).first().click();
|
||||
|
||||
cy.get('[test-id=11] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('eq', 0);
|
||||
cy.get('[test-id=11] > rect')
|
||||
.eq(1)
|
||||
.invoke('attr', 'rx')
|
||||
.then(parseInt)
|
||||
.should('be.a', 'number')
|
||||
.should('eq', 0);
|
||||
|
||||
cy.matchImageSnapshot('changeToSquareShape');
|
||||
});
|
||||
@ -21,8 +26,18 @@ context('Change Topic shape', () => {
|
||||
cy.get(`[aria-label="Rounded shape"]`).first().click();
|
||||
|
||||
// Todo: Check how to validate this. Difference when it run in docker vs test:integration
|
||||
cy.get('[test-id=6] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.gte', 4);
|
||||
cy.get('[test-id=6] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.lt', 5);
|
||||
cy.get('[test-id=6] > rect')
|
||||
.eq(1)
|
||||
.invoke('attr', 'rx')
|
||||
.then(parseInt)
|
||||
.should('be.a', 'number')
|
||||
.should('be.gte', 4);
|
||||
cy.get('[test-id=6] > rect')
|
||||
.eq(1)
|
||||
.invoke('attr', 'rx')
|
||||
.then(parseInt)
|
||||
.should('be.a', 'number')
|
||||
.should('be.lt', 5);
|
||||
|
||||
cy.matchImageSnapshot('changeToRoundedRectangle');
|
||||
});
|
||||
@ -43,8 +58,18 @@ context('Change Topic shape', () => {
|
||||
cy.get(`[aria-label="Ellipse shape"]`).first().click();
|
||||
|
||||
// Todo: Check how to validate this. Difference when it run in docker vs test:integration
|
||||
cy.get('[test-id=2] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.gte', 12);
|
||||
cy.get('[test-id=2] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.lt', 15);
|
||||
cy.get('[test-id=2] > rect')
|
||||
.eq(1)
|
||||
.invoke('attr', 'rx')
|
||||
.then(parseInt)
|
||||
.should('be.a', 'number')
|
||||
.should('be.gte', 12);
|
||||
cy.get('[test-id=2] > rect')
|
||||
.eq(1)
|
||||
.invoke('attr', 'rx')
|
||||
.then(parseInt)
|
||||
.should('be.a', 'number')
|
||||
.should('be.lt', 15);
|
||||
|
||||
cy.matchImageSnapshot('changeToEllipseShape');
|
||||
});
|
After Width: | Height: | Size: 424 KiB |
After Width: | Height: | Size: 409 KiB |
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 470 KiB |
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 102 KiB |
After Width: | Height: | Size: 82 KiB |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 68 KiB |
After Width: | Height: | Size: 42 KiB |
After Width: | Height: | Size: 114 KiB |
After Width: | Height: | Size: 651 KiB |
After Width: | Height: | Size: 59 KiB |
After Width: | Height: | Size: 64 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 101 KiB |
After Width: | Height: | Size: 146 KiB |
After Width: | Height: | Size: 38 KiB |
After Width: | Height: | Size: 38 KiB |
After Width: | Height: | Size: 102 KiB |
After Width: | Height: | Size: 69 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 80 KiB |
After Width: | Height: | Size: 97 KiB |
After Width: | Height: | Size: 93 KiB |
After Width: | Height: | Size: 91 KiB |
After Width: | Height: | Size: 88 KiB |
After Width: | Height: | Size: 89 KiB |
After Width: | Height: | Size: 99 KiB |
After Width: | Height: | Size: 97 KiB |
After Width: | Height: | Size: 95 KiB |
After Width: | Height: | Size: 97 KiB |
After Width: | Height: | Size: 102 KiB |
After Width: | Height: | Size: 100 KiB |
After Width: | Height: | Size: 90 KiB |
After Width: | Height: | Size: 91 KiB |
After Width: | Height: | Size: 90 KiB |
After Width: | Height: | Size: 90 KiB |
After Width: | Height: | Size: 95 KiB |
After Width: | Height: | Size: 94 KiB |
After Width: | Height: | Size: 94 KiB |
@ -1,20 +1,13 @@
|
||||
// ***********************************************************
|
||||
// This example support/index.js is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands';
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
Cypress.on('window:before:load', (win) => {
|
||||
cy.spy(win.console, 'error');
|
||||
cy.spy(win.console, 'warn');
|
||||
});
|
||||
|
||||
// // afterEach(() => {
|
||||
// // cy.window().then((win) => {
|
||||
// // expect(win.console.error).to.have.callCount(0);
|
||||
// // expect(win.console.warn).to.have.callCount(0);
|
||||
// // });
|
||||
// });
|
||||
|