test: unit test（data-picker、skeleton、static-data-picker、static-data-r…

…ange-picker、static-time-picker） (#2022) * test: unit test * feat(input-button): support loading prop (#2023) * feat(input-button): support loading prop * test(input-button): add case Co-authored-by: maxin <maxin@growingio.com> * chore(deps): bump moment from 2.29.1 to 2.29.2 Bumps [moment](https://github.com/moment/moment) from 2.29.1 to 2.29.2. - [Release notes](https://github.com/moment/moment/releases) - [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md) - [Commits](moment/moment@2.29.1...2.29.2) --- updated-dependencies: - dependency-name: moment dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> * chore(deps-dev): bump typescript from 4.5.3 to 4.6.4 Bumps [typescript](https://github.com/Microsoft/TypeScript) from 4.5.3 to 4.6.4. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](microsoft/TypeScript@v4.5.3...v4.6.4) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * chore(deps): bump crowdin/github-action from 1.4.7 to 1.4.8 Bumps [crowdin/github-action](https://github.com/crowdin/github-action) from 1.4.7 to 1.4.8. - [Release notes](https://github.com/crowdin/github-action/releases) - [Commits](crowdin/github-action@1.4.7...1.4.8) --- updated-dependencies: - dependency-name: crowdin/github-action dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore(deps): bump rc-util from 5.18.1 to 5.21.4 Bumps [rc-util](https://github.com/react-component/util) from 5.18.1 to 5.21.4. - [Release notes](https://github.com/react-component/util/releases) - [Changelog](https://github.com/react-component/util/blob/master/HISTORY.md) - [Commits](react-component/util@v5.18.1...v5.21.4) --- updated-dependencies: - dependency-name: rc-util dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * chore(deps): bump react-dnd-html5-backend from 14.1.0 to 16.0.1 Bumps [react-dnd-html5-backend](https://github.com/react-dnd/react-dnd) from 14.1.0 to 16.0.1. - [Release notes](https://github.com/react-dnd/react-dnd/releases) - [Changelog](https://github.com/react-dnd/react-dnd/blob/main/CHANGELOG.md) - [Commits](https://github.com/react-dnd/react-dnd/commits) --- updated-dependencies: - dependency-name: react-dnd-html5-backend dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * test(form): add test cases (#2019) * test(checkbox): add test case * test(result): add test cases * refactor(result): remove test file unused references * test(switch): add test cases * test(form): add test cases * ci(sonar): ignore case * ci(sonar): config ignore rule * docs(steps): add steps storybook (#2013) Co-authored-by: vermilionAnd <zhujiahong@growingio> * docs(toggle): add toggle storybook (#2009) Co-authored-by: vermilionAnd <zhujiahong@growingio> Co-authored-by: maxin <48519459+nnmax@users.noreply.github.com> Co-authored-by: maxin <maxin@growingio.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: gavin <haozhigang@outlook.com> Co-authored-by: vermilionAnd <61216850+zhuzilv@users.noreply.github.com> Co-authored-by: vermilionAnd <zhujiahong@growingio>
growingio · May 24, 2022 · fdbbf67 · fdbbf67 · vercel · May 24, 2022
1 parent 7b8d1e3
commit fdbbf67
Show file tree

Hide file tree

Showing 8 changed files with 286 additions and 11 deletions.
diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
@@ -53,7 +53,9 @@ export const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) =>
     onSelect?.(currentValue, formatDate(currentValue));
   };
 
