chore: refactor CSS support logic and write tests for it

Author: danielbarion

src/test/jest-setup.js

@@ -1,5 +1,4 @@
 import React from 'react'
-// whatever else you need in here
 
 global.React = React
 
@@ -8,3 +7,13 @@ global.ResizeObserver = jest.fn().mockImplementation(() => ({
   unobserve: jest.fn(),
   disconnect: jest.fn(),
 }))
+
+global.CSS = {
+  supports: (key, value) => {
+    if (key === 'opacity') {
+      return value
+    }
+
+    return false
+  },
+}

src/test/utils.spec.js

@@ -1,4 +1,11 @@
-import { debounce, deepEqual, computeTooltipPosition, cssTimeToMs, clearTimeoutRef } from 'utils'
+import {
+  debounce,
+  deepEqual,
+  computeTooltipPosition,
+  cssTimeToMs,
+  cssSupports,
+  clearTimeoutRef,
+} from 'utils'
 import { injectStyle } from 'utils/handle-style.ts'
 
 describe('compute positions', () => {
@@ -299,3 +306,18 @@ describe('handleStyle', () => {
     expect(styleElement.innerHTML).toBe(`body { background: 'red' }`)
   })
 })
+
+describe('check for CSS attribute support on current page', () => {
+  test('CSS attribute should be supported in global Window', () => {
+    const hasSupportToOpacity = cssSupports('opacity', '1')
+
+    expect(hasSupportToOpacity).toBe('1')
+  })
+
+  test('CSS attribute should not be supported in global Window', () => {
+    // not a valid css attribute
+    const hasSupportToOpacity = cssSupports('lorem', '100')
+
+    expect(hasSupportToOpacity).toBe(false)
+  })
+})

src/utils/css-supports.ts

@@ -1,6 +1,12 @@
+/**
+ *
+ * @param property CSS attribute
+ * @param value Value of the CSS Attribute
+ * @returns The value of the CSS Attribute is returned if it is supported, otherwise false
+ */
 const cssSupports = (property: string, value: string): boolean => {
   const hasCssSupports = 'CSS' in window && 'supports' in window.CSS
-  return hasCssSupports ? window.CSS.supports(property, value) : true
+  return hasCssSupports ? window.CSS.supports(property, value) : false
 }
 
 export default cssSupports