fix(Autocomplete): make DrawerList direction observer work

packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js

@@ -221,7 +221,6 @@ export default class Autocomplete extends React.PureComponent {
       PropTypes.string,
       PropTypes.node,
     ]),
-    min_height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     enable_body_lock: PropTypes.bool,
 
     class: PropTypes.string,
@@ -316,7 +315,6 @@ export default class Autocomplete extends React.PureComponent {
     drawer_class: null,
     page_offset: null,
     observer_element: null,
-    min_height: null,
     enable_body_lock: false,
 
     class: null,

packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js

@@ -17,6 +17,10 @@ import Component from '../Autocomplete'
 import { SubmitButton } from '../../../components/input/Input'
 import { format } from '../../../components/number-format/NumberUtils'
 import userEvent from '@testing-library/user-event'
+import {
+  mockImplementationForDirectionObserver,
+  testDirectionObserver,
+} from '../../../fragments/drawer-list/__tests__/DrawerListTestMocks'
 
 const snapshotProps = {
   ...fakeProps(require.resolve('../Autocomplete'), {
@@ -61,6 +65,8 @@ const props = {
 
 const mockData = ['AA c', 'BB cc zethx', { content: ['CC', 'cc'] }]
 
+mockImplementationForDirectionObserver()
+
 describe('Autocomplete component', () => {
   it('has correct word and in-word highlighting', () => {
     const Comp = mount(
@@ -1945,6 +1951,15 @@ describe('Autocomplete component', () => {
         .getAttribute('data-test-id')
     ).toContain('bell')
   })
+
+  it('has working direction observer', async () => {
+    const Comp = mount(<Component {...props} data={mockData} />)
+
+    // open first
+    toggle(Comp)
+
+    await testDirectionObserver(Comp)
+  })
 })
 
 describe('Autocomplete markup', () => {

packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap

@@ -47,7 +47,6 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
   label_direction="horizontal"
   label_sr_only="label_sr_only"
   max_height={1}
-  min_height="min_height"
   mode="sync"
   no_animation={true}
   no_options="no_options"
@@ -148,7 +147,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
     label_sr_only="label_sr_only"
     list_class={null}
     max_height={1}
-    min_height="min_height"
+    min_height={10}
     mode="sync"
     no_animation={true}
     no_options="no_options"
@@ -250,7 +249,6 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
       label_direction="horizontal"
       label_sr_only="label_sr_only"
       max_height={1}
-      min_height="min_height"
       mode="sync"
       no_animation={true}
       no_options="no_options"
@@ -1172,7 +1170,6 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
                   "label_direction": "horizontal",
                   "label_sr_only": "label_sr_only",
                   "max_height": 1,
-                  "min_height": "min_height",
                   "mode": "sync",
                   "no_animation": true,
                   "no_options": "no_options",

packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.js

@@ -13,6 +13,10 @@ import {
   attachToBody, // in order to use document.activeElement properly
 } from '../../../core/jest/jestSetup'
 import Component from '../Dropdown'
+import {
+  mockImplementationForDirectionObserver,
+  testDirectionObserver,
+} from '../../../fragments/drawer-list/__tests__/DrawerListTestMocks'
 
 const snapshotProps = {
   ...fakeProps(require.resolve('../Dropdown'), {
@@ -82,6 +86,8 @@ const mockData = [
   '0y',
 ]
 
+mockImplementationForDirectionObserver()
+
 describe('Dropdown component', () => {
   const Comp = mount(<Component {...props} data={mockData} />)
 
@@ -1007,6 +1013,51 @@ describe('Dropdown component', () => {
         .hasAttribute('disabled')
     ).toBe(true)
   })
+
+  beforeAll(() => {
+    window.resizeTo = function resizeTo({
+      width = window.innerWidth,
+      height = window.innerHeight,
+    }) {
+      Object.assign(this, {
+        innerWidth: width,
+        innerHeight: height,
+      }).dispatchEvent(new this.Event('resize'))
+
+      // new setDirectionObserver implementation
+      jest
+        .spyOn(document.documentElement, 'clientWidth', 'get')
+        .mockImplementation(() => width)
+      jest
+        .spyOn(document.documentElement, 'clientHeight', 'get')
+        .mockImplementation(() => height)
+    }
+
+    window.scrollTo = function resizeTo({ top = window.pageYOffset }) {
+      Object.assign(this, {
+        pageYOffset: top,
+      }).dispatchEvent(new this.Event('scroll'))
+
+      // new setDirectionObserver implementation
+      jest
+        .spyOn(document.documentElement, 'scrollTop', 'get')
+        .mockImplementation(() => top)
+    }
+
+    // make sure we get the correct document.documentElement.clientHeight on startup
+    window.resizeTo({ height: window.innerHeight })
+  })
+
+  it('has working direction observer', async () => {
+    const Comp = mount(<Component {...props} data={mockData} />)
+
+    // open first
+    open(Comp)
+
+    expect(Comp.props().direction).toBe('auto')
+
+    await testDirectionObserver(Comp)
+  })
 })
 
 describe('Dropdown markup', () => {

packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js

@@ -14,39 +14,12 @@ import {
 } from '../../../core/jest/jestSetup'
 import Component from '../DrawerList'
 
-beforeAll(() => {
-  window.resizeTo = function resizeTo({
-    width = window.innerWidth,
-    height = window.innerHeight,
-  }) {
-    Object.assign(this, {
-      innerWidth: width,
-      innerHeight: height,
-    }).dispatchEvent(new this.Event('resize'))
-
-    // new setDirectionObserver implementation
-    jest
-      .spyOn(document.documentElement, 'clientWidth', 'get')
-      .mockImplementation(() => width)
-    jest
-      .spyOn(document.documentElement, 'clientHeight', 'get')
-      .mockImplementation(() => height)
-  }
-
-  window.scrollTo = function resizeTo({ top = window.pageYOffset }) {
-    Object.assign(this, {
-      pageYOffset: top,
-    }).dispatchEvent(new this.Event('scroll'))
-
-    // new setDirectionObserver implementation
-    jest
-      .spyOn(document.documentElement, 'scrollTop', 'get')
-      .mockImplementation(() => top)
-  }
-
-  // make sure we get the correct document.documentElement.clientHeight on startup
-  window.resizeTo({ height: window.innerHeight })
-})
+import {
+  mockImplementationForDirectionObserver,
+  testDirectionObserver,
+} from './DrawerListTestMocks'
+
+mockImplementationForDirectionObserver()
 
 const snapshotProps = {
   ...fakeProps(require.resolve('../DrawerList'), {
@@ -341,42 +314,7 @@ describe('DrawerList component', () => {
 
   it('has working direction observer', async () => {
     const Comp = mount(<Component {...props} data={mockData} />)
-    expect(Comp.props().direction).toBe('auto')
-
-    // the setDirectionObserver fn is changing this
-    expect(Comp.exists('.dnb-drawer-list--bottom')).toBe(true)
-    expect(
-      Comp.find('.dnb-drawer-list__options')
-        .instance()
-        .getAttribute('style')
-    ).toBe('max-height: 33.5rem;') // jsdom default is 768 innerHeight
-
-    window.resizeTo({
-      height: 640, // change innerHeight
-    })
-    await wait(100)
-
-    expect(Comp.exists('.dnb-drawer-list--bottom')).toBe(true)
-    expect(
-      Comp.find('.dnb-drawer-list__options')
-        .instance()
-        .getAttribute('style')
-    ).toBe('max-height: 28rem;')
-
-    window.scrollTo({
-      top: -640,
-    })
-    await wait(100)
-
-    // force re-render to get a updated state
-    Comp.update()
-
-    expect(Comp.exists('.dnb-drawer-list--top')).toBe(true)
-    expect(
-      Comp.find('.dnb-drawer-list__options')
-        .instance()
-        .getAttribute('style')
-    ).toBe('max-height: 28rem;') // is now min_height
+    await testDirectionObserver(Comp)
   })
 
   it('will call on_hide after "esc" key', () => {
@@ -516,4 +454,3 @@ const keydown = (Comp, keyCode) => {
   //   keyCode
   // })
 }
-const wait = (t) => new Promise((r) => setTimeout(r, t))

packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerListTestMocks.js

@@ -0,0 +1,70 @@
+export function mockImplementationForDirectionObserver() {
+  beforeAll(() => {
+    window.resizeTo = function resizeTo({
+      width = window.innerWidth,
+      height = window.innerHeight,
+    }) {
+      Object.assign(this, {
+        innerWidth: width,
+        innerHeight: height,
+      }).dispatchEvent(new this.Event('resize'))
+
+      // new setDirectionObserver implementation
+      jest
+        .spyOn(document.documentElement, 'clientWidth', 'get')
+        .mockImplementation(() => width)
+      jest
+        .spyOn(document.documentElement, 'clientHeight', 'get')
+        .mockImplementation(() => height)
+    }
+
+    window.scrollTo = function resizeTo({ top = window.pageYOffset }) {
+      Object.assign(this, {
+        pageYOffset: top,
+      }).dispatchEvent(new this.Event('scroll'))
+
+      // new setDirectionObserver implementation
+      jest
+        .spyOn(document.documentElement, 'scrollTop', 'get')
+        .mockImplementation(() => top)
+    }
+
+    // make sure we get the correct document.documentElement.clientHeight on startup
+    window.resizeTo({ height: window.innerHeight })
+  })
+}
+
+export async function testDirectionObserver(Comp) {
+  expect(Comp.props().direction).toBe('auto')
+
+  // the setDirectionObserver fn is changing this
+  expect(Comp.exists('.dnb-drawer-list--bottom')).toBe(true)
+  expect(
+    Comp.find('.dnb-drawer-list__options').instance().getAttribute('style')
+  ).toBe('max-height: 33.5rem;') // jsdom default is 768 innerHeight
+
+  window.resizeTo({
+    height: 640, // change innerHeight
+  })
+  await wait(100)
+
+  expect(Comp.exists('.dnb-drawer-list--bottom')).toBe(true)
+  expect(
+    Comp.find('.dnb-drawer-list__options').instance().getAttribute('style')
+  ).toBe('max-height: 28rem;')
+
+  window.scrollTo({
+    top: -640,
+  })
+  await wait(100)
+
+  // force re-render to get a updated state
+  Comp.update()
+
+  expect(Comp.exists('.dnb-drawer-list--top')).toBe(true)
+  expect(
+    Comp.find('.dnb-drawer-list__options').instance().getAttribute('style')
+  ).toBe('max-height: 28rem;') // is now min_height
+}
+
+const wait = (t) => new Promise((r) => setTimeout(r, t))