jsdialog: correctly setup & test value for spinfields backport/5107/distro/collabora/co-21-11

Adding attribute by jQuery and testing in cypress was
not working: visible value was correct after change but
in DOM we had original value which was tested by Cypress.

Use val() to setup value and have.value for cypress to test.

Unify inputs so we don't use attributes but always props.

Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
Change-Id: I1b3acccbd6d4ba493f867044b9b3c1f17b16873e

9 files changed, 51 insertions, 57 deletions

diff --git a/browser/src/control/Control.JSDialogBuilder.js b/browser/src/control/Control.JSDialogBuilder.js
index b4f7dd0901..7669382656 100644
--- a/browser/src/control/Control.JSDialogBuilder.js
+++ b/browser/src/control/Control.JSDialogBuilder.js
@@ -1313,7 +1313,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			else if (data.children && data.children.length)
 				value = data.children[0].text;
 
-			$(controls.spinfield).attr('value', builder._cleanValueFromUnits(value));
+			$(controls.spinfield).val(builder._cleanValueFromUnits(value));
 		};
 
 		controls.spinfield.addEventListener('change', function() {
@@ -1347,7 +1347,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		builder.listenNumericChanges(data, builder, controls, customCallback);
 
 		value = parseFloat(data.value);
-		$(controls.spinfield).attr('value', value);
+		$(controls.spinfield).val(value);
 
 		return false;
 	},
@@ -1359,7 +1359,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		builder.listenNumericChanges(data, builder, controls, customCallback);
 
 		value = parseFloat(data.value);
-		$(controls.spinfield).attr('value', value);
+		$(controls.spinfield).val(value);
 
 		return false;
 	},
diff --git a/cypress_test/integration_tests/common/helper.js b/cypress_test/integration_tests/common/helper.js
index b43eb4d54a..66a627b774 100644
--- a/cypress_test/integration_tests/common/helper.js
+++ b/cypress_test/integration_tests/common/helper.js
@@ -1211,8 +1211,7 @@ function overlayItemHasDifferentBoundsThan(itemDivId, bounds) {
 // selector - selector to find the correct input item in the DOM.
 // text - string to type in (can contain cypress command strings).
 // clearBefore - whether clear the existing content or not.
-// prop - whether the value is set as property or attribute (depends on implementation).
-function typeIntoInputField(selector, text, clearBefore = true, prop = true)
+function typeIntoInputField(selector, text, clearBefore = true)
 {
 	cy.log('Typing into input field - start.');
 
@@ -1226,13 +1225,8 @@ function typeIntoInputField(selector, text, clearBefore = true, prop = true)
 			.type(text + '{enter}');
 	}
 
-	if (prop) {
-		cy.get(selector)
-			.should('have.prop', 'value', text);
-	} else {
-		cy.get(selector)
-			.should('have.attr', 'value', text);
-	}
+	cy.get(selector)
+		.should('have.value', text);
 
 	cy.log('Typing into input field - end.');
 }
