github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

move to standard linter for simpler configuration

Browse Source
This commit is contained in:
JFH
2021-12-28 11:02:29 -03:00
parent 258e2bd6a1
commit fdcfc8a253
251 changed files with 19760 additions and 19935 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
cypress/integration/ui/clipboard.js
View File

@@ -1,14 +1,14 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
} from '../../support/ui-test-helper.js'
describe('UI - Clipboard', function () {
beforeEach(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('Editor - Copy and paste', () => {
cy.get('#tool_source').click();
cy.get('#tool_source').click()
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
@@ -17,47 +17,47 @@ describe('UI - Clipboard', function () {
<title>Layer 1</title>
<circle cx="100" cy="100" r="50" fill="#FF0000" id="testCircle" stroke="#000000" stroke-width="5"/>
</g>
</svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click();
cy.get('#testCircle').should('exist');
cy.get('#svg_1').should('not.exist');
cy.get('#svg_2').should('not.exist');
</svg>`, { force: true, parseSpecialCharSequences: false })
cy.get('#tool_source_save').click()
cy.get('#testCircle').should('exist')
cy.get('#svg_1').should('not.exist')
cy.get('#svg_2').should('not.exist')
// Copy.
cy.get('#testCircle').click().rightclick();
cy.get('#cmenu_canvas a[href="#copy"]').click({ force: true });
cy.get('#testCircle').click().rightclick()
cy.get('#cmenu_canvas a[href="#copy"]').click({ force: true })
// Paste.
// Scrollbars fail to recenter in Cypress test. Works fine in reality.
// Thus forcing click is needed since workspace is mostly offscreen.
cy.get('#svgroot').rightclick({ force: true });
cy.get('#cmenu_canvas a[href="#paste"]').click({ force: true });
cy.get('#testCircle').should('exist');
cy.get('#svg_1').should('exist');
cy.get('#svg_2').should('not.exist');
cy.get('#svgroot').rightclick({ force: true })
cy.get('#cmenu_canvas a[href="#paste"]').click({ force: true })
cy.get('#testCircle').should('exist')
cy.get('#svg_1').should('exist')
cy.get('#svg_2').should('not.exist')
// Cut.
cy.get('#testCircle').click().rightclick();
cy.get('#cmenu_canvas a[href="#cut"]').click({ force: true });
cy.get('#testCircle').should('not.exist');
cy.get('#svg_1').should('exist');
cy.get('#svg_2').should('not.exist');
cy.get('#testCircle').click().rightclick()
cy.get('#cmenu_canvas a[href="#cut"]').click({ force: true })
cy.get('#testCircle').should('not.exist')
cy.get('#svg_1').should('exist')
cy.get('#svg_2').should('not.exist')
// Paste.
// Scrollbars fail to recenter in Cypress test. Works fine in reality.
// Thus forcing click is needed since workspace is mostly offscreen.
cy.get('#svgroot').rightclick({ force: true });
cy.get('#cmenu_canvas a[href="#paste"]').click({ force: true });
cy.get('#testCircle').should('not.exist');
cy.get('#svg_1').should('exist');
cy.get('#svg_2').should('exist');
cy.get('#svgroot').rightclick({ force: true })
cy.get('#cmenu_canvas a[href="#paste"]').click({ force: true })
cy.get('#testCircle').should('not.exist')
cy.get('#svg_1').should('exist')
cy.get('#svg_2').should('exist')
// Delete.
cy.get('#svg_2').click().rightclick();
cy.get('#cmenu_canvas a[href="#delete"]').click({ force: true });
cy.get('#svg_1').click().rightclick();
cy.get('#cmenu_canvas a[href="#delete"]').click({ force: true });
cy.get('#svg_1').should('not.exist');
cy.get('#svg_2').should('not.exist');
});
});
cy.get('#svg_2').click().rightclick()
cy.get('#cmenu_canvas a[href="#delete"]').click({ force: true })
cy.get('#svg_1').click().rightclick()
cy.get('#cmenu_canvas a[href="#delete"]').click({ force: true })
cy.get('#svg_1').should('not.exist')
cy.get('#svg_2').should('not.exist')
})
})

26
cypress/integration/ui/control-points.js
View File

@@ -1,15 +1,15 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
} from '../../support/ui-test-helper.js'
describe('UI - Control Points', function () {
beforeEach(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('Editor - No parameters: Drag control point of arc path', () => {
const randomOffset = () => 2 + Math.round(10 + Math.random() * 40);
cy.get('#tool_source').click();
const randomOffset = () => 2 + Math.round(10 + Math.random() * 40)
cy.get('#tool_source').click()
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
@@ -17,18 +17,18 @@ describe('UI - Control Points', function () {
<title>Layer 1</title>
<path d="m187,194a114,62 0 1 0 219,2" id="svg_1" fill="#FF0000" stroke="#000000" stroke-width="5"/>
</g>
</svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click({ force: true });
</svg>`, { force: true, parseSpecialCharSequences: false })
cy.get('#tool_source_save').click({ force: true })
cy.get('#svg_1').click({ force: true }).click({ force: true });
cy.get('#svg_1').click({ force: true }).click({ force: true })
cy.get('#pathpointgrip_0').trigger('mousedown', { which: 1, force: true })
.trigger('mousemove', randomOffset(), randomOffset(), { force: true })
.trigger('mouseup', { force: true });
.trigger('mouseup', { force: true })
cy.get('#pathpointgrip_1').trigger('mousedown', { which: 1, force: true })
.trigger('mousemove', randomOffset(), randomOffset(), { force: true })
.trigger('mouseup', { force: true });
.trigger('mouseup', { force: true })
cy.get('#svg_1[d]').should('not.contain', 'NaN');
});
});
cy.get('#svg_1[d]').should('not.contain', 'NaN')
})
})

22
cypress/integration/ui/export.js
View File

@@ -1,20 +1,20 @@
import {
visitAndApproveStorage, openMainMenu
} from '../../support/ui-test-helper.js';
} from '../../support/ui-test-helper.js'
describe('UI - Export tests', function () {
beforeEach(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('Editor - No parameters: Has export button', () => {
openMainMenu();
cy.get('#tool_export');
});
openMainMenu()
cy.get('#tool_export')
})
it('Editor - No parameters: Export button clicking; dialog opens', () => {
openMainMenu();
cy.get('#tool_export').click({ force: true });
cy.get('#dialog_content select');
});
});
openMainMenu()
cy.get('#tool_export').click({ force: true })
cy.get('#dialog_content select')
})
})

20
cypress/integration/ui/issues/issue-359.js
View File

@@ -1,15 +1,15 @@
import {
visitAndApproveStorage
} from '../../../support/ui-test-helper.js';
} from '../../../support/ui-test-helper.js'
// See https://github.com/SVG-Edit/svgedit/issues/359
describe('Fix issue 359', function () {
beforeEach(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('can undo without throwing', function () {
cy.get('#tool_source').click();
cy.get('#tool_source').click()
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
@@ -17,10 +17,10 @@ describe('Fix issue 359', function () {
<title>Layer 1</title>
<rect fill="#ffff00" height="70" width="165" x="179.5" y="146.5"/>
</g>
</svg>`, { parseSpecialCharSequences: false, force: true });
cy.get('#tool_source_save').click();
cy.get('#tool_undo').click();
cy.get('#tool_redo').click(); // test also redo to make the test more comprehensive
</svg>`, { parseSpecialCharSequences: false, force: true })
cy.get('#tool_source_save').click()
cy.get('#tool_undo').click()
cy.get('#tool_redo').click() // test also redo to make the test more comprehensive
// if the undo throws an error to the console, the test will fail
});
});
})
})

26
cypress/integration/ui/issues/issue-407.js
View File

@@ -1,15 +1,15 @@
import {
visitAndApproveStorage
} from '../../../support/ui-test-helper.js';
} from '../../../support/ui-test-helper.js'
// See https://github.com/SVG-Edit/svgedit/issues/407
describe('Fix issue 407', function () {
beforeEach(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('can enter edit on text child', function () {
cy.get('#tool_source').click();
cy.get('#tool_source').click()
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
@@ -20,16 +20,16 @@ describe('Fix issue 407', function () {
<text fill="#000000" id="a_text" text-anchor="middle" x="260.5" xml:space="preserve" y="192.5">hello</text>
</g>
</g>
</svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click();
cy.get('#svg_1').click().dblclick();
cy.get('#a_text').should('exist');
</svg>`, { force: true, parseSpecialCharSequences: false })
cy.get('#tool_source_save').click()
cy.get('#svg_1').click().dblclick()
cy.get('#a_text').should('exist')
cy.get('#a_text')
.trigger('mousedown', { which: 1, force: true })
.trigger('mouseup', { force: true })
.dblclick({ force: true });
.dblclick({ force: true })
// svgedit use the #text text field to capture the text
cy.get('#text').type('1234', { force: true });
cy.get('#a_text').should('have.text', 'he1234llo');
});
});
cy.get('#text').type('1234', { force: true })
cy.get('#a_text').should('have.text', 'he1234llo')
})
})

22
cypress/integration/ui/issues/issue-408.js
View File

@@ -1,15 +1,15 @@
import {
visitAndApproveStorage
} from '../../../support/ui-test-helper.js';
} from '../../../support/ui-test-helper.js'
// See https://github.com/SVG-Edit/svgedit/issues/408
describe('Fix issue 408', function () {
beforeEach(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('should not throw when showing/saving svg content', function () {
cy.get('#tool_source').click();
cy.get('#tool_source').click()
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
@@ -20,10 +20,10 @@ describe('Fix issue 408', function () {
<circle cx="117.5" cy="87.5" fill="#ffff00" r="19.84943" stroke="#000000" />
</g>
</g>
</svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click();
cy.get('#svg_6').click().dblclick(); // change context
cy.get('#tool_source').click(); // reopen tool_source
cy.get('#tool_source_save').should('exist'); // The save button should be here if it does not throw
});
});
</svg>`, { force: true, parseSpecialCharSequences: false })
cy.get('#tool_source_save').click()
cy.get('#svg_6').click().dblclick() // change context
cy.get('#tool_source').click() // reopen tool_source
cy.get('#tool_source_save').should('exist') // The save button should be here if it does not throw
})
})

20
cypress/integration/ui/issues/issue-423.js
View File

@@ -1,15 +1,15 @@
import {
visitAndApproveStorage
} from '../../../support/ui-test-helper.js';
} from '../../../support/ui-test-helper.js'
// See https://github.com/SVG-Edit/svgedit/issues/423
describe('Fix issue 423', function () {
beforeEach(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('should not throw when undoing the move', function () {
cy.get('#tool_source').click();
cy.get('#tool_source').click()
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
@@ -22,12 +22,12 @@ describe('Fix issue 423', function () {
<rect clip-path="url(#svg_2)" fill="#0033b5" height="174.9" id="TANK1" width="78" x="77.5" y="29"/>
</g>
</g>
</svg>`, { parseSpecialCharSequences: false, force: true });
cy.get('#tool_source_save').click({ force: true });
</svg>`, { parseSpecialCharSequences: false, force: true })
cy.get('#tool_source_save').click({ force: true })
cy.get('#TANK1')
.trigger('mousedown', { force: true })
.trigger('mousemove', 50, 0, { force: true })
.trigger('mouseup', { force: true });
cy.get('#tool_undo').click({ force: true });
});
});
.trigger('mouseup', { force: true })
cy.get('#tool_undo').click({ force: true })
})
})

26
cypress/integration/ui/issues/issue-660.js
View File

@@ -1,16 +1,16 @@
import {
visitAndApproveStorage
} from '../../../support/ui-test-helper.js';
} from '../../../support/ui-test-helper.js'
// See https://github.com/SVG-Edit/svgedit/issues/660
describe('Fix issue 660', function () {
beforeEach(() => {
visitAndApproveStorage();
cy.viewport(512, 512);
});
visitAndApproveStorage()
cy.viewport(512, 512)
})
/** @todo: reenable this test when we understand why it is passing locally but not on ci */
it.skip('can resize text', function () {
cy.get('#tool_source').click();
cy.get('#tool_source').click()
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
@@ -18,18 +18,18 @@ describe('Fix issue 660', function () {
<title>Layer 1</title>
<text fill="#000000" id="a_text" text-anchor="middle" x="260.5" xml:space="preserve" y="192.5" font-size="40">hello</text>
</g>
</svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click({ force: true });
cy.get('#a_text').should('exist');
</svg>`, { force: true, parseSpecialCharSequences: false })
cy.get('#tool_source_save').click({ force: true })
cy.get('#a_text').should('exist')
cy.get('#a_text')
.trigger('mousedown', { which: 1, force: true })
.trigger('mouseup', { force: true });
.trigger('mouseup', { force: true })
cy.get('#selectorGrip_resize_s')
.trigger('mousedown', { which: 1, force: true })
.trigger('mousemove', { clientX: 0, clientY: 600 })
.trigger('mouseup', { force: true });
.trigger('mouseup', { force: true })
// svgedit use the #text text field to capture the text
cy.get('#a_text').should('have.attr', 'transform')
.and('equal', 'matrix(1 0 0 4.54639 0 -540.825)'); // Chrome 96 is matrix(1 0 0 4.17431 0 -325.367)
});
});
.and('equal', 'matrix(1 0 0 4.54639 0 -540.825)') // Chrome 96 is matrix(1 0 0 4.17431 0 -325.367)
})
})

12
cypress/integration/ui/key-commands.js
View File

@@ -1,14 +1,14 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
} from '../../support/ui-test-helper.js'
// See https://github.com/SVG-Edit/svgedit/issues/364
describe('Key commands', function () {
beforeEach(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it.skip('cmd-A on empty canvas should not cause an error', function () {
cy.get('body').type('{cmd}a');
});
});
cy.get('body').type('{cmd}a')
})
})

222
cypress/integration/ui/scenario.js
View File

@@ -1,190 +1,188 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
} from '../../support/ui-test-helper.js'
const testSnapshot = () => {
cy.get('#svgcontent').cleanSnapshot();
};
cy.get('#svgcontent').cleanSnapshot()
}
describe('use various parts of svg-edit', function () {
before(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('check tool_source', function () {
cy.get('#tool_source').click({ force: true });
cy.get('#tool_source').click({ force: true })
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer">
<title>Layer 1</title>
</g>
</svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click({ force: true });
testSnapshot();
});
</svg>`, { force: true, parseSpecialCharSequences: false })
cy.get('#tool_source_save').click({ force: true })
testSnapshot()
})
it('check tool_fhpath', function () {
cy.get('#tool_fhpath')
.click({ force: true });
.click({ force: true })
cy.get('#svgcontent')
.trigger('mousemove', 200, 200, { force: true })
.trigger('mousedown', 200, 200, { force: true })
.trigger('mousemove', 20, 20, { force: true })
.trigger('mouseup', { force: true });
testSnapshot();
});
.trigger('mouseup', { force: true })
testSnapshot()
})
it('check tool_text', function () {
cy.get('#tool_text')
.click({ force: true });
.click({ force: true })
cy.get('#svgcontent')
.trigger('mousedown', 46, 35, { force: true })
.trigger('mouseup', { force: true });
.trigger('mousedown', 46, 35, { force: true })
.trigger('mouseup', { force: true })
// svgedit use the #text text field to capture the text
cy.get('#text').type('AB', { force: true });
testSnapshot();
});
cy.get('#text').type('AB', { force: true })
testSnapshot()
})
it('check tool_clone', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#tool_clone')
.click({ force: true });
testSnapshot();
});
.click({ force: true })
testSnapshot()
})
it('check tool_italic', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#tool_italic')
.click({ force: true });
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(500);
testSnapshot();
});
.click({ force: true })
testSnapshot()
})
it('check tool_bold', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#tool_bold')
.click({ force: true });
testSnapshot();
});
.click({ force: true })
testSnapshot()
})
it('check tool_text_change_x_y_coordinate', function () {
cy.get('#svg_2').click({ force: true });
for(let n = 0; n < 25; n ++){
cy.get('#svg_2').click({ force: true })
for (let n = 0; n < 25; n++) {
cy.get('#selected_x').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
for(let n = 0; n < 25; n ++){
for (let n = 0; n < 25; n++) {
cy.get('#selected_y').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_text_change_font_size', function () {
cy.get('#svg_1').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_1').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#font_size').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_text_change_stroke_width', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#stroke_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
testSnapshot();
});
.click({ force: true })
testSnapshot()
})
it('check tool_text_change_stoke_fill_color', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#stroke_color').shadow().find('#picker').eq(0).click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#stroke_color').shadow().find('#picker').eq(0).click({ force: true })
cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('.QuickColor').eq(51).click({ force: true });
.find('.QuickColor').eq(51).click({ force: true })
cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('#Ok').eq(0).click({ force: true });
cy.get('#fill_color').shadow().find('#picker').eq(0).click({ force: true });
.find('#Ok').eq(0).click({ force: true })
cy.get('#fill_color').shadow().find('#picker').eq(0).click({ force: true })
cy.get('#fill_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('.QuickColor').eq(3).click({ force: true });
.find('.QuickColor').eq(3).click({ force: true })
cy.get('#fill_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('#Ok').eq(0).click({ force: true });
testSnapshot();
});
.find('#Ok').eq(0).click({ force: true })
testSnapshot()
})
it('check tool_text_anchor_start', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#tool_text_anchor_start')
.click({ force: true });
testSnapshot();
});
.click({ force: true })
testSnapshot()
})
it('check tool_text_anchor_middle', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#tool_text_anchor_middle')
.click({ force: true });
testSnapshot();
});
.click({ force: true })
testSnapshot()
})
it('check tool_text_anchor_end', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#tool_text_anchor_end')
.click({ force: true });
testSnapshot();
});
.click({ force: true })
testSnapshot()
})
it('check tool_text_change_rotation', function () {
cy.get('#svg_2').click({ force: true });
for(let n = 0; n < 5; n ++){
cy.get('#svg_2').click({ force: true })
for (let n = 0; n < 5; n++) {
cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_text_change_blur', function () {
cy.get('#svg_2').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_2').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_text_change_opacity', function () {
cy.get('#svg_2').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_2').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_text_align_to_page', function () {
cy.get('#svg_2').click({ force: true });
cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
cy.get('#svg_2').click({ force: true })
cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened')
cy.get('#tool_position').find('se-list-item').eq(2).shadow().find('elix-option').eq(0)
.click({ force: true });
testSnapshot();
});
.click({ force: true })
testSnapshot()
})
it('check tool_text_change_class', function () {
cy.get('#svg_2').click({ force: true });
cy.get('#svg_2').click({ force: true })
cy.get('#elem_class').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
.type('svg_2_class{enter}', { force: true });
.type('svg_2_class{enter}', { force: true })
cy.get('#svg_2')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList);
return classList.includes('svg_2_class');
});
});
const classList = Array.from($el[0].classList)
return classList.includes('svg_2_class')
})
})
it('check tool_text_change_id', function () {
cy.get('#svg_2').click({ force: true }).click({ force: true });
cy.get('#svg_2').click({ force: true }).click({ force: true })
cy.get('#elem_id').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
.type('_id{enter}', { force: true });
.type('_id{enter}', { force: true })
cy.get('#svg_2_id')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList);
return classList.includes('svg_2_class');
});
});
const classList = Array.from($el[0].classList)
return classList.includes('svg_2_class')
})
})
it('check tool_text_delete', function () {
cy.get('#svg_2_id').click({ force: true });
cy.get('#tool_delete').click({ force: true });
testSnapshot();
});
cy.get('#svg_2_id').click({ force: true })
cy.get('#tool_delete').click({ force: true })
testSnapshot()
})
it('check tool_text_change_font_family', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#tool_font_family').shadow().find('select').select("Serif");
testSnapshot();
});
});
cy.get('#svg_1').click({ force: true })
cy.get('#tool_font_family').shadow().find('select').select('Serif')
testSnapshot()
})
})

48
cypress/integration/ui/scenario1.js
View File

