diff --git a/cypress/integration/ui/__snapshots__/scenario.js.snap b/cypress/integration/ui/__snapshots__/scenario.js.snap
index 33621388..e515aa6e 100644
--- a/cypress/integration/ui/__snapshots__/scenario.js.snap
+++ b/cypress/integration/ui/__snapshots__/scenario.js.snap
@@ -10,19 +10,7 @@ exports[`use various parts of svg-edit > check tool_source #0`] = `
y="480"
viewBox="0 0 640 480"
>
-
- Layer 1
-
-
+ Layer 1
`;
@@ -37,22 +25,11 @@ exports[`use various parts of svg-edit > check tool_fhpath #0`] = `
x="640"
y="480"
viewBox="0 0 640 480"
+ fill-opacity="1"
+ stroke-opacity="1"
>
Layer 1
-
`;
@@ -68,27 +45,17 @@ exports[`use various parts of svg-edit > check tool_text #0`] = `
x="640"
y="480"
viewBox="0 0 640 480"
+ fill-opacity="1"
+ stroke-opacity="1"
>
Layer 1
-
check tool_clone #0`] = `
x="640"
y="480"
viewBox="0 0 640 480"
+ fill-opacity="1"
+ stroke-opacity="1"
>
Layer 1
-
check tool_clone #0`] = `
fill="#000000"
stroke="#000000"
stroke-width="0"
- x="136"
- y="107"
+ x="66"
+ y="55"
font-size="24"
font-family="Serif"
text-anchor="middle"
@@ -176,27 +133,17 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = `
x="640"
y="480"
viewBox="0 0 640 480"
+ fill-opacity="1"
+ stroke-opacity="1"
>
Layer 1
-
check tool_italic #0`] = `
fill="#000000"
stroke="#000000"
stroke-width="0"
- x="136"
- y="107"
+ x="66"
+ y="55"
font-size="24"
font-family="Serif"
text-anchor="middle"
@@ -239,27 +186,17 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
x="640"
y="480"
viewBox="0 0 640 480"
+ fill-opacity="1"
+ stroke-opacity="1"
>
Layer 1
-
check tool_bold #0`] = `
fill="#000000"
stroke="#000000"
stroke-width="0"
- x="136"
- y="107"
+ x="66"
+ y="55"
font-size="24"
font-family="Serif"
text-anchor="middle"
@@ -292,7 +229,7 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
`;
-exports[`use various parts of svg-edit > check change color #0`] = `
+exports[`use various parts of svg-edit > check tool_text_change_x_y_coordinate #0`] = `
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_font_size #0`] = `
+
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_font_family #0`] = `
+
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_stroke_width #0`] = `
+
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_stroke_style #0`] = `
+
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_stoke_fill_color #0`] = `
+
`;
-exports[`use various parts of svg-edit > check tool_star #0`] = `
+exports[`use various parts of svg-edit > check tool_text_change_rotation #0`] = `
-
-
-
`;
-exports[`use various parts of svg-edit > check tool_polygon #0`] = `
+exports[`use various parts of svg-edit > check tool_text_change_blur #0`] = `
-
-
-
-
+
+
+
+
+
+
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_opacity #0`] = `
+
+`;
+
+exports[`use various parts of svg-edit > check tool_text_align_to_page #0`] = `
+
+`;
+
+exports[`use various parts of svg-edit > check tool_text_delete #0`] = `
+
`;
diff --git a/cypress/integration/ui/scenario.js b/cypress/integration/ui/scenario.js
index df1eec6a..0eb7ce25 100644
--- a/cypress/integration/ui/scenario.js
+++ b/cypress/integration/ui/scenario.js
@@ -18,7 +18,6 @@ describe('use various parts of svg-edit', function () {
.type(``, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click({ force: true });
@@ -27,7 +26,7 @@ describe('use various parts of svg-edit', function () {
it('check tool_fhpath', function () {
cy.get('#tool_fhpath')
.click({ force: true });
- cy.get('#rect')
+ cy.get('#svgcontent')
.trigger('mousemove', 200, 200, { force: true })
.trigger('mousedown', 200, 200, { force: true })
.trigger('mousemove', 20, 20, { force: true })
@@ -37,7 +36,7 @@ describe('use various parts of svg-edit', function () {
it('check tool_text', function () {
cy.get('#tool_text')
.click({ force: true });
- cy.get('#rect')
+ cy.get('#svgcontent')
.trigger('mousedown', 46, 35, { force: true })
.trigger('mouseup', { force: true });
// svgedit use the #text text field to capture the text
@@ -63,11 +62,64 @@ describe('use various parts of svg-edit', function () {
.click({ force: true });
testSnapshot();
});
- it('check change color', function () {
+ 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('#selected_x').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ 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 });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_text_change_font_size', function () {
cy.get('#svg_1').click({ force: true });
- cy.get('[data-rgb="#ffff00"]')
+ 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 });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_text_change_font_family', function () {
+ cy.get('#svg_1').click({ force: true });
+ cy.get('#tool_font_family').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
+ cy.get('#tool_font_family').find('se-list-item').eq(2).shadow().find('elix-option').eq(0)
.click({ force: true });
- testSnapshot();
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_text_change_stroke_width', function () {
+ 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 });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_text_change_stroke_style', function () {
+ cy.get('#svg_1').click({ force: true });
+ cy.get('#stroke_style').shadow().find('elix-dropdown-list').eq(0)
+ .invoke('attr', 'opened', 'opened');
+ cy.get('#stroke_style').find('se-list-item').eq(3).shadow().find('elix-option').eq(0)
+ .click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ 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('#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 });
+ 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 });
+ 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 });
+ 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 });
+ cy.get('#svgcontent').toMatchSnapshot();
});
it('check tool_text_anchor_start', function () {
cy.get('#svg_1').click({ force: true });
@@ -87,22 +139,60 @@ describe('use various parts of svg-edit', function () {
.click({ force: true });
testSnapshot();
});
- it('check tool_star', function () {
- cy.get('#tool_star')
- .click({ force: true });
- cy.get('#svgcontent')
- .trigger('mousedown', 300, 150, { force: true })
- .trigger('mousemove', 300, 250, { force: true })
- .trigger('mouseup', { 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('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
});
- it('check tool_polygon', function () {
- cy.get('#tool_polygon')
+ it('check tool_text_change_blur', function () {
+ 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 });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_text_change_opacity', function () {
+ 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 });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ 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('#tool_position').find('se-list-item').eq(2).shadow().find('elix-option').eq(0)
.click({ force: true });
- cy.get('#svgcontent')
- .trigger('mousedown', 350, 250, { force: true })
- .trigger('mousemove', 350, 370, { force: true })
- .trigger('mouseup', { force: true });
- testSnapshot();
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_text_change_class', function () {
+ 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 });
+ cy.get('#svg_2')
+ .should('satisfy', ($el) => {
+ 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('#elem_id').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
+ .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');
+ });
+ });
+ it('check tool_text_delete', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ cy.get('#tool_delete').click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
});
});