feat: Use helper for get random UUID

We recently used the `randomUUID` method of `crypto`,
and added a special configuration for testing with `Jest`.

We should have added a BC at that time, because e2e tests of applications
can fail if they also do not have the correct Jest configuration.

I propose here a better approach,
which will avoid a BC and changes on the application side

react/CircleButton/index.jsx

@@ -6,6 +6,7 @@ import Box from '../Box'
 import IconButton from '../IconButton'
 import Typography from '../Typography'
 import { makeTypoColor, makeButtonShadow } from './helpers'
+import { getRandomUUID } from '../helpers/getRandomUUID'
 
 const useStyles = makeStyles(theme => ({
   iconButton: {
@@ -42,7 +43,7 @@ const CircleButton = ({
   ...props
 }) => {
   const styles = useStyles({ active: variant === 'active', disabled })
-  const uuid = crypto.randomUUID()
+  const uuid = getRandomUUID()
 
   if (!ariaLabel && !label) {
     console.warn(`The "aria-label" or "label" property must be filled in.`)

react/MuiCozyTheme/TextField/index.jsx

@@ -1,9 +1,10 @@
 import React, { forwardRef } from 'react'
 import MuiTextField from '@material-ui/core/TextField'
+import { getRandomUUID } from '../../helpers/getRandomUUID'
 
 const TextField = forwardRef(({ children, ...props }, ref) => {
   // A11Y, https://v4.mui.com/api/text-field/#props
-  const uuid = crypto.randomUUID()
+  const uuid = getRandomUUID()
 
   return (
     <MuiTextField ref={ref} id={uuid} {...props}>

react/helpers/getRandomUUID.js

@@ -0,0 +1,11 @@
+/**
+ *  Returns a random UUID
+ * @returns {string} a random UUID
+ */
+export const getRandomUUID = () => {
+  if (process.env.NODE_ENV === 'test') {
+    return 'random-uuid-for-jest'
+  }
+
+  return window.crypto.randomUUID()
+}

react/helpers/getRandomUUID.spec.js

@@ -0,0 +1,9 @@
+import { getRandomUUID } from './getRandomUUID'
+
+describe('getRandomUUID', () => {
+  it('returns a random uuid', () => {
+    const uuid = getRandomUUID()
+
+    expect(uuid).toBe('random-uuid-for-jest')
+  })
+})

test/jestsetup.js

@@ -1,16 +1,9 @@
 import '@testing-library/jest-dom/extend-expect'
 import { configure, mount, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
-import nodeCrypto from 'crypto'
 
 configure({ adapter: new Adapter() })
 
-Object.defineProperty(global, 'crypto', {
-  value: {
-    randomUUID: () => nodeCrypto.randomUUID()
-  }
-})
-
 global.mount = mount
 global.shallow = shallow