@@ -1,55 +1,55 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
} from '../../support/ui-test-helper.js'
const testSnapshot = () => {
cy.get('#svgcontent').cleanSnapshot();
};
cy.get('#svgcontent').cleanSnapshot()
}
describe('use all parts of svg-edit', function () {
before(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('check tool_source_set', function () {
cy.get('#tool_source').click({ force: true });
cy.get('#tool_source').click({ force: true })
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer">
<title>Layer 1</title>
</g>
</svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click({ force: true });
testSnapshot();
});
</svg>`, { force: true, parseSpecialCharSequences: false })
cy.get('#tool_source_save').click({ force: true })
testSnapshot()
})
it('check tool_shape', function () {
cy.get('#tool_shapelib').shadow().find('.overall').eq(0).click({ force: true });
cy.get('[data-shape="heart"]').click({ force: true });
cy.get('#tool_shapelib').shadow().find('.overall').eq(0).click({ force: true })
cy.get('[data-shape="heart"]').click({ force: true })
cy.get('#svgcontent')
.trigger('mousemove', 200, 200, { force: true })
.trigger('mousedown', 200, 200, { force: true })
.trigger('mousemove', 20, 20, { force: true })
.trigger('mouseup', { force: true });
.trigger('mouseup', { force: true })
cy.get('#selectorGrip_rotate')
.trigger('mousedown')
.trigger('mousemove', 20, 20, { force: true })
.trigger('mouseup', { force: true });
testSnapshot();
});
.trigger('mouseup', { force: true })
testSnapshot()
})
it('check tool_image', function () {
cy.get('#tool_image').click({ force: true });
cy.get('#tool_image').click({ force: true })
cy.get('#svgcontent')
.trigger('mousedown', 100, 100, { force: true })
.trigger('mousemove', 120, 120, { force: true })
.trigger('mouseup', { force: true });
.trigger('mouseup', { force: true })
// eslint-disable-next-line promise/catch-or-return
cy.window()
// eslint-disable-next-line promise/always-return
.then(($win) => {
cy.stub($win, 'prompt').returns('./images/logo.svg');
cy.contains('OK');
});
testSnapshot();
});
});
cy.stub($win, 'prompt').returns('./images/logo.svg')
cy.contains('OK')
})
testSnapshot()
})
})

136
cypress/integration/ui/scenario2.js
View File

@@ -1,124 +1,124 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
} from '../../support/ui-test-helper.js'
const testSnapshot = () => {
cy.get('#svgcontent').cleanSnapshot();
};
cy.get('#svgcontent').cleanSnapshot()
}
describe('use all parts of svg-edit', function () {
before(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('check tool_source_set', function () {
cy.get('#tool_source').click({ force: true });
cy.get('#tool_source').click({ force: true })
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer">
<title>Layer 1</title>
</g>
</svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click({ force: true });
testSnapshot();
});
</svg>`, { force: true, parseSpecialCharSequences: false })
cy.get('#tool_source_save').click({ force: true })
testSnapshot()
})
it('check tool_circle', function () {
cy.get('#tool_circle')
.click({ force: true });
.click({ force: true })
cy.get('#svgcontent')
.trigger('mousedown', 150, 150, { force: true })
.trigger('mousemove', 250, 200, { force: true })
.trigger('mouseup', { force: true });
testSnapshot();
});
.trigger('mouseup', { force: true })
testSnapshot()
})
it('check tool_fhellipse', function () {
cy.get('#tool_fhellipse')
.click({ force: true });
.click({ force: true })
cy.get('#svgcontent')
.trigger('mousedown', 200, 80, { force: true })
.trigger('mousemove', 320, 80, { force: true })
.trigger('mousemove', 320, 180, { force: true })
.trigger('mousemove', 200, 180, { force: true })
.trigger('mousemove', 200, 80, { force: true })
.trigger('mouseup', 200, 80, { force: true });
testSnapshot();
});
.trigger('mouseup', 200, 80, { force: true })
testSnapshot()
})
it('check tool_ellipse', function () {
cy.get('#tool_ellipse').click({ force: true });
cy.get('#tool_ellipse').click({ force: true })
cy.get('#svgcontent')
.trigger('mousedown', 75, 150, { force: true })
.trigger('mousemove', 130, 175, { force: true })
.trigger('mouseup', { force: true });
testSnapshot();
});
.trigger('mouseup', { force: true })
testSnapshot()
})
it('check tool_circle_change_fill_color', function () {
cy.get('#svg_2').click({ force: true });
cy.get('#svg_2').click({ force: true })
cy.get('#js-se-palette').find('.square').eq(8)
.click({ force: true });
testSnapshot();
});
.click({ force: true })
testSnapshot()
})
it('check tool_circle_change_opacity', function () {
cy.get('#svg_2').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_2').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_ellipse_change_rotation', function () {
cy.get('#svg_3').click({ force: true });
for(let n = 0; n < 5; n ++){
cy.get('#svg_3').click({ force: true })
for (let n = 0; n < 5; n++) {
cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_ellipse_change_blur', function () {
cy.get('#svg_3').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_3').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_ellipse_change_cx_cy_coordinate', function () {
cy.get('#svg_3').click({ force: true });
for(let n = 0; n < 25; n ++){
cy.get('#svg_3').click({ force: true })
for (let n = 0; n < 25; n++) {
cy.get('#ellipse_cx').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
for(let n = 0; n < 25; n ++){
for (let n = 0; n < 25; n++) {
cy.get('#ellipse_cy').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_ellipse_change_rx_ry_radius', function () {
cy.get('#svg_3').click({ force: true });
for(let n = 0; n < 25; n ++){
cy.get('#svg_3').click({ force: true })
for (let n = 0; n < 25; n++) {
cy.get('#ellipse_rx').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
for(let n = 0; n < 25; n ++){
for (let n = 0; n < 25; n++) {
cy.get('#ellipse_ry').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_ellipse_bring_to_back', function () {
cy.get('#svg_2').click({ force: true });
cy.get('#tool_move_bottom').click({ force: true });
testSnapshot();
});
cy.get('#svg_2').click({ force: true })
cy.get('#tool_move_bottom').click({ force: true })
testSnapshot()
})
it('check tool_ellipse_bring_to_front', function () {
cy.get('#svg_2').click({ force: true });
cy.get('#tool_move_top').click({ force: true });
testSnapshot();
});
cy.get('#svg_2').click({ force: true })
cy.get('#tool_move_top').click({ force: true })
testSnapshot()
})
it('check tool_ellipse_clone', function () {
cy.get('#svg_2').click({ force: true });
cy.get('#tool_clone').click({ force: true });
testSnapshot();
});
});
cy.get('#svg_2').click({ force: true })
cy.get('#tool_clone').click({ force: true })
testSnapshot()
})
})

82
cypress/integration/ui/scenario3.js
View File

@@ -1,31 +1,31 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
} from '../../support/ui-test-helper.js'
const testSnapshot = () => {
cy.get('#svgcontent').cleanSnapshot();
};
cy.get('#svgcontent').cleanSnapshot()
}
describe('use all parts of svg-edit', function () {
before(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('check tool_source_set', function () {
cy.get('#tool_source').click({ force: true });
cy.get('#tool_source').click({ force: true })
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer">
<title>Layer 1</title>
</g>
</svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click({ force: true });
testSnapshot();
});
</svg>`, { force: true, parseSpecialCharSequences: false })
cy.get('#tool_source_save').click({ force: true })
testSnapshot()
})
it('check tool_path', function () {
cy.get('#tool_path')
.click({ force: true });
.click({ force: true })
cy.get('#svgcontent')
.trigger('mousedown', 50, 50, { force: true })
.trigger('mouseup', { force: true })
@@ -37,49 +37,49 @@ describe('use all parts of svg-edit', function () {
.trigger('mouseup', { force: true })
.trigger('mousemove', 0, 0, { force: true })
.trigger('mousedown', 0, 0, { force: true })
.trigger('mouseup', { force: true });
testSnapshot();
});
.trigger('mouseup', { force: true })
testSnapshot()
})
it('check tool_path_change_node_xy', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').dblclick({ force: true });
for(let n = 0; n < 25; n ++){
cy.get('#svg_1').click({ force: true })
cy.get('#svg_1').dblclick({ force: true })
for (let n = 0; n < 25; n++) {
cy.get('#path_node_x').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
for(let n = 0; n < 25; n ++){
for (let n = 0; n < 25; n++) {
cy.get('#path_node_y').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_path_change_seg_type', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').dblclick({ force: true });
cy.get('#seg_type').shadow().find('select').select('6').should('have.value', '6');
cy.get('#svg_1').click({ force: true })
cy.get('#svg_1').dblclick({ force: true })
cy.get('#seg_type').shadow().find('select').select('6').should('have.value', '6')
cy.get('#ctrlpointgrip_3c1')
.trigger('mousedown', { force: true })
.trigger('mousemove', 130, 175, { force: true })
.trigger('mouseup', { force: true });
testSnapshot();
});
.trigger('mouseup', { force: true })
testSnapshot()
})
it('check tool_path_change_clone_node', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').dblclick({ force: true });
cy.get('#tool_node_clone').click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#svg_1').dblclick({ force: true })
cy.get('#tool_node_clone').click({ force: true })
cy.get('#pathpointgrip_4')
.trigger('mousedown', { force: true })
.trigger('mousemove', 130, 175, { force: true })
.trigger('mouseup', { force: true });
testSnapshot();
});
.trigger('mouseup', { force: true })
testSnapshot()
})
it('check tool_path_openclose', function () {
cy.get('#tool_select').click({ force: true });
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').dblclick({ force: true });
cy.get('#tool_openclose_path').click({ force: true });
testSnapshot();
});
cy.get('#tool_select').click({ force: true })
cy.get('#svg_1').click({ force: true })
cy.get('#svg_1').dblclick({ force: true })
cy.get('#tool_openclose_path').click({ force: true })
testSnapshot()
})
/* it('check tool_path_add_subpath', function () {
cy.get('#tool_add_subpath').click({ force: true });
cy.get('#svgcontent')
@@ -97,4 +97,4 @@ describe('use all parts of svg-edit', function () {
cy.get('#tool_select').click({ force: true });
testSnapshot();
}); */
});
})

190
cypress/integration/ui/scenario4.js
View File

@@ -1,164 +1,164 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
} from '../../support/ui-test-helper.js'
const testSnapshot = () => {
cy.get('#svgcontent').cleanSnapshot();
};
cy.get('#svgcontent').cleanSnapshot()
}
describe('use all parts of svg-edit', function () {
before(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('check tool_source_set', function () {
cy.get('#tool_source').click({ force: true });
cy.get('#tool_source').click({ force: true })
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer">
<title>Layer 1</title>
</g>
</svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click({ force: true });
testSnapshot();
});
</svg>`, { force: true, parseSpecialCharSequences: false })
cy.get('#tool_source_save').click({ force: true })
testSnapshot()
})
it('check tool_rect', function () {
cy.get('#tool_rect')
.click({ force: true });
.click({ force: true })
cy.get('#svgcontent')
.trigger('mousedown', 150, 150, { force: true })
.trigger('mousemove', 250, 200, { force: true })
.trigger('mouseup', { force: true });
testSnapshot();
});
.trigger('mouseup', { force: true })
testSnapshot()
})
it('check tool_fhrect', function () {
cy.get('#tool_fhrect')
.click({ force: true });
.click({ force: true })
cy.get('#svgcontent')
.trigger('mousedown', 200, 80, { force: true })
.trigger('mousemove', 320, 80, { force: true })
.trigger('mousemove', 320, 180, { force: true })
.trigger('mousemove', 200, 180, { force: true })
.trigger('mousemove', 200, 80, { force: true })
.trigger('mouseup', 200, 80, { force: true });
testSnapshot();
});
.trigger('mouseup', 200, 80, { force: true })
testSnapshot()
})
it('check tool_square', function () {
cy.get('#tool_square').click({ force: true });
cy.get('#tool_square').click({ force: true })
cy.get('#svgcontent')
.trigger('mousedown', 75, 150, { force: true })
.trigger('mousemove', 125, 200, { force: true })
.trigger('mouseup', { force: true });
testSnapshot();
});
.trigger('mouseup', { force: true })
testSnapshot()
})
it('check tool_rect_change_fill_color', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#js-se-palette').find('.square').eq(8)
.click({ force: true });
testSnapshot();
});
.click({ force: true })
testSnapshot()
})
it('check tool_rect_change_rotation', function () {
cy.get('#svg_1').click({ force: true });
for(let n = 0; n < 5; n ++){
cy.get('#svg_1').click({ force: true })
for (let n = 0; n < 5; n++) {
cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_rect_change_blur', function () {
cy.get('#svg_1').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_1').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_rect_change_opacity', function () {
cy.get('#svg_1').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_1').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_fhrect_change_x_y_coordinate', function () {
cy.get('#svg_2').click({ force: true });
for(let n = 0; n < 25; n ++){
cy.get('#svg_2').click({ force: true })
for (let n = 0; n < 25; n++) {
cy.get('#selected_x').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
for(let n = 0; n < 25; n ++){
for (let n = 0; n < 25; n++) {
cy.get('#selected_y').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_fhrect_change_width_height', function () {
cy.get('#svg_2').click({ force: true });
for(let n = 0; n < 25; n ++){
cy.get('#svg_2').click({ force: true })
for (let n = 0; n < 25; n++) {
cy.get('#rect_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
for(let n = 0; n < 25; n ++){
for (let n = 0; n < 25; n++) {
cy.get('#rect_height').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_square_clone', function () {
cy.get('#svg_3').click({ force: true });
cy.get('#tool_clone').click({ force: true });
testSnapshot();
});
cy.get('#svg_3').click({ force: true })
cy.get('#tool_clone').click({ force: true })
testSnapshot()
})
it('check tool_square_bring_to_back', function () {
cy.get('#svg_3').click({ force: true });
cy.get('#tool_move_bottom').click({ force: true });
testSnapshot();
});
cy.get('#svg_3').click({ force: true })
cy.get('#tool_move_bottom').click({ force: true })
testSnapshot()
})
it('check tool_square_bring_to_front', function () {
cy.get('#svg_3').click({ force: true });
cy.get('#tool_move_top').click({ force: true });
testSnapshot();
});
cy.get('#svg_3').click({ force: true })
cy.get('#tool_move_top').click({ force: true })
testSnapshot()
})
it('check tool_square_change_corner_radius', function () {
cy.get('#svg_4').click({ force: true });
for(let n = 0; n < 25; n ++){
cy.get('#svg_4').click({ force: true })
for (let n = 0; n < 25; n++) {
cy.get('#rect_rx').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_rect_change_to_path', function () {
cy.get('#svg_2').click({ force: true });
cy.get('#tool_topath').click({ force: true });
testSnapshot();
});
cy.get('#svg_2').click({ force: true })
cy.get('#tool_topath').click({ force: true })
testSnapshot()
})
it('check tool_rect_delete', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#tool_delete').click({ force: true });
cy.get('#svg_3').click({ force: true });
cy.get('#tool_delete').click({ force: true });
testSnapshot();
});
cy.get('#svg_1').click({ force: true })
cy.get('#tool_delete').click({ force: true })
cy.get('#svg_3').click({ force: true })
cy.get('#tool_delete').click({ force: true })
testSnapshot()
})
it('check tool_rect_change_class', function () {
cy.get('#svg_2').click({ force: true });
cy.get('#svg_2').click({ force: true })
cy.get('#elem_class').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
.type('svg_2_class{enter}', { force: true });
.type('svg_2_class{enter}', { force: true })
cy.get('#svg_2')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList);
return classList.includes('svg_2_class');
});
});
const classList = Array.from($el[0].classList)
return classList.includes('svg_2_class')
})
})
it('check tool_rect_change_id', function () {
cy.get('#svg_2').click({ force: true }).click({ force: true });
cy.get('#svg_2').click({ force: true }).click({ force: true })
cy.get('#elem_id').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
.type('_id{enter}', { force: true });
.type('_id{enter}', { force: true })
cy.get('#svg_2_id')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList);
return classList.includes('svg_2_class');
});
});
});
const classList = Array.from($el[0].classList)
return classList.includes('svg_2_class')
})
})
})

174
cypress/integration/ui/scenario5.js
View File

@@ -1,153 +1,153 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
} from '../../support/ui-test-helper.js'
const testSnapshot = () => {
cy.get('#svgcontent').cleanSnapshot();
};
cy.get('#svgcontent').cleanSnapshot()
}
describe('use all parts of svg-edit', function () {
before(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('check tool_source_set', function () {
cy.get('#tool_source').click({ force: true });
cy.get('#tool_source').click({ force: true })
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer">
<title>Layer 1</title>
</g>
</svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click({ force: true });
testSnapshot();
});
</svg>`, { force: true, parseSpecialCharSequences: false })
cy.get('#tool_source_save').click({ force: true })
testSnapshot()
})
it('check tool_line', function () {
cy.get('#tool_line')
.click({ force: true });
.click({ force: true })
cy.get('#svgcontent')
.trigger('mousemove', 200, 200, { force: true })
.trigger('mousedown', 200, 200, { force: true })
.trigger('mousemove', 250, 250, { force: true })
.trigger('mouseup', { force: true });
testSnapshot();
});
.trigger('mouseup', { force: true })
testSnapshot()
})
it('check tool_line_change_class', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#elem_class').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
.type('svg_1_class{enter}', { force: true });
.type('svg_1_class{enter}', { force: true })
cy.get('#svg_1')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList);
return classList.includes('svg_1_class');
});
});
const classList = Array.from($el[0].classList)
return classList.includes('svg_1_class')
})
})
it('check tool_line_change_id', function () {
cy.get('#svg_1').click({ force: true }).click({ force: true });
cy.get('#svg_1').click({ force: true }).click({ force: true })
cy.get('#elem_id').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
.type('_id{enter}', { force: true });
.type('_id{enter}', { force: true })
cy.get('#svg_1_id')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList);
return classList.includes('svg_1_class');
});
});
const classList = Array.from($el[0].classList)
return classList.includes('svg_1_class')
})
})
it('check tool_line_change_rotation', function () {
cy.get('#svg_1_id').click({ force: true });
for(let n = 0; n < 5; n ++){
cy.get('#svg_1_id').click({ force: true })
for (let n = 0; n < 5; n++) {
cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_line_change_blur', function () {
cy.get('#svg_1_id').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_1_id').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_line_change_opacity', function () {
cy.get('#svg_1_id').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_1_id').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_line_delete', function () {
cy.get('#svg_1_id').click({ force: true });
cy.get('#tool_delete').click({ force: true });
testSnapshot();
});
cy.get('#svg_1_id').click({ force: true })
cy.get('#tool_delete').click({ force: true })
testSnapshot()
})
it('check tool_line_clone', function () {
cy.get('#tool_line')
.click({ force: true });
.click({ force: true })
cy.get('#svgcontent')
.trigger('mousemove', 200, 200, { force: true })
.trigger('mousedown', 200, 200, { force: true })
.trigger('mousemove', 250, 250, { force: true })
.trigger('mouseup', { force: true });
cy.get('#svg_2').click({ force: true });
cy.get('#tool_clone').click({ force: true });
testSnapshot();
});
.trigger('mouseup', { force: true })
cy.get('#svg_2').click({ force: true })
cy.get('#tool_clone').click({ force: true })
testSnapshot()
})
it('check tool_line_bring_to_back', function () {
cy.get('#svg_2').click({ force: true });
cy.get('#tool_move_bottom').click({ force: true });
testSnapshot();
});
cy.get('#svg_2').click({ force: true })
cy.get('#tool_move_bottom').click({ force: true })
testSnapshot()
})
it('check tool_line_bring_to_front', function () {
cy.get('#svg_2').click({ force: true });
cy.get('#tool_move_top').click({ force: true });
testSnapshot();
});
cy.get('#svg_2').click({ force: true })
cy.get('#tool_move_top').click({ force: true })
testSnapshot()
})
it('check tool_line_change_x_y_coordinate', function () {
cy.get('#svg_2').click({ force: true });
for(let n = 0; n < 25; n ++){
cy.get('#svg_2').click({ force: true })
for (let n = 0; n < 25; n++) {
cy.get('#line_x1').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
for(let n = 0; n < 25; n ++){
for (let n = 0; n < 25; n++) {
cy.get('#line_y1').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
.click({ force: true });
.click({ force: true })
}
for(let n = 0; n < 25; n ++){
for (let n = 0; n < 25; n++) {
cy.get('#line_x2').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
for(let n = 0; n < 25; n ++){
for (let n = 0; n < 25; n++) {
cy.get('#line_y2').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_line_change_stroke_width', function () {
cy.get('#svg_2').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_2').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#stroke_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_line_change_stoke_color', function () {
cy.get('#svg_3').click({ force: true });
cy.get('#stroke_color').shadow().find('#picker').eq(0).click({ force: true });
cy.get('#svg_3').click({ force: true })
cy.get('#stroke_color').shadow().find('#picker').eq(0).click({ force: true })
cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('.QuickColor').eq(9).click({ force: true });
.find('.QuickColor').eq(9).click({ force: true })
cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('#Ok').eq(0).click({ force: true });
testSnapshot();
});
.find('#Ok').eq(0).click({ force: true })
testSnapshot()
})
it('check tool_line_align_to_page', function () {
cy.get('#svg_3').click({ force: true });
cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
cy.get('#svg_3').click({ force: true })
cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened')
cy.get('#tool_position').find('se-list-item').eq(2).shadow().find('elix-option').eq(0)
.click({ force: true });
testSnapshot();
});
});
.click({ force: true })
testSnapshot()
})
})

162
cypress/integration/ui/scenario6.js
View File

@@ -1,108 +1,108 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
} from '../../support/ui-test-helper.js'
const testSnapshot = () => {
cy.get('#svgcontent').cleanSnapshot();
};
cy.get('#svgcontent').cleanSnapshot()
}
describe('use all parts of svg-edit', function () {
before(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('check tool_source_set', function () {
cy.get('#tool_source').click({ force: true });
cy.get('#tool_source').click({ force: true })
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer">
<title>Layer 1</title>
</g>
</svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click({ force: true });
testSnapshot();
});
</svg>`, { force: true, parseSpecialCharSequences: false })
cy.get('#tool_source_save').click({ force: true })
testSnapshot()
})
it('check tool_polygon', function () {
cy.get('#tool_polygon')
.click({ force: true });
.click({ force: true })
cy.get('#svgcontent')
.trigger('mousedown', 325, 250, { force: true })
.trigger('mousemove', 325, 345, { force: true })
.trigger('mouseup', { force: true });
testSnapshot();
});
.trigger('mouseup', { force: true })
testSnapshot()
})
it('check tool_polygon_clone', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#tool_clone').click({ force: true });
testSnapshot();
});
cy.get('#svg_1').click({ force: true })
cy.get('#tool_clone').click({ force: true })
testSnapshot()
})
it('check tool_polygon_change_class', function () {
cy.get('#svg_2').click({ force: true });
cy.get('#svg_2').click({ force: true })
cy.get('#elem_class').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
.type('svg_2_class{enter}', { force: true });
.type('svg_2_class{enter}', { force: true })
cy.get('#svg_2')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList);
return classList.includes('svg_2_class');
});
});
const classList = Array.from($el[0].classList)
return classList.includes('svg_2_class')
})
})
it('check tool_polygon_change_id', function () {
cy.get('#svg_2').click({ force: true }).click({ force: true });
cy.get('#svg_2').click({ force: true }).click({ force: true })
cy.get('#elem_id').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
.type('_id{enter}', { force: true });
.type('_id{enter}', { force: true })
cy.get('#svg_2_id')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList);
return classList.includes('svg_2_class');
});
});
const classList = Array.from($el[0].classList)
return classList.includes('svg_2_class')
})
})
it('check tool_polygon_change_rotation', function () {
cy.get('#svg_2_id').click({ force: true });
for(let n = 0; n < 5; n ++){
cy.get('#svg_2_id').click({ force: true })
for (let n = 0; n < 5; n++) {
cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_polygon_change_blur', function () {
cy.get('#svg_2_id').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_2_id').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_polygon_change_opacity', function () {
cy.get('#svg_2_id').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_2_id').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_polygon_bring_to_back', function () {
cy.get('#svg_2_id').click({ force: true });
cy.get('#tool_move_bottom').click({ force: true });
testSnapshot();
});
cy.get('#svg_2_id').click({ force: true })
cy.get('#tool_move_bottom').click({ force: true })
testSnapshot()
})
it('check tool_polygon_bring_to_front', function () {
cy.get('#svg_2_id').click({ force: true });
cy.get('#tool_move_top').click({ force: true });
testSnapshot();
});
cy.get('#svg_2_id').click({ force: true })
cy.get('#tool_move_top').click({ force: true })
testSnapshot()
})
it('check tool_polygon_delete', function () {
cy.get('#svg_2_id').click({ force: true });
cy.get('#tool_delete').click({ force: true });
testSnapshot();
});
cy.get('#svg_2_id').click({ force: true })
cy.get('#tool_delete').click({ force: true })
testSnapshot()
})
it('check tool_polygon_align_to_page', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
cy.get('#svg_1').click({ force: true })
cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened')
cy.get('#tool_position').find('se-list-item').eq(0).shadow().find('elix-option').eq(0)
.click({ force: true });
testSnapshot();
});
.click({ force: true })
testSnapshot()
})
/* it('check tool_polygon_change_x_y_coordinate', function () {
cy.get('#svg_1').click({ force: true });
for(let n = 0; n < 25; n ++){
@@ -116,35 +116,35 @@ describe('use all parts of svg-edit', function () {
testSnapshot();
}); */
it('check tool_polygon_change_stroke_width', function () {
cy.get('#svg_1').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_1').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#stroke_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_polygon_change_stoke_fill_color', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#stroke_color').shadow().find('#picker').eq(0).click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#stroke_color').shadow().find('#picker').eq(0).click({ force: true })
cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('.QuickColor').eq(51).click({ force: true });
.find('.QuickColor').eq(51).click({ force: true })
cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('#Ok').eq(0).click({ force: true });
cy.get('#fill_color').shadow().find('#picker').eq(0).click({ force: true });
.find('#Ok').eq(0).click({ force: true })
cy.get('#fill_color').shadow().find('#picker').eq(0).click({ force: true })
cy.get('#fill_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('.QuickColor').eq(3).click({ force: true });
.find('.QuickColor').eq(3).click({ force: true })
cy.get('#fill_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('#Ok').eq(0).click({ force: true });
testSnapshot();
});
.find('#Ok').eq(0).click({ force: true })
testSnapshot()
})
it('check tool_polygon_change_sides', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#polySides').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
testSnapshot();
});
});
.click({ force: true })
testSnapshot()
})
})

162
cypress/integration/ui/scenario7.js
View File

@@ -1,138 +1,138 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
} from '../../support/ui-test-helper.js'
const testSnapshot = () => {
cy.get('#svgcontent').cleanSnapshot();
};
cy.get('#svgcontent').cleanSnapshot()
}
describe('use all parts of svg-edit', function () {
before(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('check tool_source_set', function () {
cy.get('#tool_source').click({ force: true });
cy.get('#tool_source').click({ force: true })
cy.get('#svg_source_textarea')
.type('{selectall}', { force: true })
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer">
<title>Layer 1</title>
</g>
</svg>`, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click({ force: true });
testSnapshot();
});
</svg>`, { force: true, parseSpecialCharSequences: false })
cy.get('#tool_source_save').click({ force: true })
testSnapshot()
})
it('check tool_star', function () {
cy.get('#tool_star')
.click({ force: true });
.click({ force: true })
cy.get('#svgcontent')
.trigger('mousedown', 300, 150, { force: true })
.trigger('mousemove', 300, 250, { force: true })
.trigger('mouseup', { force: true });
testSnapshot();
});
.trigger('mouseup', { force: true })
testSnapshot()
})
it('check tool_star_clone', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#tool_clone').click({ force: true });
testSnapshot();
});
cy.get('#svg_1').click({ force: true })
cy.get('#tool_clone').click({ force: true })
testSnapshot()
})
it('check tool_star_change_class', function () {
cy.get('#svg_2').click({ force: true });
cy.get('#svg_2').click({ force: true })
cy.get('#elem_class').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
.type('svg_2_class{enter}', { force: true });
.type('svg_2_class{enter}', { force: true })
cy.get('#svg_2')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList);
return classList.includes('svg_2_class');
});
});
const classList = Array.from($el[0].classList)
return classList.includes('svg_2_class')
})
})
it('check tool_star_change_id', function () {
cy.get('#svg_2').click({ force: true }).click({ force: true });
cy.get('#svg_2').click({ force: true }).click({ force: true })
cy.get('#elem_id').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
.type('_id{enter}', { force: true });
.type('_id{enter}', { force: true })
cy.get('#svg_2_id')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList);
return classList.includes('svg_2_class');
});
});
const classList = Array.from($el[0].classList)
return classList.includes('svg_2_class')
})
})
it('check tool_star_change_rotation', function () {
cy.get('#svg_2_id').click({ force: true });
for(let n = 0; n < 5; n ++){
cy.get('#svg_2_id').click({ force: true })
for (let n = 0; n < 5; n++) {
cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_star_change_blur', function () {
cy.get('#svg_2_id').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_2_id').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_star_change_opacity', function () {
cy.get('#svg_2_id').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_2_id').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_star_bring_to_back', function () {
cy.get('#svg_2_id').click({ force: true });
cy.get('#tool_move_bottom').click({ force: true });
testSnapshot();
});
cy.get('#svg_2_id').click({ force: true })
cy.get('#tool_move_bottom').click({ force: true })
testSnapshot()
})
it('check tool_star_bring_to_front', function () {
cy.get('#svg_2_id').click({ force: true });
cy.get('#tool_move_top').click({ force: true });
testSnapshot();
});
cy.get('#svg_2_id').click({ force: true })
cy.get('#tool_move_top').click({ force: true })
testSnapshot()
})
it('check tool_star_delete', function () {
cy.get('#svg_2_id').click({ force: true });
cy.get('#tool_delete').click({ force: true });
testSnapshot();
});
cy.get('#svg_2_id').click({ force: true })
cy.get('#tool_delete').click({ force: true })
testSnapshot()
})
it('check tool_star_align_to_page', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
cy.get('#svg_1').click({ force: true })
cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened')
cy.get('#tool_position').find('se-list-item').eq(0).shadow().find('elix-option').eq(0)
.click({ force: true });
testSnapshot();
});
.click({ force: true })
testSnapshot()
})
it('check tool_star_change_stroke_width', function () {
cy.get('#svg_1').click({ force: true });
for(let n = 0; n < 10; n ++){
cy.get('#svg_1').click({ force: true })
for (let n = 0; n < 10; n++) {
cy.get('#stroke_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
.click({ force: true })
}
testSnapshot();
});
testSnapshot()
})
it('check tool_star_change_stoke_fill_color', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#stroke_color').shadow().find('#picker').eq(0).click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#stroke_color').shadow().find('#picker').eq(0).click({ force: true })
cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('.QuickColor').eq(51).click({ force: true });
.find('.QuickColor').eq(51).click({ force: true })
cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('#Ok').eq(0).click({ force: true });
cy.get('#fill_color').shadow().find('#picker').eq(0).click({ force: true });
.find('#Ok').eq(0).click({ force: true })
cy.get('#fill_color').shadow().find('#picker').eq(0).click({ force: true })
cy.get('#fill_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('.QuickColor').eq(3).click({ force: true });
.find('.QuickColor').eq(3).click({ force: true })
cy.get('#fill_color').shadow().find('#color_picker').eq(0)
.find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
.find('#Ok').eq(0).click({ force: true });
testSnapshot();
});
.find('#Ok').eq(0).click({ force: true })
testSnapshot()
})
it('check tool_star_change_sides', function () {
cy.get('#svg_1').click({ force: true });
cy.get('#svg_1').click({ force: true })
cy.get('#starNumPoints').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
testSnapshot();
});
});
.click({ force: true })
testSnapshot()
})
})

