diff --git a/src/blockHeader/__tests__/blockHeader.test.tsx b/src/blockHeader/__tests__/blockHeader.test.tsx index 6f082db81..3856f5b14 100644 --- a/src/blockHeader/__tests__/blockHeader.test.tsx +++ b/src/blockHeader/__tests__/blockHeader.test.tsx @@ -79,16 +79,19 @@ describe('test BlockHeader render', () => { expect(getByText('说明文字')).toHaveClass('title__description'); expect(getByText('Icon')).toBeTruthy(); }); - test('should render BlockHeader background success', () => { + test('should render BlockHeader background false success', () => { const props = { title: '测试1', background: false }; const { container } = render(); const wrap = container.firstChild; - expect(wrap!.firstChild).not.toHaveClass(`background`); + expect(wrap!.firstChild).not.toHaveClass(`dtc-block-header__title--background`); }); - test('should render BlockHeader className when isSmall is small', () => { + test('should render BlockHeader className when size is small', () => { const { container, getByText } = render(); const wrap = container.firstChild!; expect(wrap).toHaveClass(`${prefixCls} test__className`); + expect(wrap.firstChild).toHaveClass( + `dtc-block-header__title dtc-block-header__title--small dtc-block-header__title--background` + ); expect(getByText('标题2')).toHaveClass('title__text'); expect(getByText('说明文字')).toHaveClass('title__description'); expect(getByText('Icon')).toBeTruthy(); @@ -97,16 +100,17 @@ describe('test BlockHeader render', () => { test('should render BlockHeader tooltip success', () => { const { container } = render(); const wrap = container.firstChild!; - const afterTitleWrap = wrap.firstChild!.firstChild!.lastChild; - expect(afterTitleWrap!.firstChild).toHaveClass('anticon-question-circle'); + const tooltipWrap = wrap.firstChild!.firstChild!.lastChild; + expect(tooltipWrap!.firstChild).toHaveClass('anticon-question-circle'); }); - test('should render BlockHeader tooltip and desc success', () => { + test('should render BlockHeader description success', () => { const { container } = render(); const wrap = container.firstChild!; - const afterTitleWrap = wrap.firstChild!.firstChild!.lastChild; - expect(afterTitleWrap).toHaveTextContent('说明文字'); + const description = wrap.firstChild!.firstChild!.lastChild; + expect(description).toHaveTextContent('说明文字'); }); + test('should render BlockHeader correct dom length', () => { const { container } = render(); const titleBoxWrap = container.firstChild!.firstChild!.firstChild; @@ -118,6 +122,7 @@ describe('test BlockHeader render', () => { const titleBoxWrap1 = container1.firstChild!.firstChild!.firstChild; expect(titleBoxWrap1!.childNodes.length).toEqual(3); }); + test('should render BlockHeader correct margin-bottom', () => { const { container: noStyle } = render(); expect(noStyle.querySelector('.dtc-block-header')).not.toHaveAttribute('style'); diff --git a/src/blockHeader/demos/basic.tsx b/src/blockHeader/demos/basic.tsx index ed0b983f2..226c2c667 100644 --- a/src/blockHeader/demos/basic.tsx +++ b/src/blockHeader/demos/basic.tsx @@ -44,8 +44,8 @@ export default () => { size={size} title="分类标题" background={showBackground} - tooltip={tooltip && '这里展示问号提示'} - description={description && '提示说明文字'} + tooltip={tooltip ? '这里展示问号提示' : ''} + description={description ? '提示说明文字' : ''} /> ); diff --git a/src/blockHeader/style.scss b/src/blockHeader/style.scss index 31285a51a..b317f533f 100644 --- a/src/blockHeader/style.scss +++ b/src/blockHeader/style.scss @@ -7,25 +7,25 @@ $card_prefix: "dtc-block-header"; align-items: center; justify-content: space-between; &--large { - .#{$card_prefix}-title-box { + .title__box { line-height: 24px; - .#{$card_prefix}-title { + .title__text { font-size: 16px; } } } &--middle { - .#{$card_prefix}-title-box { + .title__box { line-height: 22px; - .#{$card_prefix}-title { + .title__text { font-size: 14px; } } } &--small { - .#{$card_prefix}-title-box { + .title__box { line-height: 20px; - .#{$card_prefix}-title { + .title__text { font-size: 12px; } } diff --git a/src/copy/demos/basic.tsx b/src/copy/demos/basic.tsx index 78aa047a5..5d5f134b0 100644 --- a/src/copy/demos/basic.tsx +++ b/src/copy/demos/basic.tsx @@ -19,8 +19,8 @@ export default () => {

{text}

- React.ReactNode`} background={false} size="small" /> - `使用 ()=>React.ReactNode,复制该文本`} /> + React.ReactNode`} background={false} size="small" /> + `使用 () => React.ReactNode,复制该文本`} />

{text}