Add test cases (alibaba#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
sslgm · Oct 19, 2020 · ceff0b6 · ceff0b6
1 parent 8d28679
commit ceff0b6
Show file tree

Hide file tree

Showing 33 changed files with 1,378 additions and 285 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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');
   });
 });