14
cypress/integration/ui/tool-selection.js
View File

@@ -1,17 +1,17 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
} from '../../support/ui-test-helper.js'
describe('UI - Tool selection', function () {
beforeEach(() => {
visitAndApproveStorage();
});
visitAndApproveStorage()
})
it('should set rectangle selection by click', function () {
cy.get('#tools_rect')
.should('not.have.attr', 'pressed');
.should('not.have.attr', 'pressed')
cy.get('#tools_rect')
.trigger('click', { force: true })
.should('have.attr', 'pressed');
});
});
.should('have.attr', 'pressed')
})
})

14
cypress/integration/unit/browser-bugs/removeItem-setAttribute.js
View File

@@ -2,10 +2,10 @@
describe('Browser bugs', function () {
it('removeItem and setAttribute test (Chromium 843901; now fixed)', function () {
// See https://bugs.chromium.org/p/chromium/issues/detail?id=843901
const elem = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
elem.setAttribute('transform', 'matrix(1,0,0,1,0,0)');
elem.transform.baseVal.removeItem(0);
elem.removeAttribute('transform');
assert.equal(elem.hasAttribute('transform'), false);
});
});
const elem = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
elem.setAttribute('transform', 'matrix(1,0,0,1,0,0)')
elem.transform.baseVal.removeItem(0)
elem.removeAttribute('transform')
assert.equal(elem.hasAttribute('transform'), false)
})
})

46
cypress/integration/unit/contextmenu.js
View File

@@ -1,4 +1,4 @@
import * as contextmenu from '../../../instrumented/editor/contextmenu.js';
import * as contextmenu from '../../../instrumented/editor/contextmenu.js'
describe('contextmenu', function () {
/**
@@ -6,53 +6,53 @@ describe('contextmenu', function () {
* @returns {void}
*/
afterEach(() => {
contextmenu.resetCustomMenus();
});
contextmenu.resetCustomMenus()
})
it('Test svgedit.contextmenu package', function () {
assert.ok(contextmenu, 'contextmenu registered correctly');
assert.ok(contextmenu.add, 'add registered correctly');
assert.ok(contextmenu.hasCustomHandler, 'contextmenu hasCustomHandler registered correctly');
assert.ok(contextmenu.getCustomHandler, 'contextmenu getCustomHandler registered correctly');
});
assert.ok(contextmenu, 'contextmenu registered correctly')
assert.ok(contextmenu.add, 'add registered correctly')
assert.ok(contextmenu.hasCustomHandler, 'contextmenu hasCustomHandler registered correctly')
assert.ok(contextmenu.getCustomHandler, 'contextmenu getCustomHandler registered correctly')
})
it('Test svgedit.contextmenu does not add invalid menu item', function () {
assert.throws(
() => contextmenu.add({ id: 'justanid' }),
null, null,
'menu item with just an id is invalid'
);
)
assert.throws(
() => contextmenu.add({ id: 'idandlabel', label: 'anicelabel' }),
null, null,
'menu item with just an id and label is invalid'
);
)
assert.throws(
() => contextmenu.add({ id: 'idandlabel', label: 'anicelabel', action: 'notafunction' }),
null, null,
'menu item with action that is not a function is invalid'
);
});
)
})
it('Test svgedit.contextmenu adds valid menu item', function () {
const validItem = { id: 'valid', label: 'anicelabel', action () { /* empty fn */ } };
contextmenu.add(validItem);
const validItem = { id: 'valid', label: 'anicelabel', action () { /* empty fn */ } }
contextmenu.add(validItem)
assert.ok(contextmenu.hasCustomHandler('valid'), 'Valid menu item is added.');
assert.equal(contextmenu.getCustomHandler('valid'), validItem.action, 'Valid menu action is added.');
});
assert.ok(contextmenu.hasCustomHandler('valid'), 'Valid menu item is added.')
assert.equal(contextmenu.getCustomHandler('valid'), validItem.action, 'Valid menu action is added.')
})
it('Test svgedit.contextmenu rejects valid duplicate menu item id', function () {
const validItem1 = { id: 'valid', label: 'anicelabel', action () { /* empty fn */ } };
const validItem2 = { id: 'valid', label: 'anicelabel', action () { /* empty fn */ } };
contextmenu.add(validItem1);
const validItem1 = { id: 'valid', label: 'anicelabel', action () { /* empty fn */ } }
const validItem2 = { id: 'valid', label: 'anicelabel', action () { /* empty fn */ } }
contextmenu.add(validItem1)
assert.throws(
() => contextmenu.add(validItem2),
null, null,
'duplicate menu item is rejected.'
);
});
});
)
})
})

336
cypress/integration/unit/coords.js
View File

@@ -1,25 +1,25 @@
import { NS } from '../../../instrumented/svgcanvas/namespaces.js';
import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import * as coords from '../../../instrumented/svgcanvas/coords.js';
import { NS } from '../../../instrumented/svgcanvas/namespaces.js'
import * as utilities from '../../../instrumented/svgcanvas/utilities.js'
import * as coords from '../../../instrumented/svgcanvas/coords.js'
describe('coords', function () {
let elemId = 1;
let elemId = 1
const root = document.createElement('div');
root.id = 'root';
root.style.visibility = 'hidden';
document.body.append(root);
const root = document.createElement('div')
root.id = 'root'
root.style.visibility = 'hidden'
document.body.append(root)
/**
* Set up tests with mock data.
* @returns {void}
*/
beforeEach(function () {
const svgroot = document.createElementNS(NS.SVG, 'svg');
svgroot.id = 'svgroot';
root.append(svgroot);
this.svg = document.createElementNS(NS.SVG, 'svg');
svgroot.append(this.svg);
const svgroot = document.createElementNS(NS.SVG, 'svg')
svgroot.id = 'svgroot'
root.append(svgroot)
this.svg = document.createElementNS(NS.SVG, 'svg')
svgroot.append(this.svg)
// Mock out editor context.
utilities.init(
@@ -27,25 +27,25 @@ describe('coords', function () {
* @implements {module:utilities.EditorContext}
*/
{
getSvgRoot: () => { return this.svg; },
getDOMDocument () { return null; },
getDOMContainer () { return null; }
getSvgRoot: () => { return this.svg },
getDOMDocument () { return null },
getDOMContainer () { return null }
}
);
)
coords.init(
/**
* @implements {module:coords.EditorContext}
*/
{
getGridSnapping () { return false; },
getGridSnapping () { return false },
getDrawing () {
return {
getNextId () { return String(elemId++); }
};
getNextId () { return String(elemId++) }
}
}
}
);
});
)
})
/**
* Tear down tests, removing elements.
@@ -53,255 +53,255 @@ describe('coords', function () {
*/
afterEach(function () {
while (this.svg.hasChildNodes()) {
this.svg.firstChild.remove();
this.svg.firstChild.remove()
}
});
})
it('Test remapElement(translate) for rect', function () {
const rect = document.createElementNS(NS.SVG, 'rect');
rect.setAttribute('x', '200');
rect.setAttribute('y', '150');
rect.setAttribute('width', '250');
rect.setAttribute('height', '120');
this.svg.append(rect);
const rect = document.createElementNS(NS.SVG, 'rect')
rect.setAttribute('x', '200')
rect.setAttribute('y', '150')
rect.setAttribute('width', '250')
rect.setAttribute('height', '120')
this.svg.append(rect)
const attrs = {
x: '200',
y: '150',
width: '125',
height: '75'
};
}
// Create a translate.
const m = this.svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
const m = this.svg.createSVGMatrix()
m.a = 1; m.b = 0
m.c = 0; m.d = 1
m.e = 100; m.f = -50
coords.remapElement(rect, attrs, m);
coords.remapElement(rect, attrs, m)
assert.equal(rect.getAttribute('x'), '300');
assert.equal(rect.getAttribute('y'), '100');
assert.equal(rect.getAttribute('width'), '125');
assert.equal(rect.getAttribute('height'), '75');
});
assert.equal(rect.getAttribute('x'), '300')
assert.equal(rect.getAttribute('y'), '100')
assert.equal(rect.getAttribute('width'), '125')
assert.equal(rect.getAttribute('height'), '75')
})
it('Test remapElement(scale) for rect', function () {
const rect = document.createElementNS(NS.SVG, 'rect');
rect.setAttribute('width', '250');
rect.setAttribute('height', '120');
this.svg.append(rect);
const rect = document.createElementNS(NS.SVG, 'rect')
rect.setAttribute('width', '250')
rect.setAttribute('height', '120')
this.svg.append(rect)
const attrs = {
x: '0',
y: '0',
width: '250',
height: '120'
};
}
// Create a translate.
const m = this.svg.createSVGMatrix();
m.a = 2; m.b = 0;
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
const m = this.svg.createSVGMatrix()
m.a = 2; m.b = 0
m.c = 0; m.d = 0.5
m.e = 0; m.f = 0
coords.remapElement(rect, attrs, m);
coords.remapElement(rect, attrs, m)
assert.equal(rect.getAttribute('x'), '0');
assert.equal(rect.getAttribute('y'), '0');
assert.equal(rect.getAttribute('width'), '500');
assert.equal(rect.getAttribute('height'), '60');
});
assert.equal(rect.getAttribute('x'), '0')
assert.equal(rect.getAttribute('y'), '0')
assert.equal(rect.getAttribute('width'), '500')
assert.equal(rect.getAttribute('height'), '60')
})
it('Test remapElement(translate) for circle', function () {
const circle = document.createElementNS(NS.SVG, 'circle');
circle.setAttribute('cx', '200');
circle.setAttribute('cy', '150');
circle.setAttribute('r', '125');
this.svg.append(circle);
const circle = document.createElementNS(NS.SVG, 'circle')
circle.setAttribute('cx', '200')
circle.setAttribute('cy', '150')
circle.setAttribute('r', '125')
this.svg.append(circle)
const attrs = {
cx: '200',
cy: '150',
r: '125'
};
}
// Create a translate.
const m = this.svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
const m = this.svg.createSVGMatrix()
m.a = 1; m.b = 0
m.c = 0; m.d = 1
m.e = 100; m.f = -50
coords.remapElement(circle, attrs, m);
coords.remapElement(circle, attrs, m)
assert.equal(circle.getAttribute('cx'), '300');
assert.equal(circle.getAttribute('cy'), '100');
assert.equal(circle.getAttribute('r'), '125');
});
assert.equal(circle.getAttribute('cx'), '300')
assert.equal(circle.getAttribute('cy'), '100')
assert.equal(circle.getAttribute('r'), '125')
})
it('Test remapElement(scale) for circle', function () {
const circle = document.createElementNS(NS.SVG, 'circle');
circle.setAttribute('cx', '200');
circle.setAttribute('cy', '150');
circle.setAttribute('r', '250');
this.svg.append(circle);
const circle = document.createElementNS(NS.SVG, 'circle')
circle.setAttribute('cx', '200')
circle.setAttribute('cy', '150')
circle.setAttribute('r', '250')
this.svg.append(circle)
const attrs = {
cx: '200',
cy: '150',
r: '250'
};
}
// Create a translate.
const m = this.svg.createSVGMatrix();
m.a = 2; m.b = 0;
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
const m = this.svg.createSVGMatrix()
m.a = 2; m.b = 0
m.c = 0; m.d = 0.5
m.e = 0; m.f = 0
coords.remapElement(circle, attrs, m);
coords.remapElement(circle, attrs, m)
assert.equal(circle.getAttribute('cx'), '400');
assert.equal(circle.getAttribute('cy'), '75');
assert.equal(circle.getAttribute('cx'), '400')
assert.equal(circle.getAttribute('cy'), '75')
// Radius is the minimum that fits in the new bounding box.
assert.equal(circle.getAttribute('r'), '125');
});
assert.equal(circle.getAttribute('r'), '125')
})
it('Test remapElement(translate) for ellipse', function () {
const ellipse = document.createElementNS(NS.SVG, 'ellipse');
ellipse.setAttribute('cx', '200');
ellipse.setAttribute('cy', '150');
ellipse.setAttribute('rx', '125');
ellipse.setAttribute('ry', '75');
this.svg.append(ellipse);
const ellipse = document.createElementNS(NS.SVG, 'ellipse')
ellipse.setAttribute('cx', '200')
ellipse.setAttribute('cy', '150')
ellipse.setAttribute('rx', '125')
ellipse.setAttribute('ry', '75')
this.svg.append(ellipse)
const attrs = {
cx: '200',
cy: '150',
rx: '125',
ry: '75'
};
}
// Create a translate.
const m = this.svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
const m = this.svg.createSVGMatrix()
m.a = 1; m.b = 0
m.c = 0; m.d = 1
m.e = 100; m.f = -50
coords.remapElement(ellipse, attrs, m);
coords.remapElement(ellipse, attrs, m)
assert.equal(ellipse.getAttribute('cx'), '300');
assert.equal(ellipse.getAttribute('cy'), '100');
assert.equal(ellipse.getAttribute('rx'), '125');
assert.equal(ellipse.getAttribute('ry'), '75');
});
assert.equal(ellipse.getAttribute('cx'), '300')
assert.equal(ellipse.getAttribute('cy'), '100')
assert.equal(ellipse.getAttribute('rx'), '125')
assert.equal(ellipse.getAttribute('ry'), '75')
})
it('Test remapElement(scale) for ellipse', function () {
const ellipse = document.createElementNS(NS.SVG, 'ellipse');
ellipse.setAttribute('cx', '200');
ellipse.setAttribute('cy', '150');
ellipse.setAttribute('rx', '250');
ellipse.setAttribute('ry', '120');
this.svg.append(ellipse);
const ellipse = document.createElementNS(NS.SVG, 'ellipse')
ellipse.setAttribute('cx', '200')
ellipse.setAttribute('cy', '150')
ellipse.setAttribute('rx', '250')
ellipse.setAttribute('ry', '120')
this.svg.append(ellipse)
const attrs = {
cx: '200',
cy: '150',
rx: '250',
ry: '120'
};
}
// Create a translate.
const m = this.svg.createSVGMatrix();
m.a = 2; m.b = 0;
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
const m = this.svg.createSVGMatrix()
m.a = 2; m.b = 0
m.c = 0; m.d = 0.5
m.e = 0; m.f = 0
coords.remapElement(ellipse, attrs, m);
coords.remapElement(ellipse, attrs, m)
assert.equal(ellipse.getAttribute('cx'), '400');
assert.equal(ellipse.getAttribute('cy'), '75');
assert.equal(ellipse.getAttribute('rx'), '500');
assert.equal(ellipse.getAttribute('ry'), '60');
});
assert.equal(ellipse.getAttribute('cx'), '400')
assert.equal(ellipse.getAttribute('cy'), '75')
assert.equal(ellipse.getAttribute('rx'), '500')
assert.equal(ellipse.getAttribute('ry'), '60')
})
it('Test remapElement(translate) for line', function () {
const line = document.createElementNS(NS.SVG, 'line');
line.setAttribute('x1', '50');
line.setAttribute('y1', '100');
line.setAttribute('x2', '120');
line.setAttribute('y2', '200');
this.svg.append(line);
const line = document.createElementNS(NS.SVG, 'line')
line.setAttribute('x1', '50')
line.setAttribute('y1', '100')
line.setAttribute('x2', '120')
line.setAttribute('y2', '200')
this.svg.append(line)
const attrs = {
x1: '50',
y1: '100',
x2: '120',
y2: '200'
};
}
// Create a translate.
const m = this.svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
const m = this.svg.createSVGMatrix()
m.a = 1; m.b = 0
m.c = 0; m.d = 1
m.e = 100; m.f = -50
coords.remapElement(line, attrs, m);
coords.remapElement(line, attrs, m)
assert.equal(line.getAttribute('x1'), '150');
assert.equal(line.getAttribute('y1'), '50');
assert.equal(line.getAttribute('x2'), '220');
assert.equal(line.getAttribute('y2'), '150');
});
assert.equal(line.getAttribute('x1'), '150')
assert.equal(line.getAttribute('y1'), '50')
assert.equal(line.getAttribute('x2'), '220')
assert.equal(line.getAttribute('y2'), '150')
})
it('Test remapElement(scale) for line', function () {
const line = document.createElementNS(NS.SVG, 'line');
line.setAttribute('x1', '50');
line.setAttribute('y1', '100');
line.setAttribute('x2', '120');
line.setAttribute('y2', '200');
this.svg.append(line);
const line = document.createElementNS(NS.SVG, 'line')
line.setAttribute('x1', '50')
line.setAttribute('y1', '100')
line.setAttribute('x2', '120')
line.setAttribute('y2', '200')
this.svg.append(line)
const attrs = {
x1: '50',
y1: '100',
x2: '120',
y2: '200'
};
}
// Create a translate.
const m = this.svg.createSVGMatrix();
m.a = 2; m.b = 0;
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
const m = this.svg.createSVGMatrix()
m.a = 2; m.b = 0
m.c = 0; m.d = 0.5
m.e = 0; m.f = 0
coords.remapElement(line, attrs, m);
coords.remapElement(line, attrs, m)
assert.equal(line.getAttribute('x1'), '100');
assert.equal(line.getAttribute('y1'), '50');
assert.equal(line.getAttribute('x2'), '240');
assert.equal(line.getAttribute('y2'), '100');
});
assert.equal(line.getAttribute('x1'), '100')
assert.equal(line.getAttribute('y1'), '50')
assert.equal(line.getAttribute('x2'), '240')
assert.equal(line.getAttribute('y2'), '100')
})
it('Test remapElement(translate) for text', function () {
const text = document.createElementNS(NS.SVG, 'text');
text.setAttribute('x', '50');
text.setAttribute('y', '100');
this.svg.append(text);
const text = document.createElementNS(NS.SVG, 'text')
text.setAttribute('x', '50')
text.setAttribute('y', '100')
this.svg.append(text)
const attrs = {
x: '50',
y: '100'
};
}
// Create a translate.
const m = this.svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
const m = this.svg.createSVGMatrix()
m.a = 1; m.b = 0
m.c = 0; m.d = 1
m.e = 100; m.f = -50
coords.remapElement(text, attrs, m);
coords.remapElement(text, attrs, m)
assert.equal(text.getAttribute('x'), '150');
assert.equal(text.getAttribute('y'), '50');
});
});
assert.equal(text.getAttribute('x'), '150')
assert.equal(text.getAttribute('y'), '50')
})
})

958
cypress/integration/unit/draw.js
View File

File diff suppressed because it is too large Load Diff

719
cypress/integration/unit/history.js
View File

