test: add more unit test

ant-design · Nov 24, 2022 · ad2ce58 · ad2ce58
1 parent e2383cc
commit ad2ce58
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 5 deletions.
diff --git a/components/tour/__tests__/__snapshots__/index.test.tsx.snap b/components/tour/__tests__/__snapshots__/index.test.tsx.snap
@@ -31,6 +31,85 @@ exports[`Tour basic 1`] = `
 </div>
 `;
 
+exports[`Tour custom step pre btn & next btn className & style 1`] = `
+<div>
+  <div
+    class="ant-tour"
+    style="z-index: 1090; opacity: 0;"
+  >
+    <div
+      class="ant-tour-content"
+    >
+      <div
+        class="ant-tour-inner"
+      >
+        <span
+          aria-label="close"
+          class="anticon anticon-close ant-tour-close"
+          role="img"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            />
+          </svg>
+        </span>
+        <div
+          class="ant-tour-header"
+        >
+          <div
+            class="ant-tour-title"
+          >
+            Show in Center
+          </div>
+        </div>
+        <div
+          class="ant-tour-description"
+        >
+          Here is the content of Tour.
+        </div>
+        <div
+          class="ant-tour-footer"
+        >
+          <div
+            class="ant-tour-sliders"
+          >
+            <span
+              class="ant-tour-slider-active ant-tour-slider"
+            />
+            <span
+              class="ant-tour-slider"
+            />
+          </div>
+          <div
+            class="ant-tour-buttons"
+          >
+            <button
+              class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn customClassName"
+              style="background-color: rgb(69, 69, 255);"
+              type="button"
+            >
+              <span>
+                Next
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Tour rtl render component should be rendered correctly in RTL direction 1`] = `null`;
 
 exports[`Tour single 1`] = `

diff --git a/components/tour/__tests__/index.test.tsx b/components/tour/__tests__/index.test.tsx
@@ -259,4 +259,44 @@ describe('Tour', () => {
       panelRender({ total: undefined, title: <div>test</div> }, 0, 'default');
     }).not.toThrow();
   });
+
+  it('custom step pre btn & next btn className & style', () => {
+    const App: React.FC = () => (
+      <Tour
+        steps={[
+          {
+            title: 'Show in Center',
+            description: 'Here is the content of Tour.',
+            nextButtonProps: {
+              className: 'customClassName',
+              style: {
+                backgroundColor: 'rgb(69,69,255)',
+              },
+            },
+          },
+          {
+            title: 'With Cover',
+            description: 'Here is the content of Tour.',
+            cover: (
+              <img
+                alt="tour.png"
+                src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
+              />
+            ),
+          },
+        ]}
+      />
+    );
+
+    const { container } = render(<App />);
+    // className
+    expect(
+      screen.getByRole('button', { name: 'Next' }).className.includes('customClassName'),
+    ).toEqual(true);
+    // style
+    expect(screen.getByRole('button', { name: 'Next' }).style.backgroundColor).toEqual(
+      'rgb(69, 69, 255)',
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });
diff --git a/components/tour/interface.ts b/components/tour/interface.ts
@@ -3,7 +3,6 @@ import type {
   TourProps as RCTourProps,
   TourStepProps as RCTourStepProps,
 } from '@rc-component/tour';
-import type { ButtonProps } from '../button';
 
 export type TourProps = Omit<RCTourProps, 'renderPanel'> & {
   steps?: TourStepProps[];
@@ -16,8 +15,18 @@ export type TourProps = Omit<RCTourProps, 'renderPanel'> & {
 
 export interface TourStepProps extends RCTourStepProps {
   cover?: ReactNode; // 展示的图片或者视频
-  nextButtonProps?: { children?: ReactNode; onClick?: () => void } & ButtonProps;
-  prevButtonProps?: { children?: ReactNode; onClick?: () => void } & ButtonProps;
+  nextButtonProps?: {
+    children?: ReactNode;
+    onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+  };
+  prevButtonProps?: {
+    children?: ReactNode;
+    onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+  };
   stepRender?: (current: number, total: number) => ReactNode;
   type?: 'default' | 'primary'; //	default	类型，影响底色与文字颜色
 }

diff --git a/components/tour/panelRender.tsx b/components/tour/panelRender.tsx
@@ -103,7 +103,7 @@ const panelRender = (
                   {...prevButtonProps}
                   onClick={prevBtnClick}
                   size="small"
-                  className={`${prefixCls}-prev-btn`}
+                  className={classNames(`${prefixCls}-prev-btn`, prevButtonProps?.className)}
                 >
                   {prevButtonProps?.children ?? contextLocale.Previous}
                 </Button>
@@ -113,7 +113,7 @@ const panelRender = (
                 {...nextButtonProps}
                 onClick={nextBtnClick}
                 size="small"
-                className={`${prefixCls}-next-btn`}
+                className={classNames(`${prefixCls}-next-btn`, nextButtonProps?.className)}
               >
                 {nextButtonProps?.children ??
                   (isLastStep ? contextLocale.Finish : contextLocale.Next)}