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 @@ {#if lowercase} -
lowercase: {lowercase}
+
lowercase: {lowercase}
{/if} {#if camelCase} -
camelCase: {camelCase}
+
camelCase: {camelCase}
{/if} {#if UPPERCASE} -
UPPERCASE: {UPPERCASE}
+
UPPERCASE: {UPPERCASE}
{/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 = ''; + 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 = ''; + 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 = ''; + 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 = ''; + 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 = ''; + 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 = ` - - -
lowercase: SET
-
camelCase: SET
-
UPPERCASE: SET
- -
-
- `; - - test('all: lowercase attributes', () => { - - el = document.createElement('div'); - el.innerHTML = ''; - document.body.appendChild(el); - - expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(allSetOutput)); - }); - - test('all: uppercase attributes', () => { - - el = document.createElement('div'); - el.innerHTML = ''; - document.body.appendChild(el); - - expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(allSetOutput)); - }); - - test('all: mixed case attributes', () => { - - el = document.createElement('div'); - el.innerHTML = ''; - document.body.appendChild(el); - - expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(allSetOutput)); - }); - - test('explicitly empty', () => { - - el = document.createElement('div'); - el.innerHTML = ''; - document.body.appendChild(el); - - let expectedOutput = ` - - - - - - `; - - expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(expectedOutput)); - }); - - test('implicitly empty', () => { - - el = document.createElement('div'); - el.innerHTML = ''; - document.body.appendChild(el); - - let expectedOutput = ` - - -
lowercase: default
-
camelCase: default
-
UPPERCASE: default
- -
-
- `; - - expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(expectedOutput)); - }); - -});