@@ -1,31 +1,34 @@
import { NS } from '../../../instrumented/svgcanvas/namespaces.js';
import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import * as history from '../../../instrumented/svgcanvas/history.js';
import { NS } from '../../../instrumented/svgcanvas/namespaces.js'
import * as utilities from '../../../instrumented/svgcanvas/utilities.js'
import * as history from '../../../instrumented/svgcanvas/history.js'
describe('history', function () {
// TODO(codedread): Write tests for handling history events.
utilities.mock({
getHref () { return '#foo'; },
getHref () { return '#foo' },
setHref () { /* empty fn */ },
getRotationAngle () { return 0; }
});
getRotationAngle () { return 0 }
})
// const svg = document.createElementNS(NS.SVG, 'svg');
let undoMgr = null;
let undoMgr = null
class MockCommand extends history.Command {
constructor (optText) {
super();
this.text = optText;
super()
this.text = optText
}
apply (handler) {
super.apply(handler, () => { /* empty fn */ });
super.apply(handler, () => { /* empty fn */ })
}
unapply (handler) {
super.unapply(handler, () => { /* empty fn */ });
super.unapply(handler, () => { /* empty fn */ })
}
elements () { return []; }
elements () { return [] }
}
/*
@@ -39,479 +42,479 @@ describe('history', function () {
* @returns {void}
*/
beforeEach(function () {
undoMgr = new history.UndoManager();
undoMgr = new history.UndoManager()
document.body.textContent = '';
this.divparent = document.createElement('div');
this.divparent.id = 'divparent';
this.divparent.style.visibility = 'hidden';
document.body.textContent = ''
this.divparent = document.createElement('div')
this.divparent.id = 'divparent'
this.divparent.style.visibility = 'hidden'
for (let i = 1; i <= 5; i++) {
const div = document.createElement('div');
const id = `div${i}`;
div.id = id;
this[id] = div;
const div = document.createElement('div')
const id = `div${i}`
div.id = id
this[id] = div
}
this.divparent.append(this.div1, this.div2, this.div3);
this.divparent.append(this.div1, this.div2, this.div3)
this.div4.style.visibility = 'hidden';
this.div4.append(this.div5);
this.div4.style.visibility = 'hidden'
this.div4.append(this.div5)
document.body.append(this.divparent, this.div);
});
document.body.append(this.divparent, this.div)
})
/**
* Tear down tests, destroying undo manager.
* @returns {void}
*/
afterEach(() => {
undoMgr = null;
});
undoMgr = null
})
it('Test svgedit.history package', function () {
assert.ok(history);
assert.ok(history.MoveElementCommand);
assert.ok(history.InsertElementCommand);
assert.ok(history.ChangeElementCommand);
assert.ok(history.RemoveElementCommand);
assert.ok(history.BatchCommand);
assert.ok(history.UndoManager);
assert.equal(typeof history.MoveElementCommand, typeof function () { /* empty fn */ });
assert.equal(typeof history.InsertElementCommand, typeof function () { /* empty fn */ });
assert.equal(typeof history.ChangeElementCommand, typeof function () { /* empty fn */ });
assert.equal(typeof history.RemoveElementCommand, typeof function () { /* empty fn */ });
assert.equal(typeof history.BatchCommand, typeof function () { /* empty fn */ });
assert.equal(typeof history.UndoManager, typeof function () { /* empty fn */ });
});
assert.ok(history)
assert.ok(history.MoveElementCommand)
assert.ok(history.InsertElementCommand)
assert.ok(history.ChangeElementCommand)
assert.ok(history.RemoveElementCommand)
assert.ok(history.BatchCommand)
assert.ok(history.UndoManager)
assert.equal(typeof history.MoveElementCommand, typeof function () { /* empty fn */ })
assert.equal(typeof history.InsertElementCommand, typeof function () { /* empty fn */ })
assert.equal(typeof history.ChangeElementCommand, typeof function () { /* empty fn */ })
assert.equal(typeof history.RemoveElementCommand, typeof function () { /* empty fn */ })
assert.equal(typeof history.BatchCommand, typeof function () { /* empty fn */ })
assert.equal(typeof history.UndoManager, typeof function () { /* empty fn */ })
})
it('Test UndoManager methods', function () {
assert.ok(undoMgr);
assert.ok(undoMgr.addCommandToHistory);
assert.ok(undoMgr.getUndoStackSize);
assert.ok(undoMgr.getRedoStackSize);
assert.ok(undoMgr.resetUndoStack);
assert.ok(undoMgr.getNextUndoCommandText);
assert.ok(undoMgr.getNextRedoCommandText);
assert.ok(undoMgr)
assert.ok(undoMgr.addCommandToHistory)
assert.ok(undoMgr.getUndoStackSize)
assert.ok(undoMgr.getRedoStackSize)
assert.ok(undoMgr.resetUndoStack)
assert.ok(undoMgr.getNextUndoCommandText)
assert.ok(undoMgr.getNextRedoCommandText)
assert.equal(typeof undoMgr, typeof {});
assert.equal(typeof undoMgr.addCommandToHistory, typeof function () { /* empty fn */ });
assert.equal(typeof undoMgr.getUndoStackSize, typeof function () { /* empty fn */ });
assert.equal(typeof undoMgr.getRedoStackSize, typeof function () { /* empty fn */ });
assert.equal(typeof undoMgr.resetUndoStack, typeof function () { /* empty fn */ });
assert.equal(typeof undoMgr.getNextUndoCommandText, typeof function () { /* empty fn */ });
assert.equal(typeof undoMgr.getNextRedoCommandText, typeof function () { /* empty fn */ });
});
assert.equal(typeof undoMgr, typeof {})
assert.equal(typeof undoMgr.addCommandToHistory, typeof function () { /* empty fn */ })
assert.equal(typeof undoMgr.getUndoStackSize, typeof function () { /* empty fn */ })
assert.equal(typeof undoMgr.getRedoStackSize, typeof function () { /* empty fn */ })
assert.equal(typeof undoMgr.resetUndoStack, typeof function () { /* empty fn */ })
assert.equal(typeof undoMgr.getNextUndoCommandText, typeof function () { /* empty fn */ })
assert.equal(typeof undoMgr.getNextRedoCommandText, typeof function () { /* empty fn */ })
})
it('Test UndoManager.addCommandToHistory() function', function () {
assert.equal(undoMgr.getUndoStackSize(), 0);
undoMgr.addCommandToHistory(new MockCommand());
assert.equal(undoMgr.getUndoStackSize(), 1);
undoMgr.addCommandToHistory(new MockCommand());
assert.equal(undoMgr.getUndoStackSize(), 2);
});
assert.equal(undoMgr.getUndoStackSize(), 0)
undoMgr.addCommandToHistory(new MockCommand())
assert.equal(undoMgr.getUndoStackSize(), 1)
undoMgr.addCommandToHistory(new MockCommand())
assert.equal(undoMgr.getUndoStackSize(), 2)
})
it('Test UndoManager.getUndoStackSize() and getRedoStackSize() functions', function () {
undoMgr.addCommandToHistory(new MockCommand());
undoMgr.addCommandToHistory(new MockCommand());
undoMgr.addCommandToHistory(new MockCommand());
undoMgr.addCommandToHistory(new MockCommand())
undoMgr.addCommandToHistory(new MockCommand())
undoMgr.addCommandToHistory(new MockCommand())
assert.equal(undoMgr.getUndoStackSize(), 3);
assert.equal(undoMgr.getRedoStackSize(), 0);
assert.equal(undoMgr.getUndoStackSize(), 3)
assert.equal(undoMgr.getRedoStackSize(), 0)
undoMgr.undo();
assert.equal(undoMgr.getUndoStackSize(), 2);
assert.equal(undoMgr.getRedoStackSize(), 1);
undoMgr.undo()
assert.equal(undoMgr.getUndoStackSize(), 2)
assert.equal(undoMgr.getRedoStackSize(), 1)
undoMgr.undo();
assert.equal(undoMgr.getUndoStackSize(), 1);
assert.equal(undoMgr.getRedoStackSize(), 2);
undoMgr.undo()
assert.equal(undoMgr.getUndoStackSize(), 1)
assert.equal(undoMgr.getRedoStackSize(), 2)
undoMgr.undo();
assert.equal(undoMgr.getUndoStackSize(), 0);
assert.equal(undoMgr.getRedoStackSize(), 3);
undoMgr.undo()
assert.equal(undoMgr.getUndoStackSize(), 0)
assert.equal(undoMgr.getRedoStackSize(), 3)
undoMgr.undo();
assert.equal(undoMgr.getUndoStackSize(), 0);
assert.equal(undoMgr.getRedoStackSize(), 3);
undoMgr.undo()
assert.equal(undoMgr.getUndoStackSize(), 0)
assert.equal(undoMgr.getRedoStackSize(), 3)
undoMgr.redo();
assert.equal(undoMgr.getUndoStackSize(), 1);
assert.equal(undoMgr.getRedoStackSize(), 2);
undoMgr.redo()
assert.equal(undoMgr.getUndoStackSize(), 1)
assert.equal(undoMgr.getRedoStackSize(), 2)
undoMgr.redo();
assert.equal(undoMgr.getUndoStackSize(), 2);
assert.equal(undoMgr.getRedoStackSize(), 1);
undoMgr.redo()
assert.equal(undoMgr.getUndoStackSize(), 2)
assert.equal(undoMgr.getRedoStackSize(), 1)
undoMgr.redo();
assert.equal(undoMgr.getUndoStackSize(), 3);
assert.equal(undoMgr.getRedoStackSize(), 0);
undoMgr.redo()
assert.equal(undoMgr.getUndoStackSize(), 3)
assert.equal(undoMgr.getRedoStackSize(), 0)
undoMgr.redo();
assert.equal(undoMgr.getUndoStackSize(), 3);
assert.equal(undoMgr.getRedoStackSize(), 0);
});
undoMgr.redo()
assert.equal(undoMgr.getUndoStackSize(), 3)
assert.equal(undoMgr.getRedoStackSize(), 0)
})
it('Test UndoManager.resetUndoStackSize() function', function () {
undoMgr.addCommandToHistory(new MockCommand());
undoMgr.addCommandToHistory(new MockCommand());
undoMgr.addCommandToHistory(new MockCommand());
undoMgr.undo();
undoMgr.addCommandToHistory(new MockCommand())
undoMgr.addCommandToHistory(new MockCommand())
undoMgr.addCommandToHistory(new MockCommand())
undoMgr.undo()
assert.equal(undoMgr.getUndoStackSize(), 2);
assert.equal(undoMgr.getRedoStackSize(), 1);
assert.equal(undoMgr.getUndoStackSize(), 2)
assert.equal(undoMgr.getRedoStackSize(), 1)
undoMgr.resetUndoStack();
undoMgr.resetUndoStack()
assert.equal(undoMgr.getUndoStackSize(), 0);
assert.equal(undoMgr.getRedoStackSize(), 0);
});
assert.equal(undoMgr.getUndoStackSize(), 0)
assert.equal(undoMgr.getRedoStackSize(), 0)
})
it('Test UndoManager.getNextUndoCommandText() function', function () {
assert.equal(undoMgr.getNextUndoCommandText(), '');
assert.equal(undoMgr.getNextUndoCommandText(), '')
undoMgr.addCommandToHistory(new MockCommand('First'));
undoMgr.addCommandToHistory(new MockCommand('Second'));
undoMgr.addCommandToHistory(new MockCommand('Third'));
undoMgr.addCommandToHistory(new MockCommand('First'))
undoMgr.addCommandToHistory(new MockCommand('Second'))
undoMgr.addCommandToHistory(new MockCommand('Third'))
assert.equal(undoMgr.getNextUndoCommandText(), 'Third');
assert.equal(undoMgr.getNextUndoCommandText(), 'Third')
undoMgr.undo();
assert.equal(undoMgr.getNextUndoCommandText(), 'Second');
undoMgr.undo()
assert.equal(undoMgr.getNextUndoCommandText(), 'Second')
undoMgr.undo();
assert.equal(undoMgr.getNextUndoCommandText(), 'First');
undoMgr.undo()
assert.equal(undoMgr.getNextUndoCommandText(), 'First')
undoMgr.undo();
assert.equal(undoMgr.getNextUndoCommandText(), '');
undoMgr.undo()
assert.equal(undoMgr.getNextUndoCommandText(), '')
undoMgr.redo();
assert.equal(undoMgr.getNextUndoCommandText(), 'First');
undoMgr.redo()
assert.equal(undoMgr.getNextUndoCommandText(), 'First')
undoMgr.redo();
assert.equal(undoMgr.getNextUndoCommandText(), 'Second');
undoMgr.redo()
assert.equal(undoMgr.getNextUndoCommandText(), 'Second')
undoMgr.redo();
assert.equal(undoMgr.getNextUndoCommandText(), 'Third');
undoMgr.redo()
assert.equal(undoMgr.getNextUndoCommandText(), 'Third')
undoMgr.redo();
assert.equal(undoMgr.getNextUndoCommandText(), 'Third');
});
undoMgr.redo()
assert.equal(undoMgr.getNextUndoCommandText(), 'Third')
})
it('Test UndoManager.getNextRedoCommandText() function', function () {
assert.equal(undoMgr.getNextRedoCommandText(), '');
assert.equal(undoMgr.getNextRedoCommandText(), '')
undoMgr.addCommandToHistory(new MockCommand('First'));
undoMgr.addCommandToHistory(new MockCommand('Second'));
undoMgr.addCommandToHistory(new MockCommand('Third'));
undoMgr.addCommandToHistory(new MockCommand('First'))
undoMgr.addCommandToHistory(new MockCommand('Second'))
undoMgr.addCommandToHistory(new MockCommand('Third'))
assert.equal(undoMgr.getNextRedoCommandText(), '');
assert.equal(undoMgr.getNextRedoCommandText(), '')
undoMgr.undo();
assert.equal(undoMgr.getNextRedoCommandText(), 'Third');
undoMgr.undo()
assert.equal(undoMgr.getNextRedoCommandText(), 'Third')
undoMgr.undo();
assert.equal(undoMgr.getNextRedoCommandText(), 'Second');
undoMgr.undo()
assert.equal(undoMgr.getNextRedoCommandText(), 'Second')
undoMgr.undo();
assert.equal(undoMgr.getNextRedoCommandText(), 'First');
undoMgr.undo()
assert.equal(undoMgr.getNextRedoCommandText(), 'First')
undoMgr.redo();
assert.equal(undoMgr.getNextRedoCommandText(), 'Second');
undoMgr.redo()
assert.equal(undoMgr.getNextRedoCommandText(), 'Second')
undoMgr.redo();
assert.equal(undoMgr.getNextRedoCommandText(), 'Third');
undoMgr.redo()
assert.equal(undoMgr.getNextRedoCommandText(), 'Third')
undoMgr.redo();
assert.equal(undoMgr.getNextRedoCommandText(), '');
});
undoMgr.redo()
assert.equal(undoMgr.getNextRedoCommandText(), '')
})
it('Test UndoManager.undo() and redo() functions', function () {
let lastCalled = null;
const cmd1 = new MockCommand();
const cmd2 = new MockCommand();
const cmd3 = new MockCommand();
cmd1.apply = function () { lastCalled = 'cmd1.apply'; };
cmd2.apply = function () { lastCalled = 'cmd2.apply'; };
cmd3.apply = function () { lastCalled = 'cmd3.apply'; };
cmd1.unapply = function () { lastCalled = 'cmd1.unapply'; };
cmd2.unapply = function () { lastCalled = 'cmd2.unapply'; };
cmd3.unapply = function () { lastCalled = 'cmd3.unapply'; };
let lastCalled = null
const cmd1 = new MockCommand()
const cmd2 = new MockCommand()
const cmd3 = new MockCommand()
cmd1.apply = function () { lastCalled = 'cmd1.apply' }
cmd2.apply = function () { lastCalled = 'cmd2.apply' }
cmd3.apply = function () { lastCalled = 'cmd3.apply' }
cmd1.unapply = function () { lastCalled = 'cmd1.unapply' }
cmd2.unapply = function () { lastCalled = 'cmd2.unapply' }
cmd3.unapply = function () { lastCalled = 'cmd3.unapply' }
undoMgr.addCommandToHistory(cmd1);
undoMgr.addCommandToHistory(cmd2);
undoMgr.addCommandToHistory(cmd3);
undoMgr.addCommandToHistory(cmd1)
undoMgr.addCommandToHistory(cmd2)
undoMgr.addCommandToHistory(cmd3)
assert.ok(!lastCalled);
assert.ok(!lastCalled)
undoMgr.undo();
assert.equal(lastCalled, 'cmd3.unapply');
undoMgr.undo()
assert.equal(lastCalled, 'cmd3.unapply')
undoMgr.redo();
assert.equal(lastCalled, 'cmd3.apply');
undoMgr.redo()
assert.equal(lastCalled, 'cmd3.apply')
undoMgr.undo();
undoMgr.undo();
assert.equal(lastCalled, 'cmd2.unapply');
undoMgr.undo()
undoMgr.undo()
assert.equal(lastCalled, 'cmd2.unapply')
undoMgr.undo();
assert.equal(lastCalled, 'cmd1.unapply');
lastCalled = null;
undoMgr.undo()
assert.equal(lastCalled, 'cmd1.unapply')
lastCalled = null
undoMgr.undo();
assert.ok(!lastCalled);
undoMgr.undo()
assert.ok(!lastCalled)
undoMgr.redo();
assert.equal(lastCalled, 'cmd1.apply');
undoMgr.redo()
assert.equal(lastCalled, 'cmd1.apply')
undoMgr.redo();
assert.equal(lastCalled, 'cmd2.apply');
undoMgr.redo()
assert.equal(lastCalled, 'cmd2.apply')
undoMgr.redo();
assert.equal(lastCalled, 'cmd3.apply');
lastCalled = null;
undoMgr.redo()
assert.equal(lastCalled, 'cmd3.apply')
lastCalled = null
undoMgr.redo();
assert.ok(!lastCalled);
});
undoMgr.redo()
assert.ok(!lastCalled)
})
it('Test MoveElementCommand', function () {
let move = new history.MoveElementCommand(this.div3, this.div1, this.divparent);
assert.ok(move.unapply);
assert.ok(move.apply);
assert.equal(typeof move.unapply, typeof function () { /* empty fn */ });
assert.equal(typeof move.apply, typeof function () { /* empty fn */ });
let move = new history.MoveElementCommand(this.div3, this.div1, this.divparent)
assert.ok(move.unapply)
assert.ok(move.apply)
assert.equal(typeof move.unapply, typeof function () { /* empty fn */ })
assert.equal(typeof move.apply, typeof function () { /* empty fn */ })
move.unapply();
assert.equal(this.divparent.firstElementChild, this.div3);
assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div1);
assert.equal(this.divparent.lastElementChild, this.div2);
move.unapply()
assert.equal(this.divparent.firstElementChild, this.div3)
assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div1)
assert.equal(this.divparent.lastElementChild, this.div2)
move.apply();
assert.equal(this.divparent.firstElementChild, this.div1);
assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div2);
assert.equal(this.divparent.lastElementChild, this.div3);
move.apply()
assert.equal(this.divparent.firstElementChild, this.div1)
assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div2)
assert.equal(this.divparent.lastElementChild, this.div3)
move = new history.MoveElementCommand(this.div1, null, this.divparent);
move = new history.MoveElementCommand(this.div1, null, this.divparent)
move.unapply();
assert.equal(this.divparent.firstElementChild, this.div2);
assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div3);
assert.equal(this.divparent.lastElementChild, this.div1);
move.unapply()
assert.equal(this.divparent.firstElementChild, this.div2)
assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div3)
assert.equal(this.divparent.lastElementChild, this.div1)
move.apply();
assert.equal(this.divparent.firstElementChild, this.div1);
assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div2);
assert.equal(this.divparent.lastElementChild, this.div3);
move.apply()
assert.equal(this.divparent.firstElementChild, this.div1)
assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div2)
assert.equal(this.divparent.lastElementChild, this.div3)
move = new history.MoveElementCommand(this.div2, this.div5, this.div4);
move = new history.MoveElementCommand(this.div2, this.div5, this.div4)
move.unapply();
assert.equal(this.divparent.firstElementChild, this.div1);
assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div3);
assert.equal(this.divparent.lastElementChild, this.div3);
assert.equal(this.div4.firstElementChild, this.div2);
assert.equal(this.div4.firstElementChild.nextElementSibling, this.div5);
move.unapply()
assert.equal(this.divparent.firstElementChild, this.div1)
assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div3)
assert.equal(this.divparent.lastElementChild, this.div3)
assert.equal(this.div4.firstElementChild, this.div2)
assert.equal(this.div4.firstElementChild.nextElementSibling, this.div5)
move.apply();
assert.equal(this.divparent.firstElementChild, this.div1);
assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div2);
assert.equal(this.divparent.lastElementChild, this.div3);
assert.equal(this.div4.firstElementChild, this.div5);
assert.equal(this.div4.lastElementChild, this.div5);
});
move.apply()
assert.equal(this.divparent.firstElementChild, this.div1)
assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div2)
assert.equal(this.divparent.lastElementChild, this.div3)
assert.equal(this.div4.firstElementChild, this.div5)
assert.equal(this.div4.lastElementChild, this.div5)
})
it('Test InsertElementCommand', function () {
let insert = new history.InsertElementCommand(this.div3);
assert.ok(insert.unapply);
assert.ok(insert.apply);
assert.equal(typeof insert.unapply, typeof function () { /* empty fn */ });
assert.equal(typeof insert.apply, typeof function () { /* empty fn */ });
let insert = new history.InsertElementCommand(this.div3)
assert.ok(insert.unapply)
assert.ok(insert.apply)
assert.equal(typeof insert.unapply, typeof function () { /* empty fn */ })
assert.equal(typeof insert.apply, typeof function () { /* empty fn */ })
insert.unapply();
assert.equal(this.divparent.childElementCount, 2);
assert.equal(this.divparent.firstElementChild, this.div1);
assert.equal(this.div1.nextElementSibling, this.div2);
assert.equal(this.divparent.lastElementChild, this.div2);
insert.unapply()
assert.equal(this.divparent.childElementCount, 2)
assert.equal(this.divparent.firstElementChild, this.div1)
assert.equal(this.div1.nextElementSibling, this.div2)
assert.equal(this.divparent.lastElementChild, this.div2)
insert.apply();
assert.equal(this.divparent.childElementCount, 3);
assert.equal(this.divparent.firstElementChild, this.div1);
assert.equal(this.div1.nextElementSibling, this.div2);
assert.equal(this.div2.nextElementSibling, this.div3);
insert.apply()
assert.equal(this.divparent.childElementCount, 3)
assert.equal(this.divparent.firstElementChild, this.div1)
assert.equal(this.div1.nextElementSibling, this.div2)
assert.equal(this.div2.nextElementSibling, this.div3)
insert = new history.InsertElementCommand(this.div2);
insert = new history.InsertElementCommand(this.div2)
insert.unapply();
assert.equal(this.divparent.childElementCount, 2);
assert.equal(this.divparent.firstElementChild, this.div1);
assert.equal(this.div1.nextElementSibling, this.div3);
assert.equal(this.divparent.lastElementChild, this.div3);
insert.unapply()
assert.equal(this.divparent.childElementCount, 2)
assert.equal(this.divparent.firstElementChild, this.div1)
assert.equal(this.div1.nextElementSibling, this.div3)
assert.equal(this.divparent.lastElementChild, this.div3)
insert.apply();
assert.equal(this.divparent.childElementCount, 3);
assert.equal(this.divparent.firstElementChild, this.div1);
assert.equal(this.div1.nextElementSibling, this.div2);
assert.equal(this.div2.nextElementSibling, this.div3);
});
insert.apply()
assert.equal(this.divparent.childElementCount, 3)
assert.equal(this.divparent.firstElementChild, this.div1)
assert.equal(this.div1.nextElementSibling, this.div2)
assert.equal(this.div2.nextElementSibling, this.div3)
})
it('Test RemoveElementCommand', function () {
const div6 = document.createElement('div');
div6.id = 'div6';
const div6 = document.createElement('div')
div6.id = 'div6'
let remove = new history.RemoveElementCommand(div6, null, this.divparent);
assert.ok(remove.unapply);
assert.ok(remove.apply);
assert.equal(typeof remove.unapply, typeof function () { /* empty fn */ });
assert.equal(typeof remove.apply, typeof function () { /* empty fn */ });
let remove = new history.RemoveElementCommand(div6, null, this.divparent)
assert.ok(remove.unapply)
assert.ok(remove.apply)
assert.equal(typeof remove.unapply, typeof function () { /* empty fn */ })
assert.equal(typeof remove.apply, typeof function () { /* empty fn */ })
remove.unapply();
assert.equal(this.divparent.childElementCount, 4);
assert.equal(this.divparent.firstElementChild, this.div1);
assert.equal(this.div1.nextElementSibling, this.div2);
assert.equal(this.div2.nextElementSibling, this.div3);
assert.equal(this.div3.nextElementSibling, div6);
remove.unapply()
assert.equal(this.divparent.childElementCount, 4)
assert.equal(this.divparent.firstElementChild, this.div1)
assert.equal(this.div1.nextElementSibling, this.div2)
assert.equal(this.div2.nextElementSibling, this.div3)
assert.equal(this.div3.nextElementSibling, div6)
remove.apply();
assert.equal(this.divparent.childElementCount, 3);
assert.equal(this.divparent.firstElementChild, this.div1);
assert.equal(this.div1.nextElementSibling, this.div2);
assert.equal(this.div2.nextElementSibling, this.div3);
remove.apply()
assert.equal(this.divparent.childElementCount, 3)
assert.equal(this.divparent.firstElementChild, this.div1)
assert.equal(this.div1.nextElementSibling, this.div2)
assert.equal(this.div2.nextElementSibling, this.div3)
remove = new history.RemoveElementCommand(div6, this.div2, this.divparent);
remove = new history.RemoveElementCommand(div6, this.div2, this.divparent)
remove.unapply();
assert.equal(this.divparent.childElementCount, 4);
assert.equal(this.divparent.firstElementChild, this.div1);
assert.equal(this.div1.nextElementSibling, div6);
assert.equal(div6.nextElementSibling, this.div2);
assert.equal(this.div2.nextElementSibling, this.div3);
remove.unapply()
assert.equal(this.divparent.childElementCount, 4)
assert.equal(this.divparent.firstElementChild, this.div1)
assert.equal(this.div1.nextElementSibling, div6)
assert.equal(div6.nextElementSibling, this.div2)
assert.equal(this.div2.nextElementSibling, this.div3)
remove.apply();
assert.equal(this.divparent.childElementCount, 3);
assert.equal(this.divparent.firstElementChild, this.div1);
assert.equal(this.div1.nextElementSibling, this.div2);
assert.equal(this.div2.nextElementSibling, this.div3);
});
remove.apply()
assert.equal(this.divparent.childElementCount, 3)
assert.equal(this.divparent.firstElementChild, this.div1)
assert.equal(this.div1.nextElementSibling, this.div2)
assert.equal(this.div2.nextElementSibling, this.div3)
})
it('Test ChangeElementCommand', function () {
this.div1.setAttribute('title', 'new title');
this.div1.setAttribute('title', 'new title')
let change = new history.ChangeElementCommand(this.div1,
{ title: 'old title', class: 'foo' });
assert.ok(change.unapply);
assert.ok(change.apply);
assert.equal(typeof change.unapply, typeof function () { /* empty fn */ });
assert.equal(typeof change.apply, typeof function () { /* empty fn */ });
{ title: 'old title', class: 'foo' })
assert.ok(change.unapply)
assert.ok(change.apply)
assert.equal(typeof change.unapply, typeof function () { /* empty fn */ })
assert.equal(typeof change.apply, typeof function () { /* empty fn */ })
change.unapply();
assert.equal(this.div1.getAttribute('title'), 'old title');
assert.equal(this.div1.getAttribute('class'), 'foo');
change.unapply()
assert.equal(this.div1.getAttribute('title'), 'old title')
assert.equal(this.div1.getAttribute('class'), 'foo')
change.apply();
assert.equal(this.div1.getAttribute('title'), 'new title');
assert.ok(!this.div1.getAttribute('class'));
change.apply()
assert.equal(this.div1.getAttribute('title'), 'new title')
assert.ok(!this.div1.getAttribute('class'))
this.div1.textContent = 'inner text';
this.div1.textContent = 'inner text'
change = new history.ChangeElementCommand(this.div1,
{ '#text': null });
{ '#text': null })
change.unapply();
assert.ok(!this.div1.textContent);
change.unapply()
assert.ok(!this.div1.textContent)
change.apply();
assert.equal(this.div1.textContent, 'inner text');
change.apply()
assert.equal(this.div1.textContent, 'inner text')
this.div1.textContent = '';
this.div1.textContent = ''
change = new history.ChangeElementCommand(this.div1,
{ '#text': 'old text' });
{ '#text': 'old text' })
change.unapply();
assert.equal(this.div1.textContent, 'old text');
change.unapply()
assert.equal(this.div1.textContent, 'old text')
change.apply();
assert.ok(!this.div1.textContent);
change.apply()
assert.ok(!this.div1.textContent)
// TODO(codedread): Refactor this #href stuff in history.js and svgcanvas.js
const rect = document.createElementNS(NS.SVG, 'rect');
let justCalled = null;
let gethrefvalue = null;
let sethrefvalue = null;
const rect = document.createElementNS(NS.SVG, 'rect')
let justCalled = null
let gethrefvalue = null
let sethrefvalue = null
utilities.mock({
getHref (elem) {
assert.equal(elem, rect);
justCalled = 'getHref';
return gethrefvalue;
assert.equal(elem, rect)
justCalled = 'getHref'
return gethrefvalue
},
setHref (elem, val) {
assert.equal(elem, rect);
assert.equal(val, sethrefvalue);
justCalled = 'setHref';
assert.equal(elem, rect)
assert.equal(val, sethrefvalue)
justCalled = 'setHref'
},
getRotationAngle () { return 0; }
});
getRotationAngle () { return 0 }
})
gethrefvalue = '#newhref';
gethrefvalue = '#newhref'
change = new history.ChangeElementCommand(rect,
{ '#href': '#oldhref' });
assert.equal(justCalled, 'getHref');
{ '#href': '#oldhref' })
assert.equal(justCalled, 'getHref')
justCalled = null;
sethrefvalue = '#oldhref';
change.unapply();
assert.equal(justCalled, 'setHref');
justCalled = null
sethrefvalue = '#oldhref'
change.unapply()
assert.equal(justCalled, 'setHref')
justCalled = null;
sethrefvalue = '#newhref';
change.apply();
assert.equal(justCalled, 'setHref');
justCalled = null
sethrefvalue = '#newhref'
change.apply()
assert.equal(justCalled, 'setHref')
const line = document.createElementNS(NS.SVG, 'line');
line.setAttribute('class', 'newClass');
change = new history.ChangeElementCommand(line, { class: 'oldClass' });
const line = document.createElementNS(NS.SVG, 'line')
line.setAttribute('class', 'newClass')
change = new history.ChangeElementCommand(line, { class: 'oldClass' })
assert.ok(change.unapply);
assert.ok(change.apply);
assert.equal(typeof change.unapply, typeof function () { /* empty fn */ });
assert.equal(typeof change.apply, typeof function () { /* empty fn */ });
assert.ok(change.unapply)
assert.ok(change.apply)
assert.equal(typeof change.unapply, typeof function () { /* empty fn */ })
assert.equal(typeof change.apply, typeof function () { /* empty fn */ })
change.unapply();
assert.equal(line.getAttribute('class'), 'oldClass');
change.unapply()
assert.equal(line.getAttribute('class'), 'oldClass')
change.apply();
assert.equal(line.getAttribute('class'), 'newClass');
});
change.apply()
assert.equal(line.getAttribute('class'), 'newClass')
})
it('Test BatchCommand', function () {
let concatResult = '';
MockCommand.prototype.apply = function () { concatResult += this.text; };
let concatResult = ''
MockCommand.prototype.apply = function () { concatResult += this.text }
const batch = new history.BatchCommand();
assert.ok(batch.unapply);
assert.ok(batch.apply);
assert.ok(batch.addSubCommand);
assert.ok(batch.isEmpty);
assert.equal(typeof batch.unapply, 'function');
assert.equal(typeof batch.apply, 'function');
assert.equal(typeof batch.addSubCommand, 'function');
assert.equal(typeof batch.isEmpty, 'function');
const batch = new history.BatchCommand()
assert.ok(batch.unapply)
assert.ok(batch.apply)
assert.ok(batch.addSubCommand)
assert.ok(batch.isEmpty)
assert.equal(typeof batch.unapply, 'function')
assert.equal(typeof batch.apply, 'function')
assert.equal(typeof batch.addSubCommand, 'function')
assert.equal(typeof batch.isEmpty, 'function')
assert.ok(batch.isEmpty());
assert.ok(batch.isEmpty())
batch.addSubCommand(new MockCommand('a'));
assert.ok(!batch.isEmpty());
batch.addSubCommand(new MockCommand('b'));
batch.addSubCommand(new MockCommand('c'));
batch.addSubCommand(new MockCommand('a'))
assert.ok(!batch.isEmpty())
batch.addSubCommand(new MockCommand('b'))
batch.addSubCommand(new MockCommand('c'))
assert.ok(!concatResult);
batch.apply();
assert.equal(concatResult, 'abc');
assert.ok(!concatResult)
batch.apply()
assert.equal(concatResult, 'abc')
MockCommand.prototype.apply = function () { /* empty fn */ };
MockCommand.prototype.unapply = function () { concatResult += this.text; };
concatResult = '';
assert.ok(!concatResult);
batch.unapply();
assert.equal(concatResult, 'cba');
MockCommand.prototype.apply = function () { /* empty fn */ }
MockCommand.prototype.unapply = function () { concatResult += this.text }
concatResult = ''
assert.ok(!concatResult)
batch.unapply()
assert.equal(concatResult, 'cba')
MockCommand.prototype.unapply = function () { /* empty fn */ };
});
});
MockCommand.prototype.unapply = function () { /* empty fn */ }
})
})