diff --git a/cypress_test/integration_tests/desktop/writer/table_operation_spec.js b/cypress_test/integration_tests/desktop/writer/table_operation_spec.js
index 2412265b67..32510b0976 100644
--- a/cypress_test/integration_tests/desktop/writer/table_operation_spec.js
+++ b/cypress_test/integration_tests/desktop/writer/table_operation_spec.js
@@ -180,7 +180,7 @@ describe('Table operations', function() {
 	it('Change row height.', function() {
 		if (mode === 'classic') {
 			cy.get('#rowheight .spinfield')
-				.should('have.attr', 'value', '0');
+				.should('have.value', '0');
 
 			helper.typeIntoInputField('#rowheight .spinfield', '1.4', true, false);
 
diff --git a/cypress_test/integration_tests/mobile/calc/number_format_spec.js b/cypress_test/integration_tests/mobile/calc/number_format_spec.js
index d62bf76ee0..81c311fc89 100644
--- a/cypress_test/integration_tests/mobile/calc/number_format_spec.js
+++ b/cypress_test/integration_tests/mobile/calc/number_format_spec.js
@@ -41,10 +41,10 @@ describe('Apply number formatting.', function() {
 
 		// Decimal and leading zeros are changed.
 		cy.get('#decimalplaces input')
-			.should('have.attr', 'value', '2');
+			.should('have.value', '2');
 
 		cy.get('#leadingzeroes input')
-			.should('have.attr', 'value', '1');
+			.should('have.value', '1');
 
 		calcHelper.selectEntireSheet();
 
@@ -68,10 +68,10 @@ describe('Apply number formatting.', function() {
 
 		// Decimal and leading zeros are changed.
 		cy.get('#decimalplaces input')
-			.should('have.attr', 'value', '2');
+			.should('have.value', '2');
 
 		cy.get('#leadingzeroes input')
-			.should('have.attr', 'value', '1');
+			.should('have.value', '1');
 
 		calcHelper.selectEntireSheet();
 
@@ -92,10 +92,10 @@ describe('Apply number formatting.', function() {
 
 		// Decimal and leading zeros are changed.
 		cy.get('#decimalplaces input')
-			.should('have.attr', 'value', '2');
+			.should('have.value', '2');
 
 		cy.get('#leadingzeroes input')
-			.should('have.attr', 'value', '1');
+			.should('have.value', '1');
 
 		calcHelper.selectEntireSheet();
 
@@ -119,10 +119,10 @@ describe('Apply number formatting.', function() {
 
 		// Decimal and leading zeros are changed.
 		cy.get('#decimalplaces input')
-			.should('have.attr', 'value', '2');
+			.should('have.value', '2');
 
 		cy.get('#leadingzeroes input')
-			.should('have.attr', 'value', '1');
+			.should('have.value', '1');
 
 		calcHelper.selectEntireSheet();
 
@@ -144,10 +144,10 @@ describe('Apply number formatting.', function() {
 
 		// Decimal and leading zeros are changed.
 		cy.get('#decimalplaces input')
-			.should('have.attr', 'value', '2');
+			.should('have.value', '2');
 
 		cy.get('#leadingzeroes input')
-			.should('have.attr', 'value', '1');
+			.should('have.value', '1');
 
 		calcHelper.selectEntireSheet();
 
@@ -194,10 +194,10 @@ describe('Apply number formatting.', function() {
 
 		// Decimal and leading zeros are changed.
 		cy.get('#decimalplaces input')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 
 		cy.get('#leadingzeroes input')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 
 		calcHelper.selectEntireSheet();
 
@@ -218,10 +218,10 @@ describe('Apply number formatting.', function() {
 
 		// Decimal and leading zeros are changed.
 		cy.get('#decimalplaces input')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 
 		cy.get('#leadingzeroes input')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 
 		calcHelper.selectEntireSheet();
 
@@ -242,10 +242,10 @@ describe('Apply number formatting.', function() {
 
 		// Decimal and leading zeros are changed.
 		cy.get('#decimalplaces input')
-			.should('have.attr', 'value', '2');
+			.should('have.value', '2');
 
 		cy.get('#leadingzeroes input')
-			.should('have.attr', 'value', '1');
+			.should('have.value', '1');
 
 		calcHelper.selectEntireSheet();
 
@@ -263,10 +263,10 @@ describe('Apply number formatting.', function() {
 
 		// Decimal and leading zeros are changed.
 		cy.get('#decimalplaces input')
-			.should('have.attr', 'value', '1');
+			.should('have.value', '1');
 
 		cy.get('#leadingzeroes input')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 
 		calcHelper.selectEntireSheet();
 
@@ -284,10 +284,10 @@ describe('Apply number formatting.', function() {
 
 		// Decimal and leading zeros are changed.
 		cy.get('#decimalplaces input')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 
 		cy.get('#leadingzeroes input')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 
 		calcHelper.selectEntireSheet();
 
@@ -305,10 +305,10 @@ describe('Apply number formatting.', function() {
 
 		// Decimal and leading zeros are changed.
 		cy.get('#decimalplaces input')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 
 		cy.get('#leadingzeroes input')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 
 		calcHelper.selectEntireSheet();
 
@@ -324,7 +324,7 @@ describe('Apply number formatting.', function() {
 	it('Change decimal places.', function() {
 		// Check default value
 		cy.get('#decimalplaces input')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 
 		// Type in a new value
 		helper.typeIntoInputField('#decimalplaces input', '2', true, false);
@@ -343,7 +343,7 @@ describe('Apply number formatting.', function() {
 	it('Change leading zeros.', function() {
 		// Check default value
 		cy.get('#leadingzeroes input')
-			.should('have.attr', 'value', '1');
+			.should('have.value', '1');
 
 		// Type in a new value
 		helper.typeIntoInputField('#leadingzeroes input', '6', true, false);
diff --git a/cypress_test/integration_tests/mobile/writer/apply_paragraph_properties_spec.js b/cypress_test/integration_tests/mobile/writer/apply_paragraph_properties_spec.js
index 1fef35976c..54fdbc7854 100644
--- a/cypress_test/integration_tests/mobile/writer/apply_paragraph_properties_spec.js
+++ b/cypress_test/integration_tests/mobile/writer/apply_paragraph_properties_spec.js
@@ -180,34 +180,34 @@ describe.skip('Apply paragraph properties.', function() {
 	it('Change para spacing via combobox.', function() {
 		// Check para spacing current value
 		cy.get('#aboveparaspacing .spinfield')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 		cy.get('#belowparaspacing .spinfield')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 
 		// Change spacing
 		helper.clickOnIdle('#aboveparaspacing .plus');
 		cy.get('#aboveparaspacing .spinfield')
-			.should('have.attr', 'value', '0.01');
+			.should('have.value', '0.01');
 
 		helper.clickOnIdle('#aboveparaspacing .plus');
 		cy.get('#aboveparaspacing .spinfield')
-			.should('have.attr', 'value', '0.02');
+			.should('have.value', '0.02');
 
 		helper.clickOnIdle('#aboveparaspacing .plus');
 		cy.get('#aboveparaspacing .spinfield')
-			.should('have.attr', 'value', '0.03');
+			.should('have.value', '0.03');
 
 		helper.clickOnIdle('#aboveparaspacing .plus');
 		cy.get('#aboveparaspacing .spinfield')
-			.should('have.attr', 'value', '0.04');
+			.should('have.value', '0.04');
 
 		helper.clickOnIdle('#aboveparaspacing .minus');
 		cy.get('#aboveparaspacing .spinfield')
-			.should('have.attr', 'value', '0.03');
+			.should('have.value', '0.03');
 
 		helper.clickOnIdle('#belowparaspacing .plus');
 		cy.get('#belowparaspacing .spinfield')
-			.should('have.attr', 'value', '0.01');
+			.should('have.value', '0.01');
 
 		writerHelper.selectAllTextOfDoc();
 
@@ -254,11 +254,11 @@ describe.skip('Apply paragraph properties.', function() {
 		// Change indent
 		helper.clickOnIdle('#beforetextindent .plus');
 		cy.get('#beforetextindent .spinfield')
-			.should('have.attr', 'value', '0.01');
+			.should('have.value', '0.01');
 
 		helper.clickOnIdle('#beforetextindent .plus');
 		cy.get('#beforetextindent .spinfield')
-			.should('have.attr', 'value', '0.02');
+			.should('have.value', '0.02');
 
 		writerHelper.selectAllTextOfDoc();
 
@@ -271,11 +271,11 @@ describe.skip('Apply paragraph properties.', function() {
 		// Change indent
 		helper.clickOnIdle('#aftertextindent .plus');
 		cy.get('#aftertextindent .spinfield')
-			.should('have.attr', 'value', '0.01');
+			.should('have.value', '0.01');
 
 		helper.clickOnIdle('#aftertextindent .plus');
 		cy.get('#aftertextindent .spinfield')
-			.should('have.attr', 'value', '0.02');
+			.should('have.value', '0.02');
 
 		writerHelper.selectAllTextOfDoc();
 
@@ -288,11 +288,11 @@ describe.skip('Apply paragraph properties.', function() {
 		// Increase firstline indent
 		helper.clickOnIdle('#firstlineindent .plus');
 		cy.get('#firstlineindent .spinfield')
-			.should('have.attr', 'value', '0.01');
+			.should('have.value', '0.01');
 
 		helper.clickOnIdle('#firstlineindent .plus');
 		cy.get('#firstlineindent .spinfield')
-			.should('have.attr', 'value', '0.02');
+			.should('have.value', '0.02');
 
 		writerHelper.selectAllTextOfDoc();
 
diff --git a/cypress_test/integration_tests/mobile/writer/focus_spec.js b/cypress_test/integration_tests/mobile/writer/focus_spec.js
index 273e9dc55a..f8c163a012 100644
--- a/cypress_test/integration_tests/mobile/writer/focus_spec.js
+++ b/cypress_test/integration_tests/mobile/writer/focus_spec.js
@@ -54,7 +54,7 @@ describe('Focus tests', function() {
 		helper.clickOnIdle('#Paragraph');
 
 		cy.get('#aboveparaspacing .spinfield')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 
 		helper.clickOnIdle('#aboveparaspacing .spinfield');
 
diff --git a/cypress_test/integration_tests/mobile/writer/hamburger_menu_spec.js b/cypress_test/integration_tests/mobile/writer/hamburger_menu_spec.js
index 8a5f610549..76eb33f24e 100644
--- a/cypress_test/integration_tests/mobile/writer/hamburger_menu_spec.js
+++ b/cypress_test/integration_tests/mobile/writer/hamburger_menu_spec.js
@@ -481,7 +481,7 @@ describe('Trigger hamburger menu options.', function() {
 			.should('have.text', 'User');
 
 		cy.get('#paperwidth .spinfield')
-			.should('have.attr', 'value', '12');
+			.should('have.value', '12');
 	});
 
 	it('Page setup: change paper height.', function() {
@@ -501,7 +501,7 @@ describe('Trigger hamburger menu options.', function() {
 			.should('have.text', 'User');
 
 		cy.get('#paperheight .spinfield')
-			.should('have.attr', 'value', '3');
+			.should('have.value', '3');
 	});
 
 	it('Page setup: change orientation.', function() {
diff --git a/cypress_test/integration_tests/mobile/writer/shape_properties_spec.js b/cypress_test/integration_tests/mobile/writer/shape_properties_spec.js
index 11b2408b16..ea3d5e1313 100644
--- a/cypress_test/integration_tests/mobile/writer/shape_properties_spec.js
+++ b/cypress_test/integration_tests/mobile/writer/shape_properties_spec.js
@@ -326,7 +326,7 @@ describe('Change shape properties via mobile wizard.', function() {
 		helper.inputOnIdle('#gradangle .spinfield', '100');
 
 		cy.get('#gradangle .spinfield')
-			.should('have.attr', 'value', '100');
+			.should('have.value', '100');
 
 		// Select To color
 		helper.clickOnIdle('#fillgrad2');
@@ -460,7 +460,7 @@ describe('Change shape properties via mobile wizard.', function() {
 		helper.inputOnIdle('#settransparency .spinfield', '50');
 
 		cy.get('#settransparency .spinfield')
-			.should('have.attr', 'value', '50');
+			.should('have.value', '50');
 
 		cy.get('#transtype .ui-header-left')
 			.should('have.text', 'Solid');
diff --git a/cypress_test/integration_tests/mobile/writer/table_properties_spec.js b/cypress_test/integration_tests/mobile/writer/table_properties_spec.js
index 00b2cb9b3e..f5eee6a118 100644
--- a/cypress_test/integration_tests/mobile/writer/table_properties_spec.js
+++ b/cypress_test/integration_tests/mobile/writer/table_properties_spec.js
@@ -231,7 +231,7 @@ describe('Change table properties / layout via mobile wizard.', function() {
 		openTablePanel();
 
 		cy.get('#rowheight .spinfield')
-			.should('have.attr', 'value', '0');
+			.should('have.value', '0');
 
 		helper.typeIntoInputField('#rowheight .spinfield', '1.4', true, false);