Skip to content

Commit

Permalink
feat(Form): develop Form.Table (#293)
Browse files Browse the repository at this point in the history 
* feat(Form): develop Form.Table

* fix(form): improve form item style

* feat(form): improve form.table

* test(form): update test cases
  • Loading branch information
@mortalYoung
mortalYoung authored Apr 13, 2023
1 parent ba11f4f commit 8a58efd
Show file tree
Hide file tree
Showing 14 changed files with 1,013 additions and 0 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@
"devDependencies": {
"@commitlint/cli": "^17.1.2",
"@commitlint/config-conventional": "^17.1.0",
"@faker-js/faker": "^7.6.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/react-hooks": "^8.0.1",
Expand Down
7 changes: 7 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

94 changes: 94 additions & 0 deletions src/form/__tests__/__snapshots__/table.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Test Form.Table Component Should match snapshot 1`] = `
<DocumentFragment>
<form
class="ant-form ant-form-vertical"
style="height: 400px;"
>
<div
class="ant-table-wrapper dtc-form__table"
>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-table"
>
<div
class="ant-table-container"
>
<div
class="ant-table-content"
>
<table
style="table-layout: auto;"
>
<colgroup />
<thead
class="ant-table-thead"
>
<tr>
<th
class="ant-table-cell"
>
<span
class="dtc-form__table__column--required"
/>
Name
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="0"
>
<td
class="ant-table-cell"
>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input"
id="data_0_name"
placeholder="Name"
type="text"
value="dtstack"
/>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</DocumentFragment>
`;
187 changes: 187 additions & 0 deletions src/form/__tests__/table.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
import React from 'react';
import { render } from '@testing-library/react';
import { Input } from 'antd';
import Form from '../';

describe('Test Form.Table Component', () => {
it('Should match snapshot', () => {
const { asFragment } = render(
<Form
layout="vertical"
style={{ height: 400 }}
initialValues={{
data: [{ name: 'dtstack' }],
}}
>
<Form.Table
name="data"
columns={[
{
key: 'name',
title: 'Name',
dataIndex: 'name',
required: true,
render: () => <Input placeholder="Name" />,
},
]}
/>
</Form>
);

expect(asFragment()).toMatchSnapshot();
});

it('Should support dependencies', () => {
const { getByTestId } = render(
<Form
layout="vertical"
style={{ height: 400 }}
initialValues={{
data: [
{ name: 'dtstack', age: 12 },
{ name: 'mmm', age: 10 },
],
}}
>
<Form.Table
name="data"
columns={[
{
key: 'name',
title: 'Name',
dataIndex: 'name',
required: true,
render: () => <Input placeholder="Name" />,
},
{
key: 'age',
title: 'Age',
dataIndex: 'age',
dependencies: ([name]) => ['data', name, 'name'],
render: ({ name }, _, form) => {
return form?.getFieldValue?.(['data', name, 'name']) ===
'dtstack' ? (
<span data-testid={`age-${name}`}>--</span>
) : (
<Input data-testid={`age-${name}`} placeholder="age" />
);
},
},
]}
/>
</Form>
);

expect(getByTestId('age-0').innerHTML).toBe('--');
expect(getByTestId('age-1').innerHTML).not.toBe('--');
});

it('Should support multiple dependencies', () => {
const { getByTestId } = render(
<Form
layout="vertical"
style={{ height: 400 }}
initialValues={{
data: [
{ name: 'dtstack', age: 12 },
{ name: 'dtstack', age: 8 },
],
}}
>
<Form.Table
name="data"
columns={[
{
key: 'name',
title: 'Name',
dataIndex: 'name',
required: true,
render: () => <Input placeholder="Name" />,
},
{
key: 'age',
title: 'Age',
dataIndex: 'age',
render: () => <Input placeholder="Age" />,
},
{
key: 'test',
title: 'test',
dependencies: ['name', 'age'],
render: ({ name }, _, form) => {
return (
<span data-testid={`test-${name}`}>
{form?.getFieldValue?.(['data', name, 'name']) ===
'dtstack' &&
form?.getFieldValue?.(['data', name, 'age']) > 10
? 'larger'
: 'smaller'}
</span>
);
},
},
]}
/>
</Form>
);

expect(getByTestId('test-0').innerHTML).toBe('larger');
expect(getByTestId('test-1').innerHTML).toBe('smaller');
});

it("Should render required on columns' title", () => {
const { container } = render(
<Form
layout="vertical"
style={{ height: 400 }}
initialValues={{
data: [{ name: 'dtstack' }],
}}
>
<Form.Table
name="data"
columns={[
{
key: 'name',
title: 'Name',
dataIndex: 'name',
required: true,
render: () => <Input placeholder="Name" />,
},
{
key: 'age',
title: 'Age',
dataIndex: 'age',
render: () => <Input placeholder="age" />,
},
{
key: 'sex',
title: 'Sex',
dataIndex: 'sex',
rules: [{ required: true }],
render: () => <Input placeholder="sex" />,
},
{
key: 'sex',
title: 'Sex',
dataIndex: 'sex',
rules: [
({ getFieldValue }, [name]) => ({
required: getFieldValue(['data', name, 'name']) === 'dtstack',
}),
],
render: () => <Input placeholder="sex" />,
},
]}
/>
</Form>
);

const rows = container.querySelectorAll('th.ant-table-cell');
expect(rows.length).toBe(4);
expect(rows[0].querySelector('.dtc-form__table__column--required')).not.toBeNull();
expect(rows[1].querySelector('.dtc-form__table__column--required')).toBeNull();
expect(rows[2].querySelector('.dtc-form__table__column--required')).not.toBeNull();
expect(rows[3].querySelector('.dtc-form__table__column--required')).toBeNull();
});
});
Loading

0 comments on commit 8a58efd

Please sign in to comment.