From ceff0b69d6f5d6da152fc79135e513050a6965c8 Mon Sep 17 00:00:00 2001
From: akai <akainice@gmail.com>
Date: Mon, 19 Oct 2020 16:46:59 +0800
Subject: [PATCH] Add test cases (#9)

* test: update LocaleProvider

* test: update Time

* test: update Modal

* test: update Toolbar

* test: update Toast

* test: add snapshots

* test: update Stepper

* test: remove SendConfirm & Tree test files

* test: update Goods

* test: update Form

* test: update Input

* test: add useMessages test

* test: add useQuickReplies test

* docs: update README
---
 README.md                                     |   8 +
 README.zh-CN.md                               |   8 +
 .../Form/__tests__/actions.test.tsx           |  25 ++
 src/components/Form/__tests__/index.test.tsx  |  21 ++
 src/components/Form/__tests__/item.test.tsx   |  44 ++++
 src/components/Goods/__tests__/index.test.tsx |  30 ++-
 src/components/Input/__tests__/index.test.tsx | 100 ++++++-
 .../LocaleProvider/__tests__/index.test.tsx   | 113 ++++++--
 src/components/LocaleProvider/index.tsx       |   9 +-
 src/components/Modal/Base.tsx                 |   2 +-
 src/components/Modal/__tests__/base.test.tsx  | 148 +++++++++++
 .../Modal/__tests__/confirm.test.tsx          |  20 ++
 src/components/Modal/__tests__/index.test.tsx |  75 ------
 src/components/Modal/__tests__/modal.test.tsx |  13 +
 src/components/Modal/__tests__/popup.test.tsx |  14 +
 .../SendConfirm/__tests__/index.test.tsx      |  23 --
 src/components/Stepper/Stepper.tsx            |   2 +-
 .../Stepper/__tests__/index.test.tsx          |  44 +++-
 .../Stepper/__tests__/step.test.tsx           |  58 ++++
 src/components/Time/__tests__/index.test.tsx  |  34 +--
 src/components/Time/__tests__/parser.test.ts  |  51 ++++
 src/components/Time/parser.ts                 |   8 +-
 src/components/Toast/__tests__/index.test.ts  |  71 +++++
 src/components/Toast/__tests__/index.test.tsx |  27 --
 src/components/Toast/__tests__/toast.test.tsx |  60 +++++
 src/components/Toolbar/Toolbar.tsx            |   2 +-
 .../Toolbar/__tests__/button.test.tsx         |  36 +++
 .../Toolbar/__tests__/index.test.tsx          |  56 +++-
 src/components/Tree/__tests__/index.test.tsx  |  90 -------
 .../__snapshots__/index.test.tsx.snap         |  25 ++
 .../__snapshots__/index.test.tsx.snap         |   9 +
 src/hooks/__test__/useMessages.test.tsx       | 249 ++++++++++++++++++
 src/hooks/__test__/useQuickReplies.test.tsx   | 188 +++++++++++++
 33 files changed, 1378 insertions(+), 285 deletions(-)
 create mode 100644 src/components/Form/__tests__/actions.test.tsx
 create mode 100644 src/components/Form/__tests__/index.test.tsx
 create mode 100644 src/components/Form/__tests__/item.test.tsx
 create mode 100644 src/components/Modal/__tests__/base.test.tsx
 create mode 100644 src/components/Modal/__tests__/confirm.test.tsx
 delete mode 100644 src/components/Modal/__tests__/index.test.tsx
 create mode 100644 src/components/Modal/__tests__/modal.test.tsx
 create mode 100644 src/components/Modal/__tests__/popup.test.tsx
 delete mode 100644 src/components/SendConfirm/__tests__/index.test.tsx
 create mode 100644 src/components/Stepper/__tests__/step.test.tsx
 create mode 100644 src/components/Time/__tests__/parser.test.ts
 create mode 100644 src/components/Toast/__tests__/index.test.ts
 delete mode 100644 src/components/Toast/__tests__/index.test.tsx
 create mode 100644 src/components/Toast/__tests__/toast.test.tsx
 create mode 100644 src/components/Toolbar/__tests__/button.test.tsx
 delete mode 100644 src/components/Tree/__tests__/index.test.tsx
 create mode 100644 src/components/Typing/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 src/components/VisuallyHidden/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 src/hooks/__test__/useMessages.test.tsx
 create mode 100644 src/hooks/__test__/useQuickReplies.test.tsx

diff --git a/README.md b/README.md
index fa2e1a56..2c7cd1e9 100644
--- a/README.md
+++ b/README.md
@@ -98,6 +98,14 @@ const App = () => {
 
 [![DEMO](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/chatui-demo-o6n3z?fontsize=14&hidenavigation=1&theme=dark)
 
+### Development
+
+```bash
+cd storybook
+npm i
+npm run storybook
+```
+
 ## Theme
 
 Visit [Customize Theme](https://chatui.io/docs/customize-theme) for detail
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 52ff4c5a..15d718bc 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -98,6 +98,14 @@ const App = () => {
 
 [![DEMO](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/chatui-demo-o6n3z?fontsize=14&hidenavigation=1&theme=dark)
 
+### 本地开发
+
+```bash
+cd storybook
+npm i
+npm run storybook
+```
+
 ### 定制主题
 
 参考 [定制主题](https://chatui.io/docs/customize-theme) 文档。
diff --git a/src/components/Form/__tests__/actions.test.tsx b/src/components/Form/__tests__/actions.test.tsx
new file mode 100644
index 00000000..15ce31c1
--- /dev/null
+++ b/src/components/Form/__tests__/actions.test.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { FormActions } from '..';
+
+afterEach(cleanup);
+
+describe('<FormActions />', () => {
+  it('should render a form actions', () => {
+    const { getByTestId } = render(<FormActions data-testid="formActions" />);
+    const formActions = getByTestId('formActions');
+
+    expect(formActions).toHaveClass('FormActions');
+  });
+
+  it('should render children', () => {
+    const { getByTestId } = render(
+      <FormActions data-testid="formActions">
+        <span>testChild</span>
+      </FormActions>,
+    );
+    const formActions = getByTestId('formActions');
+
+    expect(formActions).toContainHTML('<span>testChild</span>');
+  });
+});
diff --git a/src/components/Form/__tests__/index.test.tsx b/src/components/Form/__tests__/index.test.tsx
new file mode 100644
index 00000000..ea42a292
--- /dev/null
+++ b/src/components/Form/__tests__/index.test.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { Form } from '..';
+
+afterEach(cleanup);
+
+describe('<Form />', () => {
+  it('should render a form', () => {
+    const { getByTestId } = render(<Form data-testid="form" />);
+    const form = getByTestId('form');
+
+    expect(form).toBeInTheDocument();
+  });
+
+  it('should render a form (light)', () => {
+    const { getByTestId } = render(<Form theme="light" data-testid="form" />);
+    const form = getByTestId('form');
+
+    expect(form).toHaveClass('is-light');
+  });
+});
diff --git a/src/components/Form/__tests__/item.test.tsx b/src/components/Form/__tests__/item.test.tsx
new file mode 100644
index 00000000..bfe10bd4
--- /dev/null
+++ b/src/components/Form/__tests__/item.test.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { FormItem } from '..';
+
+afterEach(cleanup);
+
+describe('<FormItem />', () => {
+  it('should render a label', () => {
+    const { container } = render(<FormItem label="testLabel" />);
+    const formItem = container.querySelector('.FormItem');
+
+    expect(formItem?.querySelector('.Label')).not.toBeNull();
+    expect(formItem).toHaveTextContent('testLabel');
+  });
+
+  it('should render a help text', () => {
+    const { container } = render(<FormItem help="testHelp" />);
+    const formItem = container.querySelector('.FormItem');
+
+    expect(formItem?.querySelector('.HelpText')).not.toBeNull();
+    expect(formItem).toHaveTextContent('testHelp');
+  });
+
+  it('should have a status (required)', () => {
+    const { container } = render(<FormItem required />);
+    const formItem = container.querySelector('.FormItem');
+
+    expect(formItem).toHaveClass('required');
+  });
+
+  it('should have a status (invalid)', () => {
+    const { container } = render(<FormItem invalid />);
+    const formItem = container.querySelector('.FormItem');
+
+    expect(formItem).toHaveClass('is-invalid');
+  });
+
+  it('should be hidden if specified', () => {
+    const { container } = render(<FormItem hidden />);
+    const formItem = container.querySelector('.FormItem');
+
+    expect(formItem).toHaveAttribute('hidden');
+  });
+});
diff --git a/src/components/Goods/__tests__/index.test.tsx b/src/components/Goods/__tests__/index.test.tsx
index ddf2e463..79f90bb2 100644
--- a/src/components/Goods/__tests__/index.test.tsx
+++ b/src/components/Goods/__tests__/index.test.tsx
@@ -4,7 +4,7 @@ import { Goods } from '..';
 
 afterEach(cleanup);
 
-describe('<Empty />', () => {
+describe('<Goods />', () => {
   it('should render the name', () => {
     const { getByTestId } = render(<Goods name="testName" data-testid="goods" />);
     const goods = getByTestId('goods');
@@ -43,6 +43,23 @@ describe('<Empty />', () => {
     expect(goods.querySelector('.Price')).toHaveTextContent('123');
   });
 
+  it('should render the original price', () => {
+    const { getByTestId } = render(
+      <Goods name="testName" price={123} originalPrice={321} data-testid="goods" />,
+    );
+    const goods = getByTestId('goods');
+
+    expect(goods.querySelector('.Price')).toHaveTextContent('123');
+    expect(goods.querySelector('.Price--original')).toHaveTextContent('321');
+  });
+
+  it('should render the meta content', () => {
+    const { getByTestId } = render(<Goods name="testName" meta="testMeta" data-testid="goods" />);
+    const goods = getByTestId('goods');
+
+    expect(goods.querySelector('.Goods-meta')).toHaveTextContent('testMeta');
+  });
+
   it('should render the count', () => {
     const { getByTestId } = render(
       <Goods name="testName" count={123} unit="g" data-testid="goods" />,
@@ -64,4 +81,15 @@ describe('<Empty />', () => {
       fireEvent.click(btn);
     }
   });
+
+  it('should render order', () => {
+    const { getByTestId } = render(
+      <Goods type="order" name="testName" action={{ label: 'testAction' }} data-testid="order" />,
+    );
+    const order = getByTestId('order');
+
+    expect(order.querySelector('.Goods-name')).toHaveTextContent('testName');
+    expect(order.querySelector('.Goods-aside')).not.toBeNull();
+    expect(order.querySelector('.Goods-detailBtn')).toHaveTextContent('testAction');
+  });
 });
diff --git a/src/components/Input/__tests__/index.test.tsx b/src/components/Input/__tests__/index.test.tsx
index 09720b1f..7820f02a 100644
--- a/src/components/Input/__tests__/index.test.tsx
+++ b/src/components/Input/__tests__/index.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { render, cleanup, fireEvent } from '@testing-library/react';
 import { Input } from '..';
 
@@ -10,6 +10,83 @@ describe('<Input />', () => {
     const inputElement = getByTestId('input');
 
     expect(inputElement).toHaveClass('Input');
+    expect(inputElement).toHaveAttribute('type', 'text');
+  });
+
+  it('should render a textarea via multiline', () => {
+    const { getByTestId } = render(<Input value="" multiline data-testid="input" />);
+    const inputElement = getByTestId('input');
+
+    expect(inputElement.tagName).toBe('TEXTAREA');
+  });
+
+  it('should render a textarea via autoSize', () => {
+    const { getByTestId } = render(<Input value="" autoSize data-testid="input" />);
+    const inputElement = getByTestId('input');
+
+    expect(inputElement.tagName).toBe('TEXTAREA');
+  });
+
+  it('should render a textarea via rows', () => {
+    const { getByTestId } = render(<Input value="" rows={2} data-testid="input" />);
+    const inputElement = getByTestId('input');
+
+    expect(inputElement.tagName).toBe('TEXTAREA');
+  });
+
+  it('should have a custom type', () => {
+    const { getByTestId } = render(<Input value="" type="number" data-testid="input" />);
+    const inputElement = getByTestId('input');
+
+    expect(inputElement).toHaveAttribute('type', 'number');
+  });
+
+  it('should have a placeholder', () => {
+    const { getByTestId } = render(
+      <Input value="" placeholder="testPlaceholder" data-testid="input" />,
+    );
+    const inputElement = getByTestId('input');
+
+    expect(inputElement).toHaveAttribute('placeholder', 'testPlaceholder');
+  });
+
+  it('should have 2 rows', () => {
+    const { getByTestId } = render(<Input value="" rows={2} data-testid="input" />);
+    const inputElement = getByTestId('input');
+
+    expect(inputElement).toHaveAttribute('rows', '2');
+  });
+
+  it('should have the rows (> minRows)', () => {
+    const { getByTestId } = render(<Input value="" rows={2} minRows={3} data-testid="input" />);
+    const inputElement = getByTestId('input');
+
+    expect(inputElement).toHaveAttribute('rows', '3');
+  });
+
+  it('should have the rows (< maxRows)', () => {
+    const { getByTestId } = render(<Input value="" rows={4} maxRows={3} data-testid="input" />);
+    const inputElement = getByTestId('input');
+
+    expect(inputElement).toHaveAttribute('rows', '3');
+  });
+
+  it('should auto size', () => {
+    const { getByTestId } = render(
+      <Input value="" autoSize placeholder="test" data-testid="input" />,
+    );
+    const inputElement = getByTestId('input');
+
+    expect(inputElement).toHaveAttribute('rows', '1');
+
+    fireEvent.change(inputElement, {
+      target: {
+        value: 'test change',
+      },
+    });
+
+    // TODO
+    expect(inputElement).not.toHaveAttribute('rows');
   });
 
   it('should be disabled', () => {
@@ -31,13 +108,30 @@ describe('<Input />', () => {
   });
 
   it('should apply maxLength', () => {
-    const { getByTestId } = render(<Input value="123456789" maxLength={5} data-testid="input" />);
+    function Test() {
+      const [value, setValue] = useState('');
+      return (
+        <Input
+          value={value}
+          multiline
+          maxLength={5}
+          onChange={(val) => setValue(val)}
+          data-testid="input"
+        />
+      );
+    }
+
+    const { getByTestId } = render(<Test />);
     const inputElement = getByTestId('input');
 
+    expect(inputElement).toHaveValue('');
+
     fireEvent.change(inputElement, {
       target: {
-        value: 'foo',
+        value: '123456789',
       },
     });
+
+    expect(inputElement).toHaveValue('12345');
   });
 });
diff --git a/src/components/LocaleProvider/__tests__/index.test.tsx b/src/components/LocaleProvider/__tests__/index.test.tsx
index 9ad89ad7..a8e69547 100644
--- a/src/components/LocaleProvider/__tests__/index.test.tsx
+++ b/src/components/LocaleProvider/__tests__/index.test.tsx
@@ -1,24 +1,103 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
-import { LocaleProvider } from '..';
-import locales from '../locales';
-import { Time } from '../../Time/';
+import { LocaleProvider, LocaleContext, useLocale } from '..';
 
 afterEach(cleanup);
 
-const App = () => (
-  <div>
-    <Time date={1577851200000} />
-  </div>
-);
-
 describe('<LocaleProvider />', () => {
-  Object.keys(locales).forEach((locale) => {
-    it(`should display the text as ${locale}`, () => {
-      const { container } = render(<LocaleProvider locales={locales} locale={locale}>
-          <App />
-        </LocaleProvider>);
-      expect(container).toMatchSnapshot();
-    });
-  })
+  it(`should provide the locale`, () => {
+    function Test() {
+      const { locale } = React.useContext(LocaleContext);
+      return <span data-testid="span">{locale}</span>;
+    }
+
+    const { getByTestId } = render(
+      <LocaleProvider locale="en-US">
+        <Test />
+      </LocaleProvider>,
+    );
+
+    expect(getByTestId('span')).toHaveTextContent('en-US');
+  });
+
+  it(`should provide the locale by useLocale`, () => {
+    function Test() {
+      const { trans } = useLocale();
+      return <span data-testid="span">{trans('SendConfirm').send}</span>;
+    }
+
+    const { getByTestId } = render(
+      <LocaleProvider locale="en-US">
+        <Test />
+      </LocaleProvider>,
+    );
+
+    expect(getByTestId('span')).toHaveTextContent('Send');
+  });
+
+  it(`should provide the locale by useLocale with component name`, () => {
+    function Test() {
+      const { trans } = useLocale('SendConfirm');
+      return (
+        <div>
+          <span data-testid="span1">{trans().title}</span>
+          <span data-testid="span2">{trans('send')}</span>
+        </div>
+      );
+    }
+
+    const { getByTestId } = render(
+      <LocaleProvider locale="en-US">
+        <Test />
+      </LocaleProvider>,
+    );
+
+    expect(getByTestId('span1')).toHaveTextContent('Send photo');
+    expect(getByTestId('span2')).toHaveTextContent('Send');
+  });
+
+  it(`should provide the custom locale by useLocale`, () => {
+    function Test() {
+      const { trans } = useLocale('Test');
+      return <span data-testid="span">{trans()}</span>;
+    }
+
+    const { getByTestId } = render(
+      <LocaleProvider locales={{ Test: 'test' }}>
+        <Test />
+      </LocaleProvider>,
+    );
+
+    expect(getByTestId('span')).toHaveTextContent('test');
+  });
+
+  it(`should provide the valid locale`, () => {
+    function Test() {
+      const { trans } = useLocale();
+      return <span data-testid="span">{trans('SendConfirm').send}</span>;
+    }
+
+    const { getByTestId } = render(
+      <LocaleProvider locale="test">
+        <Test />
+      </LocaleProvider>,
+    );
+
+    expect(getByTestId('span')).toHaveTextContent('Send');
+  });
+
+  it(`should get the locale by useLocale`, () => {
+    function Test() {
+      const { locale } = useLocale();
+      return <span data-testid="span">{locale}</span>;
+    }
+
+    const { getByTestId } = render(
+      <LocaleProvider locale="en-US">
+        <Test />
+      </LocaleProvider>,
+    );
+
+    expect(getByTestId('span')).toHaveTextContent('en-US');
+  });
 });
diff --git a/src/components/LocaleProvider/index.tsx b/src/components/LocaleProvider/index.tsx
index 4b5bb5e0..a76cbff8 100644
--- a/src/components/LocaleProvider/index.tsx
+++ b/src/components/LocaleProvider/index.tsx
@@ -6,8 +6,8 @@ type ILocales = {
 };
 
 type ILocaleContext = {
-  locale: string;
-  locales: ILocales;
+  locale?: string;
+  locales?: ILocales;
 };
 
 const LocaleContext = React.createContext<ILocaleContext>(undefined!);
@@ -21,10 +21,11 @@ LocaleProvider.defaultProps = {
   locale: DEFAULT_LOCALE,
 };
 
-const useLocale = (comp: string) => {
+const useLocale = (comp?: string) => {
   const localeContext = useContext(LocaleContext);
   const { locale, locales } = localeContext;
-  const defaultStrings = (defaultLocales as ILocales)[locale] || defaultLocales[DEFAULT_LOCALE];
+  const defaultStrings =
+    (locale && (defaultLocales as ILocales)[locale]) || defaultLocales[DEFAULT_LOCALE];
   let strings = locales ? { ...defaultStrings, ...locales } : defaultStrings;
 
   if (comp) {
diff --git a/src/components/Modal/Base.tsx b/src/components/Modal/Base.tsx
index 0114456f..10fce343 100644
--- a/src/components/Modal/Base.tsx
+++ b/src/components/Modal/Base.tsx
@@ -56,7 +56,7 @@ export const Base: React.FC<ModalProps> = (props) => {
   if (!didMount) return null;
 
   return createPortal(
-    <div className={clsx(baseClass, className, { active: isShow })} ref={wrapper}>
+    <div className={clsx(baseClass, className, { active: isShow })} ref={wrapper} tabIndex={0}>
       {backdrop && (
         <Backdrop active={isShow} onClick={backdrop === true && onClose ? onClose : undefined} />
       )}
diff --git a/src/components/Modal/__tests__/base.test.tsx b/src/components/Modal/__tests__/base.test.tsx
new file mode 100644
index 00000000..1b60ade1
--- /dev/null
+++ b/src/components/Modal/__tests__/base.test.tsx
@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import { Base } from '../Base';
+
+afterEach(cleanup);
+
+describe('<Base />', () => {
+  it('should render a modal', () => {
+    const { getByRole, getByTestId } = render(
+      <Base active>
+        <span data-testid="content" />
+      </Base>,
+    );
+
+    expect(getByRole('dialog')).toBeInTheDocument();
+    expect(getByTestId('content')).toBeInTheDocument();
+  });
+
+  it('should have a title', () => {
+    const { baseElement } = render(<Base active baseClass="test" title="test" titleId="testId" />);
+    const title = baseElement.querySelector('.test-title');
+
+    expect(title).toHaveTextContent('test');
+    expect(title).toHaveAttribute('id', 'testId');
+  });
+
+  it('should have a close icon', () => {
+    const { baseElement } = render(
+      <div>
+        <Base active baseClass="test1" />
+        <Base active baseClass="test2" onClose={jest.fn} />
+        <Base active baseClass="test3" onClose={jest.fn} showClose={false} />
+      </div>,
+    );
+
+    expect(baseElement.querySelector('.test1-close')).toBeNull();
+    expect(baseElement.querySelector('.test2-close')).not.toBeNull();
+    expect(baseElement.querySelector('.test3-close')).toBeNull();
+  });
+
+  it('should have a backdrop', () => {
+    const { baseElement } = render(<Base active />);
+
+    expect(baseElement.querySelector('.Backdrop')).not.toBeNull();
+  });
+
+  it('should not have a backdrop', () => {
+    const { baseElement } = render(<Base active backdrop={false} />);
+
+    expect(baseElement.querySelector('.Backdrop')).toBeNull();
+  });
+
+  it('should overflow if specified', () => {
+    const { baseElement } = render(<Base active baseClass="test" overflow />);
+
+    expect(baseElement.querySelector('.test-body')).toHaveClass('overflow');
+  });
+
+  it('should render actions', () => {
+    const { baseElement } = render(<Base active baseClass="test" actions={[{ label: 'test1' }]} />);
+
+    expect(baseElement.querySelectorAll('.Btn').length).toBe(1);
+    expect(baseElement.querySelector('.test-footer')).toHaveClass('test-footer--v');
+  });
+
+  it('should render actions (horizontal)', () => {
+    const { baseElement } = render(
+      <Base
+        active
+        baseClass="test"
+        actions={[{ label: 'test1' }, { label: 'test2' }]}
+        vertical={false}
+      />,
+    );
+
+    expect(baseElement.querySelectorAll('.Btn').length).toBe(2);
+    expect(baseElement.querySelector('.test-footer')).toHaveClass('test-footer--h');
+  });
+
+  it('should have a custom className', () => {
+    const { baseElement } = render(<Base baseClass="test" className="custom" active />);
+
+    expect(baseElement.querySelector('.test')).not.toBeNull();
+    expect(baseElement.querySelector('.custom')).not.toBeNull();
+  });
+
+  it('should toggle modal by `active` prop', () => {
+    function Test() {
+      const [active, setActive] = useState(false);
+      return (
+        <div>
+          <button data-testid="btn" onClick={() => setActive(true)}>
+            open
+          </button>
+          <Base active={active} />
+        </div>
+      );
+    }
+
+    const { baseElement, getByRole, getByTestId } = render(<Test />);
+
+    expect(baseElement.querySelector('[role="dialog"]')).toBe(null);
+
+    fireEvent.click(getByTestId('btn'));
+    expect(getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('should auto focus if specified', () => {
+    const { baseElement } = render(<Base active autoFocus baseClass="test" />);
+    const wrap = baseElement.querySelector('.test');
+
+    expect(wrap).toHaveFocus();
+  });
+
+  it('should call onClose when click close btn', (done) => {
+    const { baseElement } = render(
+      <Base
+        baseClass="test"
+        active
+        onClose={() => {
+          done();
+        }}
+      />,
+    );
+    const closeBtn = baseElement.querySelector('.test-close');
+
+    if (closeBtn) {
+      fireEvent.click(closeBtn);
+    }
+  });
+
+  it('should call onClose when click backdrop', (done) => {
+    const { baseElement } = render(
+      <Base
+        baseClass="test"
+        active
+        onClose={() => {
+          done();
+        }}
+      />,
+    );
+    const backdrop = baseElement.querySelector('.Backdrop');
+
+    if (backdrop) {
+      fireEvent.click(backdrop);
+    }
+  });
+});
diff --git a/src/components/Modal/__tests__/confirm.test.tsx b/src/components/Modal/__tests__/confirm.test.tsx
new file mode 100644
index 00000000..b966ce77
--- /dev/null
+++ b/src/components/Modal/__tests__/confirm.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { Confirm } from '..';
+
+afterEach(cleanup);
+
+describe('<Confirm />', () => {
+  it('should render a confirm', () => {
+    const { baseElement } = render(<Confirm active />);
+
+    expect(baseElement.querySelector('.Confirm')).not.toBeNull();
+    expect(baseElement.querySelector('.Confirm')).toHaveClass('Modal');
+  });
+
+  it('should not have close button', () => {
+    const { baseElement } = render(<Confirm active onClose={() => {}} />);
+
+    expect(baseElement.querySelector('.Modal-close')).toBeNull();
+  });
+});
diff --git a/src/components/Modal/__tests__/index.test.tsx b/src/components/Modal/__tests__/index.test.tsx
deleted file mode 100644
index 6ee41479..00000000
--- a/src/components/Modal/__tests__/index.test.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-import { render, cleanup, fireEvent } from '@testing-library/react';
-import { Modal, Popup, Confirm } from '..';
-
-afterEach(cleanup);
-
-describe('<Modal />', () => {
-  it('should render modal correctly', () => {
-    const title = 'Hello ChatUI';
-    const { container } = render(
-      <Modal
-        title={title}
-        active={true}
-        actions={[
-          {
-            label: 'Confirm',
-            color: 'primary',
-            onClick: jest.fn(),
-          },
-          {
-            label: 'Back',
-            onClick: jest.fn(),
-          },
-        ]}
-      >
-        <p>ChatUI is very easy to use!</p>
-      </Modal>,
-      {
-        container: document.body,
-      },
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render Popup correctly', () => {
-    const title = 'Hello ChatUI';
-    const { container } = render(
-      <Popup title={title} active={true}>
-        <p>ChatUI is very easy to use!</p>
-      </Popup>,
-      {
-        container: document.body,
-      },
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render Confirm correctly', () => {
-    const title = 'Hello ChatUI';
-    const { container } = render(
-      <Confirm title={title} active={true}>
-        <p>ChatUI is very easy to use!</p>
-      </Confirm>,
-      {
-        container: document.body,
-      },
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should support onClose', () => {
-    const title = 'Hello ChatUI';
-    const onClose = jest.fn();
-    const { container } = render(
-      <Modal title={title} active={true} onClose={onClose}>
-        <p>ChatUI is very easy to use!</p>
-      </Modal>,
-    );
-    const close = container.querySelector('.Modal-close');
-    if (close) {
-      fireEvent.click(close);
-      expect(onClose).toHaveBeenCalled();
-    }
-  });
-});
diff --git a/src/components/Modal/__tests__/modal.test.tsx b/src/components/Modal/__tests__/modal.test.tsx
new file mode 100644
index 00000000..89b6ed02
--- /dev/null
+++ b/src/components/Modal/__tests__/modal.test.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { Modal } from '..';
+
+afterEach(cleanup);
+
+describe('<Modal />', () => {
+  it('should render a modal', () => {
+    const { baseElement } = render(<Modal active />);
+
+    expect(baseElement.querySelector('.Modal')).not.toBeNull();
+  });
+});
diff --git a/src/components/Modal/__tests__/popup.test.tsx b/src/components/Modal/__tests__/popup.test.tsx
new file mode 100644
index 00000000..0c5ca740
--- /dev/null
+++ b/src/components/Modal/__tests__/popup.test.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { Popup } from '..';
+
+afterEach(cleanup);
+
+describe('<Popup />', () => {
+  it('should render a popup', () => {
+    const { baseElement } = render(<Popup active />);
+
+    expect(baseElement.querySelector('.Popup')).not.toBeNull();
+    expect(baseElement.querySelector('.Popup-body')).toHaveClass('overflow');
+  });
+});
diff --git a/src/components/SendConfirm/__tests__/index.test.tsx b/src/components/SendConfirm/__tests__/index.test.tsx
deleted file mode 100644
index 19ccd6a1..00000000
--- a/src/components/SendConfirm/__tests__/index.test.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { render, cleanup } from '@testing-library/react';
-import { SendConfirm } from '..';
-import { LocaleProvider } from '../../LocaleProvider/';
-import locales from '../../LocaleProvider/locales';
-
-afterEach(cleanup);
-
-describe('<SendConfirm />', () => {
-
-  it('should support onSend', () => {
-    const test = {hello: 'world'};
-    const blob = new Blob([JSON.stringify(test, null, 2)], {type : 'application/json'});
-    const { debug } = render(<LocaleProvider locales={locales} locale="zh-CN">
-      <SendConfirm
-        file={blob}
-        onCancel={jest.fn()}
-        onSend={jest.fn()}
-      />
-    </LocaleProvider>);
-    debug();
-  });
-});
diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx
index 2fc075c6..b4d10003 100644
--- a/src/components/Stepper/Stepper.tsx
+++ b/src/components/Stepper/Stepper.tsx
@@ -23,7 +23,7 @@ export const Stepper = React.forwardRef<HTMLUListElement, StepperProps>((props,
       state.active = true;
     } else if (current > index) {
       state.completed = true;
-    } else if (current < index) {
+    } else {
       state.disabled = true;
     }
 
diff --git a/src/components/Stepper/__tests__/index.test.tsx b/src/components/Stepper/__tests__/index.test.tsx
index 50cb7c1b..dd21ded6 100644
--- a/src/components/Stepper/__tests__/index.test.tsx
+++ b/src/components/Stepper/__tests__/index.test.tsx
@@ -5,15 +5,41 @@ import { Stepper, Step } from '..';
 afterEach(cleanup);
 
 describe('<Stepper />', () => {
+  it('should render a stepper', () => {
+    const { container } = render(
+      <Stepper>
+        <Step title="test 1" />
+        <Step title="test 2" />
+        <Step title="test 3" />
+      </Stepper>,
+    );
 
-  it('should support current step', () => {
-    // @ts-ignore TODO: fix error
-    const { debug } = render(<Stepper current={2}>
-      <Step title="ChatUI day0" />
-      <Step title="ChatUI day1" />
-      <Step title="ChatUI day2" />
-      <Step title="ChatUI day3" />
-    </Stepper>);
-    debug();
+    const stepList = container.querySelectorAll('.Step');
+
+    expect(stepList.length).toBe(3);
+    expect(stepList[0]).toHaveClass('Step--active');
+  });
+
+  it('should activate the current step', () => {
+    const { container } = render(
+      <Stepper current={1}>
+        <Step title="test 1" />
+        <Step title="test 2" />
+        <Step title="test 3" />
+      </Stepper>,
+    );
+
+    const stepList = container.querySelectorAll('.Step');
+
+    expect(stepList[0]).toHaveClass('Step--completed');
+    expect(stepList[1]).toHaveClass('Step--active');
+    expect(stepList[2]).toHaveClass('Step--disabled');
+  });
+
+  it('should ignore invalid element', () => {
+    const { container } = render(<Stepper>{123}</Stepper>);
+    const stepList = container.querySelectorAll('.Step');
+
+    expect(stepList.length).toBe(0);
   });
 });
diff --git a/src/components/Stepper/__tests__/step.test.tsx b/src/components/Stepper/__tests__/step.test.tsx
new file mode 100644
index 00000000..8e4c70db
--- /dev/null
+++ b/src/components/Stepper/__tests__/step.test.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { Step } from '..';
+
+afterEach(cleanup);
+
+describe('<Step />', () => {
+  it('should render a step', () => {
+    const { getByTestId } = render(<Step data-testid="step" />);
+    const step = getByTestId('step');
+
+    expect(step).toBeInTheDocument();
+  });
+
+  it('should have a title', () => {
+    const { getByTestId } = render(<Step title="test" data-testid="step" />);
+    const step = getByTestId('step');
+
+    expect(step.querySelector('.Step-title')).toBeInTheDocument();
+    expect(step.querySelector('.Step-title')).toHaveTextContent('test');
+  });
+
+  it('should have a description', () => {
+    const { getByTestId } = render(<Step desc="test" data-testid="step" />);
+    const step = getByTestId('step');
+
+    expect(step.querySelector('.Step-desc')).toBeInTheDocument();
+    expect(step.querySelector('.Step-desc')).toHaveTextContent('test');
+  });
+
+  it('should have a status (active)', () => {
+    const { getByTestId } = render(<Step active data-testid="step" />);
+    const step = getByTestId('step');
+
+    expect(step).toHaveClass('Step--active');
+  });
+
+  it('should have a status (completed)', () => {
+    const { getByTestId } = render(<Step completed data-testid="step" />);
+    const step = getByTestId('step');
+
+    expect(step).toHaveClass('Step--completed');
+  });
+
+  it('should have a status (disabled)', () => {
+    const { getByTestId } = render(<Step disabled data-testid="step" />);
+    const step = getByTestId('step');
+
+    expect(step).toHaveClass('Step--disabled');
+  });
+
+  it('should have a custom className', () => {
+    const { getByTestId } = render(<Step className="test" data-testid="step" />);
+    const step = getByTestId('step');
+
+    expect(step).toHaveClass('test');
+  });
+});
diff --git a/src/components/Time/__tests__/index.test.tsx b/src/components/Time/__tests__/index.test.tsx
index d5a1eeec..a6897531 100644
--- a/src/components/Time/__tests__/index.test.tsx
+++ b/src/components/Time/__tests__/index.test.tsx
@@ -1,26 +1,28 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
-
-import { LocaleProvider } from '../../LocaleProvider/';
-import locales from '../../LocaleProvider/locales';
-
+import { LocaleProvider } from '../../LocaleProvider';
 import { Time } from '..';
 
 afterEach(cleanup);
 
-describe('<Time />', () => {
-
-  it('should render time correctly', () => {
-    const { container } = render(<LocaleProvider locales={locales} locale="zh-CN">
-      <Time date="2020-01-01 12:00:00" />
-    </LocaleProvider>);
-    expect(container).toMatchSnapshot();
+describe('<LocaleProvider />', () => {
+  it(`should display English by default`, () => {
+    const { container } = render(
+      <LocaleProvider>
+        <Time date={1577851200000} />
+      </LocaleProvider>,
+    );
+    const time = container.querySelector('.Time');
+    expect(time).toHaveTextContent('1/1/2020 12:00');
   });
 
-  it('should support timestamp', () => {
-    const { container } = render(<LocaleProvider locales={locales} locale="zh-CN">
-      <Time date={1577829600000} />
-    </LocaleProvider>);
-    expect(container).toMatchSnapshot();
+  it(`should display Chinese by set locale`, () => {
+    const { container } = render(
+      <LocaleProvider locale="zh-CN">
+        <Time date={1577851200000} />
+      </LocaleProvider>,
+    );
+    const time = container.querySelector('.Time');
+    expect(time).toHaveTextContent('2020年1月1日 12:00');
   });
 });
diff --git a/src/components/Time/__tests__/parser.test.ts b/src/components/Time/__tests__/parser.test.ts
new file mode 100644
index 00000000..a93667ea
--- /dev/null
+++ b/src/components/Time/__tests__/parser.test.ts
@@ -0,0 +1,51 @@
+import formatDate from '../parser';
+
+const timeLocale = {
+  weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
+  formats: {
+    LT: 'HH:mm',
+    lll: 'M/D/YYYY HH:mm',
+    WT: 'dddd HH:mm',
+    YT: 'Yesterday HH:mm',
+  },
+};
+
+const MS_A_DAY = 24 * 60 * 60 * 1000;
+
+describe('Time parser', () => {
+  it(`should format timestamp`, () => {
+    expect(formatDate(1589951640000, timeLocale)).toBe('5/20/2020 13:14');
+  });
+
+  it(`should format date`, () => {
+    expect(formatDate(new Date(2020, 4, 20, 13, 14), timeLocale)).toBe('5/20/2020 13:14');
+  });
+
+  it(`should display relative time (today)`, () => {
+    const time = Date.now() - 100 * 1000;
+    const $d = new Date(time);
+    const HH = `${$d.getHours()}`.padStart(2, '0');
+    const mm = `${$d.getMinutes()}`.padStart(2, '0');
+
+    expect(formatDate(time, timeLocale)).toBe(`${HH}:${mm}`);
+  });
+
+  it(`should display relative time (yesterday)`, () => {
+    const time = Date.now() - MS_A_DAY;
+    const $d = new Date(time);
+    const HH = `${$d.getHours()}`.padStart(2, '0');
+    const mm = `${$d.getMinutes()}`.padStart(2, '0');
+
+    expect(formatDate(time, timeLocale)).toBe(`Yesterday ${HH}:${mm}`);
+  });
+
+  it(`should display relative time (this week)`, () => {
+    const time = Date.now() - 2 * MS_A_DAY;
+    const $d = new Date(time);
+    const HH = `${$d.getHours()}`.padStart(2, '0');
+    const mm = `${$d.getMinutes()}`.padStart(2, '0');
+    const dddd = timeLocale.weekdays[new Date(time).getDay()];
+
+    expect(formatDate(time, timeLocale)).toBe(`${dddd} ${HH}:${mm}`);
+  });
+});
diff --git a/src/components/Time/parser.ts b/src/components/Time/parser.ts
index fdd2c13c..49f19c85 100644
--- a/src/components/Time/parser.ts
+++ b/src/components/Time/parser.ts
@@ -6,7 +6,7 @@ export type IDate = number | string | Date;
 
 type DateFormats = {
   [p: string]: string;
-}
+};
 
 interface TimeLocale {
   weekdays: string[];
@@ -34,11 +34,11 @@ const getFormat = (date: Date) => {
   const diff = getWeeHours().getTime() - date.getTime();
 
   if (diff < 0) {
-    return 'LT';
+    return 'LT'; // 今天
   } else if (diff < MS_A_DAY) {
-    return 'YT';
+    return 'YT'; // 昨天
   } else if (diff < MS_A_WEEK) {
-    return 'WT';
+    return 'WT'; // 这周
   }
   return 'lll';
 };
diff --git a/src/components/Toast/__tests__/index.test.ts b/src/components/Toast/__tests__/index.test.ts
new file mode 100644
index 00000000..1558dcd1
--- /dev/null
+++ b/src/components/Toast/__tests__/index.test.ts
@@ -0,0 +1,71 @@
+import { cleanup, act } from '@testing-library/react';
+import { toast } from '..';
+
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(cleanup);
+
+describe('<Toast />', () => {
+  it('should show a toast', () => {
+    toast.show('test', 'test');
+
+    expect(document.querySelector('.Toast')).not.toBeNull();
+
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(document.querySelector('.Toast')).toBeNull();
+  });
+
+  it('should show a toast (success)', () => {
+    toast.success('test');
+
+    const element = document.querySelector('.Toast');
+    expect(element).toHaveAttribute('data-type', 'success');
+    expect(element).toContainHTML('<use xlink:href="#icon-check-circle"></use>');
+
+    act(() => {
+      jest.runAllTimers();
+    });
+  });
+
+  it('should show a toast (fail)', () => {
+    toast.fail('test');
+
+    const element = document.querySelector('.Toast');
+
+    expect(element).toHaveAttribute('data-type', 'error');
+    expect(element).toContainHTML('<use xlink:href="#icon-close-circle"></use>');
+
+    act(() => {
+      jest.runAllTimers();
+    });
+  });
+
+  it('should show a toast (loading)', () => {
+    toast.loading('test');
+
+    const element = document.querySelector('.Toast');
+    expect(element).toHaveAttribute('data-type', 'loading');
+    expect(element).toContainHTML('<use xlink:href="#icon-spinner"></use>');
+
+    act(() => {
+      jest.runAllTimers();
+    });
+  });
+
+  it('should support custom duration', () => {
+    toast.success('test', 5000);
+    act(() => {
+      jest.advanceTimersByTime(3000);
+    });
+    expect(document.querySelector('.Toast')).not.toBeNull();
+
+    act(() => {
+      jest.advanceTimersByTime(3000);
+    });
+    expect(document.querySelector('.Toast')).toBeNull();
+  });
+});
diff --git a/src/components/Toast/__tests__/index.test.tsx b/src/components/Toast/__tests__/index.test.tsx
deleted file mode 100644
index 6dd562f6..00000000
--- a/src/components/Toast/__tests__/index.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// import React from 'react';
-// import { cleanup } from '@testing-library/react';
-
-import { toast } from '..';
-
-beforeEach(() => {
-  jest.useFakeTimers();
-});
-
-describe('<Toast />', () => {
-
-  it('should support type', () => {
-    toast.success('ChatUI run success');
-    expect(document.querySelectorAll('.Toast').length).toBe(1);
-    jest.runAllTimers();
-    expect(document.querySelectorAll('.Toast').length).toBe(0);
-  });
-
-  it('should support custom duration', () => {
-    toast.success('ChatUI is running', 3000);
-    jest.advanceTimersByTime(1500);
-    expect(document.querySelectorAll('.Toast').length).toBe(1);
-    jest.runAllTimers();
-    expect(document.querySelectorAll('.Toast').length).toBe(0);
-  });
-
-});
diff --git a/src/components/Toast/__tests__/toast.test.tsx b/src/components/Toast/__tests__/toast.test.tsx
new file mode 100644
index 00000000..05357247
--- /dev/null
+++ b/src/components/Toast/__tests__/toast.test.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, cleanup, fireEvent, act } from '@testing-library/react';
+import { Toast } from '../Toast';
+
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(cleanup);
+
+describe('<Toast />', () => {
+  it('should show a toast', () => {
+    const { container } = render(
+      <Toast content="test" type="test" duration={1000} onUnmount={() => {}} />,
+    );
+
+    expect(container.querySelector('.Toast')).not.toBeNull();
+    expect(container.querySelector('.Toast')).toHaveClass('show');
+
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(container.querySelector('.Toast')).not.toHaveClass('show');
+  });
+
+  it('should call onUnmount after 1s', (done) => {
+    render(
+      <Toast
+        content="test"
+        type="test"
+        duration={1000}
+        onUnmount={() => {
+          done();
+        }}
+      />,
+    );
+
+    act(() => {
+      jest.runAllTimers();
+    });
+  });
+
+  it('should call onUnmount when clicked', (done) => {
+    const { container } = render(
+      <Toast
+        content="test"
+        type="test"
+        duration={1000}
+        onUnmount={() => {
+          done();
+        }}
+      />,
+    );
+    const content = container.querySelector('.Toast-content');
+
+    if (content) {
+      fireEvent.click(content);
+    }
+  });
+});
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index 6019ccae..3ad5c08c 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -7,7 +7,7 @@ export interface ToolbarProps {
 }
 
 export const Toolbar: React.FC<ToolbarProps> = (props) => {
-  const { items = [], onClick } = props;
+  const { items, onClick } = props;
   return (
     <div className="Toolbar">
       {items.map((item) => (
diff --git a/src/components/Toolbar/__tests__/button.test.tsx b/src/components/Toolbar/__tests__/button.test.tsx
new file mode 100644
index 00000000..b8384b51
--- /dev/null
+++ b/src/components/Toolbar/__tests__/button.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { ToolbarButton } from '../ToolbarButton';
+
+afterEach(cleanup);
+
+describe('<ToolbarButton />', () => {
+  it('should render the toolbar button', () => {
+    const { container } = render(
+      <ToolbarButton item={{ type: 'test', title: 'test' }} onClick={() => {}} />,
+    );
+    const item = container.querySelector('.Toolbar-item');
+
+    expect(item).toHaveAttribute('data-type', 'test');
+    expect(item?.querySelector('.Toolbar-btnText')).toHaveTextContent('test');
+  });
+
+  it('should have the icon', () => {
+    const { container } = render(
+      <ToolbarButton item={{ type: 'test', title: 'test', icon: 'test' }} onClick={() => {}} />,
+    );
+    const btnIcon = container.querySelector('.Toolbar-btnIcon');
+
+    expect(btnIcon).toContainHTML('<use xlink:href="#icon-test"></use>');
+  });
+
+  it('should have the image', () => {
+    const imgUrl = '/test.png';
+    const { container } = render(
+      <ToolbarButton item={{ type: 'test', title: 'test', img: imgUrl }} onClick={() => {}} />,
+    );
+    const img = container.querySelector('.Toolbar-img');
+
+    expect(img).toHaveAttribute('src', imgUrl);
+  });
+});
diff --git a/src/components/Toolbar/__tests__/index.test.tsx b/src/components/Toolbar/__tests__/index.test.tsx
index 26b89cc3..ea99a3fc 100644
--- a/src/components/Toolbar/__tests__/index.test.tsx
+++ b/src/components/Toolbar/__tests__/index.test.tsx
@@ -1,22 +1,52 @@
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
-
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import { Toolbar } from '..';
 
 afterEach(cleanup);
 
 describe('<Toolbar />', () => {
+  it('should render toolbar', () => {
+    const items = [
+      {
+        type: 'item1',
+        title: 'item1',
+      },
+      {
+        type: 'item2',
+        title: 'item2',
+      },
+    ];
+
+    const { container } = render(<Toolbar items={items} onClick={() => {}} />);
+    const toolbar = container.querySelector('.Toolbar');
+
+    expect(toolbar).not.toBeNull();
+    expect(toolbar?.querySelectorAll('.Toolbar-btn').length).toBe(2);
+  });
+
+  it('should render toolbar', (done) => {
+    const items = [
+      {
+        type: 'item1',
+        title: 'item1',
+      },
+      {
+        type: 'item2',
+        title: 'item2',
+      },
+    ];
+
+    const { getByText } = render(
+      <Toolbar
+        items={items}
+        onClick={(item) => {
+          if (item.type === 'item2') {
+            done();
+          }
+        }}
+      />,
+    );
 
-  it('should render toolbar correctly', () => {
-    const items = [{
-      type: 'camera',
-      title: 'camera',
-    }, {
-      type: 'smiley',
-      title: 'smiley',
-    }];
-    const onClick = jest.fn();
-    const { container } = render(<Toolbar items={items} onClick={onClick} />);
-    expect(container).toMatchSnapshot();
+    fireEvent.click(getByText('item2'));
   });
 });
diff --git a/src/components/Tree/__tests__/index.test.tsx b/src/components/Tree/__tests__/index.test.tsx
deleted file mode 100644
index 7ea76b8b..00000000
--- a/src/components/Tree/__tests__/index.test.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react';
-import { render, cleanup, fireEvent } from '@testing-library/react';
-
-import { Tree, TreeNode } from '..';
-
-afterEach(cleanup);
-
-describe('<Tree />', () => {
-
-  it('should support rendering children', () => {
-    const children = [{
-      title: 'Child node 1',
-    },{
-      title: 'Child node 2',
-    }];
-    const { container } = render(<Tree>
-        <TreeNode
-          title="Node 1"
-          onClick={jest.fn()}
-          onExpand={jest.fn()}
-          children={children}
-         />
-         <TreeNode
-          title="Node 2"
-          onClick={jest.fn()}
-          onExpand={jest.fn()}
-          children={[]}
-         />
-      </Tree>);
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should support onExpand', () => {
-    const children = [{
-      title: 'Child node 1',
-    },{
-      title: 'Child node 2',
-    }];
-    const onExpand = jest.fn();
-    const { container } = render(<Tree>
-        <TreeNode
-          title="Node 1"
-          onClick={jest.fn()}
-          onExpand={onExpand}
-          children={children}
-         />
-         <TreeNode
-          title="Node 2"
-          onClick={jest.fn()}
-          onExpand={jest.fn()}
-          children={[]}
-         />
-      </Tree>);
-    const node0 = container.querySelectorAll('.TreeNode-title')[0];
-    fireEvent(node0, new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-    }));
-    expect(onExpand).toBeCalledTimes(1);
-  });
-
-  it('should support onClick', () => {
-    const children = [{
-      title: 'Child node 1',
-    },{
-      title: 'Child node 2',
-    }];
-    const onClick = jest.fn();
-    const { container } = render(<Tree>
-        <TreeNode
-          title="Node 1"
-          onClick={onClick}
-          onExpand={jest.fn()}
-          children={children}
-         />
-         <TreeNode
-          title="Node 2"
-          onClick={jest.fn()}
-          onExpand={jest.fn()}
-          children={[]}
-         />
-      </Tree>);
-    const node1 = container.querySelectorAll('.TreeNode-title')[1];
-    fireEvent(node1, new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-    }));
-    expect(onClick).toBeCalledTimes(1);
-  });
-});
diff --git a/src/components/Typing/__tests__/__snapshots__/index.test.tsx.snap b/src/components/Typing/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000..af33e621
--- /dev/null
+++ b/src/components/Typing/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Typing /> should render correctly 1`] = `
+<div>
+  <div
+    class="Bubble typing"
+    data-type="typing"
+  >
+    <div
+      aria-busy="true"
+      class="Typing"
+    >
+      <div
+        class="Typing-dot"
+      />
+      <div
+        class="Typing-dot"
+      />
+      <div
+        class="Typing-dot"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/VisuallyHidden/__tests__/__snapshots__/index.test.tsx.snap b/src/components/VisuallyHidden/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000..676f5b56
--- /dev/null
+++ b/src/components/VisuallyHidden/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<VisuallyHidden /> should render correctly 1`] = `
+<div>
+  <span
+    style="position: absolute; height: 1px; width: 1px; overflow: hidden; margin: -1px; white-space: nowrap;"
+  />
+</div>
+`;
diff --git a/src/hooks/__test__/useMessages.test.tsx b/src/hooks/__test__/useMessages.test.tsx
new file mode 100644
index 00000000..e40bc583
--- /dev/null
+++ b/src/hooks/__test__/useMessages.test.tsx
@@ -0,0 +1,249 @@
+import React from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import useMessages from '../useMessages';
+
+afterEach(cleanup);
+
+describe('useMessages', () => {
+  it('should be empty array by default', () => {
+    function Test() {
+      const { messages } = useMessages();
+      return (
+        <div data-testid="list">
+          {messages.map((t, i) => (
+            <span data-testid="item" key={i}>
+              {t}
+            </span>
+          ))}
+        </div>
+      );
+    }
+
+    const { queryAllByTestId } = render(<Test />);
+
+    expect(queryAllByTestId('item').length).toBe(0);
+  });
+
+  it('should have initial value', () => {
+    function Test() {
+      const { messages } = useMessages([
+        { type: 'test', content: 'test1' },
+        { type: 'test', content: 'test2' },
+      ]);
+      return (
+        <div data-testid="list">
+          {messages.map((t, i) => (
+            <span data-testid="item" key={i}>
+              {t.content}
+            </span>
+          ))}
+        </div>
+      );
+    }
+
+    const { queryAllByTestId } = render(<Test />);
+
+    expect(queryAllByTestId('item').length).toBe(2);
+    expect(queryAllByTestId('item')[1]).toHaveTextContent('test2');
+  });
+
+  it('should prepend messages', () => {
+    function Test() {
+      const { messages, prependMsgs } = useMessages([
+        { type: 'test', content: 'test1', _id: 1 },
+        { type: 'test', content: 'test2', _id: 2 },
+      ]);
+
+      function handleClick() {
+        prependMsgs([
+          { type: 'test', content: 'test3', _id: 3 },
+          { type: 'test', content: 'test4', _id: 4 },
+        ]);
+      }
+
+      return (
+        <div data-testid="list">
+          {messages.map((t) => (
+            <span data-testid="item" key={t._id}>
+              {t.content}
+            </span>
+          ))}
+          <button data-testid="btn" onClick={handleClick} />
+        </div>
+      );
+    }
+
+    const { queryAllByTestId, getByTestId } = render(<Test />);
+
+    fireEvent.click(getByTestId('btn'));
+    expect(queryAllByTestId('item').length).toBe(4);
+    expect(queryAllByTestId('item')[0]).toHaveTextContent('test3');
+    expect(queryAllByTestId('item')[1]).toHaveTextContent('test4');
+    expect(queryAllByTestId('item')[2]).toHaveTextContent('test1');
+    expect(queryAllByTestId('item')[3]).toHaveTextContent('test2');
+  });
+
+  it('should append message', () => {
+    function Test() {
+      const { messages, appendMsg } = useMessages([
+        { type: 'test', content: 'test1', _id: 1 },
+        { type: 'test', content: 'test2', _id: 2 },
+      ]);
+
+      function handleClick() {
+        appendMsg({ type: 'test', content: 'test3', _id: 3 });
+      }
+
+      return (
+        <div data-testid="list">
+          {messages.map((t, i) => (
+            <span data-testid="item" key={i}>
+              {t.content}
+            </span>
+          ))}
+          <button data-testid="btn" onClick={handleClick} />
+        </div>
+      );
+    }
+
+    const { queryAllByTestId, getByTestId } = render(<Test />);
+
+    fireEvent.click(getByTestId('btn'));
+    expect(queryAllByTestId('item').length).toBe(3);
+    expect(queryAllByTestId('item')[0]).toHaveTextContent('test1');
+    expect(queryAllByTestId('item')[1]).toHaveTextContent('test2');
+    expect(queryAllByTestId('item')[2]).toHaveTextContent('test3');
+  });
+
+  it('should update message', () => {
+    function Test() {
+      const { messages, updateMsg } = useMessages([
+        { type: 'test', content: 'test1', _id: 1 },
+        { type: 'test', content: 'test2', _id: 2 },
+      ]);
+
+      function handleClick() {
+        updateMsg(2, {
+          type: 'test',
+          content: 'test3',
+        });
+      }
+
+      return (
+        <div data-testid="list">
+          {messages.map((t, i) => (
+            <span data-testid="item" key={i}>
+              {t.content}
+            </span>
+          ))}
+          <button data-testid="btn" onClick={handleClick} />
+        </div>
+      );
+    }
+
+    const { queryAllByTestId, getByTestId } = render(<Test />);
+
+    fireEvent.click(getByTestId('btn'));
+    expect(queryAllByTestId('item').length).toBe(2);
+    expect(queryAllByTestId('item')[0]).toHaveTextContent('test1');
+    expect(queryAllByTestId('item')[1]).toHaveTextContent('test3');
+  });
+
+  it('should delete message', () => {
+    function Test() {
+      const { messages, deleteMsg } = useMessages([
+        { type: 'test', content: 'test1', _id: 1 },
+        { type: 'test', content: 'test2', _id: 2 },
+      ]);
+
+      function handleClick() {
+        deleteMsg(2);
+      }
+
+      return (
+        <div data-testid="list">
+          {messages.map((t, i) => (
+            <span data-testid="item" key={i}>
+              {t.content}
+            </span>
+          ))}
+          <button data-testid="btn" onClick={handleClick} />
+        </div>
+      );
+    }
+
+    const { queryAllByTestId, getByTestId } = render(<Test />);
+
+    fireEvent.click(getByTestId('btn'));
+    expect(queryAllByTestId('item').length).toBe(1);
+  });
+
+  it('should render typing bubble', () => {
+    function Test() {
+      const { messages, setTyping } = useMessages([
+        { type: 'test', content: 'test1', _id: 1 },
+        { type: 'test', content: 'test2', _id: 2 },
+      ]);
+
+      function handleClick() {
+        setTyping(true);
+      }
+
+      return (
+        <div data-testid="list">
+          {messages.map((t) => (
+            <span data-testid="item" key={t._id}>
+              {t.type === 'typing' ? t.type : t.content}
+            </span>
+          ))}
+          <button data-testid="btn" onClick={handleClick} />
+        </div>
+      );
+    }
+
+    const { queryAllByTestId, getByTestId } = render(<Test />);
+
+    fireEvent.click(getByTestId('btn'));
+    expect(queryAllByTestId('item').length).toBe(3);
+    expect(queryAllByTestId('item')[2]).toHaveTextContent('typing');
+  });
+
+  it('should replace typing bubble when append', () => {
+    function Test() {
+      const { messages, setTyping, appendMsg } = useMessages([
+        { type: 'test', content: 'test1', _id: 1 },
+        { type: 'test', content: 'test2', _id: 2 },
+      ]);
+
+      return (
+        <div data-testid="list">
+          {messages.map((t) => (
+            <span data-testid="item" key={t._id}>
+              {t.type === 'typing' ? t.type : t.content}
+            </span>
+          ))}
+          <button
+            data-testid="typingBtn"
+            onClick={() => {
+              setTyping(true);
+            }}
+          />
+          <button
+            data-testid="appendBtn"
+            onClick={() => {
+              appendMsg({ type: 'test', content: 'test3', _id: 3 });
+            }}
+          />
+        </div>
+      );
+    }
+
+    const { queryAllByTestId, getByTestId } = render(<Test />);
+
+    fireEvent.click(getByTestId('typingBtn'));
+    expect(queryAllByTestId('item')[2]).toHaveTextContent('typing');
+
+    fireEvent.click(getByTestId('appendBtn'));
+    expect(queryAllByTestId('item')[2]).toHaveTextContent('test3');
+  });
+});
diff --git a/src/hooks/__test__/useQuickReplies.test.tsx b/src/hooks/__test__/useQuickReplies.test.tsx
new file mode 100644
index 00000000..4b0c760c
--- /dev/null
+++ b/src/hooks/__test__/useQuickReplies.test.tsx
@@ -0,0 +1,188 @@
+import React from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import useQuickReplies from '../useQuickReplies';
+
+afterEach(cleanup);
+
+describe('useQuickReplies', () => {
+  it('should be empty array by default', () => {
+    function Test() {
+      const { quickReplies } = useQuickReplies();
+      return (
+        <div data-testid="list">
+          {quickReplies.map((t, i) => (
+            <span data-testid="item" key={i}>
+              {t}
+            </span>
+          ))}
+        </div>
+      );
+    }
+
+    const { queryAllByTestId } = render(<Test />);
+
+    expect(queryAllByTestId('item').length).toBe(0);
+  });
+
+  it('should have initial value', () => {
+    function Test() {
+      const { quickReplies } = useQuickReplies([{ name: 'test1' }, { name: 'test2' }]);
+      return (
+        <div data-testid="list">
+          {quickReplies.map((t, i) => (
+            <span data-testid="item" key={i}>
+              {t.name}
+            </span>
+          ))}
+        </div>
+      );
+    }
+
+    const { queryAllByTestId } = render(<Test />);
+
+    expect(queryAllByTestId('item').length).toBe(2);
+    expect(queryAllByTestId('item')[1]).toHaveTextContent('test2');
+  });
+
+  it('should prepend items', () => {
+    function Test() {
+      const { quickReplies, prepend } = useQuickReplies([{ name: 'test1' }, { name: 'test2' }]);
+
+      function handleClick() {
+        prepend([{ name: 'test3' }, { name: 'test4' }]);
+      }
+
+      return (
+        <div data-testid="list">
+          {quickReplies.map((t, i) => (
+            <span data-testid="item" key={i}>
+              {t.name}
+            </span>
+          ))}
+          <button data-testid="btn" onClick={handleClick} />
+        </div>
+      );
+    }
+
+    const { queryAllByTestId, getByTestId } = render(<Test />);
+
+    fireEvent.click(getByTestId('btn'));
+    expect(queryAllByTestId('item').length).toBe(4);
+    expect(queryAllByTestId('item')[0]).toHaveTextContent('test3');
+    expect(queryAllByTestId('item')[1]).toHaveTextContent('test4');
+    expect(queryAllByTestId('item')[2]).toHaveTextContent('test1');
+    expect(queryAllByTestId('item')[3]).toHaveTextContent('test2');
+  });
+
+  it('should replace items', () => {
+    function Test() {
+      const { quickReplies, replace } = useQuickReplies([{ name: 'test1' }, { name: 'test2' }]);
+
+      function handleClick() {
+        replace([{ name: 'test3' }, { name: 'test4' }]);
+      }
+
+      return (
+        <div data-testid="list">
+          {quickReplies.map((t, i) => (
+            <span data-testid="item" key={i}>
+              {t.name}
+            </span>
+          ))}
+          <button data-testid="btn" onClick={handleClick} />
+        </div>
+      );
+    }
+
+    const { queryAllByTestId, getByTestId } = render(<Test />);
+
+    fireEvent.click(getByTestId('btn'));
+    expect(queryAllByTestId('item').length).toBe(2);
+    expect(queryAllByTestId('item')[0]).toHaveTextContent('test3');
+    expect(queryAllByTestId('item')[1]).toHaveTextContent('test4');
+  });
+
+  it('should restore items', () => {
+    function Test() {
+      const { quickReplies, replace, save, pop } = useQuickReplies([
+        { name: 'test1' },
+        { name: 'test2' },
+      ]);
+
+      function handleReplace() {
+        replace([{ name: 'test3' }, { name: 'test4' }]);
+      }
+
+      function handleSave() {
+        save();
+      }
+
+      function handlePop() {
+        pop();
+      }
+
+      return (
+        <div data-testid="list">
+          {quickReplies.map((t, i) => (
+            <span data-testid="item" key={i}>
+              {t.name}
+            </span>
+          ))}
+          <button data-testid="replace" onClick={handleReplace} />
+          <button data-testid="save" onClick={handleSave} />
+          <button data-testid="pop" onClick={handlePop} />
+        </div>
+      );
+    }
+
+    const { queryAllByTestId, getByTestId } = render(<Test />);
+
+    fireEvent.click(getByTestId('save'));
+    fireEvent.click(getByTestId('replace'));
+    expect(queryAllByTestId('item')[0]).toHaveTextContent('test3');
+    expect(queryAllByTestId('item')[1]).toHaveTextContent('test4');
+
+    fireEvent.click(getByTestId('pop'));
+    expect(queryAllByTestId('item')[0]).toHaveTextContent('test1');
+    expect(queryAllByTestId('item')[1]).toHaveTextContent('test2');
+  });
+
+  it('should ignore restore when not saved', () => {
+    function Test() {
+      const { quickReplies, replace, pop } = useQuickReplies([
+        { name: 'test1' },
+        { name: 'test2' },
+      ]);
+
+      function handleReplace() {
+        replace([{ name: 'test3' }, { name: 'test4' }]);
+      }
+
+      function handlePop() {
+        pop();
+      }
+
+      return (
+        <div data-testid="list">
+          {quickReplies.map((t, i) => (
+            <span data-testid="item" key={i}>
+              {t.name}
+            </span>
+          ))}
+          <button data-testid="replace" onClick={handleReplace} />
+          <button data-testid="pop" onClick={handlePop} />
+        </div>
+      );
+    }
+
+    const { queryAllByTestId, getByTestId } = render(<Test />);
+
+    fireEvent.click(getByTestId('replace'));
+    expect(queryAllByTestId('item')[0]).toHaveTextContent('test3');
+    expect(queryAllByTestId('item')[1]).toHaveTextContent('test4');
+
+    fireEvent.click(getByTestId('pop'));
+    expect(queryAllByTestId('item')[0]).toHaveTextContent('test3');
+    expect(queryAllByTestId('item')[1]).toHaveTextContent('test4');
+  });
+});