156
cypress/integration/unit/math.js
View File

@@ -1,106 +1,106 @@
import { NS } from '../../../instrumented/svgcanvas/namespaces.js';
import * as math from '../../../instrumented/svgcanvas/math.js';
import { NS } from '../../../instrumented/svgcanvas/namespaces.js'
import * as math from '../../../instrumented/svgcanvas/math.js'
describe('math', function () {
const svg = document.createElementNS(NS.SVG, 'svg');
const svg = document.createElementNS(NS.SVG, 'svg')
it('Test svgedit.math package', function () {
assert.ok(math);
assert.ok(math.transformPoint);
assert.ok(math.isIdentity);
assert.ok(math.matrixMultiply);
assert.equal(typeof math.transformPoint, typeof function () { /* empty fn */ });
assert.equal(typeof math.isIdentity, typeof function () { /* empty fn */ });
assert.equal(typeof math.matrixMultiply, typeof function () { /* empty fn */ });
});
assert.ok(math)
assert.ok(math.transformPoint)
assert.ok(math.isIdentity)
assert.ok(math.matrixMultiply)
assert.equal(typeof math.transformPoint, typeof function () { /* empty fn */ })
assert.equal(typeof math.isIdentity, typeof function () { /* empty fn */ })
assert.equal(typeof math.matrixMultiply, typeof function () { /* empty fn */ })
})
it('Test svgedit.math.transformPoint() function', function () {
const { transformPoint } = math;
const { transformPoint } = math
const m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 0; m.f = 0;
let pt = transformPoint(100, 200, m);
assert.equal(pt.x, 100);
assert.equal(pt.y, 200);
const m = svg.createSVGMatrix()
m.a = 1; m.b = 0
m.c = 0; m.d = 1
m.e = 0; m.f = 0
let pt = transformPoint(100, 200, m)
assert.equal(pt.x, 100)
assert.equal(pt.y, 200)
m.e = 300; m.f = 400;
pt = transformPoint(100, 200, m);
assert.equal(pt.x, 400);
assert.equal(pt.y, 600);
m.e = 300; m.f = 400
pt = transformPoint(100, 200, m)
assert.equal(pt.x, 400)
assert.equal(pt.y, 600)
m.a = 0.5; m.b = 0.75;
m.c = 1.25; m.d = 2;
pt = transformPoint(100, 200, m);
assert.equal(pt.x, 100 * m.a + 200 * m.c + m.e);
assert.equal(pt.y, 100 * m.b + 200 * m.d + m.f);
});
m.a = 0.5; m.b = 0.75
m.c = 1.25; m.d = 2
pt = transformPoint(100, 200, m)
assert.equal(pt.x, 100 * m.a + 200 * m.c + m.e)
assert.equal(pt.y, 100 * m.b + 200 * m.d + m.f)
})
it('Test svgedit.math.isIdentity() function', function () {
assert.ok(math.isIdentity(svg.createSVGMatrix()));
assert.ok(math.isIdentity(svg.createSVGMatrix()))
const m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 0; m.f = 0;
assert.ok(math.isIdentity(m));
});
const m = svg.createSVGMatrix()
m.a = 1; m.b = 0
m.c = 0; m.d = 1
m.e = 0; m.f = 0
assert.ok(math.isIdentity(m))
})
it('Test svgedit.math.matrixMultiply() function', function () {
const mult = math.matrixMultiply;
const { isIdentity } = math;
const mult = math.matrixMultiply
const { isIdentity } = math
// translate there and back
const tr1 = svg.createSVGMatrix().translate(100, 50);
const tr2 = svg.createSVGMatrix().translate(-90, 0);
const tr3 = svg.createSVGMatrix().translate(-10, -50);
let I = mult(tr1, tr2, tr3);
assert.ok(isIdentity(I), 'Expected identity matrix when translating there and back');
const tr1 = svg.createSVGMatrix().translate(100, 50)
const tr2 = svg.createSVGMatrix().translate(-90, 0)
const tr3 = svg.createSVGMatrix().translate(-10, -50)
let I = mult(tr1, tr2, tr3)
assert.ok(isIdentity(I), 'Expected identity matrix when translating there and back')
// rotate there and back
// TODO: currently Mozilla fails this when rotating back at -50 and then -40 degrees
// (b and c are *almost* zero, but not zero)
const rotThere = svg.createSVGMatrix().rotate(90);
const rotBack = svg.createSVGMatrix().rotate(-90); // TODO: set this to -50
const rotBackMore = svg.createSVGMatrix().rotate(0); // TODO: set this to -40
I = mult(rotThere, rotBack, rotBackMore);
assert.ok(isIdentity(I), 'Expected identity matrix when rotating there and back');
const rotThere = svg.createSVGMatrix().rotate(90)
const rotBack = svg.createSVGMatrix().rotate(-90) // TODO: set this to -50
const rotBackMore = svg.createSVGMatrix().rotate(0) // TODO: set this to -40
I = mult(rotThere, rotBack, rotBackMore)
assert.ok(isIdentity(I), 'Expected identity matrix when rotating there and back')
// scale up and down
const scaleUp = svg.createSVGMatrix().scale(4);
const scaleDown = svg.createSVGMatrix().scaleNonUniform(0.25, 1);
const scaleDownMore = svg.createSVGMatrix().scaleNonUniform(1, 0.25);
I = mult(scaleUp, scaleDown, scaleDownMore);
assert.ok(isIdentity(I), 'Expected identity matrix when scaling up and down');
const scaleUp = svg.createSVGMatrix().scale(4)
const scaleDown = svg.createSVGMatrix().scaleNonUniform(0.25, 1)
const scaleDownMore = svg.createSVGMatrix().scaleNonUniform(1, 0.25)
I = mult(scaleUp, scaleDown, scaleDownMore)
assert.ok(isIdentity(I), 'Expected identity matrix when scaling up and down')
// test multiplication with its inverse
I = mult(rotThere, rotThere.inverse());
assert.ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
I = mult(rotThere.inverse(), rotThere);
assert.ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
});
I = mult(rotThere, rotThere.inverse())
assert.ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse')
I = mult(rotThere.inverse(), rotThere)
assert.ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse')
})
it('Test svgedit.math.transformBox() function', function () {
const { transformBox } = math;
const { transformBox } = math
const m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 0; m.f = 0;
const m = svg.createSVGMatrix()
m.a = 1; m.b = 0
m.c = 0; m.d = 1
m.e = 0; m.f = 0
const r = transformBox(10, 10, 200, 300, m);
assert.equal(r.tl.x, 10);
assert.equal(r.tl.y, 10);
assert.equal(r.tr.x, 210);
assert.equal(r.tr.y, 10);
assert.equal(r.bl.x, 10);
assert.equal(r.bl.y, 310);
assert.equal(r.br.x, 210);
assert.equal(r.br.y, 310);
assert.equal(r.aabox.x, 10);
assert.equal(r.aabox.y, 10);
assert.equal(r.aabox.width, 200);
assert.equal(r.aabox.height, 300);
});
});
const r = transformBox(10, 10, 200, 300, m)
assert.equal(r.tl.x, 10)
assert.equal(r.tl.y, 10)
assert.equal(r.tr.x, 210)
assert.equal(r.tr.y, 10)
assert.equal(r.bl.x, 10)
assert.equal(r.bl.y, 310)
assert.equal(r.br.x, 210)
assert.equal(r.br.y, 310)
assert.equal(r.aabox.x, 10)
assert.equal(r.aabox.y, 10)
assert.equal(r.aabox.width, 200)
assert.equal(r.aabox.height, 300)
})
})

242
cypress/integration/unit/path.js
View File

@@ -1,10 +1,10 @@
/* globals SVGPathSeg */
import 'pathseg';
import { NS } from '../../../instrumented/svgcanvas/namespaces.js';
import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import * as pathModule from '../../../instrumented/svgcanvas/path.js';
import { Path, Segment } from '../../../instrumented/svgcanvas/path-method.js';
import { init as unitsInit } from '../../../instrumented/common/units.js';
import 'pathseg'
import { NS } from '../../../instrumented/svgcanvas/namespaces.js'
import * as utilities from '../../../instrumented/svgcanvas/utilities.js'
import * as pathModule from '../../../instrumented/svgcanvas/path.js'
import { Path, Segment } from '../../../instrumented/svgcanvas/path-method.js'
import { init as unitsInit } from '../../../instrumented/common/units.js'
describe('path', function () {
/**
@@ -18,165 +18,165 @@ describe('path', function () {
* @returns {EditorContexts}
*/
function getMockContexts (svg) {
svg = svg || document.createElementNS(NS.SVG, 'svg');
const selectorParentGroup = document.createElementNS(NS.SVG, 'g');
selectorParentGroup.setAttribute('id', 'selectorParentGroup');
svg.append(selectorParentGroup);
svg = svg || document.createElementNS(NS.SVG, 'svg')
const selectorParentGroup = document.createElementNS(NS.SVG, 'g')
selectorParentGroup.setAttribute('id', 'selectorParentGroup')
svg.append(selectorParentGroup)
return [
/**
* @implements {module:path.EditorContext}
*/
{
getSvgRoot () { return svg; },
getZoom () { return 1; }
getSvgRoot () { return svg },
getZoom () { return 1 }
},
/**
* @implements {module:utilities.EditorContext}
*/
{
getDOMDocument () { return svg; },
getDOMContainer () { return svg; },
getSvgRoot () { return svg; }
getDOMDocument () { return svg },
getDOMContainer () { return svg },
getSvgRoot () { return svg }
}
];
]
}
it('Test svgedit.path.replacePathSeg', function () {
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
const path = document.createElementNS(NS.SVG, 'path')
path.setAttribute('d', 'M0,0 L10,11 L20,21Z')
const [ mockPathContext, mockUtilitiesContext ] = getMockContexts();
pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext);
new Path(path);
const [mockPathContext, mockUtilitiesContext] = getMockContexts()
pathModule.init(mockPathContext)
utilities.init(mockUtilitiesContext)
Path(path)
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
assert.equal(path.pathSegList.getItem(1).x, 10);
assert.equal(path.pathSegList.getItem(1).y, 11);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L')
assert.equal(path.pathSegList.getItem(1).x, 10)
assert.equal(path.pathSegList.getItem(1).y, 11)
pathModule.replacePathSeg(SVGPathSeg.PATHSEG_LINETO_REL, 1, [ 30, 31 ], path);
pathModule.replacePathSeg(SVGPathSeg.PATHSEG_LINETO_REL, 1, [30, 31], path)
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l');
assert.equal(path.pathSegList.getItem(1).x, 30);
assert.equal(path.pathSegList.getItem(1).y, 31);
});
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l')
assert.equal(path.pathSegList.getItem(1).x, 30)
assert.equal(path.pathSegList.getItem(1).y, 31)
})
it('Test svgedit.path.Segment.setType simple', function () {
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
const path = document.createElementNS(NS.SVG, 'path')
path.setAttribute('d', 'M0,0 L10,11 L20,21Z')
const [ mockPathContext, mockUtilitiesContext ] = getMockContexts();
pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext);
new Path(path);
const [mockPathContext, mockUtilitiesContext] = getMockContexts()
pathModule.init(mockPathContext)
utilities.init(mockUtilitiesContext)
Path(path)
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
assert.equal(path.pathSegList.getItem(1).x, 10);
assert.equal(path.pathSegList.getItem(1).y, 11);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L')
assert.equal(path.pathSegList.getItem(1).x, 10)
assert.equal(path.pathSegList.getItem(1).y, 11)
const segment = new Segment(1, path.pathSegList.getItem(1));
segment.setType(SVGPathSeg.PATHSEG_LINETO_REL, [ 30, 31 ]);
assert.equal(segment.item.pathSegTypeAsLetter, 'l');
assert.equal(segment.item.x, 30);
assert.equal(segment.item.y, 31);
const segment = new Segment(1, path.pathSegList.getItem(1))
segment.setType(SVGPathSeg.PATHSEG_LINETO_REL, [30, 31])
assert.equal(segment.item.pathSegTypeAsLetter, 'l')
assert.equal(segment.item.x, 30)
assert.equal(segment.item.y, 31)
// Also verify that the actual path changed.
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l');
assert.equal(path.pathSegList.getItem(1).x, 30);
assert.equal(path.pathSegList.getItem(1).y, 31);
});
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l')
assert.equal(path.pathSegList.getItem(1).x, 30)
assert.equal(path.pathSegList.getItem(1).y, 31)
})
it('Test svgedit.path.Segment.setType with control points', function () {
// Setup the dom for a mock control group.
const svg = document.createElementNS(NS.SVG, 'svg');
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z');
svg.append(path);
const svg = document.createElementNS(NS.SVG, 'svg')
const path = document.createElementNS(NS.SVG, 'path')
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z')
svg.append(path)
const [ mockPathContext, mockUtilitiesContext ] = getMockContexts(svg);
pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext);
const segment = new Segment(1, path.pathSegList.getItem(1));
segment.path = new Path(path);
const [mockPathContext, mockUtilitiesContext] = getMockContexts(svg)
pathModule.init(mockPathContext)
utilities.init(mockUtilitiesContext)
const segment = new Segment(1, path.pathSegList.getItem(1))
segment.path = new Path(path)
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
assert.equal(path.pathSegList.getItem(1).x1, 11);
assert.equal(path.pathSegList.getItem(1).y1, 12);
assert.equal(path.pathSegList.getItem(1).x2, 13);
assert.equal(path.pathSegList.getItem(1).y2, 14);
assert.equal(path.pathSegList.getItem(1).x, 15);
assert.equal(path.pathSegList.getItem(1).y, 16);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C')
assert.equal(path.pathSegList.getItem(1).x1, 11)
assert.equal(path.pathSegList.getItem(1).y1, 12)
assert.equal(path.pathSegList.getItem(1).x2, 13)
assert.equal(path.pathSegList.getItem(1).y2, 14)
assert.equal(path.pathSegList.getItem(1).x, 15)
assert.equal(path.pathSegList.getItem(1).y, 16)
segment.setType(SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, [ 30, 31, 32, 33, 34, 35 ]);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'c');
assert.equal(path.pathSegList.getItem(1).x1, 32);
assert.equal(path.pathSegList.getItem(1).y1, 33);
assert.equal(path.pathSegList.getItem(1).x2, 34);
assert.equal(path.pathSegList.getItem(1).y2, 35);
assert.equal(path.pathSegList.getItem(1).x, 30);
assert.equal(path.pathSegList.getItem(1).y, 31);
});
segment.setType(SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, [30, 31, 32, 33, 34, 35])
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'c')
assert.equal(path.pathSegList.getItem(1).x1, 32)
assert.equal(path.pathSegList.getItem(1).y1, 33)
assert.equal(path.pathSegList.getItem(1).x2, 34)
assert.equal(path.pathSegList.getItem(1).y2, 35)
assert.equal(path.pathSegList.getItem(1).x, 30)
assert.equal(path.pathSegList.getItem(1).y, 31)
})
it('Test svgedit.path.Segment.move', function () {
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
const path = document.createElementNS(NS.SVG, 'path')
path.setAttribute('d', 'M0,0 L10,11 L20,21Z')
const [ mockPathContext, mockUtilitiesContext ] = getMockContexts();
pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext);
new Path(path);
const [mockPathContext, mockUtilitiesContext] = getMockContexts()
pathModule.init(mockPathContext)
utilities.init(mockUtilitiesContext)
Path(path)
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
assert.equal(path.pathSegList.getItem(1).x, 10);
assert.equal(path.pathSegList.getItem(1).y, 11);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L')
assert.equal(path.pathSegList.getItem(1).x, 10)
assert.equal(path.pathSegList.getItem(1).y, 11)
const segment = new Segment(1, path.pathSegList.getItem(1));
segment.move(-3, 4);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
assert.equal(path.pathSegList.getItem(1).x, 7);
assert.equal(path.pathSegList.getItem(1).y, 15);
});
const segment = new Segment(1, path.pathSegList.getItem(1))
segment.move(-3, 4)
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L')
assert.equal(path.pathSegList.getItem(1).x, 7)
assert.equal(path.pathSegList.getItem(1).y, 15)
})
it('Test svgedit.path.Segment.moveCtrl', function () {
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z');
const path = document.createElementNS(NS.SVG, 'path')
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z')
const [ mockPathContext, mockUtilitiesContext ] = getMockContexts();
pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext);
new Path(path);
const [mockPathContext, mockUtilitiesContext] = getMockContexts()
pathModule.init(mockPathContext)
utilities.init(mockUtilitiesContext)
Path(path)
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
assert.equal(path.pathSegList.getItem(1).x1, 11);
assert.equal(path.pathSegList.getItem(1).y1, 12);
assert.equal(path.pathSegList.getItem(1).x2, 13);
assert.equal(path.pathSegList.getItem(1).y2, 14);
assert.equal(path.pathSegList.getItem(1).x, 15);
assert.equal(path.pathSegList.getItem(1).y, 16);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C')
assert.equal(path.pathSegList.getItem(1).x1, 11)
assert.equal(path.pathSegList.getItem(1).y1, 12)
assert.equal(path.pathSegList.getItem(1).x2, 13)
assert.equal(path.pathSegList.getItem(1).y2, 14)
assert.equal(path.pathSegList.getItem(1).x, 15)
assert.equal(path.pathSegList.getItem(1).y, 16)
const segment = new Segment(1, path.pathSegList.getItem(1));
segment.moveCtrl(1, 100, -200);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
assert.equal(path.pathSegList.getItem(1).x1, 111);
assert.equal(path.pathSegList.getItem(1).y1, -188);
assert.equal(path.pathSegList.getItem(1).x2, 13);
assert.equal(path.pathSegList.getItem(1).y2, 14);
assert.equal(path.pathSegList.getItem(1).x, 15);
assert.equal(path.pathSegList.getItem(1).y, 16);
});
const segment = new Segment(1, path.pathSegList.getItem(1))
segment.moveCtrl(1, 100, -200)
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C')
assert.equal(path.pathSegList.getItem(1).x1, 111)
assert.equal(path.pathSegList.getItem(1).y1, -188)
assert.equal(path.pathSegList.getItem(1).x2, 13)
assert.equal(path.pathSegList.getItem(1).y2, 14)
assert.equal(path.pathSegList.getItem(1).x, 15)
assert.equal(path.pathSegList.getItem(1).y, 16)
})
it('Test svgedit.path.convertPath', function () {
unitsInit({
getRoundDigits () { return 5; }
});
getRoundDigits () { return 5 }
})
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M40,55h20v20');
const path = document.createElementNS(NS.SVG, 'path')
path.setAttribute('d', 'M40,55h20v20')
const abs = pathModule.convertPath(path);
assert.equal(abs, 'M40,55L60,55L60,75');
const abs = pathModule.convertPath(path)
assert.equal(abs, 'M40,55L60,55L60,75')
const rel = pathModule.convertPath(path, true);
assert.equal(rel, 'm40,55l20,0l0,20');
});
});
const rel = pathModule.convertPath(path, true)
assert.equal(rel, 'm40,55l20,0l0,20')
})
})

173
cypress/integration/unit/recalculate.js
View File

@@ -1,122 +1,121 @@
import { NS } from '../../../instrumented/svgcanvas/namespaces.js';
import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import * as coords from '../../../instrumented/svgcanvas/coords.js';
import * as recalculate from '../../../instrumented/svgcanvas/recalculate.js';
import { NS } from '../../../instrumented/svgcanvas/namespaces.js'
import * as utilities from '../../../instrumented/svgcanvas/utilities.js'
import * as coords from '../../../instrumented/svgcanvas/coords.js'
import * as recalculate from '../../../instrumented/svgcanvas/recalculate.js'
describe('recalculate', function () {
const root = document.createElement('div');
root.id = 'root';
root.style.visibility = 'hidden';
const root = document.createElement('div')
root.id = 'root'
root.style.visibility = 'hidden'
const svgroot = document.createElementNS(NS.SVG, 'svg');
svgroot.id = 'svgroot';
root.append(svgroot);
const svg = document.createElementNS(NS.SVG, 'svg');
svgroot.append(svg);
const svgroot = document.createElementNS(NS.SVG, 'svg')
svgroot.id = 'svgroot'
root.append(svgroot)
const svg = document.createElementNS(NS.SVG, 'svg')
svgroot.append(svg)
const dataStorage = {
_storage: new WeakMap(),
put: function (element, key, obj) {
if (!this._storage.has(element)) {
this._storage.set(element, new Map());
this._storage.set(element, new Map())
}
this._storage.get(element).set(key, obj);
this._storage.get(element).set(key, obj)
},
get: function (element, key) {
return this._storage.get(element).get(key);
return this._storage.get(element).get(key)
},
has: function (element, key) {
return this._storage.has(element) && this._storage.get(element).has(key);
return this._storage.has(element) && this._storage.get(element).has(key)
},
remove: function (element, key) {
const ret = this._storage.get(element).delete(key);
const ret = this._storage.get(element).delete(key)
if (!this._storage.get(element).size === 0) {
this._storage.delete(element);
this._storage.delete(element)
}
return ret;
return ret
}
};
}
let elemId = 1;
let elemId = 1
/**
* Initilize modules to set up the tests.
* @returns {void}
*/
function setUp() {
function setUp () {
utilities.init(
/**
* @implements {module:utilities.EditorContext}
*/
{
getSvgRoot() { return svg; },
getDOMDocument() { return null; },
getDOMContainer() { return null; },
getDataStorage() { return dataStorage; }
getSvgRoot () { return svg },
getDOMDocument () { return null },
getDOMContainer () { return null },
getDataStorage () { return dataStorage }
}
);
)
coords.init(
/**
* @implements {module:coords.EditorContext}
*/
{
getGridSnapping() { return false; },
getDrawing() {
getGridSnapping () { return false },
getDrawing () {
return {
getNextId() { return String(elemId++); }
};
getNextId () { return String(elemId++) }
}
},
getDataStorage() { return dataStorage; }
getDataStorage () { return dataStorage }
}
);
)
recalculate.init(
/**
* @implements {module:recalculate.EditorContext}
*/
{
getSvgRoot() { return svg; },
getStartTransform() { return ''; },
setStartTransform() { /* empty fn */ },
getDataStorage() { return dataStorage; }
getSvgRoot () { return svg },
getStartTransform () { return '' },
setStartTransform () { /* empty fn */ },
getDataStorage () { return dataStorage }
}
);
)
}
let elem;
let elem
/**
* Initialize for tests and set up `rect` element.
* @returns {void}
*/
function setUpRect() {
setUp();
elem = document.createElementNS(NS.SVG, 'rect');
elem.setAttribute('x', '200');
elem.setAttribute('y', '150');
elem.setAttribute('width', '250');
elem.setAttribute('height', '120');
svg.append(elem);
function setUpRect () {
setUp()
elem = document.createElementNS(NS.SVG, 'rect')
elem.setAttribute('x', '200')
elem.setAttribute('y', '150')
elem.setAttribute('width', '250')
elem.setAttribute('height', '120')
svg.append(elem)
}
/**
* Initialize for tests and set up `text` element with `tspan` child.
* @returns {void}
*/
function setUpTextWithTspan() {
setUp();
elem = document.createElementNS(NS.SVG, 'text');
elem.setAttribute('x', '200');
elem.setAttribute('y', '150');
function setUpTextWithTspan () {
setUp()
elem = document.createElementNS(NS.SVG, 'text')
elem.setAttribute('x', '200')
elem.setAttribute('y', '150')
const tspan = document.createElementNS(NS.SVG, 'tspan');
tspan.setAttribute('x', '200');
tspan.setAttribute('y', '150');
const tspan = document.createElementNS(NS.SVG, 'tspan')
tspan.setAttribute('x', '200')
tspan.setAttribute('y', '150')
const theText = 'Foo bar';
tspan.append(theText);
elem.append(tspan);
svg.append(elem);
const theText = 'Foo bar'
tspan.append(theText)
elem.append(tspan)
svg.append(elem)
}
/**
@@ -125,53 +124,53 @@ describe('recalculate', function () {
*/
afterEach(() => {
while (svg.hasChildNodes()) {
svg.firstChild.remove();
svg.firstChild.remove()
}
});
})
it('Test recalculateDimensions() on rect with identity matrix', function () {
setUpRect();
elem.setAttribute('transform', 'matrix(1,0,0,1,0,0)');
setUpRect()
elem.setAttribute('transform', 'matrix(1,0,0,1,0,0)')
recalculate.recalculateDimensions(elem);
recalculate.recalculateDimensions(elem)
// Ensure that the identity matrix is swallowed and the element has no
// transform on it.
assert.equal(elem.hasAttribute('transform'), false);
});
assert.equal(elem.hasAttribute('transform'), false)
})
it('Test recalculateDimensions() on rect with simple translate', function () {
setUpRect();
elem.setAttribute('transform', 'translate(100,50)');
setUpRect()
elem.setAttribute('transform', 'translate(100,50)')
recalculate.recalculateDimensions(elem);
recalculate.recalculateDimensions(elem)
assert.equal(elem.hasAttribute('transform'), false);
assert.equal(elem.getAttribute('x'), '300');
assert.equal(elem.getAttribute('y'), '200');
assert.equal(elem.getAttribute('width'), '250');
assert.equal(elem.getAttribute('height'), '120');
});
assert.equal(elem.hasAttribute('transform'), false)
assert.equal(elem.getAttribute('x'), '300')
assert.equal(elem.getAttribute('y'), '200')
assert.equal(elem.getAttribute('width'), '250')
assert.equal(elem.getAttribute('height'), '120')
})
it('Test recalculateDimensions() on text w/tspan with simple translate', function () {
setUpTextWithTspan();
elem.setAttribute('transform', 'translate(100,50)');
setUpTextWithTspan()
elem.setAttribute('transform', 'translate(100,50)')
recalculate.recalculateDimensions(elem);
recalculate.recalculateDimensions(elem)
// Ensure that the identity matrix is swallowed and the element has no
// transform on it.
assert.equal(elem.hasAttribute('transform'), false);
assert.equal(elem.getAttribute('x'), '300');
assert.equal(elem.getAttribute('y'), '200');
assert.equal(elem.hasAttribute('transform'), false)
assert.equal(elem.getAttribute('x'), '300')
assert.equal(elem.getAttribute('y'), '200')
const tspan = elem.firstElementChild;
assert.equal(tspan.getAttribute('x'), '300');
assert.equal(tspan.getAttribute('y'), '200');
});
const tspan = elem.firstElementChild
assert.equal(tspan.getAttribute('x'), '300')
assert.equal(tspan.getAttribute('y'), '200')
})
// TODO: Since recalculateDimensions() and surrounding code is
// probably the largest, most complicated and strange piece of
// code in SVG-edit, we need to write a whole lot of unit tests
// for it here.
});
})

