From cffccb1dce5951afeeac1e40af864ef224dbed73 Mon Sep 17 00:00:00 2001
From: Patrick Nelson <patnelson@ebay.com>
Date: Tue, 5 Dec 2023 19:11:46 -0800
Subject: [PATCH] Issue #34: Refactoring existing attribute test to
 AttributeCase and converting to using querySelector instead of the old
 original naive HTML comparison tests.

---
 ...Attributes.svelte => AttributeCase.svelte} |   6 +-
 tests/AttributeCase.test.js                   |  80 ++++++++++++++
 tests/TestAttributes.test.js                  | 100 ------------------
 3 files changed, 83 insertions(+), 103 deletions(-)
 rename tests/{TestAttributes.svelte => AttributeCase.svelte} (51%)
 create mode 100644 tests/AttributeCase.test.js
 delete mode 100644 tests/TestAttributes.test.js

diff --git a/tests/TestAttributes.svelte b/tests/AttributeCase.svelte
similarity index 51%
rename from tests/TestAttributes.svelte
rename to tests/AttributeCase.svelte
index d723561..6340cad 100644
--- a/tests/TestAttributes.svelte
+++ b/tests/AttributeCase.svelte
@@ -5,14 +5,14 @@
 </script>
 
 {#if lowercase}
-	<div>lowercase: {lowercase}</div>
+	<div>lowercase: <span class="lower">{lowercase}</span></div>
 {/if}
 
 {#if camelCase}
-	<div>camelCase: {camelCase}</div>
+	<div>camelCase: <span class="camel">{camelCase}</span></div>
 {/if}
 
 {#if UPPERCASE}
-	<div>UPPERCASE: {UPPERCASE}</div>
+	<div>UPPERCASE: <span class="upper">{UPPERCASE}</span></div>
 {/if}
 
diff --git a/tests/AttributeCase.test.js b/tests/AttributeCase.test.js
new file mode 100644
index 0000000..9518419
--- /dev/null
+++ b/tests/AttributeCase.test.js
@@ -0,0 +1,80 @@
+import { describe, beforeAll, afterAll, afterEach, test, expect, vi } from 'vitest';
+import AttributeCase from './AttributeCase.svelte';
+import svelteRetag from '../index.js';
+import { syncRaf } from './test-utils.js';
+
+let el = null;
+
+describe('Case: Test custom element attribute name case sensitivity', () => {
+	beforeAll(() => {
+		svelteRetag({ component: AttributeCase, tagname: 'attrib-case', shadow: false });
+
+		vi.spyOn(window, 'requestAnimationFrame').mockImplementation(syncRaf);
+	});
+
+	afterEach(() => {
+		if (el) {
+			el.remove();
+		}
+	});
+
+	afterAll(() => {
+		window.requestAnimationFrame.mockRestore();
+	});
+
+	test('all: lowercase attributes', () => {
+
+		el = document.createElement('div');
+		el.innerHTML = '<attrib-case lowercase="SET" camelcase="SET" uppercase="SET"></attrib-case>';
+		document.body.appendChild(el);
+
+		expect(el.querySelector('.lower').innerHTML).toBe('SET');
+		expect(el.querySelector('.camel').innerHTML).toBe('SET');
+		expect(el.querySelector('.upper').innerHTML).toBe('SET');
+	});
+
+	test('all: uppercase attributes', () => {
+
+		el = document.createElement('div');
+		el.innerHTML = '<attrib-case LOWERCASE="SET" CAMELCASE="SET" UPPERCASE="SET"></attrib-case>';
+		document.body.appendChild(el);
+
+		expect(el.querySelector('.lower').innerHTML).toBe('SET');
+		expect(el.querySelector('.camel').innerHTML).toBe('SET');
+		expect(el.querySelector('.upper').innerHTML).toBe('SET');
+	});
+
+	test('all: mixed case attributes', () => {
+
+		el = document.createElement('div');
+		el.innerHTML = '<attrib-case lOwErCaSe="SET" cAmElCaSe="SET" uPpErCaSe="SET"></attrib-case>';
+		document.body.appendChild(el);
+
+		expect(el.querySelector('.lower').innerHTML).toBe('SET');
+		expect(el.querySelector('.camel').innerHTML).toBe('SET');
+		expect(el.querySelector('.upper').innerHTML).toBe('SET');
+	});
+
+	test('explicitly empty', () => {
+
+		el = document.createElement('div');
+		el.innerHTML = '<attrib-case lowercase="" camelcase="" uppercase=""></attrib-case>';
+		document.body.appendChild(el);
+
+		expect(el.querySelector('.lower')).toBe(null);
+		expect(el.querySelector('.camel')).toBe(null);
+		expect(el.querySelector('.upper')).toBe(null);
+	});
+
+	test('implicitly empty', () => {
+
+		el = document.createElement('div');
+		el.innerHTML = '<attrib-case></attrib-case>';
+		document.body.appendChild(el);
+
+		expect(el.querySelector('.lower').innerHTML).toBe('default');
+		expect(el.querySelector('.camel').innerHTML).toBe('default');
+		expect(el.querySelector('.upper').innerHTML).toBe('default');
+	});
+
+});
diff --git a/tests/TestAttributes.test.js b/tests/TestAttributes.test.js
deleted file mode 100644
index 427cbed..0000000
--- a/tests/TestAttributes.test.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import { describe, beforeAll, afterAll, afterEach, test, expect, vi } from 'vitest';
-import TestAttributes from './TestAttributes.svelte';
-import svelteRetag from '../index.js';
-import { normalizeWhitespace, syncRaf } from './test-utils.js';
-
-let el = null;
-
-describe('Test custom element attributes', () => {
-	beforeAll(() => {
-		svelteRetag({ component: TestAttributes, tagname: 'test-attribs', shadow: false });
-
-		vi.spyOn(window, 'requestAnimationFrame').mockImplementation(syncRaf);
-	});
-
-	afterEach(() => {
-		if (el) {
-			el.remove();
-		}
-	});
-
-	afterAll(() => {
-		window.requestAnimationFrame.mockRestore();
-	});
-
-	let allSetOutput = `
-		<test-attribs lowercase="SET" camelcase="SET" uppercase="SET">
-			<svelte-retag>
-				<div>lowercase: SET</div>
-				<div>camelCase: SET</div>
-				<div>UPPERCASE: SET</div>
-				<!--<TestAttributes>-->
-			</svelte-retag>
-		</test-attribs>
-	`;
-
-	test('all: lowercase attributes', () => {
-
-		el = document.createElement('div');
-		el.innerHTML = '<test-attribs lowercase="SET" camelcase="SET" uppercase="SET"></test-attribs>';
-		document.body.appendChild(el);
-
-		expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(allSetOutput));
-	});
-
-	test('all: uppercase attributes', () => {
-
-		el = document.createElement('div');
-		el.innerHTML = '<test-attribs LOWERCASE="SET" CAMELCASE="SET" UPPERCASE="SET"></test-attribs>';
-		document.body.appendChild(el);
-
-		expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(allSetOutput));
-	});
-
-	test('all: mixed case attributes', () => {
-
-		el = document.createElement('div');
-		el.innerHTML = '<test-attribs lOwErCaSe="SET" cAmElCaSe="SET" uPpErCaSe="SET"></test-attribs>';
-		document.body.appendChild(el);
-
-		expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(allSetOutput));
-	});
-
-	test('explicitly empty', () => {
-
-		el = document.createElement('div');
-		el.innerHTML = '<test-attribs lowercase="" camelcase="" uppercase=""></test-attribs>';
-		document.body.appendChild(el);
-
-		let expectedOutput = `
-		<test-attribs lowercase="" camelcase="" uppercase="">
-			<svelte-retag>
-				<!--<TestAttributes>-->
-			</svelte-retag>
-		</test-attribs>
-	`;
-
-		expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(expectedOutput));
-	});
-
-	test('implicitly empty', () => {
-
-		el = document.createElement('div');
-		el.innerHTML = '<test-attribs></test-attribs>';
-		document.body.appendChild(el);
-
-		let expectedOutput = `
-		<test-attribs>
-			<svelte-retag>
-				<div>lowercase: default</div>
-				<div>camelCase: default</div>
-				<div>UPPERCASE: default</div>
-				<!--<TestAttributes>-->
-			</svelte-retag>
-		</test-attribs>
-	`;
-
-		expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(expectedOutput));
-	});
-
-});