update footer test case (#727)

* feat: udpate mobile footer style

* feat(footer): update logo position

* test(footer): update test case

* chore: update snapshot

* feat(footer): update logo position in footer

* chore: update test case

Author: novlan1

site/test-coverage.js

@@ -20,7 +20,7 @@ module.exports = {
   dropdownMenu: { statements: '12%', branches: '0%', functions: '0%', lines: '12.85%' },
   empty: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
   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,67 @@
+import { render } from '@test/utils';
+import { describe, test, expect } from 'vitest';
+import React from 'react';
+import Footer from '../Footer';
+
+describe('Footer', () => {
+  describe('props', () => {
+    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>
+    </>
+  );
 }