change domMock setProperty/removeProperty to writable and simplify wr…

…apping properties
MithrilJS · Nov 18, 2024 · d1e247b · d1e247b
1 parent 8f55ffb
commit d1e247b
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 43 deletions.
diff --git a/render/tests/test-updateElement.js b/render/tests/test-updateElement.js
@@ -257,7 +257,7 @@ o.spec("updateElement", function() {
 
 		}
 	})
-	o("use style property setter only when cameCase keys", function() {
+	o.only("use style property setter only when cameCase keys", function() {
 		var spySetProperty = o.spy()
 		var spyRemoveProperty = o.spy()
 		var spyDashed1 = o.spy()
@@ -266,26 +266,20 @@ o.spec("updateElement", function() {
 		var spyCamelCase1 = o.spy()
 		var spyCamelCase2 = o.spy()
 
-		var f = $window.document.createElement
-		$window.document.createElement = function(tag, is){
-			var el = f(tag, is)
-
-			var style = {}
-			Object.defineProperties(style, {
-				setProperty: {value: spySetProperty},
-				removeProperty: {value: spyRemoveProperty},
-				/* eslint-disable accessor-pairs */
-				"background-color": {set: spyDashed1},
-				"-webkit-border-radius": {set: spyDashed2},
-				"--foo": {set: spyDashed3},
-				backgroundColor: {set: spyCamelCase1},
-				color: {set: spyCamelCase2}
-				/* eslint-enable accessor-pairs */
-			})
-
-			Object.defineProperty(el, "style", {value: style})
-			return el
-		}
+		render(root, m("a"))
+		var el = root.firstChild
+
+		el.style.setProperty = spySetProperty
+		el.style.removeProperty = spyRemoveProperty
+		Object.defineProperties(el.style, {
+			/* eslint-disable accessor-pairs */
+			"background-color": {set: spyDashed1},
+			"-webkit-border-radius": {set: spyDashed2},
+			"--foo": {set: spyDashed3},
+			backgroundColor: {set: spyCamelCase1},
+			color: {set: spyCamelCase2}
+			/* eslint-enable accessor-pairs */
+		})
 
 		// sets dashed properties
 		render(root, m("a", {
@@ -295,6 +289,10 @@ o.spec("updateElement", function() {
 				"--foo": "bar"
 			}
 		}))
+		o(spySetProperty.callCount).equals(3)
+		o(spySetProperty.calls[0].args).deepEquals(["background-color", "red"])
+		o(spySetProperty.calls[1].args).deepEquals(["-webkit-border-radius", "10px"])
+		o(spySetProperty.calls[2].args).deepEquals(["--foo", "bar"])
 
 		// sets camelCase properties and removes dashed properties
 		render(root, m("a", {
@@ -303,32 +301,30 @@ o.spec("updateElement", function() {
 				color: "red",
 			}
 		}))
+		o(spyCamelCase1.callCount).equals(1)
+		o(spyCamelCase2.callCount).equals(1)
+		o(spyCamelCase1.calls[0].args).deepEquals(["green"])
+		o(spyCamelCase2.calls[0].args).deepEquals(["red"])
+		o(spyRemoveProperty.callCount).equals(3)
+		o(spyRemoveProperty.calls[0].args).deepEquals(["background-color"])
+		o(spyRemoveProperty.calls[1].args).deepEquals(["-webkit-border-radius"])
+		o(spyRemoveProperty.calls[2].args).deepEquals(["--foo"])
 
 		// updates "color" and removes "backgroundColor"
 		render(root, m("a", {style: {color: "blue"}}))
+		o(spyCamelCase1.callCount).equals(2) // set and remove
+		o(spyCamelCase2.callCount).equals(2) // set and update
+		o(spyCamelCase1.calls[1].args).deepEquals([""])
+		o(spyCamelCase2.calls[1].args).deepEquals(["blue"])
 
-		// setProperty (for dashed properties)
+		// unchanged by camelCase properties
 		o(spySetProperty.callCount).equals(3)
-		o(spySetProperty.calls[0].args).deepEquals(["background-color", "red"])
-		o(spySetProperty.calls[1].args).deepEquals(["-webkit-border-radius", "10px"])
-		o(spySetProperty.calls[2].args).deepEquals(["--foo", "bar"])
-
-		// removeProperty (for dashed properties)
 		o(spyRemoveProperty.callCount).equals(3)
-		o(spyRemoveProperty.calls[0].args).deepEquals(["background-color"])
-		o(spyRemoveProperty.calls[1].args).deepEquals(["-webkit-border-radius"])
-		o(spyRemoveProperty.calls[2].args).deepEquals(["--foo"])
 
-		// property setter (for camelCase properties)
+		// never calls dashed property setter
 		o(spyDashed1.callCount).equals(0)
 		o(spyDashed2.callCount).equals(0)
 		o(spyDashed3.callCount).equals(0)
-		o(spyCamelCase1.callCount).equals(2) // set and remove
-		o(spyCamelCase2.callCount).equals(2) // set and update
-		o(spyCamelCase1.calls[0].args).deepEquals(["green"])
-		o(spyCamelCase1.calls[1].args).deepEquals([""])
-		o(spyCamelCase2.calls[0].args).deepEquals(["red"])
-		o(spyCamelCase2.calls[1].args).deepEquals(["blue"])
 	})
 	o("replaces el", function() {
 		var vnode = m("a")

diff --git a/test-utils/domMock.js b/test-utils/domMock.js
@@ -284,12 +284,18 @@ module.exports = function(options) {
 					getPropertyValue: {value: function(key){
 						return style[key]
 					}},
-					removeProperty: {value: function(key){
-						style[key] = style[camelCase(key)] = ""
-					}},
-					setProperty: {value: function(key, value){
-						style[key] = style[camelCase(key)] = value
-					}}
+					removeProperty: {
+						writable: true,
+						value: function(key){
+							style[key] = style[camelCase(key)] = ""
+						}
+					},
+					setProperty: {
+						writable: true,
+						value: function(key, value){
+							style[key] = style[camelCase(key)] = value
+						}
+					}
 				})
 				var events = {}
 				var element = {