nanosplash 3.0.1 → 3.0.2

package/tests/Service.spec.ts

@@ -1,119 +1,198 @@
-// @ts-strict
-
-import { JSDOM } from 'jsdom'
 import { beforeEach, expect, describe, it } from 'vitest'
-import { getRecycledNS } from '../src/ts/core/Dom'
 import { Service } from '../src/ts/core/Service'
 import { Splash } from '../src/ts/core/Splash'
+import { GUIDString } from '../src/ts/types/Types'
+import { ExpectedParsedValues, div, resetDOM } from './TestUtilities'
 
-describe('NanosplashService', () => {
-	const nss = Service.getInstance()
-	const getById = (id: string): Splash | undefined =>
-		nss.nsStack.find((ns: Splash) => ns.getId() === id)
+resetDOM()
+
+declare global {
+	interface Window {
+		ns: Service
+	}
+}
 
+describe('NanosplashService', () => {
 	// Reset the DOM before each test
 	beforeEach(() => {
-		const dom = new JSDOM()
-		// @ts-ignore
-		globalThis.window = dom.window
-		globalThis.document = dom.window.document
-		globalThis.DOMParser = dom.window.DOMParser
-		globalThis.Node = dom.window.Node
-		globalThis.Element = dom.window.Element
+		resetDOM()
 	})
 
 	it('Should be able to create an instance', () => {
+		const nss = Service.getInstance()
 		expect(nss).toBeInstanceOf(Service)
 	})
 
-	it('Should be able to get the same singleton instance', () => {
+	it('Should be a valid singleton instance', () => {
 		const nss1 = Service.getInstance()
 		const nss2 = Service.getInstance()
 		expect(nss1).toBe(nss2)
 	})
 
-	it('Should be able to start the service', () => {
+	it('Should be able to start the service and attach it to Window', () => {
 		Service.start()
-		expect(nss).toBeInstanceOf(Service)
-	})
-
-	it('Should be able to retrieve an existing Nanosplash instance from a destination node', () => {
-		const destinationNode = document.createElement('div')
-		document.body.appendChild(destinationNode)
-		destinationNode.id = 'test-id'
-		const nsInstance1 = getRecycledNS(destinationNode) as Splash
-		expect(nsInstance1).toBeNull()
-		let nsId = nss.showInside('erroneous-selector', 'Hello World!')
-		expect(nsId).toBeNull()
-		nsId = nss.showInside('div[id="test-id"]', 'Hello World!')
-		const nsInstance2 = getRecycledNS(destinationNode)
-		expect(nsInstance2).toBeInstanceOf(Splash)
-		expect(nsInstance2?.getId()).toBe(nsId)
+		const nss = Service.getInstance()
+		expect(nss).toBe(window.ns)
 	})
 
 	it('Should be able to show a Nanosplash in the browser window', () => {
 		const text = 'Hello World!'
-		const nsId = nss.show(text)
+		const nss = Service.getInstance()
+		const nsId = <GUIDString>nss.show(text)
+
+		// Compare the elements:
 		const element = document.getElementById(nsId)
-		const ns = getById(nsId)
-		const nsText = ns?.getNSTextElement().innerText
-		expect(element).toBe(ns?.getNSElement())
+		const splash = nss.nsQueue.get(nsId)
+		expect(element).toBe(splash?.getElement())
+
+		// Compare the text:
+		const nsText = splash?.getTextElement().innerText
 		expect(nsText).toBe(text)
 	})
 
 	it('Should be able to show a Nanosplash over a given element', () => {
+		const id = 'test-id'
 		const text = 'Hello World!'
 		const destination = document.createElement('div')
-		destination.id = 'test-id'
+
+		// Assign ID and append to DOM
+		destination.id = id
 		document.body.appendChild(destination)
-		const nsId = <string>nss.showInside('#test-id', text)
-		const element = document.getElementById(nsId)
-		const ns = getById(nsId)
-		const nsText = ns?.getNSTextElement().innerText
-		expect(element).toBe(ns?.getNSElement())
+
+		const nss = Service.getInstance()
+
+		// Show Splash inside element
+		const nsId = nss.showInside(`#${id}`, text)
+
+		// Get element from DOM with the same ID
+		const element = document.getElementById(<string>nsId)
+
+		// Get Splash instance from NS Service with the same ID
+		const ns = nss.nsQueue.get(<string>nsId)
+
+		// Compare the two
+		expect(element).toBe(ns?.getElement())
+
+		// Compare the text
+		const nsText = ns?.getTextElement().innerText
 		expect(nsText).toBe(text)
 	})
 
-	it('Should be able to hide a Nanosplash', () => {
-		const nsId = nss.show()
+	it('Should be able to hide a Splash', () => {
+		const nss = Service.getInstance()
+		const nsId = <GUIDString>nss.show()
+		nss.hide()
+		const splash = nss.nsQueue.get(nsId)
+		expect(splash).toBeUndefined()
+	})
+
+	it('Should be able to hide multiple Splashes in FIFO-order', () => {
+		document.body.append(div('a'), div('b'), div('c'))
+
+		const nss = Service.getInstance()
+		const a = nss.showInside('#a', 'A')
+		const b = nss.showInside('#b', 'B')
+		const c = nss.showInside('#c', 'C')
+
+		expect(nss.nsQueue.queue.length).toBe(3)
+
 		nss.hide()
-		const ns = getById(nsId)
-		expect(ns?.getNSElement()).toBeUndefined()
+		expect(nss.nsQueue.queue.length).toBe(2)
+		expect(nss.nsQueue.get(a as string)).toBeUndefined()
+		expect(nss.nsQueue.get(b as string)).toBeInstanceOf(Splash)
+		expect(nss.nsQueue.get(c as string)).toBeInstanceOf(Splash)
+
+		nss.hide()
+		expect(nss.nsQueue.queue.length).toBe(1)
+		expect(nss.nsQueue.get(a as string)).toBeUndefined()
+		expect(nss.nsQueue.get(b as string)).toBeUndefined()
+		expect(nss.nsQueue.get(c as string)).toBeInstanceOf(Splash)
+
+		nss.hide()
+		expect(nss.nsQueue.queue.length).toBe(0)
+		expect(nss.nsQueue.get(a as string)).toBeUndefined()
+		expect(nss.nsQueue.get(b as string)).toBeUndefined()
+		expect(nss.nsQueue.get(c as string)).toBeUndefined()
 	})
 
 	it('Should be able to hide all Nanosplashes', () => {
-		const div = (id: string) => {
-			const d = document.createElement('div')
-			d.id = id
-			return d
-		}
 		document.body.append(div('a'), div('b'), div('c'))
-		nss.hideAll()
-		expect(nss.nsStack.length).toBe(0)
+
+		const nss = Service.getInstance()
+
+		nss.hideAll() // Reset the queue
+		expect(nss.nsQueue.queue.length).toBe(0)
+
+		// Add three Nanosplashes to the queue
 		nss.showInside('#a', 'A')
 		nss.showInside('#b', 'B')
 		nss.showInside('#c', 'C')
-		expect(nss.nsStack.length).toBe(3)
+
+		// Expect the queue to have three items
+		expect(nss.nsQueue.queue.length).toBe(3)
+
+		// Hide all Nanosplashes
 		nss.hideAll()
-		expect(nss.nsStack.length).toBe(0)
+
+		// Expect the queue to be empty
+		expect(nss.nsQueue.queue.length).toBe(0)
 	})
 
 	it('Should be able to hide a Nanosplash based on its ID', () => {
-		const nsId = nss.show()
+		const nss = Service.getInstance()
+		const nsId = <GUIDString>nss.show()
 		nss.hideId(nsId)
-		const ns = getById(nsId)
-		expect(ns?.getNSElement()).toBeUndefined()
+		const splash = nss.nsQueue.get(nsId)
+		expect(splash).toBeUndefined()
 	})
 
 	it('Should be able to hide a Nanosplash residing inside a given element', () => {
-		const destination = document.createElement('div')
-		destination.id = 'test-id'
-		document.body.appendChild(destination)
-		let nsId = nss.showInside('#test-id')
-		nsId = nss.hideInside('erroneous-selector')
-		expect(nsId).toBeNull()
-		nsId = <string>nss.hideInside('#test-id')
-		const ns = getById(nsId)
-		expect(ns?.getNSElement()).toBeUndefined()
+		const id = 'test-id'
+		const parent = document.createElement('div')
+		parent.id = id
+		document.body.appendChild(parent)
+
+		const nss = Service.getInstance()
+		const nsId = <GUIDString>nss.showInside(`#${id}`)
+
+		// Confirm existence.
+		const element = document.getElementById(<string>nsId)
+		expect(element?.parentElement).toBe(parent)
+
+		// Hide using API.
+		nss.hideInside(`#${id}`)
+
+		// Confirm non-existence.
+		expect(element?.isConnected).toBe(false)
+		expect(nss.nsQueue.get(nsId)).toBeUndefined()
+	})
+
+	it('Should take any argument as text without breaking', () => {
+		const nss = Service.getInstance()
+
+		// Destructure the expected values
+		const {
+			numValues,
+			arrValues,
+			objValues,
+			boolValues,
+			nullValues,
+			undefValues,
+		} = ExpectedParsedValues
+
+		// Create functions to test the values
+		const testValues = (raw: any, parsed: any) => {
+			const id = <GUIDString>nss.show(raw)
+			const value = nss.nsQueue.get(id)?.getTextElement().innerText
+			expect(value).toBe(parsed)
+		}
+
+		// Test the values
+		testValues(numValues.raw, numValues.parsed)
+		testValues(arrValues.raw, arrValues.parsed)
+		testValues(objValues.raw, objValues.parsed)
+		testValues(boolValues.raw, boolValues.parsed)
+		testValues(nullValues.raw, nullValues.parsed)
+		testValues(undefValues.raw, undefValues.parsed)
 	})
 })

package/tests/Splash.spec.ts

@@ -1,51 +1,49 @@
-// @ts-strict
-
 import { describe, it, expect, beforeEach } from 'vitest'
-import { JSDOM } from 'jsdom'
 import { Splash } from '../src/ts/core/Splash'
+import { resetDOM } from './TestUtilities'
+
+resetDOM()
 
 describe('Splash', () => {
 	// Reset the DOM before each test
 	beforeEach(() => {
-		const dom = new JSDOM()
-		// @ts-ignore
-		globalThis.window = dom.window
-		globalThis.document = dom.window.document
-		globalThis.DOMParser = dom.window.DOMParser
+		resetDOM()
 	})
 
-	it('Should be a valid Splash', () => {
+	it('Should be a valid Splash element', () => {
 		const ns = new Splash()
-		const element = ns.getNSElement()
+		const element = ns.getElement() as HTMLElement
 
+		// The element should be a valid HTMLDivElement
 		expect(element).not.toBeUndefined()
-		expect(element.id).toBe(ns.getId())
-		expect(element.classList.contains(Splash.NSClass)).toBe(true)
+		expect(element).toBeInstanceOf(HTMLDivElement)
 
-		const contentElement = ns.getNSContentElement()
-		expect(contentElement).not.toBeUndefined()
-
-		const textElement = ns.getNSTextElement()
-		expect(textElement).not.toBeUndefined()
+		// The element and the splash instance should have the same ID
+		expect(element.id).toBe(ns.getId())
 
-		const spinnerElement = <HTMLElement>textElement.nextElementSibling
-		expect(spinnerElement).not.toBeUndefined()
+		// The element should have the main Nanosplash CSS class
+		expect(element.classList.contains(Splash.NSClass)).toBe(true)
 
-		const spinnerSVGElement = <HTMLElement>spinnerElement.firstElementChild
-		expect(spinnerSVGElement).not.toBeUndefined()
+		// The element should have the correct, inner structure
+		const textSelector = '.nsc > .nst'
+		const spinnerSelector = '.nsc > .nss'
+		const textElement = element.querySelector(textSelector)
+		const spinnerElement = element.querySelector(spinnerSelector)
+		expect(textElement).not.toBeNull()
+		expect(spinnerElement).not.toBeNull()
 	})
 
 	it('Should be able to set text', () => {
 		const ns = new Splash()
 		const text = 'Hello World!'
 		ns.setText(text)
-		expect(ns.getNSTextElement().innerText).toBe(text)
+		expect(ns.getTextElement().innerText).toBe(text)
 	})
 
 	it('Should be able to hide text', () => {
 		const ns = new Splash()
 		ns.hideText()
-		expect(ns.getNSTextElement().style.display).toBe('none')
+		expect(ns.getTextElement().style.display).toBe('none')
 	})
 
 	it('Should be able to show text', () => {
@@ -53,12 +51,14 @@ describe('Splash', () => {
 		ns.setText('Hello World!')
 		ns.hideText()
 		ns.showText()
-		expect(ns.getNSTextElement().style.display).toBe('flex')
+		expect(ns.getTextElement().style.display).toBe('flex')
 	})
 
 	it('Should be able to remove itself from DOM', () => {
 		const ns = new Splash()
-		ns.remove()
-		expect(ns.getNSElement()).toBeUndefined()
+		const deleteResult = ns.delete()
+		const element = ns.getElement()
+		expect(deleteResult).toBe(true)
+		expect(element).toBeNull()
 	})
 })

package/tests/TestUtilities.ts

@@ -0,0 +1,48 @@
+import { JSDOM } from 'jsdom'
+import { Service } from '../src/ts/core/Service'
+
+export function resetDOM() {
+	const dom = new JSDOM()
+	// @ts-ignore
+	globalThis.window = dom.window
+	globalThis.document = dom.window.document
+	globalThis.DOMParser = dom.window.DOMParser
+	globalThis.Node = dom.window.Node
+	globalThis.Element = dom.window.Element
+	globalThis.HTMLElement = dom.window.HTMLElement
+	globalThis.HTMLDivElement = dom.window.HTMLDivElement
+	Service.getInstance().hideAll()
+}
+
+export function div(id: string): HTMLDivElement {
+	const div = document.createElement('div')
+	div.id = id
+	return div
+}
+
+export const ExpectedParsedValues = {
+	numValues: {
+		raw: 123,
+		parsed: '123',
+	},
+	arrValues: {
+		raw: [1, 2, 3],
+		parsed: '1,2,3',
+	},
+	objValues: {
+		raw: {},
+		parsed: '[object Object]',
+	},
+	boolValues: {
+		raw: true,
+		parsed: 'true',
+	},
+	nullValues: {
+		raw: null,
+		parsed: '',
+	},
+	undefValues: {
+		raw: undefined,
+		parsed: '',
+	},
+}

package/tsconfig.json

@@ -6,6 +6,7 @@
 		"lib": ["ESNext", "DOM"],
 		"moduleResolution": "Node",
 		"strict": true,
+		"alwaysStrict": true,
 		"resolveJsonModule": true,
 		"isolatedModules": true,
 		"esModuleInterop": true,

package/vite.config.ts

@@ -1,30 +1,16 @@
 import { LibraryFormats, defineConfig } from 'vite'
-import { version } from './package.json'
-import { resolve } from 'path'
 
-const dist = 'dist'
-const versioned = process.env?.versioned ?? false
 const format = (process.env?.format ?? '') as LibraryFormats
 const entry = (process.env?.entry ?? '') as string
 
-const outDirFolders = [dist]
-if (versioned) {
-	outDirFolders.push('versioned', version, format)
-} else {
-	outDirFolders.push('latest', format)
-}
-
-const outDir = resolve(__dirname, ...outDirFolders)
-
 export default defineConfig({
 	build: {
-		outDir,
+		outDir: `dist/${format}`,
 		lib: {
 			entry,
 			name: 'Nanosplash',
 			formats: [format] as LibraryFormats[],
 			fileName: 'ns',
 		},
-		cssCodeSplit: format === 'iife',
 	},
 })

package/coverage/core/index.html

@@ -1,146 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for core</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../prettify.css" />
-    <link rel="stylesheet" href="../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(../sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1><a href="../index.html">All files</a> core</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">99.8% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>518/519</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">91.54% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>65/71</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>42/42</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">99.8% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>518/519</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line high'></div>
-    <div class="pad1">
-<table class="coverage-summary">
-<thead>
-<tr>
-   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
-   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
-   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
-   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
-   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
-   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
-   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
-</tr>
-</thead>
-<tbody><tr>
-	<td class="file high" data-value="Dom.ts"><a href="Dom.ts.html">Dom.ts</a></td>
-	<td data-value="100" class="pic high">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
-	</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="160" class="abs high">160/160</td>
-	<td data-value="86.36" class="pct high">86.36%</td>
-	<td data-value="22" class="abs high">19/22</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="11" class="abs high">11/11</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="160" class="abs high">160/160</td>
-	</tr>
-
-<tr>
-	<td class="file high" data-value="Service.ts"><a href="Service.ts.html">Service.ts</a></td>
-	<td data-value="99.57" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 99%"></div><div class="cover-empty" style="width: 1%"></div></div>
-	</td>
-	<td data-value="99.57" class="pct high">99.57%</td>
-	<td data-value="235" class="abs high">234/235</td>
-	<td data-value="90.62" class="pct high">90.62%</td>
-	<td data-value="32" class="abs high">29/32</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="19" class="abs high">19/19</td>
-	<td data-value="99.57" class="pct high">99.57%</td>
-	<td data-value="235" class="abs high">234/235</td>
-	</tr>
-
-<tr>
-	<td class="file high" data-value="Splash.ts"><a href="Splash.ts.html">Splash.ts</a></td>
-	<td data-value="100" class="pic high">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
-	</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="124" class="abs high">124/124</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="17" class="abs high">17/17</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="12" class="abs high">12/12</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="124" class="abs high">124/124</td>
-	</tr>
-
-</tbody>
-</table>
-</div>
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <div class='footer quiet pad2 space-top1 center small'>
-                Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-09-06T08:51:33.390Z
-            </div>
-        <script src="../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../sorter.js"></script>
-        <script src="../block-navigation.js"></script>
-    </body>
-</html>
-