[Footer] Propagate attributes (#129)

* feat: [Footer] Propagate attributes

* test: FooterLinks

* test: Footer

Author: meissadia

src/components/Footer/Footer.test.tsx

@@ -0,0 +1,95 @@
+import { render, screen } from '@testing-library/react';
+import Footer from './Footer';
+
+describe('Footer', () => {
+  it('Skips empty lists', () => {
+    render(<Footer />);
+
+    // List not rendered
+    const list = screen.queryAllByRole('list');
+    expect(list.length).toEqual(0);
+
+    // Items not rendered
+    const items = screen.queryAllByRole('listitem');
+    expect(items.length).toEqual(0);
+
+    // Banner displayed (text is broken up, hence the multiple queries)
+    expect(screen.getByText('An official website of the'));
+    expect(screen.getByText('United States government'));
+  });
+
+  it('Renders NavLinks', () => {
+    const expectedClassName = /o-footer_nav-list/g;
+    const expectedItemCount = 3;
+
+    const navLink = [
+      <a href='/' className='link1' key='link1'>
+        Link 1
+      </a>,
+      <a href='/' className='link2' key='link2'>
+        Link 2
+      </a>,
+      <a href='/' className='link3' key='link3'>
+        Link 3
+      </a>
+    ];
+    render(<Footer navLinks={navLink} />);
+
+    // // List rendered
+    const list = screen.getAllByRole('list');
+    expect(list.length).toEqual(1);
+    expect(list[0].className).toMatch(expectedClassName);
+
+    // Items rendered
+    const items = screen.getAllByRole('listitem');
+    expect(items.length).toEqual(expectedItemCount);
+  });
+
+  it('Renders SocialLinks', () => {
+    const expectedClassName = /m-social-media_icons/g;
+    const expectedItemCount = 1;
+
+    const socialLink = [
+      <a href='/' className='link1' key='link1'>
+        Link 1
+      </a>
+    ];
+    render(<Footer socialLinks={socialLink} />);
+
+    // // List rendered
+    const list = screen.getAllByRole('list');
+    expect(list.length).toEqual(1);
+    expect(list[0].className).toMatch(expectedClassName);
+
+    // Items rendered
+    const items = screen.getAllByRole('listitem');
+    expect(items.length).toEqual(expectedItemCount);
+  });
+
+  it('Renders all 3 link columns', () => {
+    const expectedClassName = /o-footer_list/g;
+    const expectedItemCount = 3;
+
+    const socialLink = [
+      <a href='/' className='link1' key='link1'>
+        Link 1
+      </a>
+    ];
+    render(
+      <Footer
+        linksCol1={socialLink}
+        linksCol2={socialLink}
+        linksCol3={socialLink}
+      />
+    );
+
+    // Lists rendered
+    const list = screen.getAllByRole('list');
+    expect(list.length).toEqual(3);
+    expect(list[0].className).toMatch(expectedClassName);
+
+    // All items rendered
+    const items = screen.getAllByRole('listitem');
+    expect(items.length).toEqual(expectedItemCount);
+  });
+});

src/components/Footer/Footer.tsx

@@ -1,17 +1,16 @@
-import List from '../List/List';
-import { ListItemBuilder } from '../List/ListItem';
+import classnames from 'classnames';
 import { BackToTop } from './BackToTop';
 import './Footer.less';
 import { FooterBanner } from './FooterBanner';
 import { FooterLinksColumn, NavLinks, SocialLinks } from './FooterLinks';
 import './SocialMedia.less';
 
-interface FooterProperties {
-  navLinks: JSX.Element[];
-  socialLinks: JSX.Element[];
-  linksCol1: JSX.Element[];
-  linksCol2: JSX.Element[];
-  linksCol3: JSX.Element[];
+interface FooterProperties extends React.HTMLProps<HTMLElement> {
+  navLinks?: JSX.Element[];
+  socialLinks?: JSX.Element[];
+  linksCol1?: JSX.Element[];
+  linksCol2?: JSX.Element[];
+  linksCol3?: JSX.Element[];
 }
 
 /**
@@ -22,10 +21,18 @@ export default function Footer({
   socialLinks = [],
   linksCol1 = [],
   linksCol2 = [],
-  linksCol3 = []
+  linksCol3 = [],
+  className,
+  ...properties
 }: FooterProperties): JSX.Element {
+  const classes = ['o-footer', className];
+
   return (
-    <footer className='o-footer' data-js-hook='state_atomic_init'>
+    <footer
+      className={classnames(classes)}
+      data-js-hook='state_atomic_init'
+      {...properties}
+    >
       <div className='wrapper wrapper__match-content'>
         <div className='o-footer_pre'>
           <BackToTop />
@@ -39,11 +46,7 @@ export default function Footer({
         </div>
 
         <div className='o-footer-middle-right'>
-          <List className='o-footer_list'>
-            <ListItemBuilder className='m-list_link'>
-              {linksCol3}
-            </ListItemBuilder>
-          </List>
+          <FooterLinksColumn>{linksCol3}</FooterLinksColumn>
         </div>
 
         <FooterBanner />

src/components/Footer/FooterLinks.test.tsx

@@ -0,0 +1,125 @@
+import { render, screen } from '@testing-library/react';
+import { Icon } from '../Icon/Icon';
+import { FooterLinksColumn, NavLinks, SocialLinks } from './FooterLinks';
+
+describe('NavLinks', () => {
+  it('Skips empty children', () => {
+    render(<NavLinks>{[]}</NavLinks>);
+
+    // List not rendered
+    const list = screen.queryAllByRole('list');
+    expect(list.length).toEqual(0);
+
+    // Items not rendered
+    const items = screen.queryAllByRole('listitem');
+    expect(items.length).toEqual(0);
+  });
+
+  it('Renders children as nav-list', () => {
+    render(
+      <NavLinks>
+        <a href='/' key='first' className='f1'>
+          First
+        </a>
+        <a href='/' key='second' className='f2'>
+          Second
+        </a>
+      </NavLinks>
+    );
+
+    // List rendered
+    const list = screen.getAllByRole('list');
+    expect(list.length).toEqual(1);
+    expect(list[0].className).toMatch(/o-footer_nav-list/g);
+
+    // Items rendered
+    const items = screen.getAllByRole('listitem');
+    expect(items.length).toEqual(2);
+
+    // Classnames propagated
+    const links = screen.getAllByRole('link');
+    expect(links[0].className).toMatch(/f1/g);
+    expect(links[1].className).toMatch(/f2/g);
+  });
+});
+
+describe('SocialLinks', () => {
+  it('Skips empty children', () => {
+    render(<SocialLinks>{[]}</SocialLinks>);
+
+    // List not rendered
+    const list = screen.queryAllByRole('list');
+    expect(list.length).toEqual(0);
+
+    // Items not rendered
+    const items = screen.queryAllByRole('listitem');
+    expect(items.length).toEqual(0);
+  });
+
+  it('Renders items', () => {
+    render(
+      <SocialLinks>
+        {[
+          <a href='/' key='first' className='facebook'>
+            <Icon name='facebook' withBg />
+          </a>
+        ]}
+      </SocialLinks>
+    );
+
+    // List rendered
+    const list = screen.getAllByRole('list');
+    expect(list.length).toEqual(1);
+    expect(list[0].className).toMatch(/m-social-media_icons/g);
+
+    // Items rendered
+    const items = screen.getAllByRole('listitem');
+    expect(items.length).toEqual(1);
+
+    // Classnames propagated
+    const links = screen.getAllByRole('link');
+    expect(links[0].className).toMatch(/facebook/g);
+
+    // TODO: How to test that the Icon is rendered?
+    // It does not show up in the screen.debug() output
+  });
+});
+
+describe('FooterLinksColumn', () => {
+  it('Skips empty children', () => {
+    render(<FooterLinksColumn>{[]}</FooterLinksColumn>);
+
+    // List not rendered
+    const list = screen.queryAllByRole('list');
+    expect(list.length).toEqual(0);
+
+    // Items not rendered
+    const items = screen.queryAllByRole('listitem');
+    expect(items.length).toEqual(0);
+  });
+
+  it('Renders items', () => {
+    render(
+      <FooterLinksColumn>
+        {[
+          <a href='/' key='first' className='facebook'>
+            Link 1
+          </a>
+        ]}
+      </FooterLinksColumn>
+    );
+
+    // List rendered
+    const list = screen.getAllByRole('list');
+    expect(list.length).toEqual(1);
+    expect(list[0].className).toMatch(/o-footer_list/g);
+
+    // Items rendered
+    const items = screen.getAllByRole('listitem');
+    expect(items.length).toEqual(1);
+
+    // Classnames propagated
+    const links = screen.getAllByRole('link');
+    expect(links[0].className).toMatch(/facebook/g);
+  });
+});