test: ConnectModal components test coverage

.changeset/angry-years-explode.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+test:ConnectModal components test coverage

packages/web3/src/connect-modal/__tests__/basic.test.tsx

@@ -1,10 +1,13 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import type { DefaultGuide } from '@ant-design/web3';
 import { ConnectModal } from '@ant-design/web3';
+import { BitcoinCircleColorful } from '@ant-design/web3-icons';
 import { fireEvent, render } from '@testing-library/react';
 import { theme as antTheme, ConfigProvider, Grid } from 'antd';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { mockBrowser } from '../../utils/test-utils';
+import DefaultGuidePanel from '../components/DefaultGuidePanel';
 import { groupOrder, guide, walletList } from './mock';
 
 describe('ConnectModal with guide', () => {
@@ -163,4 +166,40 @@ describe('ConnectModal with guide', () => {
   it('ModalPanel', async () => {
     expect(ConnectModal.ModalPanel).not.toBeUndefined();
   });
+
+  it('when DefaultGuidePanel guide is null', async () => {
+    const App = () => <DefaultGuidePanel guide={null as unknown as DefaultGuide} />;
+    const { baseElement } = render(<App />);
+    expect(baseElement.querySelector('.ant-web3-connect-modal-guide-panel')).toBeNull();
+  });
+
+  it('when DefaultGuidePanel guide is a valid React element', async () => {
+    const ValidReactElement: React.FC = () => <div className="custom">valid</div>;
+    const App = () => (
+      <DefaultGuidePanel
+        guide={React.createElement(ValidReactElement) as unknown as DefaultGuide}
+      />
+    );
+    const { baseElement } = render(<App />);
+    expect(baseElement.querySelector('.custom')).toBeTruthy();
+    expect(baseElement.querySelector('.custom')?.textContent).toBe('valid');
+  });
+
+  it('when DefaultGuidePanel guide element icon is not string', async () => {
+    const Guide = {
+      title: 'title',
+      infos: [
+        {
+          icon: <BitcoinCircleColorful />,
+          title: 'title',
+          description: 'desc',
+        },
+      ],
+    };
+    const App = () => <DefaultGuidePanel guide={Guide as unknown as DefaultGuide} />;
+    const { baseElement } = render(<App />);
+    // Show `ant-web3-connect-modal-guide-item-icon` classname only if icon is string
+    expect(baseElement.querySelector('.ant-web3-connect-modal-guide-item-icon')).toBeNull();
+    expect(baseElement.querySelector('.ant-web3-icon-bitcoin-circle-colorful')).toBeTruthy();
+  });
 });