fix: resolve dead case path, add observe and coverage (justinribeiro#95)

Co-authored-by: Eli Barzilay <eli@barzilay.org>
cshawaus · Jul 27, 2023 · 50c254b · 50c254b
1 parent e23da53
commit 50c254b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 23 deletions.
diff --git a/lite-youtube.ts b/lite-youtube.ts
@@ -32,7 +32,7 @@ export class LiteYTEmbed extends HTMLElement {
   }
 
   static get observedAttributes(): string[] {
-    return ['videoid', 'playlistid'];
+    return ['videoid', 'playlistid', 'videoplay', 'videotitle'];
   }
 
   connectedCallback(): void {
@@ -68,11 +68,11 @@ export class LiteYTEmbed extends HTMLElement {
   }
 
   get videoPlay(): string {
-    return this.getAttribute('videoPlay') || 'Play';
+    return this.getAttribute('videoplay') || 'Play';
   }
 
   set videoPlay(name: string) {
-    this.setAttribute('videoPlay', name);
+    this.setAttribute('videoplay', name);
   }
 
   get videoStartAt(): string {
@@ -239,25 +239,15 @@ export class LiteYTEmbed extends HTMLElement {
     oldVal: unknown,
     newVal: unknown
   ): void {
-    switch (name) {
-      case 'videoid':
-      case 'playlistid':
-      case 'videoTitle':
-      case 'videoPlay': {
-        if (oldVal !== newVal) {
-          this.setupComponent();
-
-          // if we have a previous iframe, remove it and the activated class
-          if (this.domRefFrame.classList.contains('activated')) {
-            this.domRefFrame.classList.remove('activated');
-            this.shadowRoot.querySelector('iframe')!.remove();
-            this.isIframeLoaded = false;
-          }
-        }
-        break;
+    if (oldVal !== newVal) {
+      this.setupComponent();
+
+      // if we have a previous iframe, remove it and the activated class
+      if (this.domRefFrame.classList.contains('activated')) {
+        this.domRefFrame.classList.remove('activated');
+        this.shadowRoot.querySelector('iframe')!.remove();
+        this.isIframeLoaded = false;
       }
-      default:
-        break;
     }
   }
 

diff --git a/test/lite-youtube.test.ts b/test/lite-youtube.test.ts
@@ -33,27 +33,31 @@ describe('<lite-youtube>', () => {
     expect(el.videoTitle).to.equal('Test Me');
     el.videoTitle = 'Test Me Again';
     expect(el.videoTitle).to.equal('Test Me Again');
+    expect(el.title).to.equal('Play: Test Me Again');
   });
 
   it('videoPlay set/get', async () => {
     const el = await fixture<LiteYTEmbed>(baseTemplate);
     expect(el.videoPlay).to.equal('Play');
     el.videoPlay = 'Run';
     expect(el.videoPlay).to.equal('Run');
+    expect(el.title).to.equal('Run: Test Me');
   });
 
   it('videoTitle set/get attr', async () => {
     const el = await fixture<LiteYTEmbed>(baseTemplate);
     expect(el.videoTitle).to.equal('Test Me');
-    el.setAttribute('videoTitle', 'Test Me Again');
+    el.setAttribute('videotitle', 'Test Me Again');
     expect(el.videoTitle).to.equal('Test Me Again');
+    expect(el.title).to.equal('Play: Test Me Again');
   });
 
   it('videoPlay set/get attr', async () => {
     const el = await fixture<LiteYTEmbed>(baseTemplate);
     expect(el.videoPlay).to.equal('Play');
-    el.setAttribute('videoPlay', 'Run');
+    el.setAttribute('videoplay', 'Run');
     expect(el.videoPlay).to.equal('Run');
+    expect(el.title).to.equal('Run: Test Me');
   });
 
   it('clicking button should load iframe', async () => {