test(back-top): add test case for back-top (#791)

Author: novlan1

site/test-coverage.js

@@ -1,7 +1,7 @@
 module.exports = {
   actionSheet: { statements: '5.26%', branches: '0%', functions: '0%', lines: '5.35%' },
   avatar: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
-  backTop: { statements: '11.9%', branches: '0%', functions: '0%', lines: '12.82%' },
+  backTop: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
   badge: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
   button: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
   calendar: { statements: '98.45%', branches: '95.48%', functions: '100%', lines: '99.15%' },

src/_util/dom.ts

@@ -1,7 +1,9 @@
 import { isFunction, isString } from 'lodash-es';
 
+export const checkWindow = () => !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+
 // 用于判断是否可使用 dom
-export const canUseDocument = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+export const canUseDocument = checkWindow();
 
 /**
  * 获取当前主题下的token色值

src/back-top/Backtop.tsx

@@ -10,21 +10,12 @@ import withNativeProps, { NativeProps } from '../_util/withNativeProps';
 import useConfig from '../hooks/useConfig';
 import { TdBackTopProps } from './type';
 import { backTopDefaultProps } from './defaultProps';
-import { canUseDocument } from '../_util/dom';
+import { checkWindow } from '../_util/dom';
 
 export type ThemeList = 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
 
 export type BackTopProps = TdBackTopProps & NativeProps;
 
-export const defaultProps = {
-  fixed: true,
-  icon: 'backtop',
-  target: (() => window) as any,
-  text: '',
-  theme: 'round' as ThemeList,
-  visibilityHeight: 200,
-};
-
 const BackTop: React.FC<BackTopProps> = (props) => {
   const { fixed, icon, target, text, theme, onToTop, visibilityHeight, container } = useDefaultProps(
     props,
@@ -37,7 +28,7 @@ const BackTop: React.FC<BackTopProps> = (props) => {
 
   const getBackTopDom = () => {
     if (target) return target();
-    if (canUseDocument) return window.document.documentElement;
+    if (checkWindow()) return window.document.documentElement;
     return null;
   };
   backTopDom.current = getBackTopDom();

src/back-top/__tests__/back-top.test.tsx

@@ -0,0 +1,137 @@
+import { render, fireEvent, describe, test, expect, beforeEach, afterEach } from '@test/utils';
+import { vi, type Mock } from 'vitest';
+import React from 'react';
+import { AppIcon } from 'tdesign-icons-react';
+import { useScroll } from 'ahooks';
+import BackTop from '../Backtop';
+import { checkWindow } from '../../_util/dom';
+
+vi.mock('ahooks', async () => {
+  const actual = await vi.importActual('ahooks');
+  return {
+    ...actual,
+    useScroll: vi.fn(),
+  };
+});
+
+vi.mock('../../_util/dom', async () => {
+  const actual = await vi.importActual('../../_util/dom');
+  return {
+    ...actual,
+    checkWindow: vi.fn(),
+  };
+});
+
+describe('BackTop', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('props', () => {
+    test(':target', async () => {
+      (checkWindow as Mock).mockReturnValue(true);
+      document.documentElement.scrollTo = vi.fn();
+      const { container } = render(
+        <div>
+          <BackTop target={() => document.querySelector('#custom-container') as HTMLElement} />
+          <div id="custom-container"></div>
+        </div>,
+      );
+      fireEvent.click(container.querySelector('.t-back-top'));
+      expect(document.documentElement.scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+    });
+
+    test(':fixed', async () => {
+      (window.document.documentElement as any).window = window;
+      const { container } = render(<BackTop fixed />);
+      expect(container.querySelector('.t-back-top--fixed')).toBeTruthy();
+    });
+
+    test(':icon', async () => {
+      const { container, rerender } = render(<BackTop icon={true} />);
+      expect(container.querySelector('.t-back-top__icon')).toBeTruthy();
+
+      rerender(<BackTop icon={<AppIcon />} />);
+      expect(container.querySelector('.t-icon-app')).toBeTruthy();
+    });
+
+    test(':text', async () => {
+      const text = '回到顶部';
+      const { queryByText } = render(<BackTop text={text} />);
+      expect(queryByText(text)).toBeTruthy();
+    });
+
+    test(':theme', async () => {
+      const themes = ['round', 'half-round', 'round-dark', 'half-round-dark'] as const;
+      themes.forEach((theme) => {
+        const { container } = render(<BackTop theme={theme} />);
+        expect(container.querySelector(`.t-back-top--${theme}`)).toBeTruthy();
+      });
+    });
+
+    test(':visibilityHeight', async () => {
+      (useScroll as Mock).mockReturnValue({ top: 400 });
+      const { container } = render(<BackTop visibilityHeight={200} />);
+
+      expect((container.querySelector('.t-back-top') as HTMLElement).style.opacity).toBe('1');
+    });
+
+    test(':container', async () => {
+      render(
+        <div>
+          <BackTop container={() => document.querySelector('#custom-container')} />
+          <div id="custom-container"></div>
+        </div>,
+      );
+      document.querySelector('#custom-container').scrollTo = vi.fn();
+      fireEvent.click(document.querySelector('.t-back-top'));
+      expect(document.querySelector('#custom-container').scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+    });
+  });
+
+  describe('events', () => {
+    test(':onToTop', async () => {
+      const onToTop = vi.fn();
+      document.documentElement.scrollTo = vi.fn();
+      const { container } = render(<BackTop onToTop={onToTop} />);
+      fireEvent.click(container.querySelector('.t-back-top'));
+      expect(onToTop).toHaveBeenCalled();
+    });
+  });
+
+  describe('interaction', () => {
+    test('should show when scrollY > visibilityHeight', async () => {
+      (useScroll as Mock).mockReturnValue({ top: 100 });
+      const { container, rerender } = render(<BackTop visibilityHeight={200} />);
+      expect((container.querySelector('.t-back-top') as HTMLElement).style.opacity).toBe('0');
+      (useScroll as Mock).mockReturnValue({ top: 400 });
+      rerender(<BackTop visibilityHeight={200} />);
+      expect((container.querySelector('.t-back-top') as HTMLElement).style.opacity).toBe('1');
+    });
+
+    test('should scroll to top when clicked', async () => {
+      (useScroll as Mock).mockReturnValue({ top: 400 });
+      document.documentElement.scrollTo = vi.fn();
+      const { container } = render(<BackTop />);
+      fireEvent.click(container.querySelector('.t-back-top'));
+      expect(document.documentElement.scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+    });
+  });
+
+  describe('edge cases', () => {
+    test('should handle empty text', async () => {
+      const { container } = render(<BackTop text="" />);
+      expect(container.querySelector('.t-back-top__text')).toBeFalsy();
+    });
+
+    test('should handle ssr', async () => {
+      (checkWindow as Mock).mockReturnValue(false);
+      render(<BackTop />);
+      expect(document.querySelector('.t-back-top')).toBeTruthy();
+    });
+  });
+});