-  const content = <StaticDatePicker onSelect={handleOnSelect} disabledDate={disabledDate} value={controlledValue} {...restProps} />;
+  const content = (
+    <StaticDatePicker onSelect={handleOnSelect} disabledDate={disabledDate} value={controlledValue} {...restProps} />
+  );
 
   function renderTrigger() {
     if (trigger) {

diff --git a/src/date-picker/__tests__/index.test.tsx b/src/date-picker/__tests__/index.test.tsx
@@ -0,0 +1,57 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { format } from 'date-fns';
+import Button from '../../button';
+import DatePicker from '../DatePicker';
+
+describe('Testing DatePicker ', () => {
+  it('render without params', () => {
+    const { container } = render(<DatePicker />);
+    expect(container.querySelector('input[type="button"]')).toBeTruthy();
+  });
+
+  it('render has trigger params', () => {
+    const { container } = render(
+      <DatePicker
+        trigger={<Button type="secondary">{format(new Date(), '您的所选时间为 yyyy-MM-dd HH:mm:ss')}</Button>}
+      />
+    );
+    expect(container.querySelectorAll('您的所选时间为')).toBeTruthy();
+  });
+
+  it('render has format', () => {
+    const { container } = render(<DatePicker format="yyyy/MM/dd hh:mm" />);
+    expect(container.querySelector('input[type="button"]')).toBeTruthy();
+  });
+
+  it('render has dataTestId', () => {
+    const { container } = render(<DatePicker dataTestId="test" />);
+    expect(container.querySelector('input[data-testId="test"]')).toBeTruthy();
+    expect(container.querySelector('input[data-testId="dataPicker"]')).toBeFalsy();
+  });
+
+  it('operation', () => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    render(<DatePicker format="yyyy/MM/dd hh:mm" onVisibleChange={() => {}} onSelect={() => {}} />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(screen.getByText('12')).toBeTruthy();
+
+    fireEvent.click(screen.getByText('12'));
+
+    expect(screen.getByTestId('dataPicker').title).toMatch('/12');
+  });
+
+  it('operation without params', () => {
+    render(<DatePicker format="yyyy/MM/dd hh:mm" />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(screen.getByText('12')).toBeTruthy();
+
+    fireEvent.click(screen.getByText('12'));
+
+    expect(screen.getByTestId('dataPicker').title).toMatch('/12');
+  });
+});
diff --git a/src/skeleton/__tests__/index.test.tsx b/src/skeleton/__tests__/index.test.tsx
@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import SkeletonImage from '../Image';
+import Skeleton from '../Skeleton';
+
+describe('Testing Skeleton ', () => {
+  it('without params', () => {
+    render(<Skeleton />);
+    expect(screen.getByTestId('skeleton')).toBeTruthy();
+  });
+
+  it('has params', () => {
+    const { container } = render(
+      <Skeleton loading delay={500} paragraph={{ row: 4, width: '100%' }} active={false} avatar={{ size: 'small' }} />
+    );
+    expect(container.getElementsByClassName('gio-skeleton-paragraph')[0].getElementsByTagName('p').length).toBe(4);
+  });
+
+  it('has title paragraph', () => {
+    const { container } = render(<Skeleton paragraph={{ row: 4, width: '100%' }} title />);
+    expect(container.getElementsByClassName('gio-skeleton-title').length).toBe(1);
+    expect(container.getElementsByClassName('gio-skeleton-paragraph')[0].getElementsByTagName('p').length).toBe(4);
+  });
+
+  it('has only title', () => {
+    const { container } = render(<Skeleton title />);
+    expect(container.getElementsByClassName('gio-skeleton-title').length).toBe(1);
+  });
+
+  it('rowWidth is array', () => {
+    const { container } = render(<Skeleton paragraph={{ row: 3, width: [200, 300, '100%'] }} />);
+    expect(container.getElementsByClassName('gio-skeleton-paragraph')[0].getElementsByTagName('p').length).toBe(3);
+    expect(container.getElementsByClassName('gio-skeleton-paragraph')[0].getElementsByTagName('p')[0].style.width).toBe(
+      '200px'
+    );
+  });
+
+  it('loading is false', () => {
+    render(<Skeleton loading={false}>内容</Skeleton>);
+    expect(screen.getByText('内容')).toBeTruthy();
+  });
+
+  it('SkeletonImage', () => {
+    const { container } = render(<SkeletonImage delay={500} width={200} color="#000000" />);
+    expect(container.getElementsByClassName('gio-skeleton-image').length).toBe(1);
+  });
+
+  it('SkeletonImage loading false', () => {
+    const { container } = render(<SkeletonImage loading={false}>内容</SkeletonImage>);
+    expect(container.getElementsByClassName('gio-skeleton-image').length).toBe(0);
+    expect(screen.getByText('内容')).toBeTruthy();
+  });
+});
diff --git a/src/static-date-picker/StaticDatePicker.tsx b/src/static-date-picker/StaticDatePicker.tsx
@@ -15,7 +15,10 @@ const Cell: React.FC<{ visible: boolean; prefixCls: string; currentDate: Date }>
   const divRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
-    const parent = divRef.current?.parentElement;
+    let parent: any = null;
+    if (divRef.current) {
+      parent = divRef.current.parentElement;
+    }
 
     if (parent && !visible) {
       const attributes = ['title', 'class'];
@@ -24,9 +27,8 @@ const Cell: React.FC<{ visible: boolean; prefixCls: string; currentDate: Date }>
     }
   });
 
-
   return (
-    <div ref={divRef} style={{ visibility: visible ? "visible" : "hidden" }} className={`${prefixCls}-cell-inner`}>
+    <div ref={divRef} style={{ visibility: visible ? 'visible' : 'hidden' }} className={`${prefixCls}-cell-inner`}>
       {currentDate.getDate()}
     </div>
   );
@@ -49,8 +51,10 @@ const StaticDatePicker: React.FC<StaticDatePickerProps> = ({
 
   const prefixCls = usePrefixCls('picker');
 
-  const isSameYearMonth = (one: Date, two: Date) => one.getFullYear() === two.getFullYear() && one.getMonth() === two.getMonth()
-  const isOmittedDate = (currentDate: Date, currentMode: PickerMode) => currentMode === 'date' && !isSameYearMonth(currentDate, viewDate)
+  const isSameYearMonth = (one: Date, two: Date) =>
+    one.getFullYear() === two.getFullYear() && one.getMonth() === two.getMonth();
+  const isOmittedDate = (currentDate: Date, currentMode: PickerMode) =>
+    currentMode === 'date' && !isSameYearMonth(currentDate, viewDate);
   const dateRender = (currentDate: Date) => {
     const visible = !isOmittedDate(currentDate, 'date');
     // 移除非当前月份的日期
@@ -76,8 +80,12 @@ const StaticDatePicker: React.FC<StaticDatePickerProps> = ({
       defaultValue={defaultValue}
       {...restProps}
       pickerValue={viewDate}
-      onSelect={(date) => { onSelect?.(date); }}
-      onChange={(date) => { setViewDate(date, true); }}
+      onSelect={(date) => {
+        onSelect?.(date);
+      }}
+      onChange={(date) => {
+        setViewDate(date, true);
+      }}
       locale={locale}
       prefixCls={prefixCls}
       onPanelChange={(changedValue, changedMode: PickerMode) => {

diff --git a/src/static-date-picker/__tests__/index.test.tsx b/src/static-date-picker/__tests__/index.test.tsx
@@ -0,0 +1,47 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import StaticDatePicker from '../StaticDatePicker';
+
+describe('Testing StaticDatePicker ', () => {
+  it('without params', () => {
+    render(<StaticDatePicker />);
+    expect(screen.getByText('12')).toBeTruthy();
+  });
+
+  it('disabledDate is function', () => {
+    render(<StaticDatePicker disabledDate={(current: Date) => current.getTime() > new Date().getTime()} />);
+    expect(screen.getByText('12')).toBeTruthy();
+  });
+
+  it('onPanelChange has onPanelChange', () => {
+    const { container } = render(
+      <StaticDatePicker
+        disabledDate={(current: Date) => current.getTime() > new Date().getTime()}
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onPanelChange={() => {}}
+      />
+    );
+
+    fireEvent.click(container.querySelector('button[class="gio-picker-header-super-prev-btn"]'));
+
+    expect(screen.getByText('12')).toBeTruthy();
+
+    fireEvent.click(container.querySelector('button[class="gio-picker-header-prev-btn"]'));
+
+    expect(screen.getByText('12')).toBeTruthy();
+
+    fireEvent.click(screen.getByText('12'));
+
+    expect(screen.getByText('12')).toBeTruthy();
+  });
+
+  it('onPanelChange not onPanelChange', () => {
+    const { container } = render(
+      <StaticDatePicker disabledDate={(current: Date) => current.getTime() > new Date().getTime()} />
+    );
+
+    fireEvent.click(container.querySelector('button[class="gio-picker-header-super-prev-btn"]'));
+
+    expect(screen.getByText('12')).toBeTruthy();
+  });
+});
diff --git a/src/static-date-range-picker/__tests__/index.test.tsx b/src/static-date-range-picker/__tests__/index.test.tsx
@@ -0,0 +1,92 @@
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { startOfToday, subMonths } from 'date-fns';
+import StaticDateRangePicker from '../StaticDateRangePicker';
+
+describe('Testing StaticDatePicker ', () => {
+  it('without params', () => {
+    const { container } = render(<StaticDateRangePicker />);
+    expect(container.querySelector('div[class="gio-date-range-picker"]')).toBeTruthy();
+  });
+
+  it('onPanelChange has onPanelChange', () => {
+    const { container } = render(
+      <StaticDateRangePicker
+        disabledDate={(current: Date) => current.getTime() > new Date().getTime()}
+        defaultViewDates={[subMonths(startOfToday(), 1), startOfToday()]}
+      />
+    );
+
+    fireEvent.click(
+      container.querySelector('.gio-date-range-picker__left button[class="gio-picker-header-super-prev-btn"]')
+    );
+
+    expect(container.querySelector('div[class="gio-picker-cell-inner"]')).toBeTruthy();
+
+    fireEvent.click(
+      container.querySelector('.gio-date-range-picker__right button[class="gio-picker-header-super-next-btn"]')
+    );
+
+    expect(container.querySelector('div[class="gio-picker-cell-inner"]')).toBeTruthy();
+  });
+
+  it('left right', () => {
+    const { container } = render(
+      <StaticDateRangePicker defaultValue={[new Date('2022-03-01'), new Date('2022-04-01')]} />
+    );
+
+    fireEvent.click(container.querySelector('td[title="2022-04-02"] .gio-picker-cell-inner'));
+
+    fireEvent.click(container.querySelector('td[title="2022-04-11"] .gio-picker-cell-inner'));
+
+    expect(container.querySelector('div[class="gio-picker-cell-inner"]')).toBeTruthy();
+  });
+
+  it('has function', () => {
+    const { container } = render(
+      <StaticDateRangePicker
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onDateMouseEnter={() => {}}
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onDateMouseLeave={() => {}}
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onSelect={() => {}}
+        defaultValue={[new Date('2022-03-01'), new Date('2022-04-01')]}
+      />
+    );
+
+    fireEvent.click(container.querySelector('td[title="2022-04-02"] .gio-picker-cell-inner'));
+
+    fireEvent.mouseEnter(container.querySelector('td[title="2022-04-10"] .gio-picker-cell-inner'));
+
+    fireEvent.mouseLeave(container.querySelector('td[title="2022-04-10"] .gio-picker-cell-inner'));
+
+    fireEvent.click(container.querySelector('td[title="2022-04-11"] .gio-picker-cell-inner'));
+
+    expect(container.querySelector('div[class="gio-picker-cell-inner"]')).toBeTruthy();
+  });
+
+  it('not function', () => {
+    const { container } = render(
+      <StaticDateRangePicker defaultValue={[new Date('2022-03-01'), new Date('2022-04-01')]} />
+    );
+
+    fireEvent.mouseEnter(container.querySelector('td[title="2022-04-10"] .gio-picker-cell-inner'));
+
+    fireEvent.mouseLeave(container.querySelector('td[title="2022-04-10"] .gio-picker-cell-inner'));
+
+    expect(container.querySelector('div[class="gio-picker-cell-inner"]')).toBeTruthy();
+  });
+
+  it('has defaultViewDates', () => {
+    const { container } = render(
+      <StaticDateRangePicker defaultValue={[new Date('2022-03-01'), new Date('2022-04-01')]} />
+    );
+
+    fireEvent.mouseEnter(container.querySelector('td[title="2022-04-10"] .gio-picker-cell-inner'));
+
+    fireEvent.mouseLeave(container.querySelector('td[title="2022-04-10"] .gio-picker-cell-inner'));
+
+    expect(container.querySelector('div[class="gio-picker-cell-inner"]')).toBeTruthy();
+  });
+});
diff --git a/src/static-date-range-picker/utils.tsx b/src/static-date-range-picker/utils.tsx
@@ -3,15 +3,16 @@ import generateDateFns from 'rc-picker/lib/generate/dateFns';
 import { getClosingViewDate } from 'rc-picker/lib/utils/dateUtil';
 import { add, startOfDay } from 'date-fns';
 
-export const getDefaultViewDates = (defaultDate: Date = new Date()) =>
+export const getDefaultViewDates = (defaultDate: Date) =>
   [startOfDay(defaultDate), add(startOfDay(defaultDate), { months: 1 })] as [Date, Date];
 
+// eslint-disable
 export const calcClosingViewDate = (currentDate: Date, offset?: number) =>
   getClosingViewDate(currentDate, 'date', generateDateFns, offset);
 
 export const mergeDates = (dates: RangeValue<Date>, currentDate: Date | undefined, index: number) => {
-  if (index) {
-    return [dates?.[0], currentDate] as RangeValue<Date>;
+  if (index && dates) {
+    return [dates[0], currentDate] as RangeValue<Date>;
   }
   return [currentDate, null] as RangeValue<Date>;
 };

diff --git a/src/static-time-picker/__tests__/index.test.tsx b/src/static-time-picker/__tests__/index.test.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import StaticTimePicker from '../StaticTimePicker';
+
+describe('Testing StaticTimePicker ', () => {
+  it('without params', () => {
+    render(<StaticTimePicker />);
+    expect(screen.getByText('59')).toBeTruthy();
+  });
+
+  it('showSecond', () => {
+    render(<StaticTimePicker showSecond />);
+    expect(screen.getAllByText('59').length).toBe(2);
+  });
+});