@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/dropdown/__test__/Dropdown.test.js

@@ -0,0 +1,132 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import Dropdown from '../Dropdown';
+
+jest.mock('../subComponent/DropdownContext', () => {
+  return {
+    // children是Provider裡實際包的內容
+    Provider: ({ value, children }) => {
+      return (
+        <div>
+          {children}
+          <div>display: {value.display.toString()}</div>
+          <div>setDisplay: {(typeof value.setDisplay).toString()}</div>
+          <div>handleSelect: {(typeof value.handleSelect).toString()}</div>
+          <div>setInitialized: {(typeof value.setInitialized).toString()}</div>
+          <div>
+            setToggleElement:{' '}
+            {value.setToggleElement ? 'setToggleElement' : 'null'}
+          </div>
+          <div>
+            setContentElement:{' '}
+            {value.setContentElement ? 'setContentElement' : 'null'}
+          </div>
+          <div>{[value.styles.popper.position]}</div>
+          <div>attributes: {(typeof value.attributes).toString()}</div>
+          <div>
+            state: {value.state ? (typeof value.state).toString() : 'null'}
+          </div>
+          <div>
+            update: {value.update ? (typeof value.update).toString() : 'null'}
+          </div>
+          <button
+            onClick={() => {
+              value.setDisplay(!value.display);
+            }}
+          >
+            setDisplay
+          </button>
+          <button
+            onClick={() => {
+              value.setInitialized(true);
+            }}
+          >
+            setInitialized
+          </button>
+
+          <div ref={value.setContentElement}>
+            contentElement:{' '}
+            {value.setContentElement && value.state && value.update
+              ? (typeof value.state).toString()
+              : 'null'}
+          </div>
+
+          <div ref={value.setToggleElement}>
+            toggleElement:{' '}
+            {value.setToggleElement && value.state && value.update
+              ? (typeof value.state).toString()
+              : 'null'}
+          </div>
+        </div>
+      );
+    },
+  };
+});
+
+describe('Test Dropdown Component', () => {
+  test('render Dropdown', () => {
+    render(<Dropdown fixed>test</Dropdown>);
+
+    const dropdown = screen.getByText('test');
+    expect(dropdown).toBeInTheDocument();
+  });
+
+  test('context', () => {
+    render(<Dropdown fixed>test</Dropdown>);
+    expect(screen.getByText('display: false')).toBeInTheDocument();
+
+    const setDisplay = screen.getByText('setDisplay: function');
+    expect(setDisplay).toBeInTheDocument();
+
+    const handleSelect = screen.getByText('handleSelect: function');
+    expect(handleSelect).toBeInTheDocument();
+
+    const setInitialized = screen.getByText('setInitialized: function');
+    expect(setInitialized).toBeInTheDocument();
+
+    const setToggleElement = screen.getByText('setToggleElement: null');
+    expect(setToggleElement).toBeInTheDocument();
+
+    const setContentElement = screen.getByText('setContentElement: null');
+    expect(setContentElement).toBeInTheDocument();
+
+    const state = screen.getByText('state: null');
+    expect(state).toBeInTheDocument();
+
+    const update = screen.getByText('update: null');
+    expect(update).toBeInTheDocument();
+
+    expect(screen.getByText('fixed')).toBeInTheDocument();
+    expect(screen.getByText('attributes: object')).toBeInTheDocument();
+  });
+
+  test('function', async () => {
+    render(<Dropdown fixed>test</Dropdown>);
+
+    const setDisplay = screen.getByRole('button', { name: 'setDisplay' });
+    fireEvent.click(setDisplay);
+    expect(screen.getByText('display: true')).toBeInTheDocument();
+
+    const setInitialized = screen.getByRole('button', {
+      name: 'setInitialized',
+    });
+
+    expect(screen.queryByText('toggleElement: null')).toBeInTheDocument();
+    expect(screen.queryByText('contentElement: null')).toBeInTheDocument();
+
+    fireEvent.click(setInitialized);
+    await waitFor(() => null);
+
+    expect(
+      screen.getByText('setToggleElement: setToggleElement'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('setContentElement: setContentElement'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('toggleElement: object')).toBeInTheDocument();
+    expect(screen.getByText('contentElement: object')).toBeInTheDocument();
+  });
+  test('no parameters', () => {
+    render(<Dropdown>test</Dropdown>);
+    expect(screen.getByText('absolute')).toBeInTheDocument();
+  });
+});

package/src/dropdown/__test__/DropdownButtonOption.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import DropdownButtonOption from '../DropdownButtonOption';
+
+test('render DropdownButtonOption', () => {
+  render(<DropdownButtonOption>test</DropdownButtonOption>);
+
+  expect(screen.getByText('test')).toBeInTheDocument();
+});

package/src/dropdown/__test__/DropdownContent.test.js

@@ -0,0 +1,85 @@
+import { render, screen } from '@testing-library/react';
+import DropdownContext from '../subComponent/DropdownContext';
+import DropdownContent from '../DropdownContent';
+
+const context = {
+  setContentElement: jest.fn(),
+  styles: {
+    arrow: { position: 'absolute' },
+    popper: {
+      left: '0',
+      position: 'fixed',
+      top: '0',
+    },
+  },
+  attributes: {
+    popper: {
+      id: 'testId',
+    },
+  },
+  update: jest.fn(),
+};
+
+const onShow = jest.fn();
+const onClose = jest.fn();
+
+describe('Test DropdownContent Component', () => {
+  test('render component', () => {
+    context.display = false;
+    render(
+      <DropdownContext.Provider value={context}>
+        <DropdownContent>Content Text</DropdownContent>
+      </DropdownContext.Provider>,
+    );
+
+    const dropdownContent = screen.getByText('Content Text');
+    expect(dropdownContent).toBeInTheDocument();
+
+    expect(context.setContentElement).toBeCalledTimes(1);
+    expect(context.update).toBeCalledTimes(1);
+
+    expect(dropdownContent).toHaveStyle({
+      visibility: 'hidden',
+      left: '0',
+      position: 'fixed',
+      top: '0',
+    });
+  });
+
+  test('show content', () => {
+    context.display = true;
+    render(
+      <DropdownContext.Provider value={context}>
+        <DropdownContent onShow={onShow} onClose={onClose}>
+          Content Text
+        </DropdownContent>
+      </DropdownContext.Provider>,
+    );
+
+    const dropdownContent = screen.getByText('Content Text');
+    expect(dropdownContent).toHaveStyle({
+      visibility: 'visible',
+    });
+
+    expect(onShow).toBeCalledTimes(1);
+    expect(onClose).toBeCalledTimes(0);
+  });
+
+  test('hide content', () => {
+    context.display = false;
+    render(
+      <DropdownContext.Provider value={context}>
+        <DropdownContent onShow={onShow} onClose={onClose}>
+          Content Text
+        </DropdownContent>
+      </DropdownContext.Provider>,
+    );
+
+    const dropdownContent = screen.getByText('Content Text');
+    expect(dropdownContent).toHaveStyle({
+      visibility: 'hidden',
+    });
+
+    expect(onClose).toBeCalledTimes(1);
+  });
+});

package/src/dropdown/__test__/DropdownDivOption.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import DropdownDivOption from '../DropdownDivOption';
+
+test('render DropdownDivOption', () => {
+  render(<DropdownDivOption>test</DropdownDivOption>);
+
+  expect(screen.getByText('test')).toBeInTheDocument();
+});

package/src/dropdown/__test__/DropdownItem.test.js

@@ -0,0 +1,55 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import DropdownContext from '../subComponent/DropdownContext';
+import DropdownItem from '../DropdownItem';
+
+describe('Test DropdownItem Component', () => {
+  let onClick;
+  let handleSelect;
+  beforeEach(() => {
+    onClick = jest.fn();
+    handleSelect = jest.fn();
+  });
+
+  test('render component', () => {
+    render(
+      <DropdownContext.Provider value={{ handleSelect }}>
+        <DropdownItem onClick={onClick}>
+          <div>Item Text</div>
+        </DropdownItem>
+      </DropdownContext.Provider>,
+    );
+
+    const dropdownItem = screen.getByText('Item Text');
+    expect(dropdownItem).toBeInTheDocument();
+  });
+
+  test('click', () => {
+    render(
+      <DropdownContext.Provider value={{ handleSelect }}>
+        <DropdownItem onClick={onClick}>
+          <div>Item Text</div>
+        </DropdownItem>
+      </DropdownContext.Provider>,
+    );
+
+    const dropdownItem = screen.getByText('Item Text');
+    fireEvent.click(dropdownItem);
+    expect(onClick).toBeCalledTimes(1);
+    expect(handleSelect).toBeCalledTimes(1);
+  });
+
+  test('click without onClick callback', () => {
+    render(
+      <DropdownContext.Provider value={{ handleSelect }}>
+        <DropdownItem>
+          <div>Item Text</div>
+        </DropdownItem>
+      </DropdownContext.Provider>,
+    );
+
+    const dropdownItem = screen.getByText('Item Text');
+    fireEvent.click(dropdownItem);
+    expect(onClick).toBeCalledTimes(0);
+    expect(handleSelect).toBeCalledTimes(1);
+  });
+});

package/src/dropdown/__test__/DropdownLinkOption.test.js

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import DropdownLinkOption from '../DropdownLinkOption';
+
+test('render dropdownLinkOption', () => {
+  render(
+    <Router>
+      <DropdownLinkOption to='/'>link</DropdownLinkOption>
+    </Router>
+  );
+
+  expect(screen.getByRole('link')).toBeInTheDocument();
+  expect(screen.getByRole('link')).toHaveAttribute('href', '/');
+});

package/src/dropdown/__test__/DropdownToggle.test.js

@@ -0,0 +1,53 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import DropdownContext from '../subComponent/DropdownContext';
+import DropdownToggle from '../DropdownToggle';
+
+describe('Test DropdownToggle Component', () => {
+  const context = {
+    display: false,
+    setDisplay: null,
+    setInitialized: null,
+    setToggleElement: null,
+    update: null,
+  };
+  beforeEach(() => {
+    context.setDisplay = jest.fn();
+    context.setInitialized = jest.fn();
+    context.setToggleElement = jest.fn();
+    context.update = jest.fn();
+  });
+
+  test('render component', () => {
+    render(
+      <DropdownContext.Provider value={context}>
+        <DropdownToggle>
+          <div>Toggle Text</div>
+        </DropdownToggle>
+      </DropdownContext.Provider>,
+    );
+
+    const dropdownToggle = screen.getByText('Toggle Text');
+    expect(dropdownToggle).toBeInTheDocument();
+    expect(context.setDisplay).toBeCalledTimes(0);
+    expect(context.setInitialized).toBeCalledTimes(0);
+    expect(context.setToggleElement).toBeCalledTimes(1);
+    expect(context.update).toBeCalledTimes(0);
+  });
+
+  test('toggle', () => {
+    render(
+      <DropdownContext.Provider value={context}>
+        <DropdownToggle>
+          <div>Toggle Text</div>
+        </DropdownToggle>
+      </DropdownContext.Provider>,
+    );
+
+    const dropdownToggle = screen.getByText('Toggle Text');
+    fireEvent.click(dropdownToggle);
+    expect(context.setDisplay).toBeCalledTimes(1);
+    expect(context.setInitialized).toBeCalledTimes(1);
+    expect(context.setToggleElement).toBeCalledTimes(1);
+    expect(context.update).toBeCalledTimes(1);
+  });
+});

package/src/dropdown/index.js

@@ -0,0 +1,12 @@
+import Dropdown from './Dropdown';
+import DropdownToggle from './DropdownToggle';
+import DropdownContent from './DropdownContent';
+
+export default Object.assign(Dropdown, {
+  Toggle: DropdownToggle,
+  Content: DropdownContent,
+});
+export { default as DropdownItem } from './DropdownItem';
+export { default as DropdownButtonOption } from './DropdownButtonOption';
+export { default as DropdownDivOption } from './DropdownDivOption';
+export { default as DropdownLinkOption } from './DropdownLinkOption';

package/src/dropdown/subComponent/DropdownContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const DropdownContext = createContext(null);
+
+export default DropdownContext;