From e659a9bb14d6d99ab92ef5eb5cb72b211d35d486 Mon Sep 17 00:00:00 2001
From: AlexisG <merkkur39@gmail.com>
Date: Fri, 31 Mar 2023 13:07:49 +0200
Subject: [PATCH] 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           |  3 ++-
 react/MuiCozyTheme/TextField/index.jsx |  3 ++-
 react/helpers/getRandomUUID.js         | 11 +++++++++++
 react/helpers/getRandomUUID.spec.js    |  9 +++++++++
 test/jestsetup.js                      |  7 -------
 5 files changed, 24 insertions(+), 9 deletions(-)
 create mode 100644 react/helpers/getRandomUUID.js
 create mode 100644 react/helpers/getRandomUUID.spec.js

diff --git a/react/CircleButton/index.jsx b/react/CircleButton/index.jsx
index d0c2c87b74..118a397c6a 100644
--- a/react/CircleButton/index.jsx
+++ b/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.`)
diff --git a/react/MuiCozyTheme/TextField/index.jsx b/react/MuiCozyTheme/TextField/index.jsx
index 6eb7af59ab..0bbac3ea23 100644
--- a/react/MuiCozyTheme/TextField/index.jsx
+++ b/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}>
diff --git a/react/helpers/getRandomUUID.js b/react/helpers/getRandomUUID.js
new file mode 100644
index 0000000000..eb59b663e8
--- /dev/null
+++ b/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()
+}
diff --git a/react/helpers/getRandomUUID.spec.js b/react/helpers/getRandomUUID.spec.js
new file mode 100644
index 0000000000..54e2441b94
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/test/jestsetup.js b/test/jestsetup.js
index f920d31be4..c50a4f29e4 100644
--- a/test/jestsetup.js
+++ b/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