3-1-add-link-list.sh

# add test
touch src/components/LinkList/LinkList.test.js

# add component
touch src/components/LinkList/LinkList.js

# add style
src/components/LinkList/LinkList.css

# edit App.js to include a LinkList

LinkList.css

.link-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 1em;
}

.link-list .link-item {
  margin-bottom:  1em;
  width: 100%;
}

LinkList.js

import React from 'react';

import LinkItem from '../LinkItem/LinkItem';

import './LinkList.css';

const LinkList = ({ links }) => {
  const cleansedLinks = Array.isArray(links)
    ? links
    : [];

  const linkItems = cleansedLinks.map((link, index) => {
    return (
      <LinkItem
        key={index}
        favoriteCount={link.favorites}
        linkUrl={link.linkUrl}
      />
    );
  });

  return (
    <div className="link-list">
      {linkItems}
    </div>
  );
};

export default LinkList;

LinkList.test.js

import React from 'react';
import { shallow } from 'enzyme';

import LinkList from './LinkList';
import LinkItem from '../LinkItem/LinkItem';


describe('LinkList component', () => {
  it('renders without crashing', () => {
    const wrapper = shallow(<LinkList />);
    expect(wrapper).toBeTruthy();
  });

  it('should have the appropriate class', () => {
    const wrapper = shallow(<LinkList />);

    expect(wrapper).toHaveClassName('link-list');
  });

  it('should render an array of LinkItems', () => {
    const links = [
      {
        linkUrl: 'http://www.csszengarden.com',
        favorites: 10
      },
      {
        linkUrl: 'http://www.daringfireball.com',
        favorites: 15
      }
    ];

    const wrapper = shallow(<LinkList links={links} />);

    expect(wrapper.find(LinkItem)).toHaveLength(links.length);
  });
});