test: add dialog unit tests (#359)

* feat: extract class name to public file

* refactor: adjust the confirm type to obtain the style name

* test: add dialog unit tests

* refactor: draw off dialog unit test to independent component

* fix: remove jsx node type definition

.eslintrc.js

@@ -37,5 +37,6 @@ module.exports = {
         'no-invalid-this': 0,
         'spaced-comment': 0,
         'react/display-name': 0,
+        'react/prop-types': 0,
     },
 };

src/components/dialog/__tests__/__snapshots__/actionbutton.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test ActionButton Component Match ActionButton Snapshot 1`] = `
+<a
+  className="mo-btn mo-btn--normal"
+  closeModal={[MockFunction]}
+  onClick={[Function]}
+/>
+`;

src/components/dialog/__tests__/actionbutton.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+
+import ActionButton from '../actionButton';
+
+const TEST_ID = 'test-id';
+
+describe('Test ActionButton Component', () => {
+    test('Match ActionButton Snapshot', () => {
+        const TEST_FN = jest.fn();
+        const component = renderer.create(
+            <ActionButton closeModal={TEST_FN}></ActionButton>
+        );
+        const tree = component.toJSON();
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('The ActionButton actionFn', () => {
+        const ACTION_FN = jest.fn(() => false);
+        const MODAL_FN = jest.fn();
+        const wrapper = render(
+            <ActionButton
+                data-testid={TEST_ID}
+                actionFn={ACTION_FN}
+                closeModal={MODAL_FN}
+            />
+        );
+        const button = wrapper.getByTestId(TEST_ID);
+
+        fireEvent.click(button);
+        expect(ACTION_FN).toBeCalled();
+        expect(MODAL_FN).toBeCalled();
+    });
+
+    test('The ActionButton closeModal', () => {
+        const CLOSE_FN = jest.fn();
+        const ACTION_FN = jest.fn(() => Promise.resolve(1));
+        const wrapper = render(
+            <ActionButton
+                data-testid={TEST_ID}
+                actionFn={ACTION_FN}
+                closeModal={CLOSE_FN}
+            />
+        );
+        const button = wrapper.getByTestId(TEST_ID);
+
+        fireEvent.click(button);
+        expect(ACTION_FN).toBeCalled();
+    });
+});

src/components/dialog/__tests__/confirm.test.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+
+import { ConfirmState, Modal } from '../index';
+
+const { confirm, warn, warning } = Modal;
+import {
+    iconConfirmClassName,
+    textConfirmClassName,
+    detailConfirmClassName,
+} from '../base';
+
+const TEST_ID = 'test-id';
+describe('Test Confirm Component', () => {
+    function $$(className) {
+        return document.body.querySelector(className);
+    }
+
+    test('Confirm general display', async () => {
+        const className = iconConfirmClassName(ConfirmState.confirm);
+        const DESTROY_ID = 'test-destroy';
+        const TEST_TITLE = 'test-title';
+        const TEST_CONTENT = 'test-content';
+        const CANCEL_FN = jest.fn();
+        const OK_FN = jest.fn();
+        const TEST_CONFIRM = 'test-confirm';
+
+        class App extends React.Component {
+            state = {
+                destroy: () => {},
+            };
+            openConfirm = () => {
+                const { destroy } = confirm({
+                    title: TEST_TITLE,
+                    content: TEST_CONTENT,
+                    'data-testid': TEST_CONFIRM,
+                    onOk: OK_FN,
+                    onCancel: CANCEL_FN,
+                } as any);
+
+                this.setState({
+                    destroy,
+                });
+            };
+
+            render() {
+                const { destroy } = this.state;
+                return (
+                    <>
+                        <div
+                            data-testid={TEST_ID}
+                            onClick={() => this.openConfirm()}
+                        >
+                            click
+                        </div>
+                        <div data-testid={DESTROY_ID} onClick={() => destroy()}>
+                            destroy
+                        </div>
+                    </>
+                );
+            }
+        }
+
+        const wrapper = render(<App />);
+
+        fireEvent.click(wrapper.getByTestId(TEST_ID));
+        await waitFor(async () => {
+            const component = $$(`div[class*="${className}"]`);
+            expect(component!.classList).toContain(className);
+
+            const icon = $$('.codicon-warning');
+            expect(icon).not.toBeNull();
+
+            const title = $$('.mo-modal-title');
+            expect(title?.textContent).toBe(TEST_TITLE);
+
+            const confirmTitle = $$(`.${textConfirmClassName}`);
+            expect(confirmTitle?.textContent).toBe(TEST_TITLE);
+
+            const confirmDetail = $$(`.${detailConfirmClassName}`);
+            expect(confirmDetail?.textContent).toBe(TEST_CONTENT);
+
+            /**
+             * Destroy the confirm
+             */
+            fireEvent.click(wrapper.getByTestId(DESTROY_ID));
+            await waitFor(() => {
+                const component = $$(`div[class*="${className}"]`);
+                expect(component).toBeNull();
+            });
+        });
+    });
+
+    test('Warn confirm general display', async () => {
+        const className = iconConfirmClassName(ConfirmState.warning);
+
+        class App extends React.Component {
+            state = {
+                distory: null,
+            };
+            openConfirm = () => {
+                warn({});
+            };
+
+            render() {
+                return (
+                    <div
+                        data-testid={TEST_ID}
+                        onClick={() => this.openConfirm()}
+                    >
+                        click
+                    </div>
+                );
+            }
+        }
+
+        const wrapper = render(<App />);
+
+        fireEvent.click(wrapper.getByTestId(TEST_ID));
+        await waitFor(() => {
+            const confirmDetail = document.body.querySelector(`.${className}`);
+            expect(confirmDetail?.textContent).not.toBeNull();
+        });
+    });
+
+    test('Warning confirm general display', async () => {
+        const className = iconConfirmClassName(ConfirmState.warning);
+
+        class App extends React.Component {
+            state = {
+                distory: null,
+            };
+            openConfirm = () => {
+                warning({});
+            };
+
+            render() {
+                return (
+                    <div
+                        data-testid={TEST_ID}
+                        onClick={() => this.openConfirm()}
+                    >
+                        click
+                    </div>
+                );
+            }
+        }
+
+        const wrapper = render(<App />);
+
+        fireEvent.click(wrapper.getByTestId(TEST_ID));
+        await waitFor(() => {
+            const confirmDetail = document.body.querySelector(`.${className}`);
+            expect(confirmDetail?.textContent).not.toBeNull();
+        });
+    });
+});

src/components/dialog/__tests__/confirmDialog.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
+import ConfirmDialog from '../confirmDialog';
+
+const TEST_ID = 'test-id';
+describe('Test confirmDialog', () => {
+    test('The ConfirmDialog close and destroy', async () => {
+        const CLOSE_FN = jest.fn();
+        const BUTTON_OK = 'button-ok';
+        const BUTTON_CANCEL = 'button-cancel';
+        const cancelButtonProps = {
+            'data-testid': BUTTON_CANCEL,
+            className: BUTTON_OK,
+        };
+        const wrapper = render(
+            <ConfirmDialog
+                cancelButtonProps={cancelButtonProps}
+                onCancel={CLOSE_FN}
+                close={CLOSE_FN}
+                okCancel={true}
+                visible={true}
+                title="Are you sure you want to permanently delete ?"
+                content="This action is irreversible!"
+            ></ConfirmDialog>
+        );
+        const component = wrapper.getByTestId(BUTTON_CANCEL);
+
+        fireEvent.click(component);
+        expect(CLOSE_FN).toBeCalled();
+    });
+
+    test('The ConfirmDialog actions', async () => {
+        const ACTIONS = <a data-testid={TEST_ID}>molecule</a>;
+        const wrapper = render(
+            <ConfirmDialog
+                actions={ACTIONS}
+                close={() => {}}
+                okCancel={true}
+                visible={true}
+                title="Are you sure you want to permanently delete ?"
+                content="This action is irreversible!"
+            ></ConfirmDialog>
+        );
+        const component = wrapper.getByTestId(TEST_ID);
+
+        expect(component).not.toBeNull();
+    });
+});

src/components/dialog/__tests__/dialog.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
+import { Modal } from '../index';
+
+import { wrapDialogClassName } from '../base';
+
+const TEST_ID = 'test-id';
+
+describe('Test Modal Component', () => {
+    test('Modal component default value', () => {
+        const CANCEL_FN = jest.fn();
+        const OK_FN = jest.fn();
+        const TEST_OK = 'ok';
+        const TEST_CANCEL = 'cancel';
+        const BUTTON_OK = 'button-ok';
+        const BUTTON_CANCEL = 'button-cancel';
+        const okButtonProps = {
+            'data-testid': BUTTON_OK,
+            className: BUTTON_CANCEL,
+        };
+        const cancelButtonProps = {
+            'data-testid': BUTTON_CANCEL,
+            className: BUTTON_OK,
+        };
+        const wrapper = render(
+            <Modal
+                visible={true}
+                okText={TEST_OK}
+                cancelText={TEST_CANCEL}
+                okButtonProps={okButtonProps as any}
+                cancelButtonProps={cancelButtonProps as any}
+                onOk={OK_FN}
+                onCancel={CANCEL_FN}
+            />
+        );
+        const buttonOK = wrapper.getByTestId(BUTTON_OK);
+        const buttonCancel = wrapper.getByTestId(BUTTON_CANCEL);
+
+        expect(buttonOK.textContent).toBe(TEST_OK);
+        expect(buttonCancel.textContent).toBe(TEST_CANCEL);
+        expect(buttonOK.classList).toContain(BUTTON_CANCEL);
+        expect(buttonCancel.classList).toContain(BUTTON_OK);
+
+        fireEvent.click(buttonOK);
+        expect(OK_FN).toBeCalled();
+
+        fireEvent.click(buttonCancel);
+        expect(CANCEL_FN).toBeCalled();
+    });
+
+    test('Modal component custom footer', () => {
+        const TEST_FOOTER = <a data-testid={TEST_ID}>{TEST_ID}</a>;
+        const wrapper = render(<Modal footer={TEST_FOOTER} visible={true} />);
+        const footer = wrapper.getByTestId(TEST_ID);
+
+        expect(footer.textContent).toBe(TEST_ID);
+    });
+
+    test('Modal component centered', () => {
+        const TEST_FOOTER = <a data-testid={TEST_ID}>{TEST_ID}</a>;
+        const wrapper = render(
+            <Modal footer={TEST_FOOTER} centered={true} visible={true} />
+        );
+        const component = wrapper.getByTestId(TEST_ID);
+        const div = component?.closest('div')!.parentElement!.parentElement
+            ?.parentElement;
+
+        expect(div!.classList).toContain(wrapDialogClassName);
+    });
+});

src/components/dialog/actionButton.tsx

@@ -36,7 +36,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
             return;
         }
         let returnValueOfOnOk;
-        if (actionFn.length) {
+        if (actionFn!.length) {
             returnValueOfOnOk = actionFn(closeModal);
             clickedRef.current = false;
         } else {