8000 fix(b-img): Allow empty `alt` prop (fixes #5524) (#5545) · bootstrap-vue/bootstrap-vue@b22829d · GitHub
[go: up one dir, main page]
Skip to content

Commit b22829d

Browse files
Hiwsjacobmllr95
Hiws
and
jacobmllr95
authored
fix(b-img): Allow empty alt prop (fixes #5524) (#5545)
* 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 <jacob.mueller.elz@gmail.com>
1 parent 190325e commit b22829d

File tree

7 files changed

+98
-7
lines changed

7 files changed

+98
-7
lines changed

‎src/components/avatar/avatar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
202202
} = this
203203
const link = !button && isLink(this)
204204
const tag = button ? BButton : link ? BLink : 'span'
205-
const alt = this.alt || null
205+
const alt = this.alt
206206
const ariaLabel = this.ariaLabel || null
207207

208208
let $content = null

‎src/components/avatar/avatar.spec.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,4 +317,34 @@ describe('avatar', () => {
317317

318318
wrapper2.destroy()
319319
})
320+
321+
it('should render `alt` attribute if `alt` prop is empty string', async () => {
322+
const wrapper = mount(BAvatar, {
323+
propsData: {
324+
src: '/foo/bar',
325+
alt: ''
326+
}
327+
})
328+
expect(wrapper.vm).toBeDefined()
329+
expect(wrapper.find('img').exists()).toBe(true)
330+
expect(wrapper.find('img').attributes('src')).toEqual('/foo/bar')
331+
expect(wrapper.find('img').attributes('alt')).toEqual('')
332+
333+
wrapper.destroy()
334+
})
335+
336+
it('should not render `alt` attribute if `alt` prop is null', async () => {
337+
const wrapper = mount(BAvatar, {
338+
propsData: {
339+
src: '/foo/bar',
340+
alt: null
341+
}
342+
})
343+
expect(wrapper.vm).toBeDefined()
344+
expect(wrapper.find('img').exists()).toBe(true)
345+
expect(wrapper.find('img').attributes('src')).toEqual('/foo/bar')
346+
expect(wrapper.find('img').attributes('alt')).not.toBeDefined()
347+
348+
wrapper.destroy()
349+
})
320350
})

‎src/components/card/card-img-lazy.spec.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,22 @@ describe('card-image', () => {
154154
wrapper.destroy()
155155
})
156156

157+
it('has attribute alt when prop `alt` is empty', async () => {
158+
const wrapper = mount(BCardImgLazy, {
159+
context: {
160+
props: {
161+
src: 'https://picsum.photos/600/300/?image=25',
162+
alt: ''
163+
}
164+
}
165+
})
166+
167+
expect(wrapper.attributes('alt')).toBeDefined()
168+
expect(wrapper.attributes('alt')).toBe('')
169+
170+
wrapper.destroy()
171+
})
172+
157173
it('has attribute width when prop width set', async () => {
158174
const wrapper = mount(BCardImgLazy, {
159175
context: {

‎src/components/card/card-img.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ export const props = {
77
required: true
88
},
99
alt: {
10-
type: String
11-
// default: null
10+
type: String,
11+
default: null
1212
},
1313
top: {
1414
type: Boolean,
@@ -69,7 +69,7 @@ export const BCardImg = /*#__PURE__*/ Vue.extend({
6969
class: [baseClass],
7070
attrs: {
7171
src: props.src || null,
72-
alt: props.alt || null,
72+
alt: props.alt,
7373
height: props.height || null,
7474
width: props.width || null
7575
}

‎src/components/card/card-img.spec.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,22 @@ describe('card-image', () => {
158158
wrapper.destroy()
159159
})
160160

161+
it('has attribute alt when prop `alt` is empty', async () => {
162+
const wrapper = mount(BCardImg, {
163+
context: {
164+
props: {
165+
src: 'https://picsum.photos/600/300/?image=25',
166+
alt: ''
167+
}
168+
}
169+
})
170+
171+
expect(wrapper.attributes('alt')).toBeDefined()
172+
expect(wrapper.attributes('alt')).toBe('')
173+
174+
wrapper.destroy()
175+
})
176+
161177
it('has attribute width when prop width set', async () => {
162178
const wrapper = mount(BCardImg, {
163179
context: {

‎src/components/image/img.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ export const props = {
3333
// default: null
3434
},
3535
alt: {
36-
type: String
37-
// default: null
36+
type: String,
37+
default: null
3838
},
3939
width: {
4040
type: [Number, String]
@@ -153,7 +153,7 @@ export const BImg = /*#__PURE__*/ Vue.extend({
153153
mergeData(data, {
154154
attrs: {
155155
src: src,
156-
alt: props.alt || null,
156+
alt: props.alt,
157157
width: width ? toString(width) : null,
158158
height: height ? toString(height) : null,
159159
srcset: srcset || null,

‎src/components/image/img.spec.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,22 @@ describe('img', () => {
3030
wrapper.destroy()
3131
})
3232

33+
it('default does not have attributes alt, width, or height', async () => {
34+
const wrapper = mount(BImg, {
35+
context: {
36+
props: {
37+
src: 'https://picsum.photos/600/300/?image=25'
38+
}
39+
}
40+
})
41+
42+
expect(wrapper.attributes('alt')).not.toBeDefined()
43+
expect(wrapper.attributes('width')).not.toBeDefined()
44+
expect(wrapper.attributes('height')).not.toBeDefined()
45+
46+
wrapper.destroy()
47+
})
48+
3349
it('should have class "img-fluid" when prop fluid set', async () => {
3450
const wrapper = mount(BImg, {
3551
propsData: {
@@ -223,4 +239,17 @@ describe('img', () => {
223239

224240
wrapper.destroy()
225241
})
242+
243+
it('should have alt attribute when `alt` prop is empty', async () => {
244+
const wrapper = mount(BImg, {
245+
propsData: {
246+
alt: ''
247+
}
248+
})
249+
250+
expect(wrapper.attributes('alt')).toBeDefined()
251+
expect(wrapper.attributes('alt')).toEqual('')
252+
253+
wrapper.destroy()
254+
})
226255
})

0 commit comments

Comments
 (0)
0