fix: do not load simple icon if not an SVG (#433)

davidlj95 · May 3, 2024 · 8b63989 · 8b63989
1 parent 280e9f2
commit 8b63989
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/app/common/simple-icon/simple-icon-loader.spec.ts b/src/app/common/simple-icon/simple-icon-loader.spec.ts
@@ -83,6 +83,28 @@ describe('SimpleIconLoader', () => {
       })
     })
 
+    // Can happen in PWA scenarios, where if static asset is not found, you get main index.html
+    describe('when response content is not svg', () => {
+      const flushWithTextHtmlContentType = (testRequest: TestRequest) =>
+        testRequest.flush('<!DOCTYPE html>', {
+          headers: { 'content-type': 'text/html; charset=utf-8' },
+        })
+
+      it('should complete without emitting', (done) => {
+        let actualSvg: string | undefined
+        sut(ICON_SLUG).subscribe({
+          next: (svg) => (actualSvg = svg),
+          complete: () => {
+            expect(actualSvg).toBeUndefined()
+            done()
+          },
+        })
+
+        const testRequest = expectTestRequestToIcon(ICON_SLUG)
+        flushWithTextHtmlContentType(testRequest)
+      })
+    })
+
     describe('when an error occurs', () => {
       const flushWithError = (testRequest: TestRequest) =>
         testRequest.flush('', {

diff --git a/src/app/common/simple-icon/simple-icon-loader.ts b/src/app/common/simple-icon/simple-icon-loader.ts
@@ -1,7 +1,7 @@
 import { inject, InjectionToken } from '@angular/core'
 import { isDevMode } from '@/common/is-dev-mode'
 import { HttpClient } from '@angular/common/http'
-import { catchError, EMPTY, Observable, of, tap } from 'rxjs'
+import { catchError, EMPTY, filter, Observable, of, tap } from 'rxjs'
 import { ASSETS_DIR } from '@/common/assets-dir'
 import { SIMPLE_ICONS_DIR } from '@/common/simple-icon/simple-icon.component'
 import { PLATFORM_SERVICE } from '@/common/platform.service'
@@ -39,6 +39,7 @@ export const SIMPLE_ICON_LOADER = new InjectionToken<SimpleIconLoader>(
                 },
               )
               .pipe(
+                filter((svg) => svg.trimStart().startsWith('<svg')),
                 tap((svg) => cache.set(slug, svg)),
                 catchError(() => EMPTY),
               )