fix(progress-bar): removed duplicate label (#4494)

* fix(progress-bar): removed duplicate label * fix(progress-bar): added a test and updated the logic * chore(progress-bar): updated tests --------- Co-authored-by: Nikki Massaro <[email protected]> Co-authored-by: blunteshwar <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]>
adobe · Jul 19, 2024 · 39b6622 · 39b6622
1 parent e1ef097
commit 39b6622
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 13 deletions.
diff --git a/packages/progress-bar/src/ProgressBar.ts b/packages/progress-bar/src/ProgressBar.ts
@@ -72,9 +72,8 @@ export class ProgressBar extends SizedMixin(
                 ? html`
                       <sp-field-label size=${this.size} class="label">
                           ${this.slotHasContent ? html`` : this.label}
-                          <slot @slotchange=${this.handleSlotchange}>
-                              ${this.label}
-                          </slot>
+
+                          <slot @slotchange=${this.handleSlotchange}></slot>
                       </sp-field-label>
                   `
                 : html``}

diff --git a/packages/progress-bar/test/progress-bar.test.ts b/packages/progress-bar/test/progress-bar.test.ts
@@ -21,18 +21,14 @@ import { createLanguageContext } from '../../../tools/reactive-controllers/test/
 describe('ProgressBar', () => {
     testForLitDevWarnings(
         async () =>
-            await fixture<ProgressBar>(
-                html`
-                    <sp-progress-bar label="Loading"></sp-progress-bar>
-                `
-            )
+            await fixture<ProgressBar>(html`
+                <sp-progress-bar label="Loading"></sp-progress-bar>
+            `)
     );
     it('loads default progress-bar accessibly', async () => {
-        const el = await fixture<ProgressBar>(
-            html`
-                <sp-progress-bar label="Loading"></sp-progress-bar>
-            `
-        );
+        const el = await fixture<ProgressBar>(html`
+            <sp-progress-bar label="Loading"></sp-progress-bar>
+        `);
 
         await elementUpdated(el);
         expect(el).to.not.be.undefined;
@@ -51,6 +47,41 @@ describe('ProgressBar', () => {
 
         expect(el.getAttribute('label')).to.equal('Label From Slot');
     });
+
+    it('handles label attribute changes', async () => {
+        const el = await fixture<ProgressBar>(html`
+            <sp-progress-bar label="label" indeterminate>
+                content
+            </sp-progress-bar>
+        `);
+
+        await elementUpdated(el);
+        el.setAttribute('label', '');
+        await elementUpdated(el);
+
+        expect(el.getAttribute('label')).to.equal('');
+        el.setAttribute('label', 'label1');
+        await elementUpdated(el);
+        expect(el.getAttribute('label')).to.equal('label1');
+    });
+
+    it('renders label when content is absent', async () => {
+        const el = await fixture<ProgressBar>(html`
+            <sp-progress-bar label="myLabel" indeterminate></sp-progress-bar>
+        `);
+        expect(el.getAttribute('label')).to.equal('myLabel');
+    });
+
+    it('renders nothing when both content and label is absent', async () => {
+        const el = await fixture<ProgressBar>(html`
+            <sp-progress-bar label="myLabel" indeterminate></sp-progress-bar>
+        `);
+        el.removeAttribute('label');
+        el.shadowRoot.textContent = '';
+        expect(el.getAttribute('label')).to.equal(null);
+        expect(el.shadowRoot.textContent?.trim()).to.equal('');
+    });
+
     it('accepts a changing progress', async () => {
         const el = await fixture<ProgressBar>(html`
             <sp-progress-bar label="Changing value"></sp-progress-bar>