22
cypress/integration/unit/sanitize.js
View File

@@ -1,17 +1,17 @@
import { NS } from '../../../instrumented/svgcanvas/namespaces.js';
import * as sanitize from '../../../instrumented/svgcanvas/sanitize.js';
import { NS } from '../../../instrumented/svgcanvas/namespaces.js'
import * as sanitize from '../../../instrumented/svgcanvas/sanitize.js'
describe('sanitize', function () {
const svg = document.createElementNS(NS.SVG, 'svg');
const svg = document.createElementNS(NS.SVG, 'svg')
it('Test sanitizeSvg() strips ws from style attr', function () {
const rect = document.createElementNS(NS.SVG, 'rect');
rect.setAttribute('style', 'stroke: blue ;\t\tstroke-width :\t\t40;');
const rect = document.createElementNS(NS.SVG, 'rect')
rect.setAttribute('style', 'stroke: blue ;\t\tstroke-width :\t\t40;')
// sanitizeSvg() requires the node to have a parent and a document.
svg.append(rect);
sanitize.sanitizeSvg(rect);
svg.append(rect)
sanitize.sanitizeSvg(rect)
assert.equal(rect.getAttribute('stroke'), 'blue');
assert.equal(rect.getAttribute('stroke-width'), '40');
});
});
assert.equal(rect.getAttribute('stroke'), 'blue')
assert.equal(rect.getAttribute('stroke-width'), '40')
})
})

146
cypress/integration/unit/select.js
View File

@@ -1,37 +1,37 @@
import * as select from '../../../instrumented/svgcanvas/select.js';
import { NS } from '../../../instrumented/svgcanvas/namespaces.js';
import * as select from '../../../instrumented/svgcanvas/select.js'
import { NS } from '../../../instrumented/svgcanvas/namespaces.js'
describe('select', function () {
const sandbox = document.createElement('div');
sandbox.id = 'sandbox';
const sandbox = document.createElement('div')
sandbox.id = 'sandbox'
let svgroot;
let svgContent;
let svgroot
let svgContent
const mockConfig = {
dimensions: [ 640, 480 ]
};
dimensions: [640, 480]
}
const dataStorage = {
_storage: new WeakMap(),
put: function (element, key, obj) {
if (!this._storage.has(element)) {
this._storage.set(element, new Map());
this._storage.set(element, new Map())
}
this._storage.get(element).set(key, obj);
this._storage.get(element).set(key, obj)
},
get: function (element, key) {
return this._storage.get(element).get(key);
return this._storage.get(element).get(key)
},
has: function (element, key) {
return this._storage.has(element) && this._storage.get(element).has(key);
return this._storage.has(element) && this._storage.get(element).has(key)
},
remove: function (element, key) {
const ret = this._storage.get(element).delete(key);
const ret = this._storage.get(element).delete(key)
if (!this._storage.get(element).size === 0) {
this._storage.delete(element);
this._storage.delete(element)
}
return ret;
return ret
}
};
}
/**
* @implements {module:select.SVGFactory}
@@ -39,16 +39,16 @@ describe('select', function () {
const mockSvgCanvas = {
curConfig: mockConfig,
createSVGElement (jsonMap) {
const elem = document.createElementNS(NS.SVG, jsonMap.element);
Object.entries(jsonMap.attr).forEach(([ attr, value ]) => {
elem.setAttribute(attr, value);
});
return elem;
const elem = document.createElementNS(NS.SVG, jsonMap.element)
Object.entries(jsonMap.attr).forEach(([attr, value]) => {
elem.setAttribute(attr, value)
})
return elem
},
getSvgRoot () { return svgroot; },
getSvgContent () { return svgContent; },
getDataStorage () { return dataStorage; }
};
getSvgRoot () { return svgroot },
getSvgContent () { return svgContent },
getDataStorage () { return dataStorage }
}
/**
* Potentially reusable test set-up.
@@ -58,13 +58,13 @@ describe('select', function () {
svgroot = mockSvgCanvas.createSVGElement({
element: 'svg',
attr: { id: 'svgroot' }
});
})
svgContent = mockSvgCanvas.createSVGElement({
element: 'svg',
attr: { id: 'svgcontent' }
});
})
svgroot.append(svgContent);
svgroot.append(svgContent)
/* const rect = */ svgContent.append(
mockSvgCanvas.createSVGElement({
element: 'rect',
@@ -76,9 +76,9 @@ describe('select', function () {
height: '100'
}
})
);
sandbox.append(svgroot);
});
)
sandbox.append(svgroot)
})
/*
function setUpWithInit () {
@@ -92,61 +92,61 @@ describe('select', function () {
*/
afterEach(() => {
while (sandbox.hasChildNodes()) {
sandbox.firstChild.remove();
sandbox.firstChild.remove()
}
});
})
it('Test svgedit.select package', function () {
assert.ok(select);
assert.ok(select.Selector);
assert.ok(select.SelectorManager);
assert.ok(select.init);
assert.ok(select.getSelectorManager);
assert.equal(typeof select, typeof {});
assert.equal(typeof select.Selector, typeof function () { /* empty fn */ });
assert.equal(typeof select.SelectorManager, typeof function () { /* empty fn */ });
assert.equal(typeof select.init, typeof function () { /* empty fn */ });
assert.equal(typeof select.getSelectorManager, typeof function () { /* empty fn */ });
});
assert.ok(select)
assert.ok(select.Selector)
assert.ok(select.SelectorManager)
assert.ok(select.init)
assert.ok(select.getSelectorManager)
assert.equal(typeof select, typeof {})
assert.equal(typeof select.Selector, typeof function () { /* empty fn */ })
assert.equal(typeof select.SelectorManager, typeof function () { /* empty fn */ })
assert.equal(typeof select.init, typeof function () { /* empty fn */ })
assert.equal(typeof select.getSelectorManager, typeof function () { /* empty fn */ })
})
it('Test Selector DOM structure', function () {
assert.ok(svgroot);
assert.ok(svgroot.hasChildNodes());
assert.ok(svgroot)
assert.ok(svgroot.hasChildNodes())
// Verify non-existence of Selector DOM nodes
assert.equal(svgroot.childNodes.length, 1);
assert.equal(svgroot.childNodes.item(0), svgContent);
assert.ok(!svgroot.querySelector('#selectorParentGroup'));
assert.equal(svgroot.childNodes.length, 1)
assert.equal(svgroot.childNodes.item(0), svgContent)
assert.ok(!svgroot.querySelector('#selectorParentGroup'))
select.init(mockSvgCanvas);
select.init(mockSvgCanvas)
assert.equal(svgroot.childNodes.length, 3);
assert.equal(svgroot.childNodes.length, 3)
// Verify existence of canvas background.
const cb = svgroot.childNodes.item(0);
assert.ok(cb);
assert.equal(cb.id, 'canvasBackground');
const cb = svgroot.childNodes.item(0)
assert.ok(cb)
assert.equal(cb.id, 'canvasBackground')
assert.ok(svgroot.childNodes.item(1));
assert.equal(svgroot.childNodes.item(1), svgContent);
assert.ok(svgroot.childNodes.item(1))
assert.equal(svgroot.childNodes.item(1), svgContent)
// Verify existence of selectorParentGroup.
const spg = svgroot.childNodes.item(2);
assert.ok(spg);
assert.equal(svgroot.querySelector('#selectorParentGroup'), spg);
assert.equal(spg.id, 'selectorParentGroup');
assert.equal(spg.tagName, 'g');
const spg = svgroot.childNodes.item(2)
assert.ok(spg)
assert.equal(svgroot.querySelector('#selectorParentGroup'), spg)
assert.equal(spg.id, 'selectorParentGroup')
assert.equal(spg.tagName, 'g')
// Verify existence of all grip elements.
assert.ok(spg.querySelector('#selectorGrip_resize_nw'));
assert.ok(spg.querySelector('#selectorGrip_resize_n'));
assert.ok(spg.querySelector('#selectorGrip_resize_ne'));
assert.ok(spg.querySelector('#selectorGrip_resize_e'));
assert.ok(spg.querySelector('#selectorGrip_resize_se'));
assert.ok(spg.querySelector('#selectorGrip_resize_s'));
assert.ok(spg.querySelector('#selectorGrip_resize_sw'));
assert.ok(spg.querySelector('#selectorGrip_resize_w'));
assert.ok(spg.querySelector('#selectorGrip_rotateconnector'));
assert.ok(spg.querySelector('#selectorGrip_rotate'));
});
});
assert.ok(spg.querySelector('#selectorGrip_resize_nw'))
assert.ok(spg.querySelector('#selectorGrip_resize_n'))
assert.ok(spg.querySelector('#selectorGrip_resize_ne'))
assert.ok(spg.querySelector('#selectorGrip_resize_e'))
assert.ok(spg.querySelector('#selectorGrip_resize_se'))
assert.ok(spg.querySelector('#selectorGrip_resize_s'))
assert.ok(spg.querySelector('#selectorGrip_resize_sw'))
assert.ok(spg.querySelector('#selectorGrip_resize_w'))
assert.ok(spg.querySelector('#selectorGrip_rotateconnector'))
assert.ok(spg.querySelector('#selectorGrip_rotate'))
})
})

212
cypress/integration/unit/test1.js
View File

@@ -1,5 +1,5 @@
/* eslint-disable max-len, no-console */
import SvgCanvas from '../../../instrumented/svgcanvas/svgcanvas.js';
import SvgCanvas from '../../../instrumented/svgcanvas/svgcanvas.js'
describe('Basic Module', function () {
// helper functions
@@ -12,34 +12,34 @@ describe('Basic Module', function () {
};
*/
let svgCanvas;
let svgCanvas
const
// svgroot = document.getElementById('svgroot'),
// svgdoc = svgroot.documentElement,
svgns = 'http://www.w3.org/2000/svg';
const xlinkns = 'http://www.w3.org/1999/xlink';
svgns = 'http://www.w3.org/2000/svg'
const xlinkns = 'http://www.w3.org/1999/xlink'
beforeEach(() => {
document.body.textContent = '';
const svgEditor = document.createElement('div');
svgEditor.id = 'svg_editor';
const svgcanvas = document.createElement('div');
svgcanvas.style.visibility = 'hidden';
svgcanvas.id = 'svgcanvas';
const workarea = document.createElement('div');
workarea.id = 'workarea';
workarea.append(svgcanvas);
const toolsLeft = document.createElement('div');
toolsLeft.id = 'tools_left';
document.body.textContent = ''
const svgEditor = document.createElement('div')
svgEditor.id = 'svg_editor'
const svgcanvas = document.createElement('div')
svgcanvas.style.visibility = 'hidden'
svgcanvas.id = 'svgcanvas'
const workarea = document.createElement('div')
workarea.id = 'workarea'
workarea.append(svgcanvas)
const toolsLeft = document.createElement('div')
toolsLeft.id = 'tools_left'
svgEditor.append(workarea, toolsLeft);
document.body.append(svgEditor);
svgEditor.append(workarea, toolsLeft)
document.body.append(svgEditor)
svgCanvas = new SvgCanvas(
document.getElementById('svgcanvas'), {
canvas_expansion: 3,
dimensions: [ 640, 480 ],
dimensions: [640, 480],
initFill: {
color: 'FF0000', // solid red
opacity: 1
@@ -53,20 +53,20 @@ describe('Basic Module', function () {
imgPath: '../editor/images',
langPath: 'locale/',
extPath: 'extensions/',
extensions: [ 'ext-arrows.js', 'ext-eyedropper.js' ],
extensions: ['ext-arrows.js', 'ext-eyedropper.js'],
initTool: 'select',
wireframe: false
}
);
});
)
})
it('Test existence of SvgCanvas object', function () {
assert.equal(typeof {}, typeof svgCanvas);
});
assert.equal(typeof {}, typeof svgCanvas)
})
describe('Path Module', function () {
it('Test path conversion from absolute to relative', function () {
const convert = svgCanvas.pathActions.convertPath;
const convert = svgCanvas.pathActions.convertPath
// TODO: Test these paths:
// "m400.00491,625.01379a1.78688,1.78688 0 1 1-3.57373,0a1.78688,1.78688 0 1 13.57373,0z"
@@ -78,36 +78,36 @@ describe('Basic Module', function () {
"<path id='p1' d='M100,100 L200,100 L100,100Z'/>" +
"<path id='p2' d='m 0,0 l 200,0 l 0,100 L 0,100'/>" +
'</svg>'
);
)
const p1 = document.getElementById('p1');
const p2 = document.getElementById('p2');
const dAbs = p1.getAttribute('d');
const seglist = p1.pathSegList;
const p1 = document.getElementById('p1')
const p2 = document.getElementById('p2')
const dAbs = p1.getAttribute('d')
const seglist = p1.pathSegList
assert.equal(p1.nodeName, 'path', "Expected 'path', got");
assert.equal(p1.nodeName, 'path', "Expected 'path', got")
assert.equal(seglist.numberOfItems, 4, 'Number of segments before conversion');
assert.equal(seglist.numberOfItems, 4, 'Number of segments before conversion')
// verify segments before conversion
let curseg = seglist.getItem(0);
assert.equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'M', 'Before conversion, segment #1 type');
curseg = seglist.getItem(1);
assert.equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'L', 'Before conversion, segment #2 type');
curseg = seglist.getItem(3);
assert.equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'Z', 'Before conversion, segment #3 type' + dAbs);
let curseg = seglist.getItem(0)
assert.equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'M', 'Before conversion, segment #1 type')
curseg = seglist.getItem(1)
assert.equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'L', 'Before conversion, segment #2 type')
curseg = seglist.getItem(3)
assert.equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'Z', 'Before conversion, segment #3 type' + dAbs)
// convert and verify segments
let d = convert(p1, true);
assert.equal(d, 'm100,100l100,0l-100,0z', 'Converted path to relative string');
let d = convert(p1, true)
assert.equal(d, 'm100,100l100,0l-100,0z', 'Converted path to relative string')
// TODO: see why this isn't working in SVG-edit
d = convert(p2, true);
console.log('Convert true', d);
d = convert(p2, false);
console.log('Convert false', d);
});
});
d = convert(p2, true)
console.log('Convert true', d)
d = convert(p2, false)
console.log('Convert false', d)
})
})
describe('Import Module', function () {
it('Test import use', function () {
@@ -118,16 +118,16 @@ describe('Basic Module', function () {
"<use id='foreign-use' xlink:href='somefile.svg#the-rect'/>" +
"<use id='no-use'/>" +
'</svg>'
);
)
const u = document.getElementById('the-use');
const fu = document.getElementById('foreign-use');
const nfu = document.getElementById('no-use');
const u = document.getElementById('the-use')
const fu = document.getElementById('foreign-use')
const nfu = document.getElementById('no-use')
assert.equal((u && u.nodeName), 'use', 'Did not import <use> element');
assert.equal(fu, null, 'Removed <use> element that had a foreign href');
assert.equal(nfu, null, 'Removed <use> element that had no href');
});
assert.equal((u && u.nodeName), 'use', 'Did not import <use> element')
assert.equal(fu, null, 'Removed <use> element that had a foreign href')
assert.equal(nfu, null, 'Removed <use> element that had no href')
})
// This test shows that an element with an invalid attribute is still parsed in properly
// and only the attribute is not imported
@@ -136,13 +136,13 @@ describe('Basic Module', function () {
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">' +
'<text x="182.75" y="173.5" id="the-text" fill="#008000" font-size="150" font-family="serif" text-anchor="middle" d="M116,222 L110,108">words</text>' +
'</svg>'
);
)
const t = document.getElementById('the-text');
const t = document.getElementById('the-text')
assert.equal((t && t.nodeName), 'text', 'Did not import <text> element');
assert.equal(t.getAttribute('d'), null, 'Imported a <text> with a d attribute');
});
assert.equal((t && t.nodeName), 'text', 'Did not import <text> element')
assert.equal(t.getAttribute('d'), null, 'Imported a <text> with a d attribute')
})
// This test makes sure import/export properly handles namespaced attributes
it('Test importing/exporting namespaced attributes', function () {
@@ -151,22 +151,22 @@ describe('Basic Module', function () {
'<image xlink:href="../editor/images/logo.png"/>' +
'<polyline id="se_test_elem" se:foo="bar" foo:bar="baz"/>' +
'</svg>'
);
const attrVal = document.getElementById('se_test_elem').getAttributeNS('http://svg-edit.googlecode.com', 'foo');
)
const attrVal = document.getElementById('se_test_elem').getAttributeNS('http://svg-edit.googlecode.com', 'foo')
assert.strictEqual(attrVal, 'bar', true, 'Preserved namespaced attribute on import');
assert.strictEqual(attrVal, 'bar', true, 'Preserved namespaced attribute on import')
const output = svgCanvas.getSvgString();
const hasXlink = output.includes('xmlns:xlink="http://www.w3.org/1999/xlink"');
const hasSe = output.includes('xmlns:se=');
const hasFoo = output.includes('xmlns:foo=');
const hasAttr = output.includes('se:foo="bar"');
const output = svgCanvas.getSvgString()
const hasXlink = output.includes('xmlns:xlink="http://www.w3.org/1999/xlink"')
const hasSe = output.includes('xmlns:se=')
const hasFoo = output.includes('xmlns:foo=')
const hasAttr = output.includes('se:foo="bar"')
assert.equal(hasAttr, true, 'Preserved namespaced attribute on export');
assert.equal(hasXlink, true, 'Included xlink: xmlns');
assert.equal(hasSe, true, 'Included se: xmlns');
assert.equal(hasFoo, false, 'Did not include foo: xmlns');
});
assert.equal(hasAttr, true, 'Preserved namespaced attribute on export')
assert.equal(hasXlink, true, 'Included xlink: xmlns')
assert.equal(hasSe, true, 'Included se: xmlns')
assert.equal(hasFoo, false, 'Did not include foo: xmlns')
})
it('Test import math elements inside a foreignObject', function () {
/* const set = */ svgCanvas.setSvgString(
@@ -179,17 +179,17 @@ describe('Basic Module', function () {
'</math>' +
'</foreignObject>' +
'</svg>'
);
const fo = document.getElementById('fo');
)
const fo = document.getElementById('fo')
// we cannot use getElementById('math') because not all browsers understand MathML and do not know to use the @id attribute
// see Bug https://bugs.webkit.org/show_bug.cgi?id=35042
const math = fo.firstChild;
const math = fo.firstChild
assert.equal(Boolean(math), true, 'Math element exists');
assert.equal(math.nodeName, 'math', 'Math element has the proper nodeName');
assert.equal(math.getAttribute('id'), 'm', 'Math element has an id');
assert.equal(math.namespaceURI, 'http://www.w3.org/1998/Math/MathML', 'Preserved MathML namespace');
});
assert.equal(Boolean(math), true, 'Math element exists')
assert.equal(math.nodeName, 'math', 'Math element has the proper nodeName')
assert.equal(math.getAttribute('id'), 'm', 'Math element has an id')
assert.equal(math.namespaceURI, 'http://www.w3.org/1998/Math/MathML', 'Preserved MathML namespace')
})
it('Test importing SVG into existing drawing', function () {
/* const doc = */ svgCanvas.setSvgString(
@@ -199,23 +199,23 @@ describe('Basic Module', function () {
'<ellipse cx="300" cy="100" rx="40" ry="30" fill="green"/>' +
'</g>' +
'</svg>'
);
)
svgCanvas.importSvgString(
'<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">' +
'<circle cx="50" cy="50" r="40" fill="yellow"/>' +
'<rect width="20" height="20" fill="blue"/>' +
'</svg>'
);
)
const svgContent = document.getElementById('svgcontent');
const circles = svgContent.getElementsByTagNameNS(svgns, 'circle');
const rects = svgContent.getElementsByTagNameNS(svgns, 'rect');
const ellipses = svgContent.getElementsByTagNameNS(svgns, 'ellipse');
assert.equal(circles.length, 2, 'Found two circles upon importing');
assert.equal(rects.length, 1, 'Found one rectangle upon importing');
assert.equal(ellipses.length, 1, 'Found one ellipse upon importing');
});
const svgContent = document.getElementById('svgcontent')
const circles = svgContent.getElementsByTagNameNS(svgns, 'circle')
const rects = svgContent.getElementsByTagNameNS(svgns, 'rect')
const ellipses = svgContent.getElementsByTagNameNS(svgns, 'ellipse')
assert.equal(circles.length, 2, 'Found two circles upon importing')
assert.equal(rects.length, 1, 'Found one rectangle upon importing')
assert.equal(ellipses.length, 1, 'Found one ellipse upon importing')
})
it('Test importing SVG remaps IDs', function () {
/* const doc = */ svgCanvas.setSvgString(
@@ -226,7 +226,7 @@ describe('Basic Module', function () {
'<ellipse id="svg_3" cx="300" cy="100" rx="40" ry="30" fill="green"/>' +
'</g>' +
'</svg>'
);
)
svgCanvas.importSvgString(
'<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink">' +
@@ -240,24 +240,24 @@ describe('Basic Module', function () {
'<circle id="svg_1" cx="50" cy="50" r="40" fill="url(#svg_2)"/>' +
'<use id="svg_4" width="30" height="30" xl:href="#svg_3"/>' +
'</svg>'
);
)
const svgContent = document.getElementById('svgcontent');
const circles = svgContent.getElementsByTagNameNS(svgns, 'circle');
const rects = svgContent.getElementsByTagNameNS(svgns, 'rect');
const svgContent = document.getElementById('svgcontent')
const circles = svgContent.getElementsByTagNameNS(svgns, 'circle')
const rects = svgContent.getElementsByTagNameNS(svgns, 'rect')
// ellipses = svgContent.getElementsByTagNameNS(svgns, 'ellipse'),
const defs = svgContent.getElementsByTagNameNS(svgns, 'defs');
const defs = svgContent.getElementsByTagNameNS(svgns, 'defs')
// grads = svgContent.getElementsByTagNameNS(svgns, 'linearGradient'),
const uses = svgContent.getElementsByTagNameNS(svgns, 'use');
assert.notEqual(circles.item(0).id, 'svg_1', 'Circle not re-identified');
assert.notEqual(rects.item(0).id, 'svg_3', 'Rectangle not re-identified');
const uses = svgContent.getElementsByTagNameNS(svgns, 'use')
assert.notEqual(circles.item(0).id, 'svg_1', 'Circle not re-identified')
assert.notEqual(rects.item(0).id, 'svg_3', 'Rectangle not re-identified')
// TODO: determine why this test fails in WebKit browsers
// assert.equal(grads.length, 1, 'Linear gradient imported');
const grad = defs.item(0).firstChild;
assert.notEqual(grad.id, 'svg_2', 'Linear gradient not re-identified');
assert.notEqual(circles.item(0).getAttribute('fill'), 'url(#svg_2)', 'Circle fill value not remapped');
assert.notEqual(rects.item(0).getAttribute('stroke'), 'url(#svg_2)', 'Rectangle stroke value not remapped');
assert.notEqual(uses.item(0).getAttributeNS(xlinkns, 'href'), '#svg_3');
});
});
});
const grad = defs.item(0).firstChild
assert.notEqual(grad.id, 'svg_2', 'Linear gradient not re-identified')
assert.notEqual(circles.item(0).getAttribute('fill'), 'url(#svg_2)', 'Circle fill value not remapped')
assert.notEqual(rects.item(0).getAttribute('stroke'), 'url(#svg_2)', 'Rectangle stroke value not remapped')
assert.notEqual(uses.item(0).getAttributeNS(xlinkns, 'href'), '#svg_3')
})
})
})

120
cypress/integration/unit/units.js
View File

