@@ -8,32 +8,42 @@ test('.toBeInTheDOM', () => {
88 const { queryByTestId} = render ( `
99 <span data-testid="count-container">
1010 <span data-testid="count-value"></span>
11+ <svg data-testid="svg-element"></svg>
1112 </span>` )
1213
1314 const containerElement = queryByTestId ( 'count-container' )
1415 const valueElement = queryByTestId ( 'count-value' )
1516 const nonExistantElement = queryByTestId ( 'not-exists' )
17+ const svgElement = queryByTestId ( 'svg-element' )
1618 const fakeElement = { thisIsNot : 'an html element' }
1719
1820 // Testing toBeInTheDOM without container
1921 expect ( valueElement ) . toBeInTheDOM ( )
22+ expect ( svgElement ) . toBeInTheDOM ( )
2023 expect ( nonExistantElement ) . not . toBeInTheDOM ( )
2124
2225 // negative test cases wrapped in throwError assertions for coverage.
2326 expect ( ( ) => expect ( valueElement ) . not . toBeInTheDOM ( ) ) . toThrowError ( )
2427
28+ expect ( ( ) => expect ( svgElement ) . not . toBeInTheDOM ( ) ) . toThrowError ( )
29+
2530 expect ( ( ) => expect ( nonExistantElement ) . toBeInTheDOM ( ) ) . toThrowError ( )
2631
2732 expect ( ( ) => expect ( fakeElement ) . toBeInTheDOM ( ) ) . toThrowError ( )
2833
2934 // Testing toBeInTheDOM with container
3035 expect ( valueElement ) . toBeInTheDOM ( containerElement )
36+ expect ( svgElement ) . toBeInTheDOM ( containerElement )
3137 expect ( containerElement ) . not . toBeInTheDOM ( valueElement )
3238
3339 expect ( ( ) =>
3440 expect ( valueElement ) . not . toBeInTheDOM ( containerElement ) ,
3541 ) . toThrowError ( )
3642
43+ expect ( ( ) =>
44+ expect ( svgElement ) . not . toBeInTheDOM ( containerElement ) ,
45+ ) . toThrowError ( )
46+
3747 expect ( ( ) =>
3848 expect ( nonExistantElement ) . toBeInTheDOM ( containerElement ) ,
3949 ) . toThrowError ( )
@@ -53,21 +63,26 @@ test('.toContainElement', () => {
5363 <span data-testid="parent">
5464 <span data-testid="child"></span>
5565 </span>
66+ <svg data-testid="svg-element"></svg>
5667 </span>
5768 ` )
5869
5970 const grandparent = queryByTestId ( 'grandparent' )
6071 const parent = queryByTestId ( 'parent' )
6172 const child = queryByTestId ( 'child' )
73+ const svgElement = queryByTestId ( 'svg-element' )
6274 const nonExistantElement = queryByTestId ( 'not-exists' )
6375 const fakeElement = { thisIsNot : 'an html element' }
6476
6577 expect ( grandparent ) . toContainElement ( parent )
6678 expect ( grandparent ) . toContainElement ( child )
79+ expect ( grandparent ) . toContainElement ( svgElement )
6780 expect ( parent ) . toContainElement ( child )
6881 expect ( parent ) . not . toContainElement ( grandparent )
82+ expect ( parent ) . not . toContainElement ( svgElement )
6983 expect ( child ) . not . toContainElement ( parent )
7084 expect ( child ) . not . toContainElement ( grandparent )
85+ expect ( child ) . not . toContainElement ( svgElement )
7186
7287 // negative test cases wrapped in throwError assertions for coverage.
7388 expect ( ( ) =>
@@ -96,25 +111,33 @@ test('.toContainElement', () => {
96111 expect ( ( ) => expect ( grandparent ) . toContainElement ( fakeElement ) ) . toThrowError ( )
97112 expect ( ( ) => expect ( fakeElement ) . toContainElement ( fakeElement ) ) . toThrowError ( )
98113 expect ( ( ) => expect ( grandparent ) . not . toContainElement ( child ) ) . toThrowError ( )
114+ expect ( ( ) =>
115+ expect ( grandparent ) . not . toContainElement ( svgElement ) ,
116+ ) . toThrowError ( )
99117} )
100118
101119test ( '.toBeEmpty' , ( ) => {
102120 const { queryByTestId} = render ( `
103121 <span data-testid="not-empty">
104122 <span data-testid="empty"></span>
123+ <svg data-testid="svg-empty"></svg>
105124 </span>` )
106125
107126 const empty = queryByTestId ( 'empty' )
108127 const notEmpty = queryByTestId ( 'not-empty' )
128+ const svgEmpty = queryByTestId ( 'svg-empty' )
109129 const nonExistantElement = queryByTestId ( 'not-exists' )
110130 const fakeElement = { thisIsNot : 'an html element' }
111131
112132 expect ( empty ) . toBeEmpty ( )
133+ expect ( svgEmpty ) . toBeEmpty ( )
113134 expect ( notEmpty ) . not . toBeEmpty ( )
114135
115136 // negative test cases wrapped in throwError assertions for coverage.
116137 expect ( ( ) => expect ( empty ) . not . toBeEmpty ( ) ) . toThrowError ( )
117138
139+ expect ( ( ) => expect ( svgEmpty ) . not . toBeEmpty ( ) ) . toThrowError ( )
140+
118141 expect ( ( ) => expect ( notEmpty ) . toBeEmpty ( ) ) . toThrowError ( )
119142
120143 expect ( ( ) => expect ( fakeElement ) . toBeEmpty ( ) ) . toThrowError ( )
@@ -148,13 +171,17 @@ test('.toHaveAttribute', () => {
148171 <button data-testid="ok-button" type="submit" disabled>
149172 OK
150173 </button>
174+ <svg data-testid="svg-element" width="12"></svg>
151175 ` )
152176
153177 expect ( queryByTestId ( 'ok-button' ) ) . toHaveAttribute ( 'disabled' )
154178 expect ( queryByTestId ( 'ok-button' ) ) . toHaveAttribute ( 'type' )
155179 expect ( queryByTestId ( 'ok-button' ) ) . not . toHaveAttribute ( 'class' )
156180 expect ( queryByTestId ( 'ok-button' ) ) . toHaveAttribute ( 'type' , 'submit' )
157181 expect ( queryByTestId ( 'ok-button' ) ) . not . toHaveAttribute ( 'type' , 'button' )
182+ expect ( queryByTestId ( 'svg-element' ) ) . toHaveAttribute ( 'width' )
183+ expect ( queryByTestId ( 'svg-element' ) ) . toHaveAttribute ( 'width' , '12' )
184+ expect ( queryByTestId ( 'ok-button' ) ) . not . toHaveAttribute ( 'height' )
158185
159186 expect ( ( ) =>
160187 expect ( queryByTestId ( 'ok-button' ) ) . not . toHaveAttribute ( 'disabled' ) ,
@@ -171,6 +198,12 @@ test('.toHaveAttribute', () => {
171198 expect ( ( ) =>
172199 expect ( queryByTestId ( 'ok-button' ) ) . toHaveAttribute ( 'type' , 'button' ) ,
173200 ) . toThrowError ( )
201+ expect ( ( ) =>
202+ expect ( queryByTestId ( 'svg-element' ) ) . not . toHaveAttribute ( 'width' ) ,
203+ ) . toThrowError ( )
204+ expect ( ( ) =>
205+ expect ( queryByTestId ( 'svg-element' ) ) . not . toHaveAttribute ( 'width' , '12' ) ,
206+ ) . toThrowError ( )
174207 expect ( ( ) =>
175208 expect ( { thisIsNot : 'an html element' } ) . not . toHaveAttribute ( ) ,
176209 ) . toThrowError ( )
@@ -185,6 +218,9 @@ test('.toHaveClass', () => {
185218 <button data-testid="cancel-button">
186219 Cancel
187220 </button>
221+ <svg data-testid="svg-spinner" class="spinner clockwise">
222+ <path />
223+ </svg>
188224 </div>
189225 ` )
190226
@@ -195,6 +231,9 @@ test('.toHaveClass', () => {
195231 expect ( queryByTestId ( 'delete-button' ) ) . toHaveClass ( 'btn btn-danger' )
196232 expect ( queryByTestId ( 'delete-button' ) ) . not . toHaveClass ( 'btn-link' )
197233 expect ( queryByTestId ( 'cancel-button' ) ) . not . toHaveClass ( 'btn-danger' )
234+ expect ( queryByTestId ( 'svg-spinner' ) ) . toHaveClass ( 'spinner' )
235+ expect ( queryByTestId ( 'svg-spinner' ) ) . toHaveClass ( 'clockwise' )
236+ expect ( queryByTestId ( 'svg-spinner' ) ) . not . toHaveClass ( 'wise' )
198237
199238 expect ( ( ) =>
200239 expect ( queryByTestId ( 'delete-button' ) ) . not . toHaveClass ( 'btn' ) ,
@@ -217,6 +256,12 @@ test('.toHaveClass', () => {
217256 expect ( ( ) =>
218257 expect ( queryByTestId ( 'cancel-button' ) ) . toHaveClass ( 'btn-danger' ) ,
219258 ) . toThrowError ( )
259+ expect ( ( ) =>
260+ expect ( queryByTestId ( 'svg-spinner' ) ) . not . toHaveClass ( 'spinner' ) ,
261+ ) . toThrowError ( )
262+ expect ( ( ) =>
263+ expect ( queryByTestId ( 'svg-spinner' ) ) . toHaveClass ( 'wise' ) ,
264+ ) . toThrowError ( )
220265} )
221266
222267test ( '.toHaveStyle' , ( ) => {
0 commit comments