fix: NFTCard action button not work (#344)

* test: add NFTCard like test case

* fix: action click bug

* chore: add change log

Author: yutingzhao1991

.changeset/yellow-files-beg.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+fix: NFTCard action button click not work

packages/web3/src/nft-card/NFTCard.tsx

@@ -39,7 +39,7 @@ interface NFTCardProps {
   style?: React.CSSProperties;
   showAction?: boolean;
   type?: 'default' | 'pithy';
-  onActionChange?: () => void;
+  onActionClick?: () => void;
 }
 
 const CardSkeleton: React.FC<PropsWithChildren<{ loading: boolean; prefixCls: string }>> = ({
@@ -73,6 +73,7 @@ const NFTCard: React.FC<NFTCardProps> = ({
   showAction,
   actionText = 'Buy Now',
   footer,
+  onActionClick,
   getNFTMetadata,
   ...metadataProps
 }) => {
@@ -188,13 +189,7 @@ const NFTCard: React.FC<NFTCardProps> = ({
         </div>
         {showAction ? (
           <div className={`${prefixCls}-action`}>
-            <Button
-              style={{
-                width: '100%',
-              }}
-            >
-              {actionText}
-            </Button>
+            <Button onClick={onActionClick}>{actionText}</Button>
           </div>
         ) : null}
         {footer ? (

packages/web3/src/nft-card/__tests__/action.test.tsx

@@ -0,0 +1,28 @@
+import { NFTCard } from '@ant-design/web3';
+import { fireEvent, render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+describe('NFTCard actions', () => {
+  it('render action and onActionChange work', () => {
+    const actionFn = vi.fn();
+    const address = '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B';
+    const tokenId = 123;
+
+    const { baseElement } = render(
+      <NFTCard
+        address={address}
+        tokenId={tokenId}
+        actionText="ActionTest"
+        showAction
+        onActionClick={actionFn}
+        price={{
+          value: 139999n,
+        }}
+      />,
+    );
+    // Ensure the like and price elements are rendered
+    expect(baseElement.querySelector('.ant-nft-card-action')?.textContent).toBe('ActionTest');
+    fireEvent.click(baseElement.querySelector('.ant-nft-card-action .ant-btn')!);
+    expect(actionFn).toHaveBeenCalled();
+  });
+});

packages/web3/src/nft-card/__tests__/basic.test.tsx

@@ -41,30 +41,6 @@ describe('NFTCard', () => {
     });
   });
 
-  it('renders correctly with likeConfig and price', () => {
-    const address = '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B';
-    const tokenId = 123;
-    const likeConfig = {
-      liked: true,
-      totalLikes: 42,
-    };
-
-    const { baseElement } = render(
-      <NFTCard
-        address={address}
-        tokenId={tokenId}
-        like={likeConfig}
-        price={{
-          value: 139999n,
-        }}
-      />,
-    );
-
-    // Ensure the like and price elements are rendered
-    expect(baseElement.querySelector('.ant-nft-card-like-value')).toBeTruthy();
-    expect(baseElement.querySelector('.ant-web3-crypto-price-balance')).toBeTruthy();
-  });
-
   it('renders correctly without likeConfig and price', () => {
     const address = '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B';
     const tokenId = 123;

packages/web3/src/nft-card/__tests__/like.test.tsx

@@ -0,0 +1,32 @@
+import { NFTCard } from '@ant-design/web3';
+import { fireEvent, render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+describe('NFTCard like', () => {
+  it('renders correctly with likeConfig and onLikeChange work', () => {
+    const likeFn = vi.fn();
+    const address = '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B';
+    const tokenId = 123;
+    const likeConfig = {
+      liked: true,
+      totalLikes: 42,
+      onLikeChange: likeFn,
+    };
+
+    const { baseElement } = render(
+      <NFTCard
+        address={address}
+        tokenId={tokenId}
+        like={likeConfig}
+        price={{
+          value: 139999n,
+        }}
+      />,
+    );
+    // Ensure the like and price elements are rendered
+    expect(baseElement.querySelector('.ant-nft-card-like-value')).toBeTruthy();
+    expect(baseElement.querySelector('.ant-web3-crypto-price-balance')).toBeTruthy();
+    fireEvent.click(baseElement.querySelector('.ant-nft-card-like-icon')!);
+    expect(likeFn).toHaveBeenCalled();
+  });
+});

packages/web3/src/nft-card/index.md

@@ -36,9 +36,9 @@ Components used to display NFTCard.
 | footer | The footer of the card | `React.ReactNode` | - | - |
 | name | The name of the card | `string` | - | - |
 | style | The style of the card | `React.CSSProperties` | - | - |
-| showAction | Whether to show the main button of the card | `boolean` | `true` | - |
+| showAction | Whether to show the action button of the card | `boolean` | `true` | - |
 | type | The type of the card | `'default' \| 'pithy'` | `'default'` | - |
-| onActionChange | The callback when the main button of the card is clicked | `() => void` | - | - |
+| onActionClick | The callback when the action button of the card is clicked | `() => void` | - | - |
 
 The definition of `NFTMetadata` refers to the Ethereum ERC721 standard, see [NFTMetadata document](../types/index.md#nftmetadata) for details.
 

packages/web3/src/nft-card/index.zh-CN.md

@@ -36,9 +36,9 @@ group: 展示
 | footer | 卡片的底部内容 | `React.ReactNode` | - | - |
 | name | 卡片的名称 | `string` | - | - |
 | style | 卡片的样式 | `React.CSSProperties` | - | - |
-| showAction | 是否显示卡片的主要按钮 | `boolean` | `true` | - |
+| showAction | 是否显示卡片的操作按钮 | `boolean` | `true` | - |
 | type | 卡片的类型 | `'default' \| 'pithy'` | `'default'` | - |
-| onActionChange | 点击卡片的主要按钮时的回调 | `() => void` | - | - |
+| onActionClick | 点击卡片的操作按钮时的回调 | `() => void` | - | - |
 
 `NFTMetadata` 的定义参考以太坊 ERC721 的标准，具体见 [NFTMetadata 文档](../types/index.zh-CN.md#nftmetadata)。
 

packages/web3/src/nft-card/style/index.tsx

@@ -134,19 +134,20 @@ const genNFTCardStyle: GenerateStyle<NFTCardToken> = (token) => {
           },
           [`${componentCls}-action`]: {
             marginTop: marginLG,
-            '.ant-btn': {
+            [`${antCls}-btn`]: {
               backgroundColor: colorFillSecondary,
               height: controlHeightLG,
               borderRadius: borderRadiusLG,
               border: 'none',
               color: colorText,
               fontWeight: 500,
+              width: '100%',
             },
           },
           [`${componentCls}-footer`]: {
             color: colorTextSecondary,
             fontSize,
-            '.ant-divider': {
+            [`${antCls}-divider`]: {
               borderColor: colorTextQuaternary,
               marginTop: margin,
               marginBottom: marginXS,