Skip to content

Commit 9e122f9

Browse files
patrickcatepatrickcate
authored
Merge pull request #765 from patrickcate/develop
 fix svg sprite attribute binding
2 parents 1633445 + 6bda16d commit 9e122f9

File tree

7 files changed

+70
-84
lines changed

7 files changed

+70
-84
lines changed

‎src/components/UsaIcon/UsaIcon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,6 @@ const iconHref = computed(() => `${svgSpritePath}#${props.name}`)
6262
:focusable="focusable"
6363
>
6464
<slot name="title"></slot>
65-
<use v-bind="{ 'xlink:href': iconHref }"></use>
65+
<use :xlink:href="iconHref"></use>
6666
</svg>
6767
</template>

‎src/components/UsaModalCloseButton/UsaModalCloseButton.test.js

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,22 +18,17 @@ describe('UsaModalCloseButton', () => {
1818
cy.get('button.usa-modal__close')
1919
.should('have.class', 'usa-button')
2020
.and('have.attr', 'type', 'button')
21-
.and('have.attr', 'aria-label')
22-
.and('contain', 'Close Modal')
21+
.and('have.attr', 'aria-label', 'Close Modal')
2322

2423
cy.get('svg.usa-icon')
2524
.as('svgIcon')
26-
.should('have.attr', 'aria-hidden')
27-
.and('contain', 'true')
28-
29-
cy.get('@svgIcon').should('have.attr', 'focusable').and('contain', 'false')
30-
31-
cy.get('@svgIcon').should('have.attr', 'role').and('contain', 'img')
25+
.should('have.attr', 'aria-hidden', 'true')
26+
.and('have.attr', 'focusable', 'false')
27+
.and('have.attr', 'role', 'img')
3228

3329
cy.get('@svgIcon')
3430
.find('use')
35-
.should('have.attr', 'xlink:href')
36-
.and('contain', '/test.svg#close')
31+
.should('have.attr', 'xlink:href', '/test.svg#close')
3732
})
3833

