refactor: 🏷️ update types

spences10 · spences10 · commit 1964772c565b · 2023-03-12T16:03:50.000Z
lots of optional chaining
diff --git a/src/lib/components/anchor-fm.test.ts b/src/lib/components/anchor-fm.test.ts
@@ -35,8 +35,8 @@ describe('AnchorFm', () => {
 		})
 		const iframe = container.querySelector('iframe')
 
-		expect(iframe.parentElement.style.height).toBe('200px')
-		expect(iframe.parentElement.style.width).toBe('50%')
+		expect(iframe?.parentElement?.style.height).toBe('200px')
+		expect(iframe?.parentElement?.style.width).toBe('50%')
 	})
 
 	it('renders with a GeneralObserver', async () => {
diff --git a/src/lib/components/buzzsprout.test.ts b/src/lib/components/buzzsprout.test.ts
@@ -34,8 +34,8 @@ describe('Buzzsprout', () => {
 		})
 		const iframe = container.querySelector('iframe')
 
-		expect(iframe.parentElement.style.height).toBe('200px')
-		expect(iframe.parentElement.style.width).toBe('50%')
+		expect(iframe?.parentElement?.style.height).toBe('200px')
+		expect(iframe?.parentElement?.style.width).toBe('50%')
 	})
 
 	it('renders with a GeneralObserver', async () => {
diff --git a/src/lib/components/code-pen.test.ts b/src/lib/components/code-pen.test.ts
@@ -46,8 +46,8 @@ describe('CodePen', () => {
 			disable_observer: true,
 		})
 		const iframe = container.querySelector('iframe')
-		expect(iframe.getAttribute('style')).toContain('height: 200px')
-		expect(iframe.getAttribute('style')).toContain('width: 50%')
+		expect(iframe?.getAttribute('style')).toContain('height: 200px')
+		expect(iframe?.getAttribute('style')).toContain('width: 50%')
 	})
 
 	it('renders with a GeneralObserver', async () => {
diff --git a/src/lib/components/deezer.test.ts b/src/lib/components/deezer.test.ts
@@ -38,8 +38,8 @@ describe('Deezer', () => {
 		})
 		const iframe = container.querySelector('iframe')
 
-		expect(iframe.getAttribute('style')).toContain(`height: 200px`)
-		expect(iframe.getAttribute('style')).toContain(`width: 50%`)
+		expect(iframe?.getAttribute('style')).toContain(`height: 200px`)
+		expect(iframe?.getAttribute('style')).toContain(`width: 50%`)
 	})
 
 	it('renders with a GeneralObserver', async () => {
diff --git a/src/lib/components/general-observer.svelte b/src/lib/components/general-observer.svelte
@@ -14,14 +14,14 @@
 
 	const hasIntersectionObserver =
 		typeof IntersectionObserver !== 'undefined'
-	let observer =
+	let observer: IntersectionObserver | null =
 		hasIntersectionObserver && !disable_observer
 			? new IntersectionObserver(
 					entries => {
 						entries.forEach(entry => {
 							if (entry.intersectionRatio >= threshold) {
 								loaded = true
-								observer.disconnect()
+								observer!.disconnect()
 							}
 						})
 					},
diff --git a/src/lib/components/generic-embed.test.ts b/src/lib/components/generic-embed.test.ts
@@ -41,8 +41,8 @@ describe('GenericEmbed', () => {
 		})
 		const iframe = container.querySelector('iframe')
 
-		expect(iframe.getAttribute('height')).toBe('200px')
-		expect(iframe.getAttribute('width')).toBe('50%')
+		expect(iframe?.getAttribute('height')).toBe('200px')
+		expect(iframe?.getAttribute('width')).toBe('50%')
 	})
 
 	it('renders with a GeneralObserver', async () => {
diff --git a/src/lib/components/gist.test.ts b/src/lib/components/gist.test.ts
@@ -31,8 +31,8 @@ describe('Gist', () => {
 		})
 		const iframe = container.querySelector('iframe')
 
-		expect(iframe.getAttribute('style')).toContain(`height: 200px`)
-		expect(iframe.getAttribute('style')).toContain(`width: 50%`)
+		expect(iframe?.getAttribute('style')).toContain(`height: 200px`)
+		expect(iframe?.getAttribute('style')).toContain(`width: 50%`)
 	})
 
 	it('renders with a GeneralObserver', async () => {
diff --git a/src/lib/components/guild.test.ts b/src/lib/components/guild.test.ts
@@ -34,8 +34,8 @@ describe('Guild', () => {
 		})
 		const iframe = container.querySelector('iframe')
 
-		expect(iframe.parentElement.style.height).toBe('350px')
-		expect(iframe.parentElement.style.width).toBe('80%')
+		expect(iframe?.parentElement?.style.height).toBe('350px')
+		expect(iframe?.parentElement?.style.width).toBe('80%')
 	})
 
 	it('renders with a GeneralObserver', async () => {
diff --git a/src/lib/components/relive.test.ts b/src/lib/components/relive.test.ts
@@ -29,8 +29,8 @@ describe('Relive', () => {
 			disable_observer: true,
 		})
 		const iframe = container.querySelector('iframe')
-		const div = iframe.parentElement
-		expect(div.style.width).toBe('80%')
+		const div = iframe?.parentElement
+		expect(div?.style.width).toBe('80%')
 	})
 
 	it('renders with a GeneralObserver', async () => {
diff --git a/src/lib/components/slides.test.ts b/src/lib/components/slides.test.ts
@@ -38,8 +38,8 @@ describe('Slides', () => {
 		})
 		const iframe = container.querySelector('iframe')
 
-		expect(iframe.getAttribute('width')).toBe('80%')
-		expect(iframe.getAttribute('height')).toBe('300px')
+		expect(iframe?.getAttribute('width')).toBe('80%')
+		expect(iframe?.getAttribute('height')).toBe('300px')
 	})
 
 	it('renders with a GeneralObserver', async () => {
diff --git a/src/lib/components/sound-cloud.test.ts b/src/lib/components/sound-cloud.test.ts
@@ -35,8 +35,9 @@ describe('SoundCloud', () => {
 			disable_observer: true,
 		})
 		const iframe = container.querySelector('iframe')
-		expect(iframe.getAttribute('height')).toBe('200px')
-		expect(iframe.getAttribute('width')).toBe('50%')
+
+		expect(iframe?.getAttribute('height')).toBe('200px')
+		expect(iframe?.getAttribute('width')).toBe('50%')
 	})
 
 	it('renders with a GeneralObserver', async () => {
diff --git a/src/lib/components/spotify.test.ts b/src/lib/components/spotify.test.ts
@@ -30,8 +30,8 @@ describe('Spotify', () => {
 		})
 		const iframe = container.querySelector('iframe')
 
-		expect(iframe.style.height).toBe('300px')
-		expect(iframe.style.width).toBe('80%')
+		expect(iframe?.style.height).toBe('300px')
+		expect(iframe?.style.width).toBe('80%')
 	})
 
 	it('renders with a GeneralObserver', async () => {
diff --git a/src/lib/components/stackblitz.svelte b/src/lib/components/stackblitz.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
 	import GeneralObserver from './general-observer.svelte'
 
+	type Config = {
+		[key: string]: string
+	}
+
 	export let width: string = '100%'
 	export let height: string = '500px'
 	export let id: string = ''
 	export let view: 'editor' | 'preview' | 'default' = 'default'
-	export let clickToLoad: boolean = true //ctl
-	export let hideNavigation: boolean = false //hideNavigation
+	export let clickToLoad: boolean = true
+	export let hideNavigation: boolean = false
 	export let hideExplorer: boolean = true
 	export let theme: string | 'light' | 'dark' | 'default' = 'dark'
 	export let file: string | undefined
@@ -17,7 +21,7 @@
 	`
 
 	let baseUrl = `https://stackblitz.com/edit/${id}?embed=1`
-	const config = {
+	const config: Config = {
 		ctl: `${clickToLoad ? 1 : 0}`,
 		hideExplorer: `${hideExplorer ? 1 : 0}`,
 		hideNavigation: `${hideNavigation ? 1 : 0}`,
diff --git a/src/lib/components/stackblitz.test.ts b/src/lib/components/stackblitz.test.ts
@@ -38,8 +38,8 @@ describe('StackBlitz', () => {
 		})
 		const iframe = container.querySelector('iframe')
 
-		expect(iframe.getAttribute('style')).toContain('height: 200px;')
-		expect(iframe.getAttribute('style')).toContain('width: 50%;')
+		expect(iframe?.getAttribute('style')).toContain('height: 200px;')
+		expect(iframe?.getAttribute('style')).toContain('width: 50%;')
 	})
 
 	it('renders with a GeneralObserver', async () => {
diff --git a/src/lib/components/toot.test.ts b/src/lib/components/toot.test.ts
@@ -33,6 +33,8 @@ describe('Toot', () => {
 		})
 		const iframe = container.querySelector('iframe')
 
-		expect(iframe.getAttribute('width')).toBe('400')
+		if (iframe) {
+			expect(iframe.getAttribute('width')).toBe('400')
+		}
 	})
 })
diff --git a/src/lib/components/vimeo.test.ts b/src/lib/components/vimeo.test.ts
@@ -37,7 +37,7 @@ describe('Vimeo', () => {
 		})
 		const wrapper = container.querySelector('.vimeo-svelte-embed')
 
-		expect(wrapper.getAttribute('style')).toContain(
+		expect(wrapper?.getAttribute('style')).toContain(
 			'padding-top: 100%;'
 		)
 	})
