diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
index f1623267f41..c191310ed61 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
+++ b/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,
diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js
index 927316fd53d..0faf79e6b9c 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js
+++ b/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()
+
+ // open first
+ toggle(Comp)
+
+ await testDirectionObserver(Comp)
+ })
})
describe('Autocomplete markup', () => {
diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
index f76f0be692b..aa017cf5f99 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
+++ b/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",
diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.js b/packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.js
index 2282e91a409..8a185bb62c6 100644
--- a/packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.js
+++ b/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()
@@ -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()
+
+ // open first
+ open(Comp)
+
+ expect(Comp.props().direction).toBe('auto')
+
+ await testDirectionObserver(Comp)
+ })
})
describe('Dropdown markup', () => {
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js
index de7f153792b..6afe02cf457 100644
--- a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js
+++ b/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()
- 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))
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerListTestMocks.js b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerListTestMocks.js
new file mode 100644
index 00000000000..b85bf90aa16
--- /dev/null
+++ b/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))