3934
it('shows scoped slot content', () => {

‎src/components/UsaModalCloseButton/UsaModalCloseButton.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ defineProps({
2626
focusable="false"
2727
role="img"
2828
>
29-
<use v-bind="{ 'xlink:href': `${svgSpritePath}#close` }"></use>
29+
<use :xlink:href="`${svgSpritePath}#close`"></use>
3030
</svg>
3131
</slot>
3232
</button>

‎src/components/UsaPagination/UsaPagination.test.js

Lines changed: 51 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,7 @@ describe('UsaPagination', () => {
4949
cy.get('li.usa-pagination__item:nth-child(8)').as('item7')
5050
cy.get('li.usa-pagination__item:nth-child(9)').as('itemNext')
5151

52-
cy.get('nav.usa-pagination')
53-
.should('have.attr', 'aria-label')
54-
.and('contain', 'Pagination')
52+
cy.get('nav.usa-pagination').should('have.attr', 'aria-label', 'Pagination')
5553

5654
cy.get('ul.usa-pagination__list li').should('have.length', 9)
5755

@@ -60,31 +58,38 @@ describe('UsaPagination', () => {
6058
.children()
6159
.should('have.class', 'usa-pagination__link')
6260
.and('have.class', 'usa-pagination__previous-page')
63-
.and('have.attr', 'aria-label')
64-
.and('contain', 'Previous page')
65-
.get('@itemPrevious')
66-
.find('span')
67-
.should('contain', 'Previous')
61+
.and('have.attr', 'aria-label', 'Previous page')
62+
63+
cy.get('@itemPrevious')
64+
.find('svg')
65+
.should('have.class', 'usa-icon')
66+
.and('have.attr', 'aria-hidden', 'true')
67+
.and('have.attr', 'role', 'img')
68+
69+
cy.get('@itemPrevious')
70+
.find('svg use')
71+
.should(
72+
'have.attr',
73+
'xlink:href',
74+
'/assets/img/sprite.svg#navigate_before'
75+
)
76+
77+
cy.get('@itemPrevious').find('span').should('contain', 'Previous')
6878

6979
cy.get('@item1')
7080
.should('have.class', 'usa-pagination__page-no')
7181
.children()
7282
.should('have.class', 'usa-pagination__button')
73-
.and('have.attr', 'aria-label')
74-
.and('contain', 'First page, page 1')
83+
.and('have.attr', 'aria-label', 'First page, page 1')
7584

76-
cy.get('@item2')
77-
.children()
78-
.should('have.attr', 'aria-current')
79-
.and('contain', 'page')
85+
cy.get('@item2').children().should('have.attr', 'aria-current', 'page')
8086

8187
for (let i = 2; i <= 5; i++) {
8288
cy.get(`@item${i}`)
8389
.should('have.class', 'usa-pagination__page-no')
8490
.children()
8591
.should('have.class', 'usa-pagination__button')
86-
.and('have.attr', 'aria-label')
87-
.and('contain', `Page ${i}`)
92+
.and('have.attr', 'aria-label', `Page ${i}`)
8893
}
8994

9095
cy.get('@item6')
@@ -99,19 +104,26 @@ describe('UsaPagination', () => {
99104
.should('have.class', 'usa-pagination__page-no')
100105
.children()
101106
.should('have.class', 'usa-pagination__button')
102-
.and('have.attr', 'aria-label')
103-
.and('contain', 'Last page, page 8')
107+
.and('have.attr', 'aria-label', 'Last page, page 8')
104108

105109
cy.get('@itemNext')
106110
.should('have.class', 'usa-pagination__arrow')
107111
.children()
108112
.should('have.class', 'usa-pagination__link')
109113
.and('have.class', 'usa-pagination__next-page')
110-
.and('have.attr', 'aria-label')
111-
.and('contain', 'Next page')
112-
.get('@itemNext')
113-
.find('span')
114-
.should('contain', 'Next')
114+
.and('have.attr', 'aria-label', 'Next page')
115+
116+
cy.get('@itemNext')
117+
.find('svg')
118+
.should('have.class', 'usa-icon')
119+
.and('have.attr', 'aria-hidden', 'true')
120+
.and('have.attr', 'role', 'img')
121+
122+
cy.get('@itemNext')
123+
.find('svg use')
124+
.should('have.attr', 'xlink:href', '/assets/img/sprite.svg#navigate_next')
125+
126+
cy.get('@itemNext').find('span').should('contain', 'Next')
115127
})
116128

117129
it('does not show the previous/next links on the first/last pages', () => {
@@ -199,9 +211,11 @@ describe('UsaPagination', () => {
199211
},
200212
})
201213

202-
cy.get('nav.usa-pagination')
203-
.should('have.attr', 'aria-label')
204-
.and('contain', 'Test aria label')
214+
cy.get('nav.usa-pagination').should(
215+
'have.attr',
216+
'aria-label',
217+
'Test aria label'
218+
)
205219
})
206220

207221
it('shows custom item labels', () => {
@@ -230,36 +244,29 @@ describe('UsaPagination', () => {
230244

231245
cy.get('@itemPrevious')
232246
.children()
233-
.should('have.attr', 'aria-label')
234-
.and('contain', 'TEST Previous page')
235-
.get('@itemPrevious')
236-
.find('span')
237-
.should('contain', 'TEST Previous')
247+
.should('have.attr', 'aria-label', 'TEST Previous page')
248+
249+
cy.get('@itemPrevious').find('span').should('contain', 'TEST Previous')
238250

239251
cy.get('@item1')
240252
.children()
241-
.should('have.attr', 'aria-label')
242-
.and('contain', 'TEST First page, page 1')
253+
.should('have.attr', 'aria-label', 'TEST First page, page 1')
243254

244255
for (let i = 2; i <= 5; i++) {
245256
cy.get(`@item${i}`)
246257
.children()
247-
.should('have.attr', 'aria-label')
248-
.and('contain', `TEST Page ${i}`)
258+
.should('have.attr', 'aria-label', `TEST Page ${i}`)
249259
}
250260

251261
cy.get('@item7')
252262
.children()
253-
.should('have.attr', 'aria-label')
254-
.and('contain', 'TEST Last page, page 10')
263+
.should('have.attr', 'aria-label', 'TEST Last page, page 10')
255264

256265
cy.get('@itemNext')
257266
.children()
258-
.should('have.attr', 'aria-label')
259-
.and('contain', 'TEST Next page')
260-
.get('@itemNext')
261-
.find('span')
262-
.should('contain', 'TEST Next')
267+
.should('have.attr', 'aria-label', 'TEST Next page')
268+
269+
cy.get('@itemNext').find('span').should('contain', 'TEST Next')
263270
})
264271

265272
it('adds custom CSS classes', () => {
@@ -616,15 +623,13 @@ describe('UsaPagination', () => {
616623
.as('itemPrevious')
617624
.children()
618625
.should('contain', 'Test Previous Slot')
619-
.and('have.attr', 'aria-label')
620-
.and('contain', 'Test aria label')
626+
.and('have.attr', 'aria-label', 'Test aria label previous')
621627

622628
cy.get('li.usa-pagination__item:nth-last-child(1)')
623629
.as('itemNext')
624630
.children()
625631
.should('contain', 'Test Next Slot')
626-
.and('have.attr', 'aria-label')
627-
.and('contain', 'Test aria label next')
632+
.and('have.attr', 'aria-label', 'Test aria label next')
628633
})
629634

630635
it('clicking next/previous link goes to the next/previous page', () => {

‎src/components/UsaPagination/UsaPagination.vue

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -170,9 +170,7 @@ function getAriaLabel(pageNumber) {
170170
aria-hidden="true"
171171
role="img"
172172
>
173-
<use
174-
v-bind="{ 'xlink:href': `${svgSpritePath}#navigate_before}` }"
175-
></use>
173+
<use :xlink:href="`${svgSpritePath}#navigate_before`"></use>
176174
</svg>
177175
</template>
178176
</template>
@@ -240,9 +238,7 @@ function getAriaLabel(pageNumber) {
240238
aria-hidden="true"
241239
role="img"
242240
>
243-
<use
244-
v-bind="{ 'xlink:href': `${svgSpritePath}#navigate_next}` }"
245-
></use>
241+
<use :xlink:href="`${svgSpritePath}#navigate_next`"></use>
246242
</svg>
247243
</template>
248244
</template>

‎src/components/UsaPaginationArrow/UsaPaginationArrow.test.js

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@ describe('UsaPaginationArrow', () => {
2727
.should('have.class', 'usa-pagination__previous-page')
2828
.and('have.class', 'usa-pagination__link')
2929
.and('have.class', 'usa-button--unstyled')
30-
.and('have.attr', 'aria-label')
31-
.and('contains', 'Previous page')
30+
.and('have.attr', 'aria-label', 'Previous page')
3231

3332
cy.get('@arrowItem')
3433
.find('span')
@@ -44,8 +43,7 @@ describe('UsaPaginationArrow', () => {
4443
cy.get('@arrowItem')
4544
.find('button')
4645
.should('have.class', 'usa-pagination__next-page')
47-
.and('have.attr', 'aria-label')
48-
.and('contains', 'Next page')
46+
.and('have.attr', 'aria-label', 'Next page')
4947

5048
cy.get('@arrowItem')
5149
.find('span')
@@ -89,15 +87,13 @@ describe('UsaPaginationArrow', () => {
8987
cy.get('.usa-pagination__arrow svg')
9088
.as('arrowSvg')
9189
.should('have.class', 'usa-icon')
92-
.and('have.attr', 'role')
93-
.and('contain', 'img')
90+
.and('have.attr', 'role', 'img')
9491

95-
cy.get('@arrowSvg').should('have.attr', 'aria-hidden').and('contain', true)
92+
cy.get('@arrowSvg').should('have.attr', 'aria-hidden', 'true')
9693

9794
cy.get('@arrowSvg')
9895
.find('use')
99-
.should('have.attr', 'xlink:href')
100-
.and('contain', '/test.svg#navigate_before')
96+
.should('have.attr', 'xlink:href', '/test.svg#navigate_before')
10197

10298
cy.get('@wrapper').invoke('setProps', {
10399
direction: 'next',
@@ -108,15 +104,13 @@ describe('UsaPaginationArrow', () => {
108104
cy.get('.usa-pagination__arrow svg')
109105
.as('arrowSvg')
110106
.should('have.class', 'usa-icon')
111-
.and('have.attr', 'role')
112-
.and('contain', 'img')
107+
.and('have.attr', 'role', 'img')
113108

114-
cy.get('@arrowSvg').should('have.attr', 'aria-hidden').and('contain', true)
109+
cy.get('@arrowSvg').should('have.attr', 'aria-hidden', 'true')
115110

116111
cy.get('@arrowSvg')
117112
.find('use')
118-
.should('have.attr', 'xlink:href')
119-
.and('contain', '/test.svg#navigate_next')
113+
.should('have.attr', 'xlink:href', '/test.svg#navigate_next')
120114
})
121115

122116
it('renders custom `before` and `after` slot content', () => {

‎src/components/UsaPaginationArrow/UsaPaginationArrow.vue

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,7 @@ const classes = computed(() => [
8080
aria-hidden="true"
8181
role="img"
8282
>
83-
<use
84-
v-bind="{ 'xlink:href': `${svgSpritePath}#navigate_before` }"
85-
></use>
83+
<use :xlink:href="`${svgSpritePath}#navigate_before`"></use>
8684
</svg>
8785
</slot>
8886
<span class="usa-pagination__link-text" :class="customClasses?.text"
@@ -99,9 +97,7 @@ const classes = computed(() => [
9997
aria-hidden="true"
10098
role="img"
10199
>
102-
<use
103-
v-bind="{ 'xlink:href': `${svgSpritePath}#navigate_next` }"
104-
></use>
100+
<use :xlink:href="`${svgSpritePath}#navigate_next`"></use>
105101
</svg>
106102
</slot>
107103
</component>

0 commit comments

Comments
 (0)