diff --git a/src/lib/components/you-tube.test.ts b/src/lib/components/you-tube.test.ts
@@ -49,21 +49,24 @@ describe('YouTube', () => {
 		expect(iframe.getAttribute('src')).toBe(expectedSrc)
 	})
 
-	const { getByTestId } = render(YouTube, {
-		youTubeId: 'abc123',
-		listId: '',
-		autoPlay: false,
-		skipTo: { h: 0, m: 0, s: 0 },
-		aspectRatio: '4:3',
-		iframe_styles: 'border-radius: 0.8rem;',
-		disable_observer: true,
-	})
-	const iframe = getByTestId('youTube')
-	const iframeWrapper = iframe.parentElement
+	it('sets aspect ratio using padding-top style', async () => {
+		const { getByTestId } = render(YouTube, {
+			youTubeId: 'abc123',
+			listId: '',
+			autoPlay: false,
+			skipTo: { h: 0, m: 0, s: 0 },
+			aspectRatio: '4:3',
+			iframe_styles: 'border-radius: 0.8rem;',
+			disable_observer: true,
+		})
 
-	expect(iframeWrapper.getAttribute('style')).toContain(
-		'padding-top: 75%;'
-	)
+		const iframe = getByTestId('youTube')
+		const iframeWrapper = iframe.parentElement
+
+		expect(iframeWrapper?.getAttribute('style')).toContain(
+			'padding-top: 75%;'
+		)
+	})
 
 	it('renders with a GeneralObserver', async () => {
 		const { getByTestId } = render(YouTube, {
diff --git a/src/lib/components/zencastr.test.ts b/src/lib/components/zencastr.test.ts
@@ -19,7 +19,8 @@ describe('Zencastr', () => {
 		})
 
 		const player = container.querySelector('blockquote')
-		expect(player.getAttribute('data-episode-href')).toBe(
+
+		expect(player?.getAttribute('data-episode-href')).toBe(
 			'https://zencastr.com/embed/abc123'
 		)
 	})
@@ -30,7 +31,8 @@ describe('Zencastr', () => {
 		})
 
 		const link = container.querySelector('a')
-		expect(link.getAttribute('href')).toBe(
+
+		expect(link?.getAttribute('href')).toBe(
 			'https://zencastr.com/embed/abc123'
 		)
 	})
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
@@ -1,11 +1,15 @@
-export const getPadding = (aspectRatio: string) => {
-	const config = {
-		'1:1': `padding-top: 100%;`,
-		'16:9': `padding-top: 56.25%;`,
-		'4:3': `padding-top: 75%;`,
-		'3:2': `padding-top: 66.66%;`,
-		8.5: `padding-top: 62.5%;`,
-	}
+type Config = {
+	[key: string]: string
+}
+
+const config: Config = {
+	'1:1': `padding-top: 100%;`,
+	'16:9': `padding-top: 56.25%;`,
+	'4:3': `padding-top: 75%;`,
+	'3:2': `padding-top: 66.66%;`,
+	'8.5': `padding-top: 62.5%;`,
+}
 
+export const getPadding = (aspectRatio: keyof Config) => {
 	return config[aspectRatio]
 }
