Add your first TDD tests, and then your first component

2-1-add-link-item.sh

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

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

# add style
touch src/components/LinkItem/LinkItem.css

# edit App.js to include a static LinkItem

LinkItem.css

.link-item {
  align-items: center;
  border:  1px solid #333;
  display: flex;
}

.link-item-faves,
.link-item-info {
  padding: 1rem;
}

LinkItem.js

import React from 'react';

import './LinkItem.css';

const LinkItem = ({ favoriteCount, linkUrl }) => {
  const faves = favoriteCount || 0;

  return (
    <div className="link-item">
      <div className="link-item-faves">{faves}</div>
      <div className="link-item-info">
        <a className="link-item-link" href={linkUrl}>{linkUrl}</a>
      </div>
    </div>
  );
};

export default LinkItem;

LinkItem.test.js

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

import LinkItem from './LinkItem';


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

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

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

  it('should have favorites child', () => {
    const wrapper = shallow(<LinkItem />);
    const children = wrapper.children();
    const firstChild = children.first();

    expect(firstChild).toHaveClassName('link-item-faves');
  });

  it('should have info child', () => {
    const wrapper = shallow(<LinkItem />);
    const children = wrapper.children();
    const lastChild = children.last();

    expect(lastChild).toHaveClassName('link-item-info');
  });

  it('should render its favorites prop', () => {
    const wrapper = shallow(<LinkItem favoriteCount="12" />);

    const favorites = wrapper.find('.link-item-faves');

    expect(favorites.text()).toEqual('12');
  });

  it('should render 0 for favorites if no prop is given', () => {
    const wrapper = shallow(<LinkItem />);

    const favorites = wrapper.find('.link-item-faves');

    expect(favorites.text()).toEqual('0');
  });

  it('should render its link prop', () => {
    const wrapper = shallow(<LinkItem linkUrl="http://www.daringfireball.com" />);

    const linkInfo = wrapper.find('.link-item-info');

    expect(linkInfo.text()).toEqual('http://www.daringfireball.com');
  });

  it('should render its link prop as a link', () => {
    const wrapper = shallow(<LinkItem linkUrl="http://www.daringfireball.com" />);

    const linkAnchor = wrapper.find('.link-item-link');

    expect(linkAnchor.prop('href')).toEqual('http://www.daringfireball.com');
  });
});

modify-App.diff

@@ -1,5 +1,8 @@
  import React, { Component } from 'react';
  import logo from '../../logo.svg';
 +
 +import LinkItem from '../LinkItem/LinkItem';
 +
  import './App.css';
  
  class App extends Component {
 @@ -11,7 +14,7 @@ class App extends Component {
            <h1>Welcome to Linkshare</h1>
          </header>
          <main className="app-intro">
 -          Check back soon to start sharing and discovering links.
 +          <LinkItem favoriteCount="3" linkUrl="http://www.csszengarden.com" />
          </main>
          <footer className="app-footer">
            <span className="attribution">