@@ -1,4 +1,4 @@
import * as units from '../../../instrumented/common/units.js';
import * as units from '../../../instrumented/common/units.js'
describe('units', function () {
/**
@@ -6,86 +6,86 @@ describe('units', function () {
* @returns {void}
*/
beforeEach(() => {
document.body.textContent = '';
const anchor = document.createElement('div');
anchor.id = 'anchor';
anchor.style.visibility = 'hidden';
document.body.textContent = ''
const anchor = document.createElement('div')
anchor.id = 'anchor'
anchor.style.visibility = 'hidden'
const elementsContainer = document.createElement('div');
elementsContainer.id = 'elementsContainer';
const elementsContainer = document.createElement('div')
elementsContainer.id = 'elementsContainer'
const uniqueId = document.createElement('div');
uniqueId.id = 'uniqueId';
uniqueId.style.visibility = 'hidden';
const uniqueId = document.createElement('div')
uniqueId.id = 'uniqueId'
uniqueId.style.visibility = 'hidden'
const nonUniqueId = document.createElement('div');
nonUniqueId.id = 'nonUniqueId';
nonUniqueId.style.visibility = 'hidden';
const nonUniqueId = document.createElement('div')
nonUniqueId.id = 'nonUniqueId'
nonUniqueId.style.visibility = 'hidden'
elementsContainer.append(uniqueId, nonUniqueId);
elementsContainer.append(uniqueId, nonUniqueId)
document.body.append(anchor, elementsContainer);
document.body.append(anchor, elementsContainer)
units.init(
/**
* @implements {module:units.ElementContainer}
*/
{
getBaseUnit () { return 'cm'; },
getHeight () { return 600; },
getWidth () { return 800; },
getRoundDigits () { return 4; },
getElement (elementId) { return document.getElementById(elementId); }
getBaseUnit () { return 'cm' },
getHeight () { return 600 },
getWidth () { return 800 },
getRoundDigits () { return 4 },
getElement (elementId) { return document.getElementById(elementId) }
}
);
});
)
})
it('Test svgedit.units package', function () {
assert.ok(units);
assert.equal(typeof units, typeof {});
});
assert.ok(units)
assert.equal(typeof units, typeof {})
})
it('Test svgedit.units.shortFloat()', function () {
assert.ok(units.shortFloat);
assert.equal(typeof units.shortFloat, typeof function () { /* empty fn */ });
assert.ok(units.shortFloat)
assert.equal(typeof units.shortFloat, typeof function () { /* empty fn */ })
const { shortFloat } = units;
assert.equal(shortFloat(0.00000001), 0);
assert.equal(shortFloat(1), 1);
assert.equal(shortFloat(3.45678), 3.4568);
assert.equal(shortFloat(1.23443), 1.2344);
assert.equal(shortFloat(1.23455), 1.2346);
});
const { shortFloat } = units
assert.equal(shortFloat(0.00000001), 0)
assert.equal(shortFloat(1), 1)
assert.equal(shortFloat(3.45678), 3.4568)
assert.equal(shortFloat(1.23443), 1.2344)
assert.equal(shortFloat(1.23455), 1.2346)
})
it('Test svgedit.units.isValidUnit()', function () {
assert.ok(units.isValidUnit);
assert.equal(typeof units.isValidUnit, typeof function () { /* empty fn */ });
assert.ok(units.isValidUnit)
assert.equal(typeof units.isValidUnit, typeof function () { /* empty fn */ })
const { isValidUnit } = units;
assert.ok(isValidUnit('0'));
assert.ok(isValidUnit('1'));
assert.ok(isValidUnit('1.1'));
assert.ok(isValidUnit('-1.1'));
assert.ok(isValidUnit('.6mm'));
assert.ok(isValidUnit('-.6cm'));
assert.ok(isValidUnit('6000in'));
assert.ok(isValidUnit('6px'));
assert.ok(isValidUnit('6.3pc'));
assert.ok(isValidUnit('-0.4em'));
assert.ok(isValidUnit('-0.ex'));
assert.ok(isValidUnit('40.123%'));
const { isValidUnit } = units
assert.ok(isValidUnit('0'))
assert.ok(isValidUnit('1'))
assert.ok(isValidUnit('1.1'))
assert.ok(isValidUnit('-1.1'))
assert.ok(isValidUnit('.6mm'))
assert.ok(isValidUnit('-.6cm'))
assert.ok(isValidUnit('6000in'))
assert.ok(isValidUnit('6px'))
assert.ok(isValidUnit('6.3pc'))
assert.ok(isValidUnit('-0.4em'))
assert.ok(isValidUnit('-0.ex'))
assert.ok(isValidUnit('40.123%'))
assert.equal(isValidUnit('id', 'uniqueId', document.getElementById('uniqueId')), true);
assert.equal(isValidUnit('id', 'newId', document.getElementById('uniqueId')), true);
assert.equal(isValidUnit('id', 'uniqueId'), false);
assert.equal(isValidUnit('id', 'uniqueId', document.getElementById('nonUniqueId')), false);
});
assert.equal(isValidUnit('id', 'uniqueId', document.getElementById('uniqueId')), true)
assert.equal(isValidUnit('id', 'newId', document.getElementById('uniqueId')), true)
assert.equal(isValidUnit('id', 'uniqueId'), false)
assert.equal(isValidUnit('id', 'uniqueId', document.getElementById('nonUniqueId')), false)
})
it('Test svgedit.units.convertUnit()', function () {
assert.ok(units.convertUnit);
assert.equal(typeof units.convertUnit, typeof function () { /* empty fn */ });
assert.ok(units.convertUnit)
assert.equal(typeof units.convertUnit, typeof function () { /* empty fn */ })
// cm in default setup
assert.equal(units.convertUnit(42), 1.1113);
assert.equal(units.convertUnit(42, 'px'), 42);
});
});
assert.equal(units.convertUnit(42), 1.1113)
assert.equal(units.convertUnit(42, 'px'), 42)
})
})

573
cypress/integration/unit/utilities-bbox.js
View File

@@ -1,12 +1,13 @@
import 'pathseg';
import 'pathseg'
import { NS } from '../../../instrumented/svgcanvas/namespaces.js';
import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import * as math from '../../../instrumented/svgcanvas/math.js';
import * as path from '../../../instrumented/svgcanvas/path.js';
import setAssertionMethods from '../../support/assert-close.js';
import { NS } from '../../../instrumented/svgcanvas/namespaces.js'
import * as utilities from '../../../instrumented/svgcanvas/utilities.js'
import * as math from '../../../instrumented/svgcanvas/math.js'
import * as path from '../../../instrumented/svgcanvas/path.js'
import setAssertionMethods from '../../support/assert-close.js'
chai.use(setAssertionMethods);
// eslint-disable-next-line
chai.use(setAssertionMethods)
describe('utilities bbox', function () {
/**
@@ -15,13 +16,13 @@ describe('utilities bbox', function () {
* @returns {SVGElement}
*/
function mockCreateSVGElement (jsonMap) {
const elem = document.createElementNS(NS.SVG, jsonMap.element);
Object.entries(jsonMap.attr).forEach(([ attr, value ]) => {
elem.setAttribute(attr, value);
});
return elem;
const elem = document.createElementNS(NS.SVG, jsonMap.element)
Object.entries(jsonMap.attr).forEach(([attr, value]) => {
elem.setAttribute(attr, value)
})
return elem
}
let mockaddSVGElemensFromJsonCallCount = 0;
let mockaddSVGElemensFromJsonCallCount = 0
/**
* Mock of {@link module:utilities.EditorContext#addSVGElemensFromJson}.
@@ -29,435 +30,435 @@ describe('utilities bbox', function () {
* @returns {SVGElement}
*/
function mockaddSVGElemensFromJson (json) {
const elem = mockCreateSVGElement(json);
svgroot.append(elem);
mockaddSVGElemensFromJsonCallCount++;
return elem;
const elem = mockCreateSVGElement(json)
svgroot.append(elem)
mockaddSVGElemensFromJsonCallCount++
return elem
}
const mockPathActions = {
resetOrientation (pth) {
if (utilities.isNullish(pth) || pth.nodeName !== 'path') { return false; }
const tlist = pth.transform.baseVal;
const m = math.transformListToTransform(tlist).matrix;
tlist.clear();
pth.removeAttribute('transform');
const segList = pth.pathSegList;
if (utilities.isNullish(pth) || pth.nodeName !== 'path') { return false }
const tlist = pth.transform.baseVal
const m = math.transformListToTransform(tlist).matrix
tlist.clear()
pth.removeAttribute('transform')
const segList = pth.pathSegList
const len = segList.numberOfItems;
const len = segList.numberOfItems
// let lastX, lastY;
for (let i = 0; i < len; ++i) {
const seg = segList.getItem(i);
const type = seg.pathSegType;
if (type === 1) { continue; }
const seg = segList.getItem(i)
const type = seg.pathSegType
if (type === 1) { continue }
const pts = [];
[ '', 1, 2 ].forEach(function (n) {
const x = seg['x' + n]; const y = seg['y' + n];
['', 1, 2].forEach(function (n) {
const x = seg['x' + n]; const y = seg['y' + n]
if (x !== undefined && y !== undefined) {
const pt = math.transformPoint(x, y, m);
pts.splice(pts.length, 0, pt.x, pt.y);
const pt = math.transformPoint(x, y, m)
pts.splice(pts.length, 0, pt.x, pt.y)
}
});
path.replacePathSeg(type, i, pts, pth);
})
path.replacePathSeg(type, i, pts, pth)
}
return undefined;
return undefined
}
};
}
const EPSILON = 0.001;
const EPSILON = 0.001
let svgroot;
let svgroot
beforeEach(() => {
document.body.textContent = '';
document.body.textContent = ''
// const svg = document.createElementNS(NS.SVG, 'svg');
const sandbox = document.createElement('div');
sandbox.id = 'sandbox';
document.body.append(sandbox);
const sandbox = document.createElement('div')
sandbox.id = 'sandbox'
document.body.append(sandbox)
svgroot = mockCreateSVGElement({
element: 'svg',
attr: { id: 'svgroot' }
});
sandbox.append(svgroot);
})
sandbox.append(svgroot)
const mockSvgCanvas = {
createSVGElement (jsonMap) {
const elem = document.createElementNS(NS.SVG, jsonMap.element);
Object.entries(jsonMap.attr).forEach(([ attr, value ]) => {
elem.setAttribute(attr, value);
});
return elem;
const elem = document.createElementNS(NS.SVG, jsonMap.element)
Object.entries(jsonMap.attr).forEach(([attr, value]) => {
elem.setAttribute(attr, value)
})
return elem
},
getSvgRoot () { return svgroot; }
};
getSvgRoot () { return svgroot }
}
path.init(mockSvgCanvas);
mockaddSVGElemensFromJsonCallCount = 0;
});
path.init(mockSvgCanvas)
mockaddSVGElemensFromJsonCallCount = 0
})
it('Test svgedit.utilities package', function () {
assert.ok(utilities);
assert.ok(utilities.getBBoxWithTransform);
assert.ok(utilities.getStrokedBBox);
assert.ok(utilities.getRotationAngleFromTransformList);
assert.ok(utilities.getRotationAngle);
});
assert.ok(utilities)
assert.ok(utilities.getBBoxWithTransform)
assert.ok(utilities.getStrokedBBox)
assert.ok(utilities.getRotationAngleFromTransformList)
assert.ok(utilities.getRotationAngle)
})
it('Test getBBoxWithTransform and no transform', function () {
const { getBBoxWithTransform } = utilities;
const { getBBoxWithTransform } = utilities
let elem = mockCreateSVGElement({
element: 'path',
attr: { id: 'path', d: 'M0,1 L2,3' }
});
svgroot.append(elem);
let bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 });
assert.equal(mockaddSVGElemensFromJsonCallCount, 0);
elem.remove();
})
svgroot.append(elem)
let bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 })
assert.equal(mockaddSVGElemensFromJsonCallCount, 0)
elem.remove()
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
});
svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
assert.equal(mockaddSVGElemensFromJsonCallCount, 0);
elem.remove();
})
svgroot.append(elem)
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 })
assert.equal(mockaddSVGElemensFromJsonCallCount, 0)
elem.remove()
elem = mockCreateSVGElement({
element: 'line',
attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' }
});
svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 });
assert.equal(mockaddSVGElemensFromJsonCallCount, 0);
elem.remove();
})
svgroot.append(elem)
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 })
assert.equal(mockaddSVGElemensFromJsonCallCount, 0)
elem.remove()
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
});
})
const g = mockCreateSVGElement({
element: 'g',
attr: {}
});
g.append(elem);
svgroot.append(g);
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
assert.equal(mockaddSVGElemensFromJsonCallCount, 0);
g.remove();
});
})
g.append(elem)
svgroot.append(g)
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 })
assert.equal(mockaddSVGElemensFromJsonCallCount, 0)
g.remove()
})
it('Test getBBoxWithTransform and a rotation transform', function () {
const { getBBoxWithTransform } = utilities;
const { getBBoxWithTransform } = utilities
let elem = mockCreateSVGElement({
element: 'path',
attr: { id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10)' }
});
svgroot.append(elem);
let bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.close(bbox.x, 10, EPSILON);
assert.close(bbox.y, 10, EPSILON);
assert.close(bbox.width, 0, EPSILON);
assert.close(bbox.height, Math.sqrt(100 + 100), EPSILON);
elem.remove();
})
svgroot.append(elem)
let bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions)
assert.close(bbox.x, 10, EPSILON)
assert.close(bbox.y, 10, EPSILON)
assert.close(bbox.width, 0, EPSILON)
assert.close(bbox.height, Math.sqrt(100 + 100), EPSILON)
elem.remove()
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20)' }
});
svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.close(bbox.x, 5, EPSILON);
assert.close(bbox.y, 15, EPSILON);
assert.close(bbox.width, 20, EPSILON);
assert.close(bbox.height, 10, EPSILON);
assert.equal(mockaddSVGElemensFromJsonCallCount, 1);
elem.remove();
})
svgroot.append(elem)
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions)
assert.close(bbox.x, 5, EPSILON)
assert.close(bbox.y, 15, EPSILON)
assert.close(bbox.width, 20, EPSILON)
assert.close(bbox.height, 10, EPSILON)
assert.equal(mockaddSVGElemensFromJsonCallCount, 1)
elem.remove()
const rect = { x: 10, y: 10, width: 10, height: 20 };
const angle = 45;
const origin = { x: 15, y: 20 };
const rect = { x: 10, y: 10, width: 10, height: 20 }
const angle = 45
const origin = { x: 15, y: 20 }
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')' }
});
svgroot.append(elem);
mockaddSVGElemensFromJsonCallCount = 0;
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
const r2 = rotateRect(rect, angle, origin);
assert.close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
assert.close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
assert.equal(mockaddSVGElemensFromJsonCallCount, 0);
elem.remove();
})
svgroot.append(elem)
mockaddSVGElemensFromJsonCallCount = 0
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions)
const r2 = rotateRect(rect, angle, origin)
assert.close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x)
assert.close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y)
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width)
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height)
assert.equal(mockaddSVGElemensFromJsonCallCount, 0)
elem.remove()
// Same as previous but wrapped with g and the transform is with the g.
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect3', x: rect.x, y: rect.y, width: rect.width, height: rect.height }
});
})
const g = mockCreateSVGElement({
element: 'g',
attr: { transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')' }
});
g.append(elem);
svgroot.append(g);
mockaddSVGElemensFromJsonCallCount = 0;
bbox = getBBoxWithTransform(g, mockaddSVGElemensFromJson, mockPathActions);
assert.close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
assert.close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
assert.equal(mockaddSVGElemensFromJsonCallCount, 0);
g.remove();
})
g.append(elem)
svgroot.append(g)
mockaddSVGElemensFromJsonCallCount = 0
bbox = getBBoxWithTransform(g, mockaddSVGElemensFromJson, mockPathActions)
assert.close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x)
assert.close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y)
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width)
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height)
assert.equal(mockaddSVGElemensFromJsonCallCount, 0)
g.remove()
elem = mockCreateSVGElement({
element: 'ellipse',
attr: { id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100)' }
});
svgroot.append(elem);
mockaddSVGElemensFromJsonCallCount = 0;
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
})
svgroot.append(elem)
mockaddSVGElemensFromJsonCallCount = 0
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions)
/** @todo: Review these test the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100. */
// assert.ok(bbox.x > 45 && bbox.x <= 50);
assert.ok(bbox.y > 45 && bbox.y <= 50);
assert.ok(bbox.y > 45 && bbox.y <= 50)
// assert.ok(bbox.width >= 100 && bbox.width < 110);
// assert.ok(bbox.height >= 100 && bbox.height < 110);
assert.equal(mockaddSVGElemensFromJsonCallCount, 1);
elem.remove();
});
assert.equal(mockaddSVGElemensFromJsonCallCount, 1)
elem.remove()
})
it('Test getBBoxWithTransform with rotation and matrix transforms', function () {
const { getBBoxWithTransform } = utilities;
const { getBBoxWithTransform } = utilities
let tx = 10; // tx right
let ty = 10; // tx down
let txInRotatedSpace = Math.sqrt(tx * tx + ty * ty); // translate in rotated 45 space.
let tyInRotatedSpace = 0;
let matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
let tx = 10 // tx right
let ty = 10 // tx down
let txInRotatedSpace = Math.sqrt(tx * tx + ty * ty) // translate in rotated 45 space.
let tyInRotatedSpace = 0
let matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')'
let elem = mockCreateSVGElement({
element: 'path',
attr: { id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10) ' + matrix }
});
svgroot.append(elem);
let bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.close(bbox.x, 10 + tx, EPSILON);
assert.close(bbox.y, 10 + ty, EPSILON);
assert.close(bbox.width, 0, EPSILON);
assert.close(bbox.height, Math.sqrt(100 + 100), EPSILON);
elem.remove();
})
svgroot.append(elem)
let bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions)
assert.close(bbox.x, 10 + tx, EPSILON)
assert.close(bbox.y, 10 + ty, EPSILON)
assert.close(bbox.width, 0, EPSILON)
assert.close(bbox.height, Math.sqrt(100 + 100), EPSILON)
elem.remove()
txInRotatedSpace = tx; // translate in rotated 90 space.
tyInRotatedSpace = -ty;
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
txInRotatedSpace = tx // translate in rotated 90 space.
tyInRotatedSpace = -ty
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')'
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20) ' + matrix }
});
svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.close(bbox.x, 5 + tx, EPSILON);
assert.close(bbox.y, 15 + ty, EPSILON);
assert.close(bbox.width, 20, EPSILON);
assert.close(bbox.height, 10, EPSILON);
elem.remove();
})
svgroot.append(elem)
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions)
assert.close(bbox.x, 5 + tx, EPSILON)
assert.close(bbox.y, 15 + ty, EPSILON)
assert.close(bbox.width, 20, EPSILON)
assert.close(bbox.height, 10, EPSILON)
elem.remove()
const rect = { x: 10, y: 10, width: 10, height: 20 };
const angle = 45;
const origin = { x: 15, y: 20 };
tx = 10; // tx right
ty = 10; // tx down
txInRotatedSpace = Math.sqrt(tx * tx + ty * ty); // translate in rotated 45 space.
tyInRotatedSpace = 0;
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
const rect = { x: 10, y: 10, width: 10, height: 20 }
const angle = 45
const origin = { x: 15, y: 20 }
tx = 10 // tx right
ty = 10 // tx down
txInRotatedSpace = Math.sqrt(tx * tx + ty * ty) // translate in rotated 45 space.
tyInRotatedSpace = 0
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')'
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix }
});
svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
const r2 = rotateRect(rect, angle, origin);
assert.close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
assert.close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
elem.remove();
})
svgroot.append(elem)
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions)
const r2 = rotateRect(rect, angle, origin)
assert.close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x)
assert.close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y)
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width)
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height)
elem.remove()
// Same as previous but wrapped with g and the transform is with the g.
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect3', x: rect.x, y: rect.y, width: rect.width, height: rect.height }
});
})
const g = mockCreateSVGElement({
element: 'g',
attr: { transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix }
});
g.append(elem);
svgroot.append(g);
bbox = getBBoxWithTransform(g, mockaddSVGElemensFromJson, mockPathActions);
assert.close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
assert.close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
g.remove();
})
g.append(elem)
svgroot.append(g)
bbox = getBBoxWithTransform(g, mockaddSVGElemensFromJson, mockPathActions)
assert.close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x)
assert.close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y)
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width)
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height)
g.remove()
elem = mockCreateSVGElement({
element: 'ellipse',
attr: { id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100) ' + matrix }
});
svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
})
svgroot.append(elem)
bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions)
/** @todo: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100. */
// assert.ok(bbox.x > 45 + tx && bbox.x <= 50 + tx);
assert.ok(bbox.y > 45 + ty && bbox.y <= 50 + ty);
assert.ok(bbox.y > 45 + ty && bbox.y <= 50 + ty)
// assert.ok(bbox.width >= 100 && bbox.width < 110);
// assert.ok(bbox.height >= 100 && bbox.height < 110);
elem.remove();
});
elem.remove()
})
it('Test getStrokedBBox with stroke-width 10', function () {
const { getStrokedBBox } = utilities;
const { getStrokedBBox } = utilities
const strokeWidth = 10;
const strokeWidth = 10
let elem = mockCreateSVGElement({
element: 'path',
attr: { id: 'path', d: 'M0,1 L2,3', 'stroke-width': strokeWidth }
});
svgroot.append(elem);
let bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth });
elem.remove();
})
svgroot.append(elem)
let bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth })
elem.remove()
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth }
});
svgroot.append(elem);
bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth });
elem.remove();
})
svgroot.append(elem)
bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth })
elem.remove()
elem = mockCreateSVGElement({
element: 'line',
attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': strokeWidth }
});
svgroot.append(elem);
bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth });
elem.remove();
})
svgroot.append(elem)
bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth })
elem.remove()
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth }
});
})
const g = mockCreateSVGElement({
element: 'g',
attr: {}
});
g.append(elem);
svgroot.append(g);
bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth });
g.remove();
});
})
g.append(elem)
svgroot.append(g)
bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth })
g.remove()
})
it("Test getStrokedBBox with stroke-width 'none'", function () {
const { getStrokedBBox } = utilities;
const { getStrokedBBox } = utilities
let elem = mockCreateSVGElement({
element: 'path',
attr: { id: 'path', d: 'M0,1 L2,3', 'stroke-width': 'none' }
});
svgroot.append(elem);
let bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 });
elem.remove();
})
svgroot.append(elem)
let bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 })
elem.remove()
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none' }
});
svgroot.append(elem);
bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
elem.remove();
})
svgroot.append(elem)
bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 })
elem.remove()
elem = mockCreateSVGElement({
element: 'line',
attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': 'none' }
});
svgroot.append(elem);
bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 });
elem.remove();
})
svgroot.append(elem)
bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 })
elem.remove()
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none' }
});
})
const g = mockCreateSVGElement({
element: 'g',
attr: {}
});
g.append(elem);
svgroot.append(g);
bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
g.remove();
});
})
g.append(elem)
svgroot.append(g)
bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 })
g.remove()
})
it('Test getStrokedBBox with no stroke-width attribute', function () {
const { getStrokedBBox } = utilities;
const { getStrokedBBox } = utilities
let elem = mockCreateSVGElement({
element: 'path',
attr: { id: 'path', d: 'M0,1 L2,3' }
});
svgroot.append(elem);
let bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 });
elem.remove();
})
svgroot.append(elem)
let bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 })
elem.remove()
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
});
svgroot.append(elem);
bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
elem.remove();
})
svgroot.append(elem)
bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 })
elem.remove()
elem = mockCreateSVGElement({
element: 'line',
attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' }
});
svgroot.append(elem);
bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 });
elem.remove();
})
svgroot.append(elem)
bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 })
elem.remove()
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
});
})
const g = mockCreateSVGElement({
element: 'g',
attr: {}
});
g.append(elem);
svgroot.append(g);
bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
g.remove();
});
})
g.append(elem)
svgroot.append(g)
bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 })
g.remove()
})
/**
* Returns radians for degrees.
@@ -465,7 +466,7 @@ describe('utilities bbox', function () {
* @returns {Float}
*/
function radians (degrees) {
return degrees * Math.PI / 180;
return degrees * Math.PI / 180
}
/**
@@ -477,15 +478,15 @@ describe('utilities bbox', function () {
*/
function rotatePoint (point, angle, origin) {
if (!origin) {
origin = { x: 0, y: 0 };
origin = { x: 0, y: 0 }
}
const x = point.x - origin.x;
const y = point.y - origin.y;
const theta = radians(angle);
const x = point.x - origin.x
const y = point.y - origin.y
const theta = radians(angle)
return {
x: x * Math.cos(theta) + y * Math.sin(theta) + origin.x,
y: x * Math.sin(theta) + y * Math.cos(theta) + origin.y
};
}
}
/**
*
@@ -495,21 +496,21 @@ describe('utilities bbox', function () {
* @returns {module:utilities.BBoxObject}
*/
function rotateRect (rect, angle, origin) {
const tl = rotatePoint({ x: rect.x, y: rect.y }, angle, origin);
const tr = rotatePoint({ x: rect.x + rect.width, y: rect.y }, angle, origin);
const br = rotatePoint({ x: rect.x + rect.width, y: rect.y + rect.height }, angle, origin);
const bl = rotatePoint({ x: rect.x, y: rect.y + rect.height }, angle, origin);
const tl = rotatePoint({ x: rect.x, y: rect.y }, angle, origin)
const tr = rotatePoint({ x: rect.x + rect.width, y: rect.y }, angle, origin)
const br = rotatePoint({ x: rect.x + rect.width, y: rect.y + rect.height }, angle, origin)
const bl = rotatePoint({ x: rect.x, y: rect.y + rect.height }, angle, origin)
const minx = Math.min(tl.x, tr.x, bl.x, br.x);
const maxx = Math.max(tl.x, tr.x, bl.x, br.x);
const miny = Math.min(tl.y, tr.y, bl.y, br.y);
const maxy = Math.max(tl.y, tr.y, bl.y, br.y);
const minx = Math.min(tl.x, tr.x, bl.x, br.x)
const maxx = Math.max(tl.x, tr.x, bl.x, br.x)
const miny = Math.min(tl.y, tr.y, bl.y, br.y)
const maxy = Math.max(tl.y, tr.y, bl.y, br.y)
return {
x: minx,
y: miny,
width: (maxx - minx),
height: (maxy - miny)
};
}
}
});
})

