Workaround for failing Jest tests/snapshots

elastic · Oct 17, 2023 · 0266b64 · 0266b64
1 parent 900ef82
commit 0266b64
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/src/components/form/field_number/__snapshots__/field_number.test.tsx.snap b/src/components/form/field_number/__snapshots__/field_number.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`EuiFieldNumber is rendered 1`] = `
       max="8"
       min="1"
       name="elastic"
-      step="1"
+      step="any"
       type="number"
       value="1"
     />

diff --git a/src/components/form/field_number/field_number.test.tsx b/src/components/form/field_number/field_number.test.tsx
@@ -32,7 +32,10 @@ describe('EuiFieldNumber', () => {
         name="elastic"
         min={1}
         max={8}
-        step={1}
+        // TODO: Restore this once we upgrade Jest/jsdom to latest. Right now passing
+        // a `step` prop always leads to jsdom thinking that validity.valid is false
+        // @see https://github.com/jsdom/jsdom/issues/2288
+        // step={1}
         value={1}
         icon="warning"
         onChange={() => {}}

diff --git a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
@@ -229,9 +229,9 @@ exports[`EuiDualRange props maxInputProps allows overriding default props 1`] =
         min="1"
         name="undefined-maxValue"
         step="1"
-        style="inline-size: calc(12px + 3ch + 2em + 22px);"
+        style="inline-size: calc(12px + 2ch + 2em + 0px);"
         type="number"
-        value="123"
+        value="23"
       />
     </div>
   </div>
@@ -324,7 +324,7 @@ exports[`EuiDualRange props maxInputProps applies passed props to max input 1`]
         min="1"
         name="undefined-maxValue"
         step="1"
-        style="inline-size: calc(12px + 1ch + 2em + 22px);"
+        style="inline-size: calc(12px + 1ch + 2em + 0px);"
         type="number"
         value="8"
       />
@@ -349,9 +349,9 @@ exports[`EuiDualRange props minInputProps allows overriding default props 1`] =
         min="0"
         name="undefined-minValue"
         step="1"
-        style="inline-size: calc(12px + 2ch + 2em + 22px);"
+        style="inline-size: calc(12px + 2ch + 2em + 0px);"
         type="number"
-        value="123"
+        value="12"
       />
     </div>
   </div>
@@ -418,7 +418,7 @@ exports[`EuiDualRange props minInputProps allows overriding default props 1`] =
         min="1"
         name="undefined-maxValue"
         step="1"
-        style="inline-size: calc(12px + 1ch + 2em + 22px);"
+        style="inline-size: calc(12px + 1ch + 2em + 0px);"
         type="number"
         value="8"
       />
@@ -513,7 +513,7 @@ exports[`EuiDualRange props minInputProps applies passed props to min input 1`]
         min="1"
         name="undefined-maxValue"
         step="1"
-        style="inline-size: calc(12px + 1ch + 2em + 22px);"
+        style="inline-size: calc(12px + 1ch + 2em + 0px);"
         type="number"
         value="8"
       />

diff --git a/src/components/form/range/dual_range.test.tsx b/src/components/form/range/dual_range.test.tsx
@@ -47,6 +47,14 @@ describe('EuiDualRange', () => {
     }
   );
 
+  // TODO: jsdom is, for some reason, incorrectly setting native `valid` state to
+  // false anytime a `step` is passed. We're temporarily overriding/mocking this
+  // value until we can upgrade Jest/Jsdom and see if it fixes itself
+  Object.defineProperty(HTMLInputElement.prototype, 'validity', {
+    configurable: true,
+    value: { valid: true },
+  });
+
   it('renders', () => {
     const { container } = render(
       <EuiDualRange name="name" id="id" {...props} {...requiredProps} />
@@ -293,7 +301,7 @@ describe('EuiDualRange', () => {
 
       it('allows overriding default props', () => {
         const { container } = render(
-          <EuiDualRange {...props} showInput minInputProps={{ value: '123' }} />
+          <EuiDualRange {...props} showInput minInputProps={{ value: '12' }} />
         );
 
         expect(container.firstChild).toMatchSnapshot();
@@ -315,7 +323,7 @@ describe('EuiDualRange', () => {
 
       it('allows overriding default props', () => {
         const { container } = render(
-          <EuiDualRange {...props} showInput maxInputProps={{ value: '123' }} />
+          <EuiDualRange {...props} showInput maxInputProps={{ value: '23' }} />
         );
 
         expect(container.firstChild).toMatchSnapshot();