Improve modal_service Unit Test (#216786)

## Summary

Address https://github.com/elastic/kibana/issues/216785
This commit is contained in:
Gerard Soldevila 2025-04-09 14:53:08 +02:00 committed by GitHub
parent 411aa9928a
commit 47eab38887
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 78 additions and 2665 deletions

View file

@ -25,6 +25,10 @@ const i18nMock = i18nServiceMock.createStartContract();
const themeMock = themeServiceMock.createStartContract();
const userProfileMock = userProfileServiceMock.createStart();
const MODAL_CONTENT = 'Modal content 1';
const MODAL_CONTENT_TWO = 'Modal content 2';
const SOME_CONFIRM = 'Some confirm';
beforeEach(() => {
mockReactDomRender.mockClear();
mockReactDomUnmount.mockClear();
@ -52,25 +56,30 @@ describe('ModalService', () => {
expect(mockReactDomRender).not.toHaveBeenCalled();
modals.open((container) => {
const content = document.createElement('span');
content.textContent = 'Modal content';
content.textContent = MODAL_CONTENT;
container.append(content);
return () => {};
});
expect(mockReactDomRender.mock.calls).toMatchSnapshot();
expect(mockReactDomRender.mock.calls[0][0].props.children.type.name).toEqual('EuiModal');
const modalContent = mount(mockReactDomRender.mock.calls[0][0]);
expect(modalContent.render()).toMatchSnapshot();
expect(modalContent.find('div.euiModal').text()).toEqual(MODAL_CONTENT);
});
describe('with a currently active modal', () => {
let ref1: OverlayRef;
beforeEach(() => {
ref1 = modals.open(mountReactNode(<span>Modal content 1</span>));
ref1 = modals.open(mountReactNode(<span>`${MODAL_CONTENT}`</span>));
});
it('replaces the current modal with a new one', () => {
modals.open(mountReactNode(<span>Flyout content 2</span>));
expect(mockReactDomRender.mock.calls).toMatchSnapshot();
const mountPoint = mountReactNode(<span>Flyout content 2</span>);
modals.open(mountPoint);
expect(mockReactDomRender.mock.calls[0][0].props.children.type.name).toEqual('EuiModal');
expect(mockReactDomRender.mock.calls[1][0].props.children.type.name).toEqual('EuiModal');
const modalContent = mount(mockReactDomRender.mock.calls[1][0]);
expect((modalContent.find('MountWrapper').props() as any).mount).toEqual(mountPoint);
expect(mockReactDomUnmount).toHaveBeenCalledTimes(1);
expect(() => ref1.close()).not.toThrowError();
expect(mockReactDomUnmount).toHaveBeenCalledTimes(1);
@ -93,8 +102,20 @@ describe('ModalService', () => {
});
it('replaces the current confirm with the new one', () => {
modals.openConfirm('some confirm');
expect(mockReactDomRender.mock.calls).toMatchSnapshot();
modals.openConfirm(SOME_CONFIRM);
expect(mockReactDomRender.mock.calls[0][0].props.children.type.name).toEqual(
'EuiConfirmModal'
);
expect(mockReactDomRender.mock.calls[1][0].props.children.type.name).toEqual(
'EuiConfirmModal'
);
const modalContent = mount(mockReactDomRender.mock.calls[1][0]);
expect(modalContent.find('EuiText[data-test-subj="confirmModalBodyText"]').text()).toEqual(
SOME_CONFIRM
);
expect(mockReactDomUnmount).toHaveBeenCalledTimes(1);
});
@ -110,33 +131,49 @@ describe('ModalService', () => {
expect(mockReactDomRender).not.toHaveBeenCalled();
modals.openConfirm((container) => {
const content = document.createElement('span');
content.textContent = 'Modal content';
content.textContent = MODAL_CONTENT;
container.append(content);
return () => {};
});
expect(mockReactDomRender.mock.calls).toMatchSnapshot();
expect(mockReactDomRender.mock.calls[0][0].props.children.type.name).toEqual(
'EuiConfirmModal'
);
const modalContent = mount(mockReactDomRender.mock.calls[0][0]);
expect(modalContent.render()).toMatchSnapshot();
expect(modalContent.find('EuiText[data-test-subj="confirmModalBodyText"]').text()).toEqual(
MODAL_CONTENT
);
});
it('renders a string confirm message', () => {
expect(mockReactDomRender).not.toHaveBeenCalled();
modals.openConfirm('Some message');
expect(mockReactDomRender.mock.calls).toMatchSnapshot();
modals.openConfirm(SOME_CONFIRM);
expect(mockReactDomRender.mock.calls[0][0].props.children.type.name).toEqual(
'EuiConfirmModal'
);
const modalContent = mount(mockReactDomRender.mock.calls[0][0]);
expect(modalContent.render()).toMatchSnapshot();
expect(modalContent.find('EuiText[data-test-subj="confirmModalBodyText"]').text()).toEqual(
SOME_CONFIRM
);
});
describe('with a currently active modal', () => {
let ref1: OverlayRef;
beforeEach(() => {
ref1 = modals.open(mountReactNode(<span>Modal content 1</span>));
ref1 = modals.open(mountReactNode(<span>`${MODAL_CONTENT}`</span>));
});
it('replaces the current modal with the new confirm', () => {
modals.openConfirm('some confirm');
expect(mockReactDomRender.mock.calls).toMatchSnapshot();
modals.openConfirm(SOME_CONFIRM);
expect(mockReactDomRender.mock.calls[1][0].props.children.type.name).toEqual(
'EuiConfirmModal'
);
const modalContent = mount(mockReactDomRender.mock.calls[1][0]);
expect(modalContent.find('EuiText[data-test-subj="confirmModalBodyText"]').text()).toEqual(
SOME_CONFIRM
);
expect(mockReactDomUnmount).toHaveBeenCalledTimes(1);
expect(() => ref1.close()).not.toThrowError();
expect(mockReactDomUnmount).toHaveBeenCalledTimes(1);
@ -145,7 +182,7 @@ describe('ModalService', () => {
it('resolves onClose on the previous ref', async () => {
const onCloseComplete = jest.fn();
ref1.onClose.then(onCloseComplete);
modals.openConfirm('some confirm');
modals.openConfirm(SOME_CONFIRM);
await ref1.onClose;
expect(onCloseComplete).toBeCalledTimes(1);
});
@ -159,13 +196,24 @@ describe('ModalService', () => {
});
it('replaces the current confirm with the new one', () => {
modals.openConfirm('some confirm');
expect(mockReactDomRender.mock.calls).toMatchSnapshot();
modals.openConfirm(SOME_CONFIRM);
expect(mockReactDomRender.mock.calls[0][0].props.children.type.name).toEqual(
'EuiConfirmModal'
);
expect(mockReactDomRender.mock.calls[1][0].props.children.type.name).toEqual(
'EuiConfirmModal'
);
const modalContent = mount(mockReactDomRender.mock.calls[1][0]);
expect(modalContent.find('EuiText[data-test-subj="confirmModalBodyText"]').text()).toEqual(
SOME_CONFIRM
);
expect(mockReactDomUnmount).toHaveBeenCalledTimes(1);
});
it('resolves the previous confirm promise', async () => {
modals.openConfirm('some confirm');
modals.openConfirm(SOME_CONFIRM);
expect(await confirm1).toEqual(false);
});
});
@ -186,14 +234,20 @@ describe('ModalService', () => {
const ref = modals.open(mountReactNode(<span>Flyout content</span>));
expect(mockReactDomUnmount).not.toHaveBeenCalled();
await ref.close();
expect(mockReactDomUnmount.mock.calls).toMatchSnapshot();
expect(mockReactDomUnmount.mock.calls).toMatchInlineSnapshot(`
Array [
Array [
<div />,
],
]
`);
await ref.close();
expect(mockReactDomUnmount).toHaveBeenCalledTimes(1);
});
it("on a stale ModalRef doesn't affect the active flyout", async () => {
const ref1 = modals.open(mountReactNode(<span>Modal content 1</span>));
const ref2 = modals.open(mountReactNode(<span>Modal content 2</span>));
const ref1 = modals.open(mountReactNode(<span>`${MODAL_CONTENT}`</span>));
const ref2 = modals.open(mountReactNode(<span>`${MODAL_CONTENT_TWO}`</span>));
const onCloseComplete = jest.fn();
ref2.onClose.then(onCloseComplete);
mockReactDomUnmount.mockClear();