Update tests to get colors from CSS variables

Author: srmagura

src/__tests__/Skeleton.test.tsx

@@ -28,6 +28,15 @@ it('renders the required number of skeletons', () => {
     expect(skeletonElements).toHaveLength(4)
 })
 
+it('changes the color of the skeleton', () => {
+    render(<Skeleton baseColor="purple" highlightColor="red" />)
+
+    const skeleton = getSkeleton()
+
+    expect(skeleton.style.getPropertyValue('--base-color')).toBe('purple')
+    expect(skeleton.style.getPropertyValue('--highlight-color')).toBe('red')
+})
+
 it('renders a skeleton with styles', () => {
     const style = { borderRadius: 10, height: 50, width: 50 }
     render(<Skeleton style={style} />)

src/__tests__/SkeletonTheme.test.tsx

@@ -25,7 +25,7 @@ it('styles the skeleton', () => {
 
     const skeleton = getSkeleton()
     expect(skeleton).toHaveStyle({ borderRadius: '1rem' })
-    expect(skeleton).toHaveStyle({ backgroundColor: 'black' })
+    expect(skeleton.style.getPropertyValue('--base-color')).toBe('black')
 })
 
 it('is overridden by Skeleton props', () => {
@@ -37,7 +37,7 @@ it('is overridden by Skeleton props', () => {
 
     const skeleton = getSkeleton()
     expect(skeleton).toHaveStyle({ borderRadius: '2rem' })
-    expect(skeleton).toHaveStyle({ backgroundColor: 'black' })
+    expect(skeleton.style.getPropertyValue('--base-color')).toBe('black')
 })
 
 it('styles the skeleton through a portal', () => {
@@ -52,5 +52,5 @@ it('styles the skeleton through a portal', () => {
 
     const skeleton = getSkeleton()
     expect(skeleton).toHaveStyle({ borderRadius: '1rem' })
-    expect(skeleton).toHaveStyle({ backgroundColor: 'black' })
+    expect(skeleton.style.getPropertyValue('--base-color')).toBe('black')
 })