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
Tencent · Jan 18, 2023 · 6f1ebc3 · 6f1ebc3
1 parent 575067b
commit 6f1ebc3
Show file tree

Hide file tree

Showing 9 changed files with 286 additions and 21 deletions.
diff --git a/src/timeline/__tests__/__snapshots__/vitest-timeline.test.jsx.snap 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`] = `
+<div>
+  <li
+    class="t-timeline-item t-timeline-item-left"
+  >
+    <div
+      class="t-timeline-item__wrapper"
+    >
+      <div
+        class="t-timeline-item__dot t-timeline-item__dot--primary"
+      />
+      <div
+        class="t-timeline-item__tail t-timeline-item__tail--theme-default"
+      />
+    </div>
+    <div
+      class="t-timeline-item__content"
+    >
+      <span
+        class="custom-node"
+      >
+        TNode
+      </span>
+    </div>
+  </li>
+</div>
+`;
+
+exports[`TimelineItem Component > props.content works fine 1`] = `
+<div>
+  <li
+    class="t-timeline-item t-timeline-item-left"
+  >
+    <div
+      class="t-timeline-item__wrapper"
+    >
+      <div
+        class="t-timeline-item__dot t-timeline-item__dot--primary"
+      />
+      <div
+        class="t-timeline-item__tail t-timeline-item__tail--theme-default"
+      />
+    </div>
+    <div
+      class="t-timeline-item__content"
+    >
+      <span
+        class="custom-node"
+      >
+        TNode
+      </span>
+    </div>
+  </li>
+</div>
+`;
+
+exports[`TimelineItem Component > props.label works fine 1`] = `
+<div>
+  <li
+    class="t-timeline-item t-timeline-item-left"
+  >
+    <div
+      class="t-timeline-item__label t-timeline-item__label--alternate"
+    >
+      <span
+        class="custom-node"
+      >
+        TNode
+      </span>
+    </div>
+    <div
+      class="t-timeline-item__wrapper"
+    >
+      <div
+        class="t-timeline-item__dot t-timeline-item__dot--primary"
+      />
+      <div
+        class="t-timeline-item__tail t-timeline-item__tail--theme-default"
+      />
+    </div>
+    <div
+      class="t-timeline-item__content"
+    />
+  </li>
+</div>
+`;
diff --git a/src/timeline/__tests__/mount.jsx 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(
+    <Timeline {...props} {...events}>
+      <Timeline.Item label="2022-01-01">Event1</Timeline.Item>
+      <Timeline.Item label="2022-02-01">Event2</Timeline.Item>
+      <Timeline.Item label="2022-03-01">Event3</Timeline.Item>
+      <Timeline.Item label="2022-04-01" dotColor="yellowgreen">Event4</Timeline.Item>
+    </Timeline>
+  );
+}
+
+// labelAlign 优先级比较
+export function getTimelineItemMount(TimelineItem, props) {
+  return render(
+    <Timeline labelAlign='right'>
+      <TimelineItem {...props} label="2022-01-01">Event1</TimelineItem>
+      <TimelineItem label="2022-02-01">Event2</TimelineItem>
+      <TimelineItem label="2022-03-01">Event3</TimelineItem>
+      <TimelineItem label="2022-04-01">Event4</TimelineItem>
+    </Timeline>
+  );
+}
+
+export default getTimelineDefaultMount
diff --git a/src/timeline/__tests__/timeline.test.tsx b/src/timeline/__tests__/timeline.test.tsx
diff --git a/src/timeline/__tests__/vitest-timeline.test.jsx 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(<Timeline mode={item}></Timeline>);
+      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(
+      <TimelineItem>
+        <span className="custom-node">TNode</span>
+      </TimelineItem>,
+    );
+    expect(container.querySelector('.custom-node')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('props.content works fine', () => {
+    const { container } = render(<TimelineItem content={<span className="custom-node">TNode</span>}></TimelineItem>);
+    expect(container.querySelector('.custom-node')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('props.dot works fine', () => {
+    const { container } = render(<TimelineItem dot={<span className="custom-node">TNode</span>}></TimelineItem>);
+    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(<TimelineItem dotColor={propValue}></TimelineItem>);
+      const container = wrapper.container.querySelector('.t-timeline-item__dot');
+      expect(container).toHaveClass(expectedClassName);
+    });
+  });
+
+  it(`props.dotColor is equal to yellowgreen`, () => {
+    const { container } = render(<TimelineItem dotColor="yellowgreen"></TimelineItem>);
+    const domWrapper = container.querySelector('.t-timeline-item__dot');
+    expect(domWrapper.style.borderColor).toBe('yellowgreen');
+  });
+
+  it('props.label works fine', () => {
+    const { container } = render(<TimelineItem label={<span className="custom-node">TNode</span>}></TimelineItem>);
+    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(<TimelineItem></TimelineItem>);
+    expect(container.querySelector('.t-timeline-item__dot .t-loading')).toBeFalsy();
+    // loading = false
+    const { container: container1 } = render(<TimelineItem loading={false}></TimelineItem>);
+    expect(container1.querySelector('.t-timeline-item__dot .t-loading')).toBeFalsy();
+    // loading = true
+    const { container: container2 } = render(<TimelineItem loading={true}></TimelineItem>);
+    expect(container2.querySelector('.t-timeline-item__dot .t-loading')).toBeTruthy();
+  });
+});
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
   /**