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

#623 cypress new test cases added

Browse Source
This commit is contained in:
agriyadev5
2021-08-25 13:52:26 +05:30
parent 4219a7f7b9
commit 33c5546186
2 changed files with 526 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

433
cypress/integration/ui/__snapshots__/scenario2.js.snap Normal file
View File

@@ -0,0 +1,433 @@
exports[`use all parts of svg-edit > check tool_source_set #0`] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="640"
height="480"
id="svgcontent"
overflow="visible"
x="640"
y="480"
viewBox="0 0 640 480"
>
<g class="layer"><title>Layer 1</title></g>
</svg>
`;
exports[`use all parts of svg-edit > check tool_path #0`] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="640"
height="480"
id="svgcontent"
overflow="visible"
x="640"
y="480"
viewBox="0 0 640 480"
>
<g class="layer" style="pointer-events:all">
<title style="pointer-events:inherit">Layer 1</title>
<path
fill="#FF0000"
stroke="#000000"
stroke-width="5"
opacity="0.5"
style="pointer-events:inherit"
d="M 50 50 L 150 100 L 125 200 L 50 50 z"
id="svg_1"
>
<animate
attributeName="opacity"
begin="indefinite"
dur="0.2"
fill="freeze"
to="1"
></animate>
</path>
</g>
</svg>
`;
exports[`use all parts of svg-edit > check tool_fhellipse #0`] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="640"
height="480"
id="svgcontent"
overflow="visible"
x="640"
y="480"
viewBox="0 0 640 480"
>
<g class="layer" style="pointer-events:all">
<title style="pointer-events:inherit">Layer 1</title>
<path
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
d="M 50 50 L 150 100 L 125 200 L 50 50 z"
id="svg_1"
></path>
<ellipse
fill="#FF0000"
stroke="#000000"
stroke-width="5"
opacity="0.5"
style="pointer-events:inherit"
cx="310"
cy="180"
rx="60"
ry="50"
id="svg_2"
>
<animate
attributeName="opacity"
begin="indefinite"
dur="0.2"
fill="freeze"
to="1"
></animate>
</ellipse>
</g>
</svg>
`;
exports[`use all parts of svg-edit > check tool_ellipse_circle #0`] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="640"
height="480"
id="svgcontent"
overflow="visible"
x="640"
y="480"
viewBox="0 0 640 480"
>
<g class="layer" style="pointer-events:all">
<title style="pointer-events:inherit">Layer 1</title>
<path
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
d="M 50 50 L 150 100 L 125 200 L 50 50 z"
id="svg_1"
></path>
<ellipse
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
cx="310"
cy="180"
rx="60"
ry="50"
id="svg_2"
fill-opacity="1"
stroke-opacity="1"
></ellipse>
<ellipse
fill="#FF0000"
stroke="#000000"
stroke-width="5"
opacity="0.5"
style="pointer-events:inherit"
cx="125"
cy="200"
rx="55"
ry="25"
id="svg_3"
>
<animate
attributeName="opacity"
begin="indefinite"
dur="0.2"
fill="freeze"
to="1"
></animate>
</ellipse>
<circle
fill="#FF0000"
stroke="#000000"
stroke-width="5"
opacity="0.5"
style="pointer-events:inherit"
cx="200"
cy="100"
r="30"
id="svg_4"
>
<animate
attributeName="opacity"
begin="indefinite"
dur="0.2"
fill="freeze"
to="1"
></animate>
</circle>
</g>
</svg>
`;
exports[`use all parts of svg-edit > check tool_circle_change_fill_color #0`] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="640"
height="480"
id="svgcontent"
overflow="visible"
x="640"
y="480"
viewBox="0 0 640 480"
>
<g class="layer" style="pointer-events:all">
<title style="pointer-events:inherit">Layer 1</title>
<path
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
d="M 50 50 L 150 100 L 125 200 L 50 50 z"
id="svg_1"
></path>
<ellipse
fill="#ffff00"
stroke="#000000"
stroke-width="5"
cx="310"
cy="180"
rx="60"
ry="50"
id="svg_2"
fill-opacity="1"
stroke-opacity="1"
></ellipse>
<ellipse
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
cx="125"
cy="200"
rx="55"
ry="25"
id="svg_3"
fill-opacity="1"
stroke-opacity="1"
></ellipse>
<circle
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
cx="200"
cy="100"
r="30"
id="svg_4"
fill-opacity="1"
stroke-opacity="1"
></circle>
</g>
</svg>
`;
exports[`use all parts of svg-edit > check tool_circle_change_opacity #0`] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="640"
height="480"
id="svgcontent"
overflow="visible"
x="640"
y="480"
viewBox="0 0 640 480"
>
<g class="layer" style="pointer-events:all">
<title style="pointer-events:inherit">Layer 1</title>
<path
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
d="M 50 50 L 150 100 L 125 200 L 50 50 z"
id="svg_1"
></path>
<ellipse
fill="#ffff00"
stroke="#000000"
stroke-width="5"
cx="310"
cy="180"
rx="60"
ry="50"
id="svg_2"
fill-opacity="1"
stroke-opacity="1"
opacity="0.5"
></ellipse>
<ellipse
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
cx="125"
cy="200"
rx="55"
ry="25"
id="svg_3"
fill-opacity="1"
stroke-opacity="1"
></ellipse>
<circle
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
cx="200"
cy="100"
r="30"
id="svg_4"
fill-opacity="1"
stroke-opacity="1"
></circle>
</g>
</svg>
`;
exports[`use all parts of svg-edit > check tool_circle_change_rotation #0`] = `
<svg
id="svgcontent"
width="640"
height="480"
x="640"
y="480"
overflow="visible"
xmlns="http://www.w3.org/2000/svg"
xmlns:se="http://svg-edit.googlecode.com"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 640 480"
>
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
<g class="layer" style="pointer-events:all">
<title style="pointer-events:inherit">Layer 1</title>
<path
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
d="M 50 50 L 150 100 L 125 200 L 50 50 z"
id="svg_1"
></path>
<ellipse
fill="#ffff00"
stroke="#000000"
stroke-width="5"
cx="310"
cy="180"
rx="60"
ry="50"
id="svg_2"
fill-opacity="1"
stroke-opacity="1"
opacity="0.5"
transform="rotate(10 310 180)"
></ellipse>
<ellipse
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
cx="125"
cy="200"
rx="55"
ry="25"
id="svg_3"
fill-opacity="1"
stroke-opacity="1"
transform="rotate(15 125 200)"
></ellipse>
<circle
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
cx="200"
cy="100"
r="30"
id="svg_4"
fill-opacity="1"
stroke-opacity="1"
></circle>
</g>
</svg>
`;
exports[`use all parts of svg-edit > check tool_ellipse_change_rotation #0`] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="640"
height="480"
id="svgcontent"
overflow="visible"
x="640"
y="480"
viewBox="0 0 640 480"
>
<g class="layer" style="pointer-events:all">
<title style="pointer-events:inherit">Layer 1</title>
<path
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
d="M 50 50 L 150 100 L 125 200 L 50 50 z"
id="svg_1"
></path>
<ellipse
fill="#ffff00"
stroke="#000000"
stroke-width="5"
cx="310"
cy="180"
rx="60"
ry="50"
id="svg_2"
fill-opacity="1"
stroke-opacity="1"
opacity="0.5"
></ellipse>
<ellipse
fill="#FF0000"
stroke="#000000"
stroke-width="5"
cx="125"
cy="200"
rx="55"
ry="25"
id="svg_3"
fill-opacity="1"
stroke-opacity="1"
transform="rotate(25 125 200)"
></ellipse>
<circle
fill="#FF0000"
stroke="#000000"
stroke-width="5"
style="pointer-events:inherit"
cx="200"
cy="100"
r="30"
id="svg_4"
fill-opacity="1"
stroke-opacity="1"
></circle>
</g>
</svg>
`;

93
cypress/integration/ui/scenario2.js Normal file
View File

@@ -0,0 +1,93 @@
import {
visitAndApproveStorage
} from '../../support/ui-test-helper.js';
const testSnapshot = () => {
cy.get('#svgcontent').cleanSnapshot();
};
describe('use all parts of svg-edit', function () {
before(() => {
visitAndApproveStorage();
});
it('check tool_source_set', function () {
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();
});
it('check tool_path', function () {
cy.get('#tool_path')
.click({ force: true });
cy.get('#svgcontent')
.trigger('mousedown', 50, 50, { force: true })
.trigger('mouseup', { force: true })
.trigger('mousemove', 100, 50, { force: true })
.trigger('mousedown', 100, 50, { force: true })
.trigger('mouseup', { force: true })
.trigger('mousemove', 75, 150, { force: true })
.trigger('mousedown', 75, 150, { force: true })
.trigger('mouseup', { force: true })
.trigger('mousemove', 0, 0, { force: true })
.trigger('mousedown', 0, 0, { force: true })
.trigger('mouseup', { force: true });
cy.get('#svgcontent').toMatchSnapshot();
});
it('check tool_fhellipse', function () {
cy.get('#tool_fhellipse')
.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 });
cy.get('#svgcontent').toMatchSnapshot();
});
it('check tool_ellipse_circle', function () {
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 });
cy.get('#tool_circle').click({ force: true });
cy.get('#svgcontent')
.trigger('mousedown', 150, 50, { force: true })
.trigger('mousemove', 150, 80, { force: true })
.trigger('mouseup', { force: true });
cy.get('#svgcontent').toMatchSnapshot();
});
it('check tool_circle_change_fill_color', function () {
cy.get('#svg_2').click({ force: true });
cy.get('#js-se-palette').find('.square').eq(8)
.click({ force: true });
cy.get('#svgcontent').toMatchSnapshot();
});
it('check tool_circle_change_opacity', function () {
cy.get('#svg_2').click({ force: true });
// cy.get('#opacity').trigger('click', 'bottomRight');
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 });
}
cy.get('#svgcontent').toMatchSnapshot();
});
it('check tool_ellipse_change_rotation', function () {
cy.get('#svg_3').click({ force: true });
// cy.get('#opacity').trigger('click', 'bottomRight');
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 });
}
cy.get('#svgcontent').toMatchSnapshot();
});
});