172
cypress/integration/unit/utilities-performance.js
View File

@@ -1,17 +1,17 @@
/* eslint-disable max-len, no-console */
import 'pathseg';
import 'pathseg'
import { NS } from '../../../instrumented/svgcanvas/namespaces.js';
import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import * as math from '../../../instrumented/svgcanvas/math.js';
import { NS } from '../../../instrumented/svgcanvas/namespaces.js'
import * as utilities from '../../../instrumented/svgcanvas/utilities.js'
import * as math from '../../../instrumented/svgcanvas/math.js'
describe('utilities performance', function () {
let currentLayer; let groupWithMatrixTransform; let textWithMatrixTransform;
let currentLayer; let groupWithMatrixTransform; let textWithMatrixTransform
beforeEach(() => {
document.body.textContent = '';
const style = document.createElement('style');
style.id = 'styleoverrides';
style.media = 'screen';
document.body.textContent = ''
const style = document.createElement('style')
style.id = 'styleoverrides'
style.media = 'screen'
style.textContent = `
#svgcanvas svg * {
cursor: move;
@@ -19,9 +19,9 @@ describe('utilities performance', function () {
}
#svgcanvas svg {
cursor: default
}`;
}`
document.head.append(style);
document.head.append(style)
const editor = new DOMParser().parseFromString(`<div id="svg_editor">
<div id="workarea" style="cursor: auto; overflow: scroll; line-height: 12px; right: 100px;">
@@ -64,14 +64,14 @@ describe('utilities performance', function () {
</svg>
</svg>
</div>
</div></div>`, 'application/xml');
const newNode = document.body.ownerDocument.importNode(editor.documentElement, true);
document.body.append(newNode);
</div></div>`, 'application/xml')
const newNode = document.body.ownerDocument.importNode(editor.documentElement, true)
document.body.append(newNode)
currentLayer = document.getElementById('layer1');
groupWithMatrixTransform = document.getElementById('svg_group_with_matrix_transform');
textWithMatrixTransform = document.getElementById('svg_text_with_matrix_transform');
});
currentLayer = document.getElementById('layer1')
groupWithMatrixTransform = document.getElementById('svg_group_with_matrix_transform')
textWithMatrixTransform = document.getElementById('svg_text_with_matrix_transform')
})
/**
* Create an SVG element for a mock.
@@ -79,11 +79,11 @@ describe('utilities performance', function () {
* @returns {SVGElement}
*/
function mockCreateSVGElement (jsonMap) {
const elem = document.createElementNS(NS.SVG, jsonMap.element);
Object.entries(jsonMap.attr).forEach(([ attr, value ]) => {
elem.setAttribute(attr, value);
});
return elem;
const elem = document.createElementNS(NS.SVG, jsonMap.element)
Object.entries(jsonMap.attr).forEach(([attr, value]) => {
elem.setAttribute(attr, value)
})
return elem
}
/**
@@ -92,9 +92,9 @@ describe('utilities performance', function () {
* @returns {SVGElement}
*/
function mockaddSVGElemensFromJson (json) {
const elem = mockCreateSVGElement(json);
currentLayer.append(elem);
return elem;
const elem = mockCreateSVGElement(json)
currentLayer.append(elem)
return elem
}
/**
@@ -104,49 +104,49 @@ describe('utilities performance', function () {
* @returns {void}
*/
function fillDocumentByCloningElement (elem, count) {
const elemId = elem.getAttribute('id') + '-';
const elemId = elem.getAttribute('id') + '-'
for (let index = 0; index < count; index++) {
const clone = elem.cloneNode(true); // t: deep clone
const clone = elem.cloneNode(true) // t: deep clone
// Make sure you set a unique ID like a real document.
clone.setAttribute('id', elemId + index);
const { parentNode } = elem;
parentNode.append(clone);
clone.setAttribute('id', elemId + index)
const { parentNode } = elem
parentNode.append(clone)
}
}
const mockPathActions = {
resetOrientation (path) {
if (utilities.isNullish(path) || path.nodeName !== 'path') { return false; }
const tlist = path.transform.baseVal;
const m = math.transformListToTransform(tlist).matrix;
tlist.clear();
path.removeAttribute('transform');
const segList = path.pathSegList;
if (utilities.isNullish(path) || path.nodeName !== 'path') { return false }
const tlist = path.transform.baseVal
const m = math.transformListToTransform(tlist).matrix
tlist.clear()
path.removeAttribute('transform')
const segList = path.pathSegList
const len = segList.numberOfItems;
const len = segList.numberOfItems
// let lastX, lastY;
for (let i = 0; i < len; ++i) {
const seg = segList.getItem(i);
const type = seg.pathSegType;
const seg = segList.getItem(i)
const type = seg.pathSegType
if (type === 1) {
continue;
continue
}
const pts = [];
[ '', 1, 2 ].forEach(function (n) {
const x = seg['x' + n];
const y = seg['y' + n];
['', 1, 2].forEach(function (n) {
const x = seg['x' + n]
const y = seg['y' + n]
if (x !== undefined && y !== undefined) {
const pt = math.transformPoint(x, y, m);
pts.splice(pts.length, 0, pt.x, pt.y);
const pt = math.transformPoint(x, y, m)
pts.splice(pts.length, 0, pt.x, pt.y)
}
});
})
// path.replacePathSeg(type, i, pts, path);
}
return undefined;
return undefined
}
};
}
// //////////////////////////////////////////////////////////
// Performance times with various browsers on Macbook 2011 8MB RAM OS X El Capitan 10.11.4
@@ -180,57 +180,57 @@ describe('utilities performance', function () {
// Pass2 svgCanvas.getStrokedBBox total ms 17, ave ms 0.2, min/max 0 23
it('Test svgCanvas.getStrokedBBox() performance with matrix transforms', function () {
const { getStrokedBBox } = utilities;
const { children } = currentLayer;
const { getStrokedBBox } = utilities
const { children } = currentLayer
let lastTime; let now;
let min = Number.MAX_VALUE;
let max = 0;
let total = 0;
let lastTime; let now
let min = Number.MAX_VALUE
let max = 0
let total = 0
fillDocumentByCloningElement(groupWithMatrixTransform, 50);
fillDocumentByCloningElement(textWithMatrixTransform, 50);
fillDocumentByCloningElement(groupWithMatrixTransform, 50)
fillDocumentByCloningElement(textWithMatrixTransform, 50)
// The first pass through all elements is slower.
const count = children.length;
const start = lastTime = now = Date.now();
const count = children.length
const start = lastTime = now = Date.now()
// Skip the first child which is the title.
for (let index = 1; index < count; index++) {
const child = children[index];
/* const obj = */ getStrokedBBox([ child ], mockaddSVGElemensFromJson, mockPathActions);
now = Date.now(); const delta = now - lastTime; lastTime = now;
total += delta;
min = Math.min(min, delta);
max = Math.max(max, delta);
const child = children[index]
/* const obj = */ getStrokedBBox([child], mockaddSVGElemensFromJson, mockPathActions)
now = Date.now(); const delta = now - lastTime; lastTime = now
total += delta
min = Math.min(min, delta)
max = Math.max(max, delta)
}
total = lastTime - start;
const ave = total / count;
assert.isBelow(ave, 20, 'svgedit.utilities.getStrokedBBox average execution time is less than 20 ms');
console.log('Pass1 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + ave.toFixed(1) + ',\t min/max ' + min + ' ' + max);
total = lastTime - start
const ave = total / count
assert.isBelow(ave, 20, 'svgedit.utilities.getStrokedBBox average execution time is less than 20 ms')
console.log('Pass1 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + ave.toFixed(1) + ',\t min/max ' + min + ' ' + max)
return new Promise((resolve) => {
// The second pass is two to ten times faster.
setTimeout(function () {
const ct = children.length;
const ct = children.length
const strt = lastTime = now = Date.now();
const strt = lastTime = now = Date.now()
// Skip the first child which is the title.
for (let index = 1; index < ct; index++) {
const child = children[index];
/* const obj = */ getStrokedBBox([ child ], mockaddSVGElemensFromJson, mockPathActions);
now = Date.now(); const delta = now - lastTime; lastTime = now;
total += delta;
min = Math.min(min, delta);
max = Math.max(max, delta);
const child = children[index]
/* const obj = */ getStrokedBBox([child], mockaddSVGElemensFromJson, mockPathActions)
now = Date.now(); const delta = now - lastTime; lastTime = now
total += delta
min = Math.min(min, delta)
max = Math.max(max, delta)
}
total = lastTime - strt;
const avg = total / ct;
assert.isBelow(avg, 2, 'svgedit.utilities.getStrokedBBox average execution time is less than 1 ms');
console.log('Pass2 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + avg.toFixed(1) + ',\t min/max ' + min + ' ' + max);
total = lastTime - strt
const avg = total / ct
assert.isBelow(avg, 2, 'svgedit.utilities.getStrokedBBox average execution time is less than 1 ms')
console.log('Pass2 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + avg.toFixed(1) + ',\t min/max ' + min + ' ' + max)
resolve();
});
});
});
});
resolve()
})
})
})
})

346
cypress/integration/unit/utilities.js
View File

@@ -1,5 +1,5 @@
import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import { NS } from '../../../instrumented/svgcanvas/namespaces.js';
import * as utilities from '../../../instrumented/svgcanvas/utilities.js'
import { NS } from '../../../instrumented/svgcanvas/namespaces.js'
describe('utilities', function () {
/**
@@ -8,11 +8,11 @@ describe('utilities', function () {
* @returns {SVGElement}
*/
function mockCreateSVGElement (jsonMap) {
const elem = document.createElementNS(NS.SVG, jsonMap.element);
Object.entries(jsonMap.attr).forEach(([ attr, value ]) => {
elem.setAttribute(attr, value);
});
return elem;
const elem = document.createElementNS(NS.SVG, jsonMap.element)
Object.entries(jsonMap.attr).forEach(([attr, value]) => {
elem.setAttribute(attr, value)
})
return elem
}
/**
* Adds SVG Element per parameters and appends to root.
@@ -20,225 +20,225 @@ describe('utilities', function () {
* @returns {SVGElement}
*/
function mockaddSVGElemensFromJson (json) {
const elem = mockCreateSVGElement(json);
svgroot.append(elem);
return elem;
const elem = mockCreateSVGElement(json)
svgroot.append(elem)
return elem
}
const mockPathActions = { resetOrientation () { /* empty fn */ } };
let mockHistorySubCommands = [];
const mockPathActions = { resetOrientation () { /* empty fn */ } }
let mockHistorySubCommands = []
const mockHistory = {
BatchCommand: class {
addSubCommand (cmd) {
mockHistorySubCommands.push(cmd);
mockHistorySubCommands.push(cmd)
}
},
RemoveElementCommand: class {
// Longhand needed since used as a constructor
constructor (elem, nextSibling, parent) {
this.elem = elem;
this.nextSibling = nextSibling;
this.parent = parent;
this.elem = elem
this.nextSibling = nextSibling
this.parent = parent
}
},
InsertElementCommand: class {
constructor (path) { // Longhand needed since used as a constructor
this.path = path;
this.path = path
}
}
};
}
const mockCount = {
clearSelection: 0,
addToSelection: 0,
addCommandToHistory: 0
};
}
/**
* Increments clear seleciton count for mock test.
* @returns {void}
*/
function mockClearSelection () {
mockCount.clearSelection++;
mockCount.clearSelection++
}
/**
* Increments add selection count for mock test.
* @returns {void}
*/
function mockAddToSelection () {
mockCount.addToSelection++;
mockCount.addToSelection++
}
/**
* Increments add command to history count for mock test.
* @returns {void}
*/
function mockAddCommandToHistory () {
mockCount.addCommandToHistory++;
mockCount.addCommandToHistory++
}
let svg; let svgroot;
let svg; let svgroot
beforeEach(() => {
document.body.textContent = '';
document.body.textContent = ''
mockHistorySubCommands = [];
mockCount.clearSelection = 0;
mockCount.addToSelection = 0;
mockCount.addCommandToHistory = 0;
mockHistorySubCommands = []
mockCount.clearSelection = 0
mockCount.addToSelection = 0
mockCount.addCommandToHistory = 0
const sandbox = document.createElement('div');
svg = document.createElementNS(NS.SVG, 'svg');
const sandbox = document.createElement('div')
svg = document.createElementNS(NS.SVG, 'svg')
svgroot = mockCreateSVGElement({
element: 'svg',
attr: { id: 'svgroot' }
});
sandbox.append(svgroot);
document.body.append(sandbox);
});
})
sandbox.append(svgroot)
document.body.append(sandbox)
})
it('Test svgedit.utilities package', function () {
assert.ok(utilities);
assert.ok(utilities.toXml);
assert.equal(typeof utilities.toXml, typeof function () { /* empty fn */ });
});
assert.ok(utilities)
assert.ok(utilities.toXml)
assert.equal(typeof utilities.toXml, typeof function () { /* empty fn */ })
})
it('Test svgedit.utilities.toXml() function', function () {
const { toXml } = utilities;
const { toXml } = utilities
assert.equal(toXml('a'), 'a');
assert.equal(toXml('ABC_'), 'ABC_');
assert.equal(toXml('PB&J'), 'PB&amp;J');
assert.equal(toXml('2 < 5'), '2 &lt; 5');
assert.equal(toXml('5 > 2'), '5 &gt; 2');
assert.equal(toXml('\'<&>"'), '&#x27;&lt;&amp;&gt;&quot;');
});
assert.equal(toXml('a'), 'a')
assert.equal(toXml('ABC_'), 'ABC_')
assert.equal(toXml('PB&J'), 'PB&amp;J')
assert.equal(toXml('2 < 5'), '2 &lt; 5')
assert.equal(toXml('5 > 2'), '5 &gt; 2')
assert.equal(toXml('\'<&>"'), '&#x27;&lt;&amp;&gt;&quot;')
})
it('Test svgedit.utilities.encode64() function', function () {
const { encode64 } = utilities;
const { encode64 } = utilities
assert.equal(encode64('abcdef'), 'YWJjZGVm');
assert.equal(encode64('12345'), 'MTIzNDU=');
assert.equal(encode64(' '), 'IA==');
assert.equal(encode64('`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?'), 'YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8=');
});
assert.equal(encode64('abcdef'), 'YWJjZGVm')
assert.equal(encode64('12345'), 'MTIzNDU=')
assert.equal(encode64(' '), 'IA==')
assert.equal(encode64('`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?'), 'YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8=')
})
it('Test svgedit.utilities.decode64() function', function () {
const { decode64 } = utilities;
const { decode64 } = utilities
assert.equal(decode64('YWJjZGVm'), 'abcdef');
assert.equal(decode64('MTIzNDU='), '12345');
assert.equal(decode64('IA=='), ' ');
assert.equal(decode64('YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8='), '`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?');
});
assert.equal(decode64('YWJjZGVm'), 'abcdef')
assert.equal(decode64('MTIzNDU='), '12345')
assert.equal(decode64('IA=='), ' ')
assert.equal(decode64('YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8='), '`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?')
})
it('Test svgedit.utilities.convertToXMLReferences() function', function () {
const convert = utilities.convertToXMLReferences;
assert.equal(convert('ABC'), 'ABC');
const convert = utilities.convertToXMLReferences
assert.equal(convert('ABC'), 'ABC')
// assert.equal(convert('<27>BC'), '&#192;BC');
});
})
it('Test svgedit.utilities.bboxToObj() function', function () {
const { bboxToObj } = utilities;
const { bboxToObj } = utilities
const rect = svg.createSVGRect();
rect.x = 1;
rect.y = 2;
rect.width = 3;
rect.height = 4;
const rect = svg.createSVGRect()
rect.x = 1
rect.y = 2
rect.width = 3
rect.height = 4
const obj = bboxToObj(rect);
assert.equal(typeof obj, typeof {});
assert.equal(obj.x, 1);
assert.equal(obj.y, 2);
assert.equal(obj.width, 3);
assert.equal(obj.height, 4);
});
const obj = bboxToObj(rect)
assert.equal(typeof obj, typeof {})
assert.equal(obj.x, 1)
assert.equal(obj.y, 2)
assert.equal(obj.width, 3)
assert.equal(obj.height, 4)
})
it('Test getUrlFromAttr', function () {
assert.equal(utilities.getUrlFromAttr('url(#foo)'), '#foo');
assert.equal(utilities.getUrlFromAttr('url(somefile.svg#foo)'), 'somefile.svg#foo');
assert.equal(utilities.getUrlFromAttr('url("#foo")'), '#foo');
assert.equal(utilities.getUrlFromAttr('url("#foo")'), '#foo');
});
assert.equal(utilities.getUrlFromAttr('url(#foo)'), '#foo')
assert.equal(utilities.getUrlFromAttr('url(somefile.svg#foo)'), 'somefile.svg#foo')
assert.equal(utilities.getUrlFromAttr('url("#foo")'), '#foo')
assert.equal(utilities.getUrlFromAttr('url("#foo")'), '#foo')
})
it('Test getPathDFromSegments', function () {
const { getPathDFromSegments } = utilities;
const { getPathDFromSegments } = utilities
const doc = utilities.text2xml('<svg></svg>');
const path = doc.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'm0,0l5,0l0,5l-5,0l0,-5z');
const doc = utilities.text2xml('<svg></svg>')
const path = doc.createElementNS(NS.SVG, 'path')
path.setAttribute('d', 'm0,0l5,0l0,5l-5,0l0,-5z')
let d = getPathDFromSegments([
[ 'M', [ 1, 2 ] ],
[ 'Z', [] ]
]);
assert.equal(d, 'M1,2 Z');
['M', [1, 2]],
['Z', []]
])
assert.equal(d, 'M1,2 Z')
d = getPathDFromSegments([
[ 'M', [ 1, 2 ] ],
[ 'M', [ 3, 4 ] ],
[ 'Z', [] ]
]);
assert.equal(d, 'M1,2 M3,4 Z');
['M', [1, 2]],
['M', [3, 4]],
['Z', []]
])
assert.equal(d, 'M1,2 M3,4 Z')
d = getPathDFromSegments([
[ 'M', [ 1, 2 ] ],
[ 'C', [ 3, 4, 5, 6 ] ],
[ 'Z', [] ]
]);
assert.equal(d, 'M1,2 C3,4 5,6 Z');
});
['M', [1, 2]],
['C', [3, 4, 5, 6]],
['Z', []]
])
assert.equal(d, 'M1,2 C3,4 5,6 Z')
})
it('Test getPathDFromElement', function () {
const { getPathDFromElement } = utilities;
const { getPathDFromElement } = utilities
let elem = mockCreateSVGElement({
element: 'path',
attr: { id: 'path', d: 'M0,1 Z' }
});
svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M0,1 Z');
elem.remove();
})
svgroot.append(elem)
assert.equal(getPathDFromElement(elem), 'M0,1 Z')
elem.remove()
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
});
svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
elem.remove();
})
svgroot.append(elem)
assert.equal(getPathDFromElement(elem), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z')
elem.remove()
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'roundrect', x: '0', y: '1', rx: '2', ry: '3', width: '10', height: '11' }
});
svgroot.append(elem);
const closeEnough = /M0,4 C0,2.3\d* 0.9\d*,1 2,1 L8,1 C9.0\d*,1 10,2.3\d* 10,4 L10,9 C10,10.6\d* 9.0\d*,12 8,12 L2,12 C0.9\d*,12 0,10.6\d* 0,9 L0,4 Z/;
assert.equal(closeEnough.test(getPathDFromElement(elem)), true);
elem.remove();
})
svgroot.append(elem)
const closeEnough = /M0,4 C0,2.3\d* 0.9\d*,1 2,1 L8,1 C9.0\d*,1 10,2.3\d* 10,4 L10,9 C10,10.6\d* 9.0\d*,12 8,12 L2,12 C0.9\d*,12 0,10.6\d* 0,9 L0,4 Z/
assert.equal(closeEnough.test(getPathDFromElement(elem)), true)
elem.remove()
elem = mockCreateSVGElement({
element: 'line',
attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' }
});
svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M0,1L5,6');
elem.remove();
})
svgroot.append(elem)
assert.equal(getPathDFromElement(elem), 'M0,1L5,6')
elem.remove()
elem = mockCreateSVGElement({
element: 'circle',
attr: { id: 'circle', cx: '10', cy: '11', rx: '5', ry: '10' }
});
svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M5,11 C5,5.475138121546961 7.237569060773481,1 10,1 C12.762430939226519,1 15,5.475138121546961 15,11 C15,16.524861878453038 12.762430939226519,21 10,21 C7.237569060773481,21 5,16.524861878453038 5,11 Z');
elem.remove();
})
svgroot.append(elem)
assert.equal(getPathDFromElement(elem), 'M5,11 C5,5.475138121546961 7.237569060773481,1 10,1 C12.762430939226519,1 15,5.475138121546961 15,11 C15,16.524861878453038 12.762430939226519,21 10,21 C7.237569060773481,21 5,16.524861878453038 5,11 Z')
elem.remove()
elem = mockCreateSVGElement({
element: 'polyline',
attr: { id: 'polyline', points: '0,1 5,1 5,11 0,11' }
});
svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M0,1 5,1 5,11 0,11');
elem.remove();
})
svgroot.append(elem)
assert.equal(getPathDFromElement(elem), 'M0,1 5,1 5,11 0,11')
elem.remove()
assert.equal(getPathDFromElement({ tagName: 'something unknown' }), undefined);
});
assert.equal(getPathDFromElement({ tagName: 'something unknown' }), undefined)
})
it('Test getBBoxOfElementAsPath', function () {
/**
@@ -246,88 +246,88 @@ describe('utilities', function () {
* @type {module:utilities.getBBoxOfElementAsPath}
*/
function getBBoxOfElementAsPath (elem, addSVGElemensFromJson, pathActions) {
const bbox = utilities.getBBoxOfElementAsPath(elem, addSVGElemensFromJson, pathActions);
return utilities.bboxToObj(bbox); // need this for assert.equal() to work.
const bbox = utilities.getBBoxOfElementAsPath(elem, addSVGElemensFromJson, pathActions)
return utilities.bboxToObj(bbox) // need this for assert.equal() to work.
}
let elem = mockCreateSVGElement({
element: 'path',
attr: { id: 'path', d: 'M0,1 Z' }
});
svgroot.append(elem);
let bbox = getBBoxOfElementAsPath(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 0, height: 0 });
elem.remove();
})
svgroot.append(elem)
let bbox = getBBoxOfElementAsPath(elem, mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 0, height: 0 })
elem.remove()
elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
});
svgroot.append(elem);
bbox = getBBoxOfElementAsPath(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
elem.remove();
})
svgroot.append(elem)
bbox = getBBoxOfElementAsPath(elem, mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 })
elem.remove()
elem = mockCreateSVGElement({
element: 'line',
attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' }
});
svgroot.append(elem);
bbox = getBBoxOfElementAsPath(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 });
elem.remove();
})
svgroot.append(elem)
bbox = getBBoxOfElementAsPath(elem, mockaddSVGElemensFromJson, mockPathActions)
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 })
elem.remove()
// TODO: test element with transform. Need resetOrientation above to be working or mock it.
});
})
it('Test convertToPath rect', function () {
const { convertToPath } = utilities;
const { convertToPath } = utilities
const attrs = {
fill: 'red',
stroke: 'white',
'stroke-width': '1',
visibility: 'hidden'
};
}
const elem = mockCreateSVGElement({
element: 'rect',
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
});
svgroot.append(elem);
const path = convertToPath(elem, attrs, mockaddSVGElemensFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory);
assert.equal(path.getAttribute('d'), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
assert.equal(path.getAttribute('visibilituy'), null);
assert.equal(path.id, 'rect');
assert.equal(path.parentNode, svgroot);
assert.equal(elem.parentNode, null);
assert.equal(mockHistorySubCommands.length, 2);
assert.equal(mockCount.clearSelection, 1);
assert.equal(mockCount.addToSelection, 1);
assert.equal(mockCount.addCommandToHistory, 1);
path.remove();
});
})
svgroot.append(elem)
const path = convertToPath(elem, attrs, mockaddSVGElemensFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory)
assert.equal(path.getAttribute('d'), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z')
assert.equal(path.getAttribute('visibilituy'), null)
assert.equal(path.id, 'rect')
assert.equal(path.parentNode, svgroot)
assert.equal(elem.parentNode, null)
assert.equal(mockHistorySubCommands.length, 2)
assert.equal(mockCount.clearSelection, 1)
assert.equal(mockCount.addToSelection, 1)
assert.equal(mockCount.addCommandToHistory, 1)
path.remove()
})
it('Test convertToPath unknown element', function () {
const { convertToPath } = utilities;
const { convertToPath } = utilities
const attrs = {
fill: 'red',
stroke: 'white',
'stroke-width': '1',
visibility: 'hidden'
};
}
const elem = {
tagName: 'something unknown',
id: 'something-unknown',
getAttribute () { return ''; },
getAttribute () { return '' },
parentNode: svgroot
};
const path = convertToPath(elem, attrs, mockaddSVGElemensFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory);
assert.equal(path, null);
assert.equal(elem.parentNode, svgroot);
assert.equal(mockHistorySubCommands.length, 0);
assert.equal(mockCount.clearSelection, 0);
assert.equal(mockCount.addToSelection, 0);
assert.equal(mockCount.addCommandToHistory, 0);
});
});
}
const path = convertToPath(elem, attrs, mockaddSVGElemensFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory)
assert.equal(path, null)
assert.equal(elem.parentNode, svgroot)
assert.equal(mockHistorySubCommands.length, 0)
assert.equal(mockCount.clearSelection, 0)
assert.equal(mockCount.addToSelection, 0)
assert.equal(mockCount.addCommandToHistory, 0)
})
})