From 6f1ebc331b0e893dde50ad426b4a5f44d28f689f Mon Sep 17 00:00:00 2001 From: sheepluo Date: Wed, 18 Jan 2023 11:18:06 +0800 Subject: [PATCH] Add Timeline unit tests (#1905) * test(timeline): unit tests * test(timeline): add unit tests * test: timeline unit tests * test(timeline): skip failed test in temp --- .../vitest-timeline.test.jsx.snap | 88 ++++++++++++ src/timeline/__tests__/mount.jsx | 28 ++++ src/timeline/__tests__/timeline.test.tsx | 10 -- .../__tests__/vitest-timeline.test.jsx | 129 ++++++++++++++++++ src/timeline/defaultProps.ts | 6 +- src/timeline/index.ts | 2 + src/timeline/timeline.en-US.md | 28 ++++ src/timeline/timeline.md | 12 +- src/timeline/type.ts | 4 +- 9 files changed, 286 insertions(+), 21 deletions(-) create mode 100644 src/timeline/__tests__/__snapshots__/vitest-timeline.test.jsx.snap create mode 100644 src/timeline/__tests__/mount.jsx delete mode 100644 src/timeline/__tests__/timeline.test.tsx create mode 100644 src/timeline/__tests__/vitest-timeline.test.jsx create mode 100644 src/timeline/timeline.en-US.md diff --git a/src/timeline/__tests__/__snapshots__/vitest-timeline.test.jsx.snap b/src/timeline/__tests__/__snapshots__/vitest-timeline.test.jsx.snap new file mode 100644 index 000000000..75b5fffd9 --- /dev/null +++ b/src/timeline/__tests__/__snapshots__/vitest-timeline.test.jsx.snap @@ -0,0 +1,88 @@ +// Vitest Snapshot v1 + +exports[`TimelineItem Component > props.children works fine 1`] = ` +
+
  • +
    +
    +
    +
    +
    + + TNode + +
    +
    • +
    +`; + +exports[`TimelineItem Component > props.content works fine 1`] = ` +
    +
  • +
    +
    +
    +
    +
    + + TNode + +
    +
    • +
    +`; + +exports[`TimelineItem Component > props.label works fine 1`] = ` +
    +
  • +
    + + TNode + +
    +
    +
    +
    +
    +
    +
    • +
    +`; diff --git a/src/timeline/__tests__/mount.jsx b/src/timeline/__tests__/mount.jsx new file mode 100644 index 000000000..6cef60b14 --- /dev/null +++ b/src/timeline/__tests__/mount.jsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { render } from '@test/utils'; +import { Timeline } from '../../timeline'; + +export function getTimelineDefaultMount(Timeline, props, events) { + return render( + + Event1 + Event2 + Event3 + Event4 + + ); +} + +// labelAlign 优先级比较 +export function getTimelineItemMount(TimelineItem, props) { + return render( + + Event1 + Event2 + Event3 + Event4 + + ); +} + +export default getTimelineDefaultMount diff --git a/src/timeline/__tests__/timeline.test.tsx b/src/timeline/__tests__/timeline.test.tsx deleted file mode 100644 index 165f5c876..000000000 --- a/src/timeline/__tests__/timeline.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -// import { render } from '@test/utils'; -// import React from 'react'; -// import Timeline from '../index'; - -// TODO -describe('Timeline 组件测试', () => { - test('dom', () => { - expect(true).toBe(true); - }); -}); diff --git a/src/timeline/__tests__/vitest-timeline.test.jsx b/src/timeline/__tests__/vitest-timeline.test.jsx new file mode 100644 index 000000000..ce4983323 --- /dev/null +++ b/src/timeline/__tests__/vitest-timeline.test.jsx @@ -0,0 +1,129 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +/** + * 该文件由脚本自动生成，如需修改请联系 PMC + * This file generated by scripts of tdesign-api. `npm run api:docs Timeline React(PC) vitest,finalProject` + * If you need to modify this file, contact PMC first please. + */ +import React from 'react'; +import { fireEvent, vi, render } from '@test/utils'; +import { Timeline, TimelineItem } from '..'; +import { getTimelineDefaultMount, getTimelineItemMount } from './mount'; + +describe('Timeline Component', () => { + const labelAlignClassNameMap = { + left: 't-timeline-left', + alternate: 't-timeline-alternate', + right: 't-timeline-right', + }; + Object.entries(labelAlignClassNameMap).forEach(([enumValue, expectedClassName]) => { + it(`props.labelAlign is equal to ${enumValue}`, () => { + let propValue = { true: true, false: false }[enumValue]; + propValue = propValue === undefined ? enumValue : propValue; + const { container } = getTimelineDefaultMount(Timeline, { labelAlign: propValue }); + expect(container.firstChild).toHaveClass(expectedClassName); + }); + }); + + it('props.labelAlign: layout=horizontal labelAlign=top works fine', () => { + const { container } = getTimelineDefaultMount(Timeline, { layout: 'horizontal', labelAlign: 'top' }); + const domWrapper = container.querySelector('.t-timeline'); + expect(domWrapper).toHaveClass('t-timeline-top'); + }); + it('props.labelAlign: layout=horizontal labelAlign=bottom works fine', () => { + const { container } = getTimelineDefaultMount(Timeline, { layout: 'horizontal', labelAlign: 'bottom' }); + const domWrapper = container.querySelector('.t-timeline'); + expect(domWrapper).toHaveClass('t-timeline-bottom'); + }); + + ['horizontal', 'vertical'].forEach((item) => { + it(`props.layout is equal to ${item}`, () => { + const { container } = getTimelineDefaultMount(Timeline, { layout: item }); + expect(container.firstChild).toHaveClass(`t-timeline-${item}`); + }); + }); + + ['alternate', 'same'].forEach((item) => { + it(`props.mode is equal to ${item}`, () => { + const { container } = render(); + expect(container.firstChild).toHaveClass(`t-timeline-label--${item}`); + }); + }); + + it('props.reverse is equal true', () => { + const { container } = getTimelineDefaultMount(Timeline, { reverse: true }); + expect(container.querySelector('.t-timeline-item__content').textContent).toBe('Event4'); + }); + + it('props.theme is equal dot', () => { + const { container } = getTimelineDefaultMount(Timeline, { theme: 'dot' }); + expect(container.querySelectorAll('.t-timeline-item__tail--theme-dot').length).toBe(4); + }); +}); + +describe('TimelineItem Component', () => { + it('props.children works fine', () => { + const { container } = render( + + TNode + , + ); + expect(container.querySelector('.custom-node')).toBeTruthy(); + expect(container).toMatchSnapshot(); + }); + + it('props.content works fine', () => { + const { container } = render(TNode}>); + expect(container.querySelector('.custom-node')).toBeTruthy(); + expect(container).toMatchSnapshot(); + }); + + it('props.dot works fine', () => { + const { container } = render(TNode}>); + expect(container.querySelector('.custom-node')).toBeTruthy(); + }); + + const dotColorClassNameMap = { + primary: 't-timeline-item__dot--primary', + warning: 't-timeline-item__dot--warning', + error: 't-timeline-item__dot--error', + default: 't-timeline-item__dot--default', + }; + Object.entries(dotColorClassNameMap).forEach(([enumValue, expectedClassName]) => { + it(`props.dotColor is equal to ${enumValue}`, () => { + let propValue = { true: true, false: false }[enumValue]; + propValue = propValue === undefined ? enumValue : propValue; + const wrapper = render(); + const container = wrapper.container.querySelector('.t-timeline-item__dot'); + expect(container).toHaveClass(expectedClassName); + }); + }); + + it(`props.dotColor is equal to yellowgreen`, () => { + const { container } = render(); + const domWrapper = container.querySelector('.t-timeline-item__dot'); + expect(domWrapper.style.borderColor).toBe('yellowgreen'); + }); + + it('props.label works fine', () => { + const { container } = render(TNode}>); + expect(container.querySelector('.custom-node')).toBeTruthy(); + expect(container).toMatchSnapshot(); + }); + + it.skip('props.labelAlign is equal left', () => { + const { container } = getTimelineItemMount(TimelineItem, { labelAlign: 'left' }); + expect(container.querySelectorAll('.t-timeline-item:first-child .t-timeline-item-left').length).toBe(1); + }); + + it('props.loading: TimelineItem contains element `.t-timeline-item__dot .t-loading`', () => { + // loading default value is + const { container } = render(); + expect(container.querySelector('.t-timeline-item__dot .t-loading')).toBeFalsy(); + // loading = false + const { container: container1 } = render(); + expect(container1.querySelector('.t-timeline-item__dot .t-loading')).toBeFalsy(); + // loading = true + const { container: container2 } = render(); + expect(container2.querySelector('.t-timeline-item__dot .t-loading')).toBeTruthy(); + }); +}); diff --git a/src/timeline/defaultProps.ts b/src/timeline/defaultProps.ts index ec10cdd4a..7a9485c6b 100644 --- a/src/timeline/defaultProps.ts +++ b/src/timeline/defaultProps.ts @@ -4,12 +4,12 @@ import { TdTimelineProps, TdTimelineItemProps } from './type'; -export const timeLineDefaultProps: TdTimelineProps = { - labelAlign: 'right', +export const timelineDefaultProps: TdTimelineProps = { + labelAlign: 'left', layout: 'vertical', mode: 'alternate', reverse: false, theme: 'default', }; -export const timeLineItemDefaultProps: TdTimelineItemProps = { dotColor: 'default' }; +export const timelineItemDefaultProps: TdTimelineItemProps = { dotColor: 'primary' }; diff --git a/src/timeline/index.ts b/src/timeline/index.ts index 3789e667e..2b295e2ef 100644 --- a/src/timeline/index.ts +++ b/src/timeline/index.ts @@ -1,9 +1,11 @@ import _Timeline from './Timeline'; +import _TimelineItem from './TimelineItem'; import './style/index.js'; export type { TimelineProps } from './Timeline'; export const Timeline = _Timeline; +export const TimelineItem = _TimelineItem; export default Timeline; diff --git a/src/timeline/timeline.en-US.md b/src/timeline/timeline.en-US.md new file mode 100644 index 000000000..e036e75ba --- /dev/null +++ b/src/timeline/timeline.en-US.md @@ -0,0 +1,28 @@ +:: BASE_DOC :: + +## API +### Timeline Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，Typescript：`React.CSSProperties` | N +labelAlign | String | left | label info placement。options：left/right/alternate/top/bottom | N +layout | String | vertical | time line layout。options：horizontal/vertical | N +mode | String | alternate | The position relationship between the label and the content text, 'alternate' is displayed on both sides of the axis, and 'same' is displayed on the same side。options：alternate/same | N +reverse | Boolean | false | \- | N +theme | String | default | options：default/dot | N + +### TimelineItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，Typescript：`React.CSSProperties` | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +dot | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +dotColor | String | primary | Typescript：`string` | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +labelAlign | String | - | options：left/right/top/bottom | N +loading | Boolean | - | Whether it is in the loading state | N diff --git a/src/timeline/timeline.md b/src/timeline/timeline.md index ce4061182..f846a179a 100644 --- a/src/timeline/timeline.md +++ b/src/timeline/timeline.md @@ -1,14 +1,13 @@ :: BASE_DOC :: ## API - ### Timeline Props 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -labelAlign | String | right | 标签信息放在时间轴的位置，`mode='alternate'` 时生效。纵向时间轴信息位置：左侧、右侧或两侧，默认信息在时间轴右侧。横向时间轴信息位置：上方、下方、两侧。可选项：left/right/alternate/top/bottom | N +labelAlign | String | left | 标签信息放在时间轴的位置，`mode='alternate'` 时生效。纵向时间轴信息位置：左侧、右侧或两侧，默认信息在时间轴右侧。横向时间轴信息位置：上方、下方、两侧。可选项：left/right/alternate/top/bottom | N layout | String | vertical | 时间轴方向：水平方向、垂直方向。可选项：horizontal/vertical | N mode | String | alternate | 标签与内容文本的位置关系，`alternate` 为展示在轴两侧，`same` 为展示在同一侧。可选项：alternate/same | N reverse | Boolean | false | 时间轴是否表现为倒序 | N @@ -20,9 +19,10 @@ theme | String | default | 步骤条风格。可选项：default/dot | N -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 描述内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 描述内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 描述内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +content | TNode | - | 描述内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N dot | TElement | - | 用于自定义时间轴节点元素。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -dotColor | String | default | 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值.。可选项：primary/warning/error/default。TS 类型：`string` | N -label | TNode | - | 标签文本内容，可完全自定义。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +dotColor | String | primary | 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值.。TS 类型：`string` | N +label | TNode | - | 标签文本内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N labelAlign | String | - | 标签信息相对于时间轴的位置，在 `mode='alternate'` 时生效，优先级高于 `Timeline.labelAlign`。可选项：left/right/top/bottom | N +loading | Boolean | - | 是否处在加载状态 | N diff --git a/src/timeline/type.ts b/src/timeline/type.ts index 3cbb188e9..2f581acac 100644 --- a/src/timeline/type.ts +++ b/src/timeline/type.ts @@ -9,7 +9,7 @@ import { TNode, TElement } from '../common'; export interface TdTimelineProps { /** * 标签信息放在时间轴的位置，`mode='alternate'` 时生效。纵向时间轴信息位置：左侧、右侧或两侧，默认信息在时间轴右侧。横向时间轴信息位置：上方、下方、两侧 - * @default right + * @default left */ labelAlign?: 'left' | 'right' | 'alternate' | 'top' | 'bottom'; /** @@ -49,7 +49,7 @@ export interface TdTimelineItemProps { dot?: TElement; /** * 时间轴颜色，内置 `primary/warning/error/default` 四种色值，可传入 16 进制颜色码或 RGB 颜色值. - * @default default + * @default primary */ dotColor?: string; /**