fix(decorator-mui): workaround nondeterministic ID

Maybe anyway. Tried to add mocks and I am at least getting more consistent values?
forml-js · Apr 28, 2024 · 54a0058 · 54a0058
1 parent e23c934
commit 54a0058
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 84 deletions.
diff --git a/packages/decorator-mui/src/__tests__/__snapshots__/mui.test.js.snap b/packages/decorator-mui/src/__tests__/__snapshots__/mui.test.js.snap
@@ -66,72 +66,6 @@ exports[`Material UI with no model renders empty root date consistently 1`] = `
 </div>
 `;
 
-exports[`Material UI with no model renders empty root date-time consistently 1`] = `
-<div>
-  <div
-    class="MuiFormControl-root css-1lq4zch-MuiFormControl-root"
-  >
-    <div
-      class="MuiFormControl-root MuiTextField-root css-25jgoa-MuiFormControl-root-MuiTextField-root"
-    >
-      <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root"
-      >
-        <input
-          aria-invalid="false"
-          autocomplete="off"
-          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
-          id=":r2:"
-          inputmode="text"
-          placeholder="MM/DD/YYYY hh:mm aa"
-          type="text"
-          value="04/28/2024 03:37 AM"
-        />
-        <div
-          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
-        >
-          <button
-            aria-label="Choose date, selected date is Apr 28, 2024"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1yq5fb3-MuiButtonBase-root-MuiIconButton-root"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-              data-testid="CalendarIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
-              />
-            </svg>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
-          </button>
-        </div>
-        <fieldset
-          aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-        >
-          <legend
-            class="css-ihdtdm"
-          >
-            <span
-              class="notranslate"
-            >
-              
-            </span>
-          </legend>
-        </fieldset>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Material UI with no model renders empty root enumeration consistently 1`] = `
 <div>
   <div
@@ -141,7 +75,7 @@ exports[`Material UI with no model renders empty root enumeration consistently 1
       class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl  css-n70jm4-MuiInputBase-root-MuiInput-root-MuiSelect-root"
     >
       <div
-        aria-controls=":r4:"
+        aria-controls=":r2:"
         aria-expanded="false"
         aria-haspopup="listbox"
         class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input css-1rxz5jq-MuiSelect-select-MuiInputBase-input-MuiInput-input"
@@ -206,7 +140,7 @@ exports[`Material UI with no model renders empty root multiselect consistently 1
       class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl  css-n70jm4-MuiInputBase-root-MuiInput-root-MuiSelect-root"
     >
       <div
-        aria-controls=":r5:"
+        aria-controls=":r3:"
         aria-expanded="false"
         aria-haspopup="listbox"
         class="MuiSelect-select MuiSelect-standard MuiSelect-multiple MuiInputBase-input MuiInput-input css-1rxz5jq-MuiSelect-select-MuiInputBase-input-MuiInput-input"

diff --git a/packages/decorator-mui/src/__tests__/mui.test.js b/packages/decorator-mui/src/__tests__/mui.test.js
@@ -11,6 +11,15 @@ const theme = createTheme({});
 
 describe('Material UI', function () {
     describe('with no model', function () {
+        beforeEach(function () {
+            jest.mock('@mui/utils', () => ({
+                __esModule: true,
+                ...jest.requireActual('@mui/utils'),
+                useId: () => {
+                    return '1';
+                },
+            }));
+        });
         const tests = [
             ['root string', { type: 'string' }],
             ['root number', { type: 'number' }],

diff --git a/packages/decorator-mui/src/input/__tests__/select.test.jsx b/packages/decorator-mui/src/input/__tests__/select.test.jsx
@@ -2,16 +2,22 @@ import Select from '../select';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-describe('renders', function () {
+describe('renders', function() {
     let form;
 
-    beforeEach(function () {
+    beforeEach(function() {
         let form = { type: 'number', enum: [1, 2, 3] };
+        jest.mock('@mui/utils', () => ({
+            ...jest.requireActual('@mui/utils'),
+            useId: () => {
+                return '1';
+            },
+        }));
     });
 
-    test('consistently', function () {
+    test('consistently', function() {
         const { container } = render(
-            <Select value={1}>
+            <Select id="1" value={1}>
                 <Option value={1}>1</Option>
                 <Option value={2}>2</Option>
                 <Option value={3}>3</Option>

diff --git a/packages/decorator-mui/src/input/select.jsx b/packages/decorator-mui/src/input/select.jsx
@@ -13,16 +13,16 @@ export default function Select({
     children,
     multiple,
 }) {
-    const selectProps = useMemo(
-        () => ({
-            error: !!error,
-            onChange,
-            value: value ?? '',
-            placeholder,
-            disabled,
-            multiple,
-        }),
-        [error, onChange, value, placeholder, disabled, multiple]
-    );
-    return <MuiSelect {...selectProps}>{children}</MuiSelect>;
+    return (
+        <MuiSelect
+            error={!!error}
+            onChange={onChange}
+            value={value ?? ''}
+            placeholder={placeholder}
+            disabled={disabled}
+            multiple={multiple}
+        >
+            {children}
+        </MuiSelect>
+    )
 }