Improve test coverage with AI

Author: joeldrapper

src/morphlex.ts

@@ -538,9 +538,9 @@ class Morph {
 				if (
 					isElement(candidate) &&
 					element.localName === candidate.localName &&
-					((name !== "" && name === candidate.getAttribute("name")) ||
-						(href !== "" && href === candidate.getAttribute("href")) ||
-						(src !== "" && src === candidate.getAttribute("src")))
+					((name && name === candidate.getAttribute("name")) ||
+						(href && href === candidate.getAttribute("href")) ||
+						(src && src === candidate.getAttribute("src")))
 				) {
 					matches[i] = candidate
 					candidateElements.delete(candidate)

test/ai-gen-coverage/attribute-removal.browser.test.ts

@@ -0,0 +1,42 @@
+import { test, expect, describe } from "vitest"
+import { morph } from "../../src/morphlex"
+import { dom } from "../new/utils"
+
+describe("attribute removal edge cases", () => {
+	test("removing selected attribute from option with multiple options selected", () => {
+		const a = dom(`<select multiple><option value="a" selected>A</option><option value="b" selected>B</option></select>`) as HTMLSelectElement
+		const b = dom(`<select multiple><option value="a">A</option><option value="b" selected>B</option></select>`) as HTMLSelectElement
+
+		morph(a, b, { preserveChanges: true })
+
+		// Line 417-418: when selected === defaultSelected, we set selected = false
+		expect(a.options[0].hasAttribute("selected")).toBe(false)
+		expect(a.options[0].selected).toBe(false)
+	})
+
+	test("removing selected attribute preserves user selection when it differs from default", () => {
+		const a = dom(`<select><option value="a">A</option><option value="b" selected>B</option></select>`) as HTMLSelectElement
+		const b = dom(`<select><option value="a">A</option><option value="b">B</option></select>`) as HTMLSelectElement
+
+		// User changes selection - now selected !== defaultSelected
+		a.options[0].selected = true
+
+		morph(a, b, { preserveChanges: true })
+
+		// Should preserve the user's selection
+		expect(a.options[1].hasAttribute("selected")).toBe(false)
+		expect(a.options[0].selected).toBe(true)
+	})
+
+	test("removing checked attribute from checkbox when preserveChanges disabled", () => {
+		const a = dom(`<input type="checkbox" checked>`) as HTMLInputElement
+		const b = dom(`<input type="checkbox">`) as HTMLInputElement
+
+		a.checked = false
+
+		morph(a, b, { preserveChanges: false })
+
+		expect(a.hasAttribute("checked")).toBe(false)
+		expect(a.checked).toBe(false)
+	})
+})

test/ai-gen-coverage/input-localname-matching.browser.test.ts

@@ -0,0 +1,79 @@
+import { test, expect } from "vitest"
+import { morph } from "../../src/morphlex"
+import { dom } from "../new/utils"
+
+test("morphing inputs by localName with same types matches correctly", () => {
+	// This test ensures lines 566-568 are covered (the non-continue path)
+	// Inputs without id or name attributes fall through to localName matching
+	const a = dom(`<form><input type="email" class="first"><input type="email" class="second"></form>`) as HTMLElement
+	const b = dom(`<form><input type="email" placeholder="a"><input type="email" placeholder="b"></form>`) as HTMLElement
+
+	const first = a.children[0] as HTMLInputElement
+	const second = a.children[1] as HTMLInputElement
+
+	morph(a, b)
+
+	// Same type inputs should be reused via localName matching
+	expect(a.children[0]).toBe(first)
+	expect(a.children[1]).toBe(second)
+	expect((a.children[0] as HTMLInputElement).placeholder).toBe("a")
+	expect((a.children[1] as HTMLInputElement).placeholder).toBe("b")
+})
+
+test("morphing inputs with different types by localName skips mismatched types", () => {
+	// This test specifically targets lines 562-564 in morphlex.ts (the continue path)
+	// We need inputs without IDs or name attributes, so they fall through to localName matching
+	const a = dom(
+		`<div><input type="text" class="a"><input type="checkbox" class="b"><input type="text" class="c"></div>`,
+	) as HTMLElement
+	const b = dom(
+		`<div><input type="checkbox" class="x"><input type="text" class="y"><input type="text" class="z"></div>`,
+	) as HTMLElement
+
+	morph(a, b)
+
+	// The first input (text) can't match the first target (checkbox) due to type mismatch (line 563-564)
+	// So different elements should be created/replaced
+	const inputs = Array.from(a.children) as HTMLInputElement[]
+
+	expect(inputs[0].type).toBe("checkbox")
+	expect(inputs[0].className).toBe("x")
+	expect(inputs[1].type).toBe("text")
+	expect(inputs[1].className).toBe("y")
+	expect(inputs[2].type).toBe("text")
+	expect(inputs[2].className).toBe("z")
+})
+
+test("morphing option with selected attribute removed when matches default", () => {
+	// This test targets line 418 in morphlex.ts
+	const a = dom(
+		`<select multiple><option value="a" selected>A</option><option value="b" selected>B</option><option value="c">C</option></select>`,
+	) as HTMLSelectElement
+	const b = dom(
+		`<select multiple><option value="a">A</option><option value="b" selected>B</option><option value="c">C</option></select>`,
+	) as HTMLSelectElement
+
+	// First option has selected attribute, so selected === defaultSelected (both true)
+	const firstOption = a.options[0]
+	expect(firstOption.selected).toBe(true)
+
+	morph(a, b, { preserveChanges: true })
+
+	// Line 418: since selected === defaultSelected, we set selected = false
+	expect(a.options[0].selected).toBe(false)
+	expect(a.options[0].hasAttribute("selected")).toBe(false)
+})
+
+test("morphing option with selected attribute removed with preserveChanges false", () => {
+	// This test targets line 418 with preserveChanges: false branch
+	const a = dom(`<select><option value="a" selected>A</option><option value="b">B</option></select>`) as HTMLSelectElement
+	const b = dom(`<select><option value="a">A</option><option value="b">B</option></select>`) as HTMLSelectElement
+
+	// First option has selected attribute
+	expect(a.options[0].selected).toBe(true)
+
+	morph(a, b, { preserveChanges: false })
+
+	// Line 418: with preserveChanges false, we set selected = false
+	expect(a.options[0].hasAttribute("selected")).toBe(false)
+})

test/ai-gen-coverage/input-type-continue.browser.test.ts

@@ -0,0 +1,152 @@
+import { test, expect } from "vitest"
+import { morph } from "../../src/morphlex"
+import { dom } from "../new/utils"
+
+test("input type mismatch triggers continue - then finds matching type", () => {
+	// This test ensures we hit the continue statement on line 564
+	// by having two input candidates where:
+	// 1. First candidate has wrong type (continue is executed)
+	// 2. Second candidate has correct type (match succeeds)
+	const a = dom(
+		`<div>
+			<input type="text" data-marker="1">
+			<input type="checkbox" data-marker="2">
+		</div>`,
+	) as HTMLElement
+
+	const b = dom(
+		`<div>
+			<input type="checkbox" data-marker="new">
+		</div>`,
+	) as HTMLElement
+
+	morph(a, b)
+
+	// The checkbox should be reused, text input removed
+	expect(a.children.length).toBe(1)
+	expect((a.children[0] as HTMLInputElement).type).toBe("checkbox")
+	expect((a.children[0] as HTMLInputElement).getAttribute("data-marker")).toBe("new")
+})
+
+test("input type mismatch with multiple wrong types before match", () => {
+	// Multiple candidates with wrong types, continue is executed multiple times
+	const a = dom(
+		`<div>
+			<input type="text">
+			<input type="radio">
+			<input type="number">
+			<input type="email" data-id="target">
+		</div>`,
+	) as HTMLElement
+
+	const b = dom(
+		`<div>
+			<input type="email" data-id="new">
+		</div>`,
+	) as HTMLElement
+
+	morph(a, b)
+
+	// Text, radio, and number inputs trigger continue, email matches
+	expect(a.children.length).toBe(1)
+	expect((a.children[0] as HTMLInputElement).type).toBe("email")
+	expect((a.children[0] as HTMLInputElement).getAttribute("data-id")).toBe("new")
+})
+
+test("input type mismatch with no matching type - all trigger continue", () => {
+	// All candidates have wrong type, continue is executed for all, no match found
+	const a = dom(
+		`<div>
+			<input type="text">
+			<input type="checkbox">
+			<input type="radio">
+		</div>`,
+	) as HTMLElement
+
+	const b = dom(
+		`<div>
+			<input type="email">
+		</div>`,
+	) as HTMLElement
+
+	morph(a, b)
+
+	// No type matches, so new element is created, old ones removed
+	expect(a.children.length).toBe(1)
+	expect((a.children[0] as HTMLInputElement).type).toBe("email")
+})
+
+test("input with matching type does not trigger continue", () => {
+	// When types match, the continue branch is NOT taken
+	const a = dom(
+		`<div>
+			<input type="text" data-value="old">
+			<input type="text" data-value="old2">
+		</div>`,
+	) as HTMLElement
+
+	const b = dom(
+		`<div>
+			<input type="text" data-value="new">
+		</div>`,
+	) as HTMLElement
+
+	const firstInput = a.children[0]
+
+	morph(a, b)
+
+	// First text input matches without triggering continue
+	expect(a.children.length).toBe(1)
+	expect(a.children[0]).toBe(firstInput)
+	expect((a.children[0] as HTMLInputElement).getAttribute("data-value")).toBe("new")
+})
+
+test("non-input elements skip the type check entirely", () => {
+	// isInputElement checks prevent non-inputs from entering the type check
+	const a = dom(
+		`<div>
+			<button data-test="1">A</button>
+			<button data-test="2">B</button>
+		</div>`,
+	) as HTMLElement
+
+	const b = dom(
+		`<div>
+			<button data-test="new">C</button>
+		</div>`,
+	) as HTMLElement
+
+	const firstButton = a.children[0]
+
+	morph(a, b)
+
+	// Buttons match by localName without any type checking
+	expect(a.children.length).toBe(1)
+	expect(a.children[0]).toBe(firstButton)
+	expect(a.children[0].getAttribute("data-test")).toBe("new")
+})
+
+test("mixed inputs and non-inputs in localName matching", () => {
+	// Ensure the logic handles both inputs and non-inputs correctly
+	const a = dom(
+		`<div>
+			<input type="text">
+			<button>Button</button>
+			<input type="email" class="target">
+		</div>`,
+	) as HTMLElement
+
+	const b = dom(
+		`<div>
+			<input type="email" class="new">
+			<button>New Button</button>
+		</div>`,
+	) as HTMLElement
+
+	morph(a, b)
+
+	// Email input and button should both be matched
+	expect(a.children.length).toBe(2)
+	expect((a.children[0] as HTMLInputElement).type).toBe("email")
+	expect(a.children[1].tagName).toBe("BUTTON")
+})

test/ai-gen-coverage/input-type-mismatch.browser.test.ts

@@ -0,0 +1,105 @@
+import { test, expect, describe } from "vitest"
+import { morph } from "../../src/morphlex"
+import { dom } from "../new/utils"
+
+describe("input type mismatch", () => {
+	test("morphing inputs with different types treats them as different elements", () => {
+		const a = dom(`<div><input type="text" id="a"><input type="checkbox" id="b"></div>`) as HTMLElement
+		const b = dom(`<div><input type="checkbox" id="a"><input type="text" id="b"></div>`) as HTMLElement
+
+		morph(a, b)
+
+		const firstInput = a.querySelector("#a") as HTMLInputElement
+		const secondInput = a.querySelector("#b") as HTMLInputElement
+
+		expect(firstInput.type).toBe("checkbox")
+		expect(secondInput.type).toBe("text")
+	})
+
+	test("morphing inputs with same type but different order", () => {
+		const a = dom(`<div><input type="text" id="a" value="first"><input type="text" id="b" value="second"></div>`) as HTMLElement
+		const b = dom(`<div><input type="text" id="b" value="second"><input type="text" id="a" value="first"></div>`) as HTMLElement
+
+		morph(a, b)
+
+		const firstInput = a.firstElementChild as HTMLInputElement
+		const secondInput = a.lastElementChild as HTMLInputElement
+
+		expect(firstInput.id).toBe("b")
+		expect(firstInput.value).toBe("second")
+		expect(secondInput.id).toBe("a")
+		expect(secondInput.value).toBe("first")
+	})
+
+	test("morphing text input to number input creates new element", () => {
+		const a = dom(`<div><input type="text" value="hello"></div>`) as HTMLElement
+		const b = dom(`<div><input type="number" value="123"></div>`) as HTMLElement
+
+		const originalInput = a.firstElementChild
+		morph(a, b)
+		const newInput = a.firstElementChild as HTMLInputElement
+
+		// Different types should result in element replacement
+		expect(newInput.type).toBe("number")
+		expect(newInput.value).toBe("123")
+	})
+
+	test("morphing checkbox to radio creates new element", () => {
+		const a = dom(`<div><input type="checkbox" checked></div>`) as HTMLElement
+		const b = dom(`<div><input type="radio" name="test"></div>`) as HTMLElement
+
+		morph(a, b)
+		const newInput = a.firstElementChild as HTMLInputElement
+
+		expect(newInput.type).toBe("radio")
+		expect(newInput.name).toBe("test")
+	})
+
+	test("morphing inputs with same type uses localName matching", () => {
+		const a = dom(`<div><input type="text" value="a"><input type="text" value="b"></div>`) as HTMLElement
+		const b = dom(`<div><input type="text" value="x"><input type="text" value="y"></div>`) as HTMLElement
+
+		const firstInput = a.children[0] as HTMLInputElement
+		const secondInput = a.children[1] as HTMLInputElement
+
+		morph(a, b)
+
+		// Lines 566-568: inputs match by localName and type, so they're reused
+		expect(a.children[0]).toBe(firstInput)
+		expect(a.children[1]).toBe(secondInput)
+		expect((a.children[0] as HTMLInputElement).value).toBe("x")
+		expect((a.children[1] as HTMLInputElement).value).toBe("y")
+	})
+
+	test("morphing mixed inputs where some types match and some don't", () => {
+		const a = dom(`<div><input type="text" id="1"><input type="checkbox" id="2"><input type="text" id="3"></div>`) as HTMLElement
+		const b = dom(`<div><input type="text" id="a"><input type="radio" id="b"><input type="text" id="c"></div>`) as HTMLElement
+
+		morph(a, b)
+
+		// First and third should reuse text inputs, middle should be replaced
+		const inputs = Array.from(a.children) as HTMLInputElement[]
+		expect(inputs[0].type).toBe("text")
+		expect(inputs[0].id).toBe("a")
+		expect(inputs[1].type).toBe("radio")
+		expect(inputs[1].id).toBe("b")
+		expect(inputs[2].type).toBe("text")
+		expect(inputs[2].id).toBe("c")
+	})
+
+	test("morphing inputs without IDs triggers localName matching with type check", () => {
+		const a = dom(`<div><input type="text" class="a"><input type="number" class="b"></div>`) as HTMLElement
+		const b = dom(`<div><input type="text" class="x"><input type="number" class="y"></div>`) as HTMLElement
+
+		const firstInput = a.children[0] as HTMLInputElement
+		const secondInput = a.children[1] as HTMLInputElement
+
+		morph(a, b)
+
+		// Lines 566-568: same-type inputs are matched and reused via localName
+		expect(a.children[0]).toBe(firstInput)
+		expect(a.children[1]).toBe(secondInput)
+		expect((a.children[0] as HTMLInputElement).className).toBe("x")
+		expect((a.children[1] as HTMLInputElement).className).toBe("y")
+	})
+})