test: ✅ refactor anchorfm component with tests

Author: spences10

src/lib/components/anchor-fm.svelte

@@ -1,35 +1,36 @@
 <script lang="ts">
-  import GeneralObserver from './general-observer.svelte'
+	import GeneralObserver from './general-observer.svelte'
 
-  export let episodeUrl: string
-  export let height: string = '100'
-  export let width: string = '100'
+	export let episodeUrl: string
+	export let height: string = '100'
+	export let width: string = '100'
+	export let disable_observer: boolean = false
 </script>
 
-<GeneralObserver>
-  <div
-    class="anchor-fm-episode-svelte-embed"
-    style={`
+<GeneralObserver {disable_observer}>
+	<div
+		class="anchor-fm-episode-svelte-embed"
+		style={`
       position: relative;
       height: ${height}px;
       width: ${width}%;
     `}
-  >
-    <iframe
-      data-testid="anchor-fm-episode"
-      title={`anchor-fm-${episodeUrl}`}
-      src={`https://anchor.fm/${episodeUrl}`}
-      {height}
-      {width}
-      frameborder="0"
-      scrolling="no"
-      style={`
+	>
+		<iframe
+			data-testid="anchor-fm-episode"
+			title={`anchor-fm-${episodeUrl}`}
+			src={`https://anchor.fm/${episodeUrl}`}
+			{height}
+			{width}
+			frameborder="0"
+			scrolling="no"
+			style={`
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
       `}
-    />
-  </div>
+		/>
+	</div>
 </GeneralObserver>

src/lib/components/anchor-fm.test.ts

@@ -1,29 +1,42 @@
 import AnchorFm from '$lib/components/anchor-fm.svelte'
 import { cleanup, render } from '@testing-library/svelte'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it } from 'vitest'
 
-globalThis.IntersectionObserver = vi.fn(() => ({
-  observe: () => null,
-  unobserve: () => null,
-  disconnect: () => null,
-})) as unknown as typeof globalThis.IntersectionObserver
+let episodeUrl =
+	'purrfect-dev/embed/episodes/1-31---Delivering-Digital-Content-with-GraphCMS-e14g55c/a-a650v9a'
 
 describe('AnchorFm', () => {
-  afterEach(() => cleanup())
+	afterEach(() => cleanup())
 
-  it('mounts', async () => {
-    const { container } = render(AnchorFm)
-    expect(container).toBeTruthy()
-  })
+	it('mounts with episode url', async () => {
+		const { container } = render(AnchorFm, {
+			episodeUrl,
+			disable_observer: true,
+		})
+		expect(container).toBeTruthy()
+	})
 
-  it.skip('has episode url', async () => {
-    const { container } = render(AnchorFm, {
-      episodeUrl:
-        'purrfect-dev/embed/episodes/1-31---Delivering-Digital-Content-with-GraphCMS-e14g55c/a-a650v9a',
-    })
+	it('renders iframe with episode url', async () => {
+		const { getByTestId } = render(AnchorFm, {
+			episodeUrl,
+			disable_observer: true,
+		})
+		const iframe = getByTestId('anchor-fm-episode')
+		const expectedSrc = `https://anchor.fm/${episodeUrl}`
+		expect(iframe.getAttribute('src')).toBe(expectedSrc)
+	})
 
-    expect(container.querySelectorAll('h2')).toBe(
-      '1.31 - Delivering Digital Content with GraphCMS'
-    )
-  })
+	it('sets iframe dimensions based on props', async () => {
+		const height = '200'
+		const width = '75'
+		const { getByTestId } = render(AnchorFm, {
+			episodeUrl,
+			height,
+			width,
+			disable_observer: true,
+		})
+		const iframe = getByTestId('anchor-fm-episode')
+		expect(iframe.getAttribute('height')).toBe(height)
+		expect(iframe.getAttribute('width')).toBe(`${width}`)
+	})
 })