test(tag): add title & color test case (#3080)

* test(tag): add title & color test case * test: update test case
Tencent · Sep 5, 2024 · 2c290fd · 2c290fd
1 parent f194c99
commit 2c290fd
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 2 deletions.
diff --git a/src/tag/__tests__/vitest-tag.test.jsx b/src/tag/__tests__/vitest-tag.test.jsx
@@ -30,6 +30,36 @@ describe('Tag Component', () => {
     expect(container2.querySelector('.t-tag__icon-close')).toBeTruthy();
   });
 
+  it(`props.color is equal to #ff0000`, () => {
+    const { container } = render(<Tag color={'#ff0000'}></Tag>);
+    const domWrapper = container.firstChild;
+    expect(domWrapper.style.backgroundColor).toBe('rgb(255, 0, 0)');
+  });
+  it(`props.color expect variant='dark'`, () => {
+    const { container } = render(<Tag color={'#ff0000'} variant={'dark'} theme={'primary'}></Tag>);
+    const domWrapper = container.firstChild;
+    expect(domWrapper.style.backgroundColor).toBe('rgb(255, 0, 0)');
+    expect(domWrapper.style.color).toBe('white');
+  });
+  it(`props.color expect variant='light'`, () => {
+    const { container } = render(<Tag color={'#ff0000'} variant={'light'}></Tag>);
+    const domWrapper = container.firstChild;
+    expect(domWrapper.style.color).toBe('rgb(255, 0, 0)');
+    expect(domWrapper.style.backgroundColor).toBe('rgba(255, 0, 0, 0.1)');
+  });
+  it(`props.color expect variant='outline'`, () => {
+    const { container } = render(<Tag color={'#ff0000'} variant={'outline'}></Tag>);
+    const domWrapper = container.firstChild;
+    expect(domWrapper.style.borderColor).toBe('#ff0000');
+    expect(domWrapper.style.color).toBe('rgb(255, 0, 0)');
+  });
+  it(`props.color expect variant='light-outline'`, () => {
+    const { container } = render(<Tag color={'#ff0000'} variant={'light-outline'}></Tag>);
+    const domWrapper = container.firstChild;
+    expect(domWrapper.style.borderColor).toBe('#ff0000');
+    expect(domWrapper.style.color).toBe('rgb(255, 0, 0)');
+  });
+
   it('props.content works fine', () => {
     const { container } = render(<Tag content={<span className="custom-node">TNode</span>}></Tag>);
     expect(container.querySelector('.custom-node')).toBeTruthy();
@@ -89,6 +119,34 @@ describe('Tag Component', () => {
     });
   });
 
+  it(`props.title is equal to This is a long tag`, () => {
+    const { container } = render(
+      <Tag title={'This is a long tag'} content={'This is a long long long long long tag'} maxWidth={'150px'}></Tag>,
+    );
+    const domWrapper = container.firstChild;
+    expect(domWrapper.style.maxWidth).toBe('150px');
+    const domWrapper1 = container.querySelector('.t-tag--text');
+    expect(domWrapper1.getAttribute('title')).toBe('This is a long tag');
+  });
+  it(`props.title is equal to `, () => {
+    const { container } = render(
+      <Tag title={''} content={'This is a long long long long long tag'} maxWidth={'150px'}></Tag>,
+    );
+    const domWrapper = container.firstChild;
+    expect(domWrapper.style.maxWidth).toBe('150px');
+    const domWrapper1 = container.querySelector('.t-tag--text');
+    expect(domWrapper1.getAttribute('title')).toBeNull();
+  });
+  it(`props.title is equal to undefined`, () => {
+    const { container } = render(
+      <Tag title={undefined} content={'This is a long long long long long tag'} maxWidth={'150px'}></Tag>,
+    );
+    const domWrapper = container.firstChild;
+    expect(domWrapper.style.maxWidth).toBe('150px');
+    const domWrapper1 = container.querySelector('.t-tag--text');
+    expect(domWrapper1.getAttribute('title')).toBeNull();
+  });
+
   ['dark', 'light', 'outline', 'light-outline'].forEach((item) => {
     it(`props.variant is equal to ${item}`, () => {
       const { container } = render(<Tag variant={item}></Tag>);

diff --git a/src/tag/tag.en-US.md b/src/tag/tag.en-US.md
@@ -39,7 +39,7 @@ disabled | Boolean | false | \- | N
 size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N
 value | String / Number | - | tag unique key | N
-onChange | Function |  | Typescript：`(checked: boolean, context: CheckTagChangeContext)  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
+onChange | Function |  | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 
 

diff --git a/src/tag/tag.md b/src/tag/tag.md
@@ -39,7 +39,7 @@ disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。
 size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N
 value | String / Number | - | 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置 | N
-onChange | Function |  | TS 类型：`(checked: boolean, context: CheckTagChangeContext)  => void`<br/>状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
+onChange | Function |  | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`<br/>状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击标签时触发 | N