test: wait for tooltip to have style set

Author: gabrieljablonski

src/test/__snapshots__/tooltip-attributes.spec.js.snap

@@ -34,10 +34,12 @@ exports[`tooltip attributes tooltip with place 1`] = `
   <div
     class="react-tooltip react-tooltip__place-right"
     role="tooltip"
+    style="left: 10px; top: 5px;"
   >
     Hello World!
     <div
       class="react-tooltip-arrow"
+      style="left: -4px; top: 5px;"
     />
   </div>
 </div>

src/test/__snapshots__/tooltip-props.spec.js.snap

@@ -54,10 +54,12 @@ exports[`tooltip props tooltip with custom position 1`] = `
   <div
     class="react-tooltip react-tooltip__place-top"
     role="tooltip"
+    style="left: 5px; top: -10px;"
   >
     Hello World!
     <div
       class="react-tooltip-arrow"
+      style="left: 5px; bottom: -4px;"
     />
   </div>
 </div>
@@ -83,10 +85,12 @@ exports[`tooltip props tooltip with delay show 1`] = `
   <div
     class="react-tooltip react-tooltip__place-top"
     role="tooltip"
+    style="left: 5px; top: -10px;"
   >
     Hello World!
     <div
       class="react-tooltip-arrow"
+      style="left: 5px; bottom: -4px;"
     />
   </div>
 </div>
@@ -123,6 +127,7 @@ exports[`tooltip props tooltip with html 1`] = `
   <div
     class="react-tooltip react-tooltip__place-top"
     role="tooltip"
+    style="left: 5px; top: -10px;"
   >
     <span>
       <div>
@@ -132,6 +137,7 @@ exports[`tooltip props tooltip with html 1`] = `
     </span>
     <div
       class="react-tooltip-arrow"
+      style="left: 5px; bottom: -4px;"
     />
   </div>
 </div>
@@ -147,10 +153,12 @@ exports[`tooltip props tooltip with place 1`] = `
   <div
     class="react-tooltip react-tooltip__place-right"
     role="tooltip"
+    style="left: 10px; top: 5px;"
   >
     Hello World!
     <div
       class="react-tooltip-arrow"
+      style="left: -4px; top: 5px;"
     />
   </div>
 </div>

src/test/tooltip-attributes.spec.js

@@ -43,6 +43,7 @@ describe('tooltip attributes', () => {
 
     await waitFor(() => {
       tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toHaveAttribute('style')
     })
 
     expect(anchorElement).toHaveAttribute('data-tooltip-content')
@@ -66,6 +67,7 @@ describe('tooltip attributes', () => {
 
     await waitFor(() => {
       tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toHaveAttribute('style')
     })
 
     expect(anchorElement).toHaveAttribute('data-tooltip-place')

src/test/tooltip-props.spec.js

@@ -39,6 +39,7 @@ describe('tooltip props', () => {
 
     await waitFor(() => {
       tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toHaveAttribute('style')
     })
 
     expect(tooltip).toBeInTheDocument()
@@ -57,6 +58,7 @@ describe('tooltip props', () => {
 
     await waitFor(() => {
       tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toHaveAttribute('style')
     })
 
     expect(tooltip).toBeInTheDocument()
@@ -73,6 +75,7 @@ describe('tooltip props', () => {
 
     await waitFor(() => {
       tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toHaveAttribute('style')
     })
 
     expect(tooltip).toBeInTheDocument()
@@ -101,6 +104,7 @@ describe('tooltip props', () => {
     await waitFor(() => {
       tooltip = screen.getByRole('tooltip')
       button = screen.getByRole('button')
+      expect(tooltip).toHaveAttribute('style')
     })
 
     await userEvent.click(button)
@@ -132,6 +136,7 @@ describe('tooltip props', () => {
 
     await waitFor(() => {
       tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toHaveAttribute('style')
     })
 
     expect(tooltip).toBeInTheDocument()
@@ -185,6 +190,7 @@ describe('tooltip props', () => {
 
     await waitFor(() => {
       tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toHaveAttribute('style')
     })
 
     expect(tooltip).toBeInTheDocument()
@@ -201,6 +207,7 @@ describe('tooltip props', () => {
 
     await waitFor(() => {
       tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toHaveAttribute('style')
     })
 
     expect(tooltip).toBeInTheDocument()