refactor(tests): improve cleanup logic and script verification in Toot component tests

Author: spences10

packages/sveltekit-embed/src/lib/components/general-observer.svelte.test.ts

@@ -180,20 +180,6 @@ describe('General Observer', () => {
 		});
 
 		it.skip('should handle multiple intersection entries correctly', async () => {
-			let intersectionCallback:
-				| ((entries: any[]) => void)
-				| undefined;
-
-			mockIntersectionObserver.mockImplementation(
-				(callback, options) => {
-					intersectionCallback = callback;
-					return {
-						observe: mockObserve,
-						disconnect: mockDisconnect,
-					};
-				},
-			);
-
 			const testContent = 'Multiple entries test';
 			const { container } = render(GeneralObserver, {
 				disable_observer: false,
@@ -202,11 +188,14 @@ describe('General Observer', () => {
 			});
 
 			// Simulate multiple entries where one meets threshold
-			intersectionCallback?.([
-				{ intersectionRatio: 0.3 }, // Below threshold
-				{ intersectionRatio: 0.7 }, // Above threshold
-				{ intersectionRatio: 0.1 }, // Below threshold
-			]);
+			lastObserverCallback?.(
+				[
+					{ intersectionRatio: 0.3 }, // Below threshold
+					{ intersectionRatio: 0.7 }, // Above threshold
+					{ intersectionRatio: 0.1 }, // Below threshold
+				] as IntersectionObserverEntry[],
+				lastObserverInstance as unknown as IntersectionObserver,
+			);
 
 			await new Promise(resolve => setTimeout(resolve, 10));
 

packages/sveltekit-embed/src/lib/components/toot.svelte

@@ -18,8 +18,8 @@
 	};
 
 	const remove_mastodon_embed_script = () => {
-		if (mastodon_embed_script) {
-			document.head.removeChild(mastodon_embed_script);
+		if (mastodon_embed_script && mastodon_embed_script.parentNode) {
+			mastodon_embed_script.parentNode.removeChild(mastodon_embed_script);
 			mastodon_embed_script = null;
 		}
 	};

packages/sveltekit-embed/src/lib/components/toot.svelte.test.ts

@@ -5,12 +5,13 @@ import { page } from 'vitest/browser';
 
 describe('Toot', () => {
 	afterEach(() => {
-		// Clean up any mastodon embed scripts before vitest-browser-svelte cleanup
+		// Cleanup component first (which removes its script)
+		cleanup();
+		// Then remove any leftover scripts
 		const scripts = document.head.querySelectorAll(
 			'script[src*="embed.js"]',
 		);
 		scripts.forEach(script => script.remove());
-		cleanup();
 	});
 	it('renders iframe with correct src', async () => {
 		const instance = 'my-instance';
@@ -102,11 +103,6 @@ describe('Toot', () => {
 		const username = 'testuser';
 		const tootId = '123';
 
-		// Mock document.createElement and appendChild
-		const mockScript = document.createElement('script');
-		const createElementSpy = vi
-			.spyOn(document, 'createElement')
-			.mockReturnValue(mockScript);
 		const appendChildSpy = vi.spyOn(document.head, 'appendChild');
 
 		render(Toot, {
@@ -115,12 +111,17 @@ describe('Toot', () => {
 			tootId,
 		});
 
-		expect(createElementSpy).toHaveBeenCalledWith('script');
-		expect(mockScript.src).toBe(`https://${instance}/embed.js`);
-		expect(mockScript.async).toBe(true);
-		expect(appendChildSpy).toHaveBeenCalledWith(mockScript);
+		// Verify script was appended
+		const appendedScript = appendChildSpy.mock.calls.find(
+			call =>
+				call[0] instanceof HTMLScriptElement &&
+				(call[0] as HTMLScriptElement).src.includes('embed.js'),
+		)?.[0] as HTMLScriptElement;
+
+		expect(appendedScript).toBeTruthy();
+		expect(appendedScript.src).toBe(`https://${instance}/embed.js`);
+		expect(appendedScript.async).toBe(true);
 
-		createElementSpy.mockRestore();
 		appendChildSpy.mockRestore();
 	});