refactor(DatePicker): convert to TypeScript, impove docs and tests, close #4578 #4932

eternalsky · 2024-09-13T09:14:54Z

Haxwwwww · 2024-09-18T06:21:39Z

components/date-picker/date-picker.tsx

        this.setState({
            panel,
        });
    };

-    onOk = value => {
+    onOk = (value: undefined) => {


这里用undefined是否合适？若value强行指定为undefined，value || this.state.value 的值是否恒为 this.state.value？

Haxwwwww · 2024-09-18T06:23:20Z

components/date-picker/range-picker.tsx

 }

-function getFormatValues(values, format) {
+function getFormatValues(values: RangePickerProps['value'] | null | undefined, format?: string) {


RangePickerProps['value']似乎已经包含undefined了

Haxwwwww · 2024-09-18T06:28:29Z

components/date-picker/__tests__/index-spec.tsx

+            cy.get('@timeInput').type('{ctrl}{downArrow}');
+            cy.get('@timeInput').should('have.value', '00:00:00');
+            cy.get('@timeInput').type('{downArrow}');
+            cy.get('@timeInput').should('have.value', '00:00:01');


在非单独测试时这个case偶尔会出现无法通过的情况，此处可能是00:00:00

Haxwwwww · 2024-09-18T06:29:00Z

components/date-picker/__tests__/index-spec.tsx

+
+        it('should hide seconds', () => {
+            cy.mount(<DatePicker defaultVisible showTime={{ format: 'HH:mm' }} />);
+            // assert(!wrapper.find('.next-time-picker-menu-hour').length);


Haxwwwww · 2024-09-18T06:29:32Z

components/date-picker/__tests__/index-spec.tsx

+        it('should defaultValue as string', () => {
+            cy.mount(<DatePicker defaultValue="2018-01-23" />);
+
+            // assert(wrapper.find('.next-date-picker-input input').instance().value === '2018-01-23');


Haxwwwww · 2024-09-18T06:30:03Z

components/date-picker/__tests__/index-spec.tsx

+
+        it('should set hasClear to false', () => {
+            cy.mount(<YearPicker defaultValue={startYear} hasClear={false} />);
+            // assert(!wrapper.find('i.next-input-clear-icon').length);


Haxwwwww · 2024-09-18T06:30:26Z

components/date-picker/__tests__/index-spec.tsx

+
+        it('should set hasClear to false', () => {
+            cy.mount(<MonthPicker defaultValue={startMonth} hasClear={false} />);
+            // assert(!wrapper.find('i.next-input-clear-icon').length);


Haxwwwww · 2024-09-18T06:30:50Z

components/date-picker/__tests__/index-spec.tsx

+        });
+
+        it('should input disabled date in picker', () => {
+            // const onChange = cy.spy();


Haxwwwww · 2024-09-18T06:31:30Z

components/date-picker/__tests__/index-spec.tsx

+    describe('render with props', () => {
+        it('should render with defaultValue', () => {
+            cy.mount(<WeekPicker defaultValue={startWeek} />);
+            cy.get('.next-week-picker-input input').should('have.value', '2018-2nd');


根据原 case 是否应该补一句：cy.get('i.next-input-clear-icon').should('exist');

Haxwwwww · 2024-09-18T06:31:45Z

components/date-picker/__tests__/index-spec.tsx

+
+    describe('action', () => {
+        it('should select', () => {
+            // const onChange = cy.spy();


Haxwwwww · 2024-09-18T06:32:06Z

components/date-picker/__tests__/index-spec.tsx

+
+            cy.get('.next-calendar-cell[title="2017-11-09"] .next-calendar-date').click();
+            cy.get('.next-calendar-cell[title="2017-12-09"] .next-calendar-date').eq(1).click();
+            // assert(ret[1].format('YYYY-MM-DD HH:mm:ss') === '2017-12-09 09:00:00');


Haxwwwww · 2024-09-18T06:32:20Z

components/date-picker/__tests__/index-spec.tsx

+            );
+            cy.get('.next-calendar-cell[title="2017-11-09"] .next-calendar-date').click();
+            cy.get('.next-calendar-cell[title="2017-12-09"] .next-calendar-date').eq(1).click();
+            // assert(ret[1].format('YYYY-MM-DD HH:mm:ss') === '2017-12-09 23:59:59');


Haxwwwww · 2024-09-18T06:33:34Z

components/date-picker/__tests__/index-spec.tsx

+            cy.get('@input').type('{ctrl}{downArrow}');
+            cy.get('@input').should('have.value', moment().format('YYYY-MM-DD'));
+            cy.get('@input').type('{downArrow}');
+            cy.get('@input').should('have.value', moment().add(1, 'day').format('YYYY-MM-DD'));


此处也出现过case不通过的情况，不过复现频率比前者低很多

Haxwwwww · 2024-09-18T06:53:01Z

components/date-picker/date-picker.tsx

+        super(props);
+        const { format, timeFormat, dateTimeFormat } = getDateTimeFormat(
+            props.format,
+            props.showTime!


此处似乎没必要加非空断言？

Haxwwwww · 2024-09-18T06:54:19Z

components/date-picker/range-picker.tsx

+        super(props);
+        const { format, timeFormat, dateTimeFormat } = getDateTimeFormat(
+            props.format,
+            props.showTime!,


此处似乎没必要加非空断言？

Haxwwwww · 2024-09-18T07:00:43Z

components/date-picker/__docs__/adaptor/index.tsx

@@ -2,55 +2,77 @@ import React from 'react';
 import { DatePicker } from '@alifd/next';
 import { Types } from '@alifd/adaptor-helper';
 import moment from 'moment';
+import type { DatePickerProps } from '../../types';


是否应该从'@alifd/next/types/date-picker'中引？

只有 demo 要求必须从 @alifd/next/types 引，因为是给用户看的，其他的部分可以引相对路径。

caozhong1996 · 2024-09-18T16:42:19Z

components/date-picker/__tests__/index-spec.tsx

+            );
+            cy.get('.next-date-picker-panel-input input').eq(0).type('2017-11-11');
+            cy.get('.next-date-picker-panel-input input').eq(0).blur();
+            cy.wrap(handleChange).should('be.calledWith', '2017-11-11 00:00:00');


这个断言低概率出现不能被调用到的情况，可能cypress本身的问题

caozhong1996 · 2024-09-23T03:30:50Z

components/date-picker/types.ts

+     * 日期值（受控）moment 对象
+     * @en Date value, moment object, controlled
+     */
+    value?: string | Moment | null;


这里的value类型定义，应该可以共用一个，不过好像被合并进去了，后续在改吧🥹

caozhong1996 · 2024-09-23T03:42:51Z

components/date-picker/types.ts

+     * @en Input box size
+     * @defaultValue 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';


这个size也多次定义，如果不影响tsdoc生成文档的话，是否能够共用一个type

caozhong1996 · 2024-09-23T06:22:48Z

components/date-picker/__tests__/index-spec.tsx

+const timeStamp = 1581938105000;
+
+// 禁止选择 startValue 之前的所有日期
+const disabledDate = function (date: Moment, view: unknown) {


view 可以准确的定义为 string

caozhong1996 · 2024-09-23T06:40:24Z

components/date-picker/__tests__/index-spec.tsx

+            );
+            cy.get('.next-date-picker-panel-input input').click();
+            cy.get('.next-date-picker-panel-input input').eq(0).clear();
+            cy.get('.next-date-picker-panel-input input').eq(0).blur();


blur这行代码应该是不需要的，下面的click会触发blur

caozhong1996 · 2024-09-23T06:44:45Z

components/date-picker/__tests__/index-spec.tsx

+            cy.get('.next-date-picker-panel-input input').eq(1).focus();
+            cy.get('.next-time-picker-panel').should('exist');
+            cy.get('.next-date-picker-panel-input input').eq(0).focus();
+            cy.get('.next-date-picker-panel-input input').eq(0).blur();


这行应该也不需要

caozhong1996 · 2024-09-23T07:25:32Z

components/date-picker/__tests__/index-spec.tsx

+            cy.mount(<RangePicker />);
+            cy.get('.next-range-picker-trigger-input input').eq(0).focus();
+            cy.get('.next-range-picker-trigger-input input').eq(0).click();
+            cy.get('.next-range-picker-panel-input-start-date').should('have.class', 'next-focus');
+        });
+
+        it('should focus the input of end date', () => {
+            cy.mount(<RangePicker />);
+            cy.get('.next-range-picker-trigger-input input').eq(1).focus();
+            cy.get('.next-range-picker-trigger-input input').eq(1).click();
+            cy.get('.next-range-picker-panel-input-end-date').should('have.class', 'next-focus');


这里面的两行focus是无效的代码

caozhong1996 · 2024-09-23T07:27:48Z

components/date-picker/__tests__/index-spec.tsx

+        it('should focus the input to change panel', () => {
+            cy.mount(<RangePicker showTime defaultValue={[startValue, endValue]} defaultVisible />);
+            cy.get('.next-range-picker-panel-input-start-time input').focus();
+            cy.get('.next-range-picker-panel-input-start-time input').blur();


这里面的两行blur是无效的代码

eternalsky added the Technical Upgrade label Sep 13, 2024

eternalsky changed the title ~~Refactor/date picker~~ refactor(DatePicker): convert to TypeScript, impove docs and tests, close Sep 13, 2024

eternalsky changed the title ~~refactor(DatePicker): convert to TypeScript, impove docs and tests, close~~ refactor(DatePicker): convert to TypeScript, impove docs and tests, close #4578 Sep 13, 2024

eternalsky added 4 commits September 13, 2024 17:18

refactor(DatePicker): rename to ts

59c78e1

refactor(DatePicker): improve ts

5e28cc9

refactor(DatePicker): improve types and docs

6f1d613

refactor(DatePicker): improve tc

0c655ad

eternalsky force-pushed the refactor/date-picker branch from f471c4f to 0c655ad Compare September 13, 2024 09:19

eternalsky linked an issue Sep 13, 2024 that may be closed by this pull request

【Technical upgrade】DatePicker2 #4579

Open

eternalsky removed a link to an issue Sep 13, 2024

【Technical upgrade】DatePicker2 #4579

Open

This was linked to issues Sep 13, 2024

[DatePicker]DatePicker组件优化 #3072

Open

【Technical upgrade】DatePicker #4578

Closed

eternalsky requested review from Haxwwwww, luolin-ck and caozhong1996 September 13, 2024 09:42

eternalsky closed this Sep 18, 2024

eternalsky reopened this Sep 18, 2024

Haxwwwww reviewed Sep 18, 2024

View reviewed changes

caozhong1996 reviewed Sep 18, 2024

View reviewed changes

refactor(DatePicker): fix comment issues

6d43944

Haxwwwww self-requested a review September 23, 2024 03:03

Haxwwwww approved these changes Sep 23, 2024

View reviewed changes

eternalsky merged commit 44b64b6 into next Sep 23, 2024
4 checks passed

eternalsky deleted the refactor/date-picker branch September 23, 2024 03:07

caozhong1996 reviewed Sep 23, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(DatePicker): convert to TypeScript, impove docs and tests, close #4578 #4932

refactor(DatePicker): convert to TypeScript, impove docs and tests, close #4578 #4932

eternalsky commented Sep 13, 2024 •

edited

Loading

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

Haxwwwww Sep 18, 2024

eternalsky Sep 19, 2024

caozhong1996 Sep 18, 2024 •

edited

Loading

caozhong1996 Sep 23, 2024

caozhong1996 Sep 23, 2024

caozhong1996 Sep 23, 2024

caozhong1996 Sep 23, 2024

caozhong1996 Sep 23, 2024

caozhong1996 Sep 23, 2024

caozhong1996 Sep 23, 2024

refactor(DatePicker): convert to TypeScript, impove docs and tests, close #4578 #4932

refactor(DatePicker): convert to TypeScript, impove docs and tests, close #4578 #4932

Conversation

eternalsky commented Sep 13, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

caozhong1996 Sep 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eternalsky commented Sep 13, 2024 •

edited

Loading

caozhong1996 Sep 18, 2024 •

edited

Loading