fix(b-img): Allow empty alt prop (fixes #5524) (#5545)

Hiws · jacobmllr95 · web-flow · commit b22829d064b6 · 2020-07-06T17:12:28.000+02:00
* Allow empty `alt`

* default to null to avoid check

* remove unused import

* add avatar support

* add test cases

* spelling

Co-authored-by: Jacob Müller &lt;jacob.mueller.elz@gmail.com&gt;
diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js
@@ -202,7 +202,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
     } = this
     const link = !button && isLink(this)
     const tag = button ? BButton : link ? BLink : 'span'
-    const alt = this.alt || null
+    const alt = this.alt
     const ariaLabel = this.ariaLabel || null
 
     let $content = null
diff --git a/src/components/avatar/avatar.spec.js b/src/components/avatar/avatar.spec.js
@@ -317,4 +317,34 @@ describe('avatar', () => {
 
     wrapper2.destroy()
   })
+
+  it('should render `alt` attribute if `alt` prop is empty string', async () => {
+    const wrapper = mount(BAvatar, {
+      propsData: {
+        src: '/foo/bar',
+        alt: ''
+      }
+    })
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('img').attributes('src')).toEqual('/foo/bar')
+    expect(wrapper.find('img').attributes('alt')).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('should not render `alt` attribute if `alt` prop is null', async () => {
+    const wrapper = mount(BAvatar, {
+      propsData: {
+        src: '/foo/bar',
+        alt: null
+      }
+    })
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('img').attributes('src')).toEqual('/foo/bar')
+    expect(wrapper.find('img').attributes('alt')).not.toBeDefined()
+
+    wrapper.destroy()
+  })
 })
diff --git a/src/components/card/card-img-lazy.spec.js b/src/components/card/card-img-lazy.spec.js
@@ -154,6 +154,22 @@ describe('card-image', () => {
     wrapper.destroy()
   })
 
+  it('has attribute alt when prop `alt` is empty', async () => {
+    const wrapper = mount(BCardImgLazy, {
+      context: {
+        props: {
+          src: 'https://picsum.photos/600/300/?image=25',
+          alt: ''
+        }
+      }
+    })
+
+    expect(wrapper.attributes('alt')).toBeDefined()
+    expect(wrapper.attributes('alt')).toBe('')
+
+    wrapper.destroy()
+  })
+
   it('has attribute width when prop width set', async () => {
     const wrapper = mount(BCardImgLazy, {
       context: {
diff --git a/src/components/card/card-img.js b/src/components/card/card-img.js
@@ -7,8 +7,8 @@ export const props = {
     required: true
   },
   alt: {
-    type: String
-    // default: null
+    type: String,
+    default: null
   },
   top: {
     type: Boolean,
@@ -69,7 +69,7 @@ export const BCardImg = /*#__PURE__*/ Vue.extend({
         class: [baseClass],
         attrs: {
           src: props.src || null,
-          alt: props.alt || null,
+          alt: props.alt,
           height: props.height || null,
           width: props.width || null
         }
diff --git a/src/components/card/card-img.spec.js b/src/components/card/card-img.spec.js
@@ -158,6 +158,22 @@ describe('card-image', () => {
     wrapper.destroy()
   })
 
+  it('has attribute alt when prop `alt` is empty', async () => {
+    const wrapper = mount(BCardImg, {
+      context: {
+        props: {
+          src: 'https://picsum.photos/600/300/?image=25',
+          alt: ''
+        }
+      }
+    })
+
+    expect(wrapper.attributes('alt')).toBeDefined()
+    expect(wrapper.attributes('alt')).toBe('')
+
+    wrapper.destroy()
+  })
+
   it('has attribute width when prop width set', async () => {
     const wrapper = mount(BCardImg, {
       context: {
diff --git a/src/components/image/img.js b/src/components/image/img.js
@@ -33,8 +33,8 @@ export const props = {
     // default: null
   },
   alt: {
-    type: String
-    // default: null
+    type: String,
+    default: null
   },
   width: {
     type: [Number, String]
@@ -153,7 +153,7 @@ export const BImg = /*#__PURE__*/ Vue.extend({
       mergeData(data, {
         attrs: {
           src: src,
-          alt: props.alt || null,
+          alt: props.alt,
           width: width ? toString(width) : null,
           height: height ? toString(height) : null,
           srcset: srcset || null,
diff --git a/src/components/image/img.spec.js b/src/components/image/img.spec.js
@@ -30,6 +30,22 @@ describe('img', () => {
     wrapper.destroy()
   })
 
+  it('default does not have attributes alt, width, or height', async () => {
+    const wrapper = mount(BImg, {
+      context: {
+        props: {
+          src: 'https://picsum.photos/600/300/?image=25'
+        }
+      }
+    })
+
+    expect(wrapper.attributes('alt')).not.toBeDefined()
+    expect(wrapper.attributes('width')).not.toBeDefined()
+    expect(wrapper.attributes('height')).not.toBeDefined()
+
+    wrapper.destroy()
+  })
+
   it('should have class "img-fluid" when prop fluid set', async () => {
     const wrapper = mount(BImg, {
       propsData: {
@@ -223,4 +239,17 @@ describe('img', () => {
 
     wrapper.destroy()
   })
+
+  it('should have alt attribute when `alt` prop is empty', async () => {
+    const wrapper = mount(BImg, {
+      propsData: {
+        alt: ''
+      }
+    })
+
+    expect(wrapper.attributes('alt')).toBeDefined()
+    expect(wrapper.attributes('alt')).toEqual('')
+
+    wrapper.destroy()
+  })
 })
