source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

test: update test case (#55557)

Browse Source 
* test: update test case

* Update components/alert/__tests__/semantic.test.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: lijianan <574980606@qq.com>

* update

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
This commit is contained in:
lijianan
2025-11-01 17:00:26 +08:00
committed by GitHub
parent db302ac81d
commit 37966dbdf0
17 changed files with 157 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/affix/__tests__/Affix.test.tsx
View File

@@ -204,19 +204,15 @@ describe('Affix Render', () => {
it('should apply custom style to Affix', () => {
const { container } = render(
<ConfigProvider
affix={{
className: 'custom-config-affix',
style: { background: 'red' },
}}
affix={{ className: 'custom-config-affix', style: { color: 'rgb(255, 0, 0)' } }}
>
<Affix className="custom-affix" offsetTop={10}>
<Button>top</Button>
</Affix>
</ConfigProvider>,
);
const affixElement = container.querySelector('.custom-affix');
const affixElement = container.querySelector<HTMLElement>('.custom-affix');
expect(affixElement).toHaveClass('custom-config-affix');
expect(affixElement).toHaveStyle('background: red');
expect(affixElement).toHaveStyle({ color: 'rgb(255, 0, 0)' });
});
});

12
components/alert/__tests__/index.test.tsx
View File

@@ -267,12 +267,12 @@ describe('Alert', () => {
const actionElement = document.querySelector<HTMLElement>('.ant-alert-actions');
// check classNames
expect(rootElement).toHaveClass('custom-root');
expect(iconElement).toHaveClass('custom-icon');
expect(sectionElement).toHaveClass('custom-section');
expect(titleElement).toHaveClass('custom-title');
expect(descriptionElement).toHaveClass('custom-description');
expect(actionElement).toHaveClass('custom-actions');
expect(rootElement).toHaveClass(customClassNames.root!);
expect(iconElement).toHaveClass(customClassNames.icon!);
expect(sectionElement).toHaveClass(customClassNames.section!);
expect(titleElement).toHaveClass(customClassNames.title!);
expect(descriptionElement).toHaveClass(customClassNames.description!);
expect(actionElement).toHaveClass(customClassNames.actions!);
// check styles
expect(rootElement).toHaveStyle({ color: customStyles.root?.color });

16
components/alert/__tests__/semantic.test.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import { clsx } from 'clsx';
import Alert from '..';
import type { AlertProps } from '..';
@@ -75,13 +76,16 @@ describe('Alert.Semantic', () => {
const titleElement = document.querySelector<HTMLElement>('.ant-alert-title');
// Check merged classNames
expect(rootElement).toHaveClass('context-root component-root');
expect(iconElement).toHaveClass('context-icon');
expect(titleElement).toHaveClass('component-title');
expect(rootElement).toHaveClass(clsx(contextClassNames.root, componentClassNames.root));
expect(iconElement).toHaveClass(contextClassNames.icon!);
expect(titleElement).toHaveClass(componentClassNames.title!);
// Check merged styles
expect(rootElement).toHaveStyle({ margin: '10px', padding: '5px' });
expect(iconElement).toHaveStyle({ fontSize: '16px' });
expect(titleElement).toHaveStyle({ fontWeight: 'bold' });
expect(rootElement).toHaveStyle({
margin: contextStyles.root?.margin,
padding: componentStyles.root?.padding,
});
expect(iconElement).toHaveStyle({ fontSize: contextStyles.icon?.fontSize });
expect(titleElement).toHaveStyle({ fontWeight: componentStyles.title?.fontWeight });
});
});

12
components/anchor/__tests__/Anchor.test.tsx
View File

@@ -995,16 +995,8 @@ describe('Anchor Render', () => {
<Anchor
direction={direction}
items={[
{
title: 'part-1',
href: 'part-1',
key: 'part-1',
},
{
title: 'part-2',
href: 'part-2',
key: 'part-2',
},
{ title: 'part-1', href: 'part-1', key: 'part-1' },
{ title: 'part-2', href: 'part-2', key: 'part-2' },
]}
/>
</div>

72
components/auto-complete/__tests__/index.test.tsx
View File

@@ -134,32 +134,60 @@ describe('AutoComplete', () => {
/>,
);
const root = container.querySelector('.ant-select-auto-complete');
const input = container.querySelector('.ant-select-selection-search-input');
const prefix = container.querySelector('.ant-select-prefix');
const placeholder = container.querySelector('.ant-select-selection-placeholder');
const content = container.querySelector('.ant-select-selector');
const list = container.querySelector('.rc-virtual-list');
const listItem = container.querySelector('.ant-select-item-option');
const popup = container.querySelector('.ant-select-dropdown');
const root = container.querySelector<HTMLElement>('.ant-select-auto-complete');
const input = container.querySelector<HTMLElement>('.ant-select-selection-search-input');
const prefix = container.querySelector<HTMLElement>('.ant-select-prefix');
const placeholder = container.querySelector<HTMLElement>('.ant-select-selection-placeholder');
const content = container.querySelector<HTMLElement>('.ant-select-selector');
const list = container.querySelector<HTMLElement>('.rc-virtual-list');
const listItem = container.querySelector<HTMLElement>('.ant-select-item-option');
const popup = container.querySelector<HTMLElement>('.ant-select-dropdown');
expect(root).toHaveClass(customClassNames.root);
if (input) expect(input).toHaveClass(customClassNames.input);
if (prefix) expect(prefix).toHaveClass(customClassNames.prefix);
if (placeholder) expect(placeholder).toHaveClass(customClassNames.placeholder);
if (content) expect(content).toHaveClass(customClassNames.content);
if (list) expect(list).toHaveClass(customClassNames.popup.list);
if (listItem) expect(listItem).toHaveClass(customClassNames.popup.listItem);
if (popup) expect(popup).toHaveClass(customClassNames.popup.root);
if (input) {
expect(input).toHaveClass(customClassNames.input);
}
if (prefix) {
expect(prefix).toHaveClass(customClassNames.prefix);
}
if (placeholder) {
expect(placeholder).toHaveClass(customClassNames.placeholder);
}
if (content) {
expect(content).toHaveClass(customClassNames.content);
}
if (list) {
expect(list).toHaveClass(customClassNames.popup.list);
}
if (listItem) {
expect(listItem).toHaveClass(customClassNames.popup.listItem);
}
if (popup) {
expect(popup).toHaveClass(customClassNames.popup.root);
}
expect(root).toHaveStyle(customStyles.root);
if (input) expect(input).toHaveStyle(customStyles.input);
if (prefix) expect(prefix).toHaveStyle(customStyles.prefix);
if (placeholder) expect(placeholder).toHaveStyle(customStyles.placeholder);
if (content) expect(content).toHaveStyle(customStyles.content);
if (list) expect(list).toHaveStyle(customStyles.popup.list);
if (listItem) expect(listItem).toHaveStyle(customStyles.popup.listItem);
if (popup) expect(popup).toHaveStyle(customStyles.popup.root);
if (input) {
expect(input).toHaveStyle(customStyles.input);
}
if (prefix) {
expect(prefix).toHaveStyle(customStyles.prefix);
}
if (placeholder) {
expect(placeholder).toHaveStyle(customStyles.placeholder);
}
if (content) {
expect(content).toHaveStyle(customStyles.content);
}
if (list) {
expect(list).toHaveStyle(customStyles.popup.list);
}
if (listItem) {
expect(listItem).toHaveStyle(customStyles.popup.listItem);
}
if (popup) {
expect(popup).toHaveStyle(customStyles.popup.root);
}
});
it('deprecated popupClassName', () => {

6
components/badge/__tests__/ribbon.test.tsx
View File

@@ -104,9 +104,9 @@ describe('Ribbon', () => {
const contentElement = container.querySelector<HTMLElement>('.ant-ribbon-content');
// check classNames
expect(rootElement).toHaveClass('custom-root');
expect(indicatorElement).toHaveClass('custom-indicator');
expect(contentElement).toHaveClass('custom-content');
expect(rootElement).toHaveClass(customClassNames.root);
expect(indicatorElement).toHaveClass(customClassNames.indicator);
expect(contentElement).toHaveClass(customClassNames.content);
// check styles
expect(rootElement).toHaveStyle({ color: customStyles.root?.color });

6
components/breadcrumb/__tests__/Breadcrumb.test.tsx
View File

@@ -358,8 +358,10 @@ describe('Breadcrumb', () => {
const item = container.querySelector<HTMLElement>('.custom-item');
const separator = container.querySelector<HTMLElement>('.ant-breadcrumb-separator');
expect(root).toHaveClass('custom-root');
expect(separator).toHaveClass('custom-separator');
expect(root).toHaveClass(customClassNames.root);
expect(item).toHaveClass(customClassNames.item);
expect(separator).toHaveClass(customClassNames.separator);
expect(root).toHaveStyle({ color: customStyles.root?.color });
expect(item).toHaveStyle({ color: customStyles.item?.color });
expect(separator).toHaveStyle({ color: customStyles.separator?.color });

24
components/card/__tests__/index.test.tsx
View File

@@ -222,13 +222,13 @@ describe('Card', () => {
const coverElement = container.querySelector<HTMLElement>('.ant-card-cover');
// check classNames
expect(rootElement).toHaveClass('custom-root');
expect(headerElement).toHaveClass('custom-header');
expect(bodyElement).toHaveClass('custom-body');
expect(extraElement).toHaveClass('custom-extra');
expect(titleElement).toHaveClass('custom-title');
expect(actionsElement).toHaveClass('custom-actions');
expect(coverElement).toHaveClass('custom-cover');
expect(rootElement).toHaveClass(customClassNames.root);
expect(headerElement).toHaveClass(customClassNames.header);
expect(bodyElement).toHaveClass(customClassNames.body);
expect(extraElement).toHaveClass(customClassNames.extra);
expect(titleElement).toHaveClass(customClassNames.title);
expect(actionsElement).toHaveClass(customClassNames.actions);
expect(coverElement).toHaveClass(customClassNames.cover);
// check styles
expect(rootElement).toHaveStyle({ backgroundColor: customStyles.root.backgroundColor });
@@ -282,11 +282,11 @@ describe('Card', () => {
const titleElement = container.querySelector<HTMLElement>('.ant-card-meta-title');
const descElement = container.querySelector<HTMLElement>('.ant-card-meta-description');
expect(rootElement).toHaveClass('custom-root');
expect(sectionElement).toHaveClass('custom-section');
expect(avatarElement).toHaveClass('custom-avatar');
expect(titleElement).toHaveClass('custom-title');
expect(descElement).toHaveClass('custom-description');
expect(rootElement).toHaveClass(customClassNames.root);
expect(sectionElement).toHaveClass(customClassNames.section);
expect(avatarElement).toHaveClass(customClassNames.avatar);
expect(titleElement).toHaveClass(customClassNames.title);
expect(descElement).toHaveClass(customClassNames.description);
expect(rootElement).toHaveStyle({ backgroundColor: customStyles.root.backgroundColor });
expect(sectionElement).toHaveStyle({ backgroundColor: customStyles.section.backgroundColor });

17
components/card/__tests__/semantic.test.tsx
View File

@@ -1,8 +1,8 @@
import React from 'react';
import Button from '../../button';
import Card from '..';
import { render } from '../../../tests/utils';
import Button from '../../button';
describe('Card.Semantic', () => {
it('should support useMergeSemantic with mergedProps', () => {
@@ -44,12 +44,12 @@ describe('Card.Semantic', () => {
const extra = container.querySelector('.ant-card-extra');
// Check semantic class names
expect(root).toHaveClass('semantic-card-root');
expect(header).toHaveClass('semantic-card-header');
expect(body).toHaveClass('semantic-card-body');
expect(actions).toHaveClass('semantic-card-actions');
expect(title).toHaveClass('semantic-card-title');
expect(extra).toHaveClass('semantic-card-extra');
expect(root).toHaveClass(semanticClassNames.root);
expect(header).toHaveClass(semanticClassNames.header);
expect(body).toHaveClass(semanticClassNames.body);
expect(actions).toHaveClass(semanticClassNames.actions);
expect(title).toHaveClass(semanticClassNames.title);
expect(extra).toHaveClass(semanticClassNames.extra);
// Check semantic styles
expect(root).toHaveStyle('background-color: rgb(250, 250, 250)');
@@ -79,6 +79,7 @@ describe('Card.Semantic', () => {
extra: { color: '#000000' },
actions: { margin: '8px' },
});
const { Meta } = Card;
const { container } = render(
@@ -113,6 +114,6 @@ describe('Card.Semantic', () => {
expect(body).toHaveStyle('padding: 20px');
expect(actions).toHaveStyle('margin: 8px');
expect(title).toHaveStyle('font-size: 22px');
expect(extra).toHaveStyle(' color: #000000');
expect(extra).toHaveStyle('color: #000000');
});
});

6
components/checkbox/__tests__/semantic.test.tsx
View File

@@ -28,9 +28,9 @@ describe('Checkbox.Semantic', () => {
const iconElement = container.querySelector<HTMLElement>('.ant-checkbox');
const labelElement = container.querySelector<HTMLElement>('.ant-checkbox-label');
expect(rootElement).toHaveClass('custom-root');
expect(iconElement).toHaveClass('custom-icon');
expect(labelElement).toHaveClass('custom-label');
expect(rootElement).toHaveClass(customClassNames.root);
expect(iconElement).toHaveClass(customClassNames.icon);
expect(labelElement).toHaveClass(customClassNames.label);
expect(rootElement).toHaveStyle({ backgroundColor: customStyles.root.backgroundColor });
expect(iconElement).toHaveStyle({ backgroundColor: customStyles.icon.backgroundColor });

10
components/collapse/__tests__/semantic.test.tsx
View File

@@ -36,11 +36,11 @@ describe('Collapse.Semantic', () => {
const iconElement = container.querySelector<HTMLElement>('.ant-collapse-expand-icon');
// check classNames
expect(rootElement).toHaveClass('custom-root');
expect(headerElement).toHaveClass('custom-header');
expect(titleElement).toHaveClass('custom-title');
expect(bodyElement).toHaveClass('custom-body');
expect(iconElement).toHaveClass('custom-icon');
expect(rootElement).toHaveClass(customClassNames.root);
expect(headerElement).toHaveClass(customClassNames.header);
expect(titleElement).toHaveClass(customClassNames.title);
expect(bodyElement).toHaveClass(customClassNames.body);
expect(iconElement).toHaveClass(customClassNames.icon);
// check styles
expect(rootElement).toHaveStyle({ color: customStyles.root.color });

20
components/tabs/__tests__/index.test.tsx
View File

@@ -187,16 +187,16 @@ describe('Tabs', () => {
const indicator = container.querySelector('.ant-tabs-ink-bar');
const header = container.querySelector('.ant-tabs-nav');
const content = container.querySelector('.ant-tabs-tabpane');
expect(root).toHaveClass('test-class');
expect(item).toHaveClass('test-item');
expect(indicator).toHaveClass('test-indicator');
expect(header).toHaveClass('test-header');
expect(content).toHaveClass('test-content');
expect(root).toHaveStyle({ color: 'rgb(255, 0, 0)' });
expect(item).toHaveStyle({ color: 'rgb(0, 0, 255)' });
expect(indicator).toHaveStyle({ color: 'rgb(255, 255, 0)' });
expect(header).toHaveStyle({ color: 'rgb(0, 255, 0)' });
expect(content).toHaveStyle({ color: 'rgb(128, 0, 128)' });
expect(root).toHaveClass(customClassnames.root);
expect(item).toHaveClass(customClassnames.item);
expect(indicator).toHaveClass(customClassnames.indicator);
expect(header).toHaveClass(customClassnames.header);
expect(content).toHaveClass(customClassnames.content);
expect(root).toHaveStyle({ color: customStyles.root.color });
expect(item).toHaveStyle({ color: customStyles.item.color });
expect(indicator).toHaveStyle({ color: customStyles.indicator.color });
expect(header).toHaveStyle({ color: customStyles.header.color });
expect(content).toHaveStyle({ color: customStyles.content.color });
});
describe('Tabs placement transformation', () => {
let consoleErrorSpy: jest.SpyInstance;

20
components/tabs/__tests__/semantic.test.tsx
View File

@@ -56,16 +56,16 @@ describe('Tabs.Semantic', () => {
const indicator = container.querySelector('.ant-tabs-ink-bar');
const header = container.querySelector('.ant-tabs-nav');
const content = container.querySelector('.ant-tabs-tabpane');
expect(root).toHaveClass('test-class');
expect(item).toHaveClass('test-item');
expect(indicator).toHaveClass('test-indicator');
expect(header).toHaveClass('test-header');
expect(content).toHaveClass('test-content');
expect(root).toHaveStyle({ color: 'rgb(255, 0, 0)' });
expect(item).toHaveStyle({ color: 'rgb(0, 0, 255)' });
expect(indicator).toHaveStyle({ color: 'rgb(255, 255, 0)' });
expect(header).toHaveStyle({ color: 'rgb(0, 255, 0)' });
expect(content).toHaveStyle({ color: 'rgb(128, 0, 128)' });
expect(root).toHaveClass(customClassnames.root);
expect(item).toHaveClass(customClassnames.item);
expect(indicator).toHaveClass(customClassnames.indicator);
expect(header).toHaveClass(customClassnames.header);
expect(content).toHaveClass(customClassnames.content);
expect(root).toHaveStyle({ color: customStyles.root.color });
expect(item).toHaveStyle({ color: customStyles.item.color });
expect(indicator).toHaveStyle({ color: customStyles.indicator.color });
expect(header).toHaveStyle({ color: customStyles.header.color });
expect(content).toHaveStyle({ color: customStyles.content.color });
});
it('support function classNames and styles', () => {

40
components/theme/__tests__/token.test.tsx
View File

@@ -15,7 +15,7 @@ describe('Theme', () => {
const getHookToken = (config?: ThemeConfig) => {
let token: any;
let cssVar: any;
const Demo = () => {
const Demo: React.FC = () => {
({ token, cssVar } = useToken());
return null;
};
@@ -244,7 +244,7 @@ describe('Theme', () => {
</ConfigProvider>,
);
expect(container.querySelector('.duration')?.textContent).toEqual('0s');
expect(container.querySelector('.duration')?.textContent).toBe('0s');
});
describe('getDesignToken', () => {
@@ -265,7 +265,7 @@ describe('Theme', () => {
const token = theme.getDesignToken(config);
const { token: hookToken } = getHookToken(config);
expect(token).toEqual(hookToken);
expect(token.colorPrimary).toEqual('#189cff');
expect(token.colorPrimary).toBe('#189cff');
});
it('with custom algorithm', () => {
@@ -280,35 +280,35 @@ describe('Theme', () => {
const token = theme.getDesignToken(config);
const { token: hookToken } = getHookToken(config);
expect(token).toEqual(hookToken);
expect(token.colorPrimary).toEqual('#1668dc');
expect(token.colorPrimary).toBe('#1668dc');
});
});
describe('colorLink', () => {
it('should follow colorPrimary by default', () => {
const { token } = getHookToken();
expect(token.colorLink).toEqual(token.colorInfo);
expect(token.colorLinkHover).toEqual(token.colorInfoHover);
expect(token.colorLinkActive).toEqual(token.colorInfoActive);
expect(token.colorLink).toBe(token.colorInfo);
expect(token.colorLinkHover).toBe(token.colorInfoHover);
expect(token.colorLinkActive).toBe(token.colorInfoActive);
const { token: token2 } = getHookToken({ token: { colorPrimary: '#189cff' } });
expect(token2.colorLink).toEqual(token2.colorInfo);
expect(token2.colorLinkHover).toEqual(token2.colorInfoHover);
expect(token2.colorLinkActive).toEqual(token2.colorInfoActive);
expect(token2.colorLink).toBe(token2.colorInfo);
expect(token2.colorLinkHover).toBe(token2.colorInfoHover);
expect(token2.colorLinkActive).toBe(token2.colorInfoActive);
// colorInfo should not follow colorPrimary
expect(token2.colorLink).not.toEqual('#189cff');
expect(token2.colorLink).not.toBe('#189cff');
const { token: token3 } = getHookToken({ algorithm: [theme.darkAlgorithm] });
expect(token3.colorLink).toEqual(token3.colorInfo);
expect(token3.colorLinkHover).toEqual(token3.colorInfoHover);
expect(token3.colorLinkActive).toEqual(token3.colorInfoActive);
expect(token3.colorLink).toBe(token3.colorInfo);
expect(token3.colorLinkHover).toBe(token3.colorInfoHover);
expect(token3.colorLinkActive).toBe(token3.colorInfoActive);
});
it('should be calculated correctly', () => {
const { token } = getHookToken({ token: { colorLink: '#189cff' } });
expect(token.colorLink).toEqual('#189cff');
expect(token.colorLinkHover).toEqual('#69c8ff');
expect(token.colorLinkActive).toEqual('#0978d9');
expect(token.colorLink).toBe('#189cff');
expect(token.colorLinkHover).toBe('#69c8ff');
expect(token.colorLinkActive).toBe('#0978d9');
});
});
@@ -336,8 +336,8 @@ describe('Theme', () => {
it('get cssVar from useToken', () => {
const { cssVar } = getHookToken();
expect(cssVar.colorLink).toEqual('var(--ant-color-link)');
expect(cssVar.colorLinkHover).toEqual('var(--ant-color-link-hover)');
expect(cssVar.colorLinkActive).toEqual('var(--ant-color-link-active)');
expect(cssVar.colorLink).toBe('var(--ant-color-link)');
expect(cssVar.colorLinkHover).toBe('var(--ant-color-link-hover)');
expect(cssVar.colorLinkActive).toBe('var(--ant-color-link-active)');
});
});

4
components/tooltip/__tests__/semantic.test.tsx
View File

@@ -25,8 +25,8 @@ describe('Tooltip.Semantic', () => {
const tooltipElement = container.querySelector('.ant-tooltip');
const tooltipInner = container.querySelector('.ant-tooltip-container');
expect(tooltipElement).toHaveClass('custom-root');
expect(tooltipInner).toHaveClass('custom-container');
expect(tooltipElement).toHaveClass(classNames.root!);
expect(tooltipInner).toHaveClass(classNames.container!);
expect(tooltipElement).toHaveStyle('background-color: rgb(255, 0, 0)');
expect(tooltipInner).toHaveStyle('color: rgb(0, 0, 255)');
});

4
components/tooltip/__tests__/tooltip.test.tsx
View File

@@ -523,8 +523,8 @@ describe('Tooltip', () => {
const tooltipContainerElement = container.querySelector<HTMLElement>('.ant-tooltip-container');
// 验证 classNames
expect(tooltipElement).toHaveClass('custom-root');
expect(tooltipContainerElement).toHaveClass('custom-container');
expect(tooltipElement).toHaveClass(customClassNames.root);
expect(tooltipContainerElement).toHaveClass(customClassNames.container);
// 验证 styles
expect(tooltipElement).toHaveStyle({ padding: '20px' });

12
components/transfer/__tests__/index.test.tsx
View File

@@ -614,12 +614,12 @@ describe('Transfer', () => {
const actionsElement = container.querySelector<HTMLElement>('.ant-transfer-actions');
// check classNames
expect(rootElement).toHaveClass('custom-transfer-root');
expect(sectionElements[0]).toHaveClass('custom-transfer-section');
expect(sectionElements[1]).toHaveClass('custom-transfer-section');
expect(headerElements[0]).toHaveClass('custom-transfer-header');
expect(headerElements[1]).toHaveClass('custom-transfer-header');
expect(actionsElement).toHaveClass('custom-transfer-actions');
expect(rootElement).toHaveClass(customClassNames.root!);
expect(sectionElements[0]).toHaveClass(customClassNames.section!);
expect(sectionElements[1]).toHaveClass(customClassNames.section!);
expect(headerElements[0]).toHaveClass(customClassNames.header!);
expect(headerElements[1]).toHaveClass(customClassNames.header!);
expect(actionsElement).toHaveClass(customClassNames.actions!);
// check styles
expect(rootElement).toHaveStyle({ color: customStyles.root?.color });