update footer test case

site/test-coverage.js

@@ -20,7 +20,7 @@ module.exports = {
   dropdownMenu: { statements: '12%', branches: '0%', functions: '0%', lines: '12.85%' },
   empty: { statements: '21.42%', branches: '0%', functions: '0%', lines: '21.42%' },
   fab: { statements: '5.4%', branches: '0%', functions: '0%', lines: '5.4%' },
-  footer: { statements: '40%', branches: '0%', functions: '0%', lines: '40%' },
+  footer: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
   form: { statements: '2.8%', branches: '0%', functions: '0%', lines: '2.96%' },
   grid: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
   guide: { statements: '3.46%', branches: '0%', functions: '0%', lines: '3.77%' },

src/footer/Footer.tsx

@@ -11,16 +11,16 @@ export interface FooterProps extends TdFooterProps, StyledProps {}
 const Footer: React.FC<FooterProps> = (originProps) => {
   const props = useDefaultProps(originProps, footerDefaultProps);
 
-  const { links, text, logo } = props;
+  const { links, text, logo, className, style } = props;
 
   const footerClass = usePrefixClass('footer');
   const footerLinkClass = usePrefixClass('footer__link');
 
   return (
-    <div className={`${footerClass}`}>
+    <div className={`${footerClass} ${className || ''}`} style={style}>
       {logo && (
         <a className={`${footerClass}__logo`} href={logo.url} target={logo.target}>
-          {logo.icon && <TImage className={`${footerClass}__icon`} src={logo.icon} />}
+          {logo.icon && <TImage className={`${footerClass}__${logo.title ? 'icon' : 'title-url'}`} src={logo.icon} />}
           {logo.title && <span className={`${footerClass}__title`}>{logo.title}</span>}
         </a>
       )}

src/footer/__tests__/footer.test.tsx

@@ -0,0 +1,65 @@
+import { render } from '@test/utils';
+import { describe, test, expect } from 'vitest';
+import React from 'react';
+import Footer from '../Footer';
+
+describe('Footer', () => {
+  test(': text', () => {
+    const text = 'Hello. TDesign Footer.';
+    const { container } = render(<Footer text={text} />);
+    const textElement = container.querySelector('.t-footer__text');
+    expect(textElement).toBeTruthy();
+    expect(textElement.innerHTML).toBe(text);
+  });
+
+  test('logo with title', () => {
+    const logo = {
+      icon: 'https://tdesign.gtimg.com/mobile/demos/logo2.png',
+      title: '品牌名称',
+    };
+    const { container } = render(<Footer logo={logo} />);
+    const imgElement = container.querySelector('.t-footer__icon img');
+    expect(imgElement).toBeTruthy();
+    expect(imgElement.getAttribute('src')).toBe(logo.icon);
+    const logoTitleElement = container.querySelector('.t-footer__title');
+    expect(logoTitleElement).toBeTruthy();
+    expect(logoTitleElement.innerHTML).toBe(logo.title);
+  });
+
+  test('logo without title', () => {
+    const logo = {
+      icon: 'https://tdesign.gtimg.com/mobile/demos/logo2.png',
+    };
+    const { container } = render(<Footer logo={logo} />);
+    const imgElement = container.querySelector('.t-footer__title-url');
+    expect(imgElement).toBeTruthy();
+  });
+
+  test(': links', () => {
+    const links = [
+      {
+        name: '底部链接A',
+        url: 'https://a',
+      },
+      {
+        name: '底部链接B',
+        url: 'https://b',
+      },
+    ];
+    const { container } = render(<Footer links={links} />);
+    expect(container.querySelector('.t-footer__link-list')).toBeTruthy();
+    const itemsElement = container.querySelectorAll('.t-footer__link-item');
+    expect(itemsElement.length).toBe(links.length);
+    expect(itemsElement[0].innerHTML).toBe(links[0].name);
+  });
+
+  test(': className', () => {
+    const { container } = render(<Footer text="hello" className="custom-class" />);
+    expect(container.querySelector('.t-footer.custom-class')).toBeTruthy();
+  });
+
+  test(': style', () => {
+    const { container } = render(<Footer text="hello" style={{ fontSize: '100px' }} />);
+    expect(window.getComputedStyle(container.querySelector('.t-footer')).fontSize).toBe('100px');
+  });
+});

src/footer/_example/links.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Footer } from 'tdesign-mobile-react';
 
-const text = 'Copyright © 2021-2031 TD.All Rights Reserved.';
+const text = 'Copyright © 2019-2023 TDesign.All Rights Reserved.';
 
 const links = [
   [

src/footer/_example/logo.tsx

@@ -2,10 +2,19 @@ import React from 'react';
 import { Footer } from 'tdesign-mobile-react';
 
 const logo = {
-  icon: 'https://tdesign.gtimg.com/mobile/demos/logo2.png',
-  title: '品牌名称',
+  icon: 'https://tdesign.gtimg.com/mobile/demos/logo1.png',
 };
+const text = 'Copyright © 2019-2023 TDesign.All Rights Reserved.';
 
 export default function LogoDemo() {
-  return <Footer logo={logo} />;
+  return (
+    <>
+      <div className="footer-example">
+        <Footer logo={logo} text={text} />
+      </div>
+      <div className="footer-example">
+        <Footer logo={logo} />
+      </div>
+    </>
+  );
 }