Skip to content

Commit

Permalink
test: update test cases (#1096)
Browse files Browse the repository at this point in the history 
# intro
- add ant-design-testing

Former-commit-id: ac8313b33f79578c0d53d393f4000994ef822aac
  • Loading branch information
@mortalYoung
mortalYoung authored Aug 3, 2023
1 parent f60858d commit 47f8e99
Show file tree
Hide file tree
Showing 45 changed files with 9,161 additions and 11,924 deletions.
3 changes: 2 additions & 1 deletion taier-ui/.swcrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,6 @@
"type": "commonjs",
"strictMode": false
},
"minify": true
"sourceMaps": "inline",
"minify": false
}
3 changes: 2 additions & 1 deletion taier-ui/jest.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ module.exports = {
transform: {
'^.+\\.(t|j)sx?$': ['@swc/jest'],
},
setupFiles: ['<rootDir>/src/tests/jest-setup.js'],
setupFilesAfterEnv: ['<rootDir>/src/tests/jest-setup.js'],
testEnvironment: "jsdom",
modulePathIgnorePatterns: ['<rootDir>/src/.umi/'],
moduleNameMapper: {
'@/(.*)': '<rootDir>/src/$1',
Expand Down
1 change: 1 addition & 0 deletions taier-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@
"@umijs/plugin-sass": "^1.1.1",
"@umijs/preset-react": "1.x",
"@umijs/test": "^3.5.20",
"ant-design-testing": "^0.1.0-beta.4",
"colors": "^1.4.0",
"commander": "^9.0.0",
"identity-obj-proxy": "^3.0.0",
Expand Down
16,085 changes: 6,496 additions & 9,589 deletions taier-ui/pnpm-lock.yaml
View file

Large diffs are not rendered by default.

172 changes: 131 additions & 41 deletions taier-ui/src/components/addEngineModal/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,150 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Test AddEngineModal Component Should match snapshot 1`] = `
<DocumentFragment>
<p
data-testid="antd-mock-Modal-title"
>
新增集群
</p>
<form
autocomplete="off"
class="ant-form ant-form-horizontal"
>
<body>
<div />
<div>
<div
class="ant-form-item"
class="ant-modal-root"
>
<div
class="ant-row ant-form-item-row"
class="ant-modal-mask"
/>
<div
class="ant-modal-wrap"
tabindex="-1"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
>
<label
class="ant-form-item-required"
for="clusterName"
title="集群名称"
>
集群名称
</label>
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
aria-labelledby="test-id"
aria-modal="true"
class="ant-modal c-clusterManage__modal"
role="dialog"
style="width: 520px;"
>
<div
class="ant-form-item-control-input"
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
class="ant-modal-content"
>
<button
aria-label="Close"
class="ant-modal-close"
type="button"
>
<span
class="ant-modal-close-x"
>
<span
aria-label="close"
class="anticon anticon-close ant-modal-close-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
</span>
</button>
<div
class="ant-form-item-control-input-content"
class="ant-modal-header"
>
<input
aria-required="true"
class="ant-input"
id="clusterName"
placeholder="请输入集群标识"
type="text"
value=""
/>
<div
class="ant-modal-title"
id="test-id"
>
新增集群
</div>
</div>
<div
class="ant-modal-body"
>
<form
autocomplete="off"
class="ant-form ant-form-horizontal"
>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
>
<label
class="ant-form-item-required"
for="clusterName"
title="集群名称"
>
集群名称
</label>
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
aria-required="true"
class="ant-input"
id="clusterName"
placeholder="请输入集群标识"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div
class="ant-modal-footer"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Cancel
</span>
</button>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
OK
</span>
</button>
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
</div>
</div>
</div>
</form>
<button
data-testid="antd-mock-Modal-confirm"
>
confirm
</button>
</DocumentFragment>
</div>
</body>
`;
40 changes: 14 additions & 26 deletions taier-ui/src/components/addEngineModal/__tests__/index.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,34 @@
import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
import { cleanup, render, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import AddEngineModal from '..';
import { modal, input } from 'ant-design-testing';
import { $ } from '@/tests/utils';

describe('Test AddEngineModal Component', () => {
beforeEach(() => {
cleanup();
document.body.innerHTML = '';
});
it('Should match snapshot', async () => {
const { asFragment } = render(<AddEngineModal title="新增集群" visible />);
expect(asFragment()).toMatchSnapshot();
render(<AddEngineModal title="新增集群" visible />);
expect(document.body).toMatchSnapshot();
});

it('Should validate form before confirm', async () => {
const fn = jest.fn();
const { getByTestId, container, getByText } = render(<AddEngineModal title="新增集群" visible onOk={fn} />);
const { findByText } = render(<AddEngineModal title="新增集群" visible onOk={fn} />);

fireEvent.click(getByTestId('antd-mock-Modal-confirm'));
await waitFor(() => {
expect(getByText('集群标识不可为空！')).toBeInTheDocument();
});
modal.fireOk(document);
expect(await findByText('集群标识不可为空！')).toBeInTheDocument();

fireEvent.change(container.querySelector('#clusterName')!, {
target: { value: 'abc-abc' },
});
input.fireChange($<HTMLElement>('#clusterName')!, 'abc-abc');
expect(await findByText('集群标识不能超过64字符，支持英文、数字、下划线')).toBeInTheDocument();

await waitFor(() => {
expect(getByText('集群标识不能超过64字符，支持英文、数字、下划线')).toBeInTheDocument();
});
input.fireChange($<HTMLElement>('#clusterName')!, new Array(100).fill('a').join(''));
expect(await findByText('集群标识不能超过64字符，支持英文、数字、下划线')).toBeInTheDocument();

fireEvent.change(container.querySelector('#clusterName')!, {
target: { value: new Array(100).fill('a').join('') },
});

await waitFor(() => {
expect(getByText('集群标识不能超过64字符，支持英文、数字、下划线')).toBeInTheDocument();
});

fireEvent.change(container.querySelector('#clusterName')!, {
target: { value: 'abc' },
});
fireEvent.click(getByTestId('antd-mock-Modal-confirm'));
input.fireChange($<HTMLElement>('#clusterName')!, 'abc');
modal.fireOk(document);

await waitFor(() => {
expect(fn).toBeCalledWith({ clusterName: 'abc' });
Expand Down
Loading

0 comments on commit 47f8e99

Please sign in to comment.