[EuiRange] Spread inputPopoverProps

+ fix snapshot for `showInput="inputWithPopover"` test - it's not actually snapshotting the actual popover
elastic · Aug 15, 2023 · 5710466 · 5710466
1 parent 8f6b4a7
commit 5710466
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 23 deletions.
diff --git a/src/components/form/range/__snapshots__/range.test.tsx.snap b/src/components/form/range/__snapshots__/range.test.tsx.snap
@@ -413,36 +413,115 @@ exports[`EuiRange props range should render 1`] = `
 `;
 
 exports[`EuiRange props slider should display in popover 1`] = `
-<div
-  class="euiPopover euiInputPopover euiRange__popover emotion-euiPopover-EuiInputPopover"
->
+<body>
+  <div>
+    <div
+      class="euiPopover euiInputPopover euiRange__popover emotion-euiPopover-EuiInputPopover"
+    >
+      <div
+        class="euiPopover__anchor css-zih94u-render"
+      >
+        <div>
+          <div
+            class="euiFormControlLayout"
+          >
+            <div
+              class="euiFormControlLayout__childrenWrapper"
+            >
+              <input
+                aria-label="aria-label"
+                class="euiFieldNumber euiRangeInput euiRangeInput--max emotion-euiRangeInput"
+                data-test-subj="test subject string"
+                id="id"
+                max="100"
+                min="0"
+                name="name"
+                step="1"
+                type="number"
+                value="8"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
-    class="euiPopover__anchor css-zih94u-render"
+    data-euiportal="true"
   >
-    <div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="-1"
+    />
+    <div
+      data-focus-lock-disabled="disabled"
+    >
       <div
-        class="euiFormControlLayout"
+        aria-describedby="generated-id"
+        aria-live="assertive"
+        aria-modal="true"
+        class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-bottom"
+        data-popover-panel="true"
+        data-test-subj="test"
+        role="dialog"
+        style="top: 8px; left: -22px; will-change: transform, opacity; z-index: 2000;"
       >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
         >
-          <input
-            aria-label="aria-label"
-            class="euiFieldNumber euiRangeInput euiRangeInput--max emotion-euiRangeInput"
-            data-test-subj="test subject string"
-            id="id"
-            max="100"
-            min="0"
-            name="name"
-            step="1"
-            type="number"
-            value="8"
+          You are in a custom range slider. Use the Up and Down arrow keys to change the value.
+        </p>
+        <div>
+          <div
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+            tabindex="-1"
+          />
+          <div
+            data-focus-lock-disabled="disabled"
+          >
+            <div>
+              <div
+                class="euiRangeWrapper euiRange testClass1 testClass2 emotion-euiRangeWrapper-regular-euiRange-hasInput-euiTestCss"
+              >
+                <div
+                  aria-hidden="true"
+                  class="euiRangeTrack emotion-euiRangeTrack"
+                >
+                  <input
+                    aria-hidden="true"
+                    aria-label="aria-label"
+                    class="euiRangeSlider emotion-euiRangeSlider"
+                    data-test-subj="test subject string"
+                    max="100"
+                    min="0"
+                    name="name"
+                    step="1"
+                    tabindex="-1"
+                    type="range"
+                    value="8"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+            tabindex="-1"
           />
         </div>
       </div>
     </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="-1"
+    />
   </div>
-</div>
+</body>
 `;
 
 exports[`EuiRange props ticks should render 1`] = `

diff --git a/src/components/form/range/range.test.tsx b/src/components/form/range/range.test.tsx
@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { fireEvent } from '@testing-library/react';
 import { shouldRenderCustomStyles } from '../../../test/internal';
 import { requiredProps } from '../../../test/required_props';
 import { render } from '../../../test/rtl';
@@ -29,6 +30,20 @@ describe('EuiRange', () => {
     targetSelector: '.euiRangeSlider',
     skip: { className: true, css: true },
   });
+  shouldRenderCustomStyles(
+    <EuiRange
+      {...props}
+      showInput="inputWithPopover"
+      data-test-subj="triggerPopover"
+    />,
+    {
+      skip: { parentTest: true },
+      childProps: ['inputPopoverProps'],
+      renderCallback: ({ getByTestSubject }) => {
+        fireEvent.focus(getByTestSubject('triggerPopover'));
+      },
+    }
+  );
 
   test('is rendered', () => {
     const { container } = render(
@@ -129,18 +144,21 @@ describe('EuiRange', () => {
     });
 
     test('slider should display in popover', () => {
-      const { container } = render(
+      const { container, baseElement, getByTestSubject } = render(
         <EuiRange
           name="name"
           id="id"
           onChange={() => {}}
           showInput="inputWithPopover"
+          inputPopoverProps={{ panelProps: { 'data-test-subj': 'test' } }}
           {...props}
           {...requiredProps}
         />
       );
+      fireEvent.focus(container.querySelector('input')!);
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(baseElement).toMatchSnapshot();
+      expect(getByTestSubject('test')).toBeInTheDocument();
     });
 
     test('loading should display when showInput="inputWithPopover"', () => {

diff --git a/src/components/form/range/range.tsx b/src/components/form/range/range.tsx
@@ -127,6 +127,7 @@ export class EuiRangeClass extends Component<
       step,
       showLabels,
       showInput,
+      inputPopoverProps,
       showTicks,
       tickInterval,
       ticks,
@@ -291,7 +292,11 @@ export class EuiRangeClass extends Component<
 
     const thePopover = showInputOnly ? (
       <EuiInputPopover
-        className="euiRange__popover"
+        {...inputPopoverProps}
+        className={classNames(
+          'euiRange__popover',
+          inputPopoverProps?.className
+        )}
         input={theInput!} // `showInputOnly` confirms existence
         fullWidth={fullWidth}
         isOpen={this.state.isPopoverOpen}