From 816802e52e0ad34866a5ccc1844c48586708e92a Mon Sep 17 00:00:00 2001 From: Anders Date: Mon, 5 Jun 2023 10:48:52 +0200 Subject: [PATCH] chore(DrawerList): rewrite tests @testing-library/react (#2409) #2388 to `main` instead of to `v10`. --- .../drawer-list/__tests__/DrawerList.test.tsx | 319 ++++++++++-------- 1 file changed, 179 insertions(+), 140 deletions(-) diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.tsx b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.tsx index 32a2948ccf9..48f79b2f04e 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.tsx +++ b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.tsx @@ -10,9 +10,8 @@ import { axeComponent, toJson, loadScss, - attachToBody, } from '../../../core/jest/jestSetup' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import Component from '../DrawerList' import { @@ -74,28 +73,25 @@ const mockData = [ ] describe('DrawerList component', () => { - const Comp = mount() - it('has correct state at startup', () => { - expect(Comp.exists('.dnb-drawer-list--opened')).toBe(true) + render() + expect(document.querySelector('.dnb-drawer-list--opened')).toBeTruthy() }) it('has correct state after changing prop to opened', () => { - expect(Comp.exists('.dnb-drawer-list--opened')).toBe(true) - Comp.setProps({ - opened: false, - }) - Comp.update() - expect(Comp.exists('.dnb-drawer-list--opened')).toBe(false) - Comp.setProps({ - opened: true, - }) - Comp.update() - expect(Comp.exists('.dnb-drawer-list--opened')).toBe(true) + const { rerender } = render() + + expect(document.querySelector('.dnb-drawer-list--opened')).toBeTruthy() + + rerender() + expect(document.querySelector('.dnb-drawer-list--opened')).toBeFalsy() + + rerender() + expect(document.querySelector('.dnb-drawer-list--opened')).toBeTruthy() }) it('handles default_value correctly on forcing re-render', () => { - const Comp = mount( + const { rerender } = render( { ) let elem - elem = Comp.find('.dnb-drawer-list__option').at(props.value) - expect(elem.hasClass('dnb-drawer-list__option--focus')).toBe(true) - expect(elem.hasClass('dnb-drawer-list__option--selected')).toBe(true) + elem = document.querySelectorAll('.dnb-drawer-list__option')[ + props.value + ] + expect(elem.classList.contains('dnb-drawer-list__option--focus')).toBe( + true + ) + expect( + elem.classList.contains('dnb-drawer-list__option--selected') + ).toBe(true) // force re-render by prop change const title = 'show this attribute now' - Comp.setProps({ - title, - }) - expect( - Comp.find('.dnb-drawer-list').instance().getAttribute('title') - ).toBe(title) + rerender( + + ) + expect(screen.getByTitle(title)).toBeTruthy() // force re-render with null as value by prop change - Comp.setProps({ - value: props.value + 1, - }) + rerender( + + ) // the selected option got a new position - elem = Comp.find('.dnb-drawer-list__option').at(props.value + 1) - expect(elem.hasClass('dnb-drawer-list__option--selected')).toBe(true) + elem = document.querySelectorAll('.dnb-drawer-list__option')[ + props.value + 1 + ] + expect( + elem.classList.contains('dnb-drawer-list__option--selected') + ).toBe(true) // as well as the focus / active state - elem = Comp.find('.dnb-drawer-list__option').at(props.value + 1) - expect(elem.hasClass('dnb-drawer-list__option--focus')).toBe(true) + expect(elem.classList.contains('dnb-drawer-list__option--focus')).toBe( + true + ) // and for sure, the title attribute is still the same - expect( - Comp.find('.dnb-drawer-list').instance().getAttribute('title') - ).toBe(title) + expect(screen.getByTitle(title)).toBeTruthy() }) it('has correct value on key search', () => { - const Comp = mount() - - expect(Comp.exists('.dnb-drawer-list__option--focus')).toBe(true) + const { rerender } = render() - keydown(Comp, 83) // S + expect( + document.querySelector('.dnb-drawer-list__option--focus') + ).toBeTruthy() - // force re-render - Comp.update() + keydown(83) // S expect( - Comp.find('.dnb-drawer-list__option') - .at(1) - .hasClass('dnb-drawer-list__option--focus') - ).toBe(true) + Array.from( + document.querySelectorAll('.dnb-drawer-list__option')[1].classList + ) + ).toEqual([ + 'dnb-drawer-list__option', + 'dnb-drawer-list__option--focus', + ]) - keydown(Comp, 70) // F + keydown(70) // F // force re-render - Comp.update() + rerender() expect( - Comp.find('.dnb-drawer-list__option') - .at(2) - .hasClass('dnb-drawer-list__option--focus') - ).toBe(true) + Array.from( + document.querySelectorAll('.dnb-drawer-list__option')[2].classList + ) + ).toEqual([ + 'dnb-drawer-list__option', + 'dnb-drawer-list__option--selected', + 'dnb-drawer-list__option--focus', + ]) }) it('has valid on_select callback', () => { const on_select = jest.fn() - const Comp = mount( + const { rerender } = render( { ) // select the current - keydown(Comp, 32) // space + keydown(32) // space const notChangedItem = mockData[props.value] expect(on_select.mock.calls[0][0].data).toStrictEqual(notChangedItem) @@ -186,15 +210,25 @@ describe('DrawerList component', () => { expect(on_select.mock.calls[0][0].active_item).toBe(2) // reset props - Comp.setProps({ - opened: null, - }) + rerender( + + ) // then open again - Comp.setProps({ - opened: true, - }) - keydown(Comp, 40) // down + rerender( + + ) + keydown(40) // down expect(on_select.mock.calls[1][0].selected_item).toBe(undefined) expect(on_select.mock.calls[1][0].active_item).toBe(3) @@ -204,24 +238,17 @@ describe('DrawerList component', () => { }) it('will set data-dnb-drawer-list-active with id', () => { - const Comp = mount( - , - { - attachTo: attachToBody(), - } + const { rerender } = render( + ) - Comp.setProps({ - opened: true, - }) + rerender() expect( document.documentElement.getAttribute('data-dnb-drawer-list-active') ).toBe(props.id) - Comp.setProps({ - opened: false, - }) + rerender() expect( document.documentElement.hasAttribute('data-dnb-drawer-list-active') @@ -229,22 +256,17 @@ describe('DrawerList component', () => { }) it('will unset data-dnb-drawer-list-active on unmount', () => { - const Comp = mount( - , - { - attachTo: attachToBody(), - } + const { rerender, unmount } = render( + ) - Comp.setProps({ - opened: true, - }) + rerender() expect( document.documentElement.getAttribute('data-dnb-drawer-list-active') ).toBe(props.id) - Comp.unmount() + unmount() expect( document.documentElement.hasAttribute('data-dnb-drawer-list-active') @@ -275,7 +297,7 @@ describe('DrawerList component', () => { const on_change = jest.fn() const on_select = jest.fn() - const Comp = mount( + const { rerender } = render( { let selectedItem // then simulate changes - keydown(Comp, 40) // down - keydown(Comp, 32) // space + keydown(40) // down + keydown(32) // space selectedItem = mockData[props.value + 1] expect(on_change.mock.calls[0][0].data).toStrictEqual(selectedItem) expect(on_select.mock.calls[1][0].data).toStrictEqual(selectedItem) - // reset props - Comp.setProps({ - opened: null, - }) + rerender( + + ) // then open again - Comp.setProps({ - opened: true, - }) + rerender( + + ) // then simulate changes - keydown(Comp, 40) // down - keydown(Comp, 13) // enter + keydown(40) // down + keydown(13) // enter selectedItem = mockData[props.value + 2] expect(on_change.mock.calls[1][0].data).toStrictEqual(selectedItem) // second call! @@ -315,20 +348,26 @@ describe('DrawerList component', () => { it('has correct direction prop', () => { const directionTop = 'top' - const Comp = mount( + + const { rerender } = render( ) - expect(Comp.exists(`.dnb-drawer-list--${directionTop}`)).toBe(true) + + expect( + document.querySelector(`.dnb-drawer-list--${directionTop}`) + ).toBeTruthy() const directionBottom = 'bottom' - Comp.setProps({ - direction: directionBottom, - }) - expect(Comp.exists(`.dnb-drawer-list--${directionBottom}`)).toBe(true) + rerender( + + ) + expect( + document.querySelector(`.dnb-drawer-list--${directionBottom}`) + ).toBeTruthy() expect( - Comp.find('.dnb-drawer-list__options') - .instance() + document + .querySelector('.dnb-drawer-list__options') .getAttribute('style') ).toBe('max-height: 33.5rem;') }) @@ -341,58 +380,58 @@ describe('DrawerList component', () => { it('will call on_hide after "esc" key', () => { const on_hide = jest.fn() - const Comp = mount( - - ) + render() expect( - Comp.find('span.dnb-drawer-list') - .instance() - .classList.contains('dnb-drawer-list--opened') - ).toBe(true) - expect( - Comp.find('span.dnb-drawer-list') - .instance() - .classList.contains('dnb-drawer-list--hidden') - ).toBe(false) - - keydown(Comp, 27) // esc + Array.from(document.querySelector('span.dnb-drawer-list').classList) + ).toEqual([ + 'dnb-drawer-list', + 'dnb-drawer-list--top', + 'dnb-drawer-list--opened', + 'dnb-drawer-list--triangle-position-left', + 'dnb-drawer-list--left', + 'dnb-drawer-list--default', + 'dnb-drawer-list--scroll', + ]) + + keydown(27) // esc expect(on_hide.mock.calls.length).toBe(1) expect( - Comp.find('span.dnb-drawer-list') - .instance() - .classList.contains('dnb-drawer-list--opened') - ).toBe(false) - expect( - Comp.find('span.dnb-drawer-list') - .instance() - .classList.contains('dnb-drawer-list--hidden') - ).toBe(true) + Array.from(document.querySelector('span.dnb-drawer-list').classList) + ).toEqual([ + 'dnb-drawer-list', + 'dnb-drawer-list--top', + 'dnb-drawer-list--hidden', + 'dnb-drawer-list--triangle-position-left', + 'dnb-drawer-list--left', + 'dnb-drawer-list--default', + 'dnb-drawer-list--scroll', + ]) }) it('has correct class modifier "--opened"', () => { - const Comp = mount() - const elem = Comp.find('span.dnb-drawer-list') + render() + const elem = document.querySelector('span.dnb-drawer-list') - expect(elem.instance().getAttribute('class')).toContain( - 'dnb-drawer-list--opened' - ) + expect(elem.className).toContain('dnb-drawer-list--opened') - expect(elem.hasClass('dnb-drawer-list--hidden')).toBe(false) + expect(elem.className).not.toContain('dnb-drawer-list--hidden') }) it('has correct length of li elements', () => { - expect(Comp.find('li.dnb-drawer-list__option').length).toBe( - mockData.length - ) + render() + + expect( + document.querySelectorAll('li.dnb-drawer-list__option').length + ).toBe(mockData.length) }) it('has correct value on data given as an object', () => { const on_change = jest.fn() const on_select = jest.fn() - const Comp = mount( + render( { ) // then simulate changes - keydown(Comp, 40) // down + keydown(40) // down expect(on_select.mock.calls[0][0].active_item).toBe(0) - keydown(Comp, 13) // enter + keydown(13) // enter expect(on_change.mock.calls[0][0].value).toBe('a') // then open again - keydown(Comp, 32) // space + keydown(32) // space expect(on_change).toBeCalledTimes(1) expect(on_select).toBeCalledTimes(2) @@ -422,7 +461,7 @@ describe('DrawerList component', () => { const on_hide = jest.fn() const params = { 'data-attr': 'value' } - mount( + render( { expect(on_show.mock.calls.length).toBe(1) expect(on_show.mock.calls[0][0].attributes).toMatchObject(params) - keydown(Comp, 27) // esc + keydown(27) // esc expect(on_hide.mock.calls.length).toBe(1) expect(on_hide.mock.calls[0][0].attributes).toMatchObject(params) }) @@ -469,7 +508,7 @@ describe('DrawerList scss', () => { }) }) -const keydown = (Comp, keyCode) => { +const keydown = (keyCode) => { document.dispatchEvent(new KeyboardEvent('keydown', { keyCode })) // Comp.find('input').simulate('keydown', { // keyCode