1-all-in-one.js

class NotificationDropdown extends Component {
  state = {};

  async componentDidMount() {
    const notifications = await fetchNotifications();
    this.setState({ notifications });
  }

  render() {
    const { notifications } = this.state;

    return;
    <Dropdown>
      {!notifications ? (
        <Loading />
      ) : (
        notifications.map(notification => (
          <Notification notification={notification} />
        ))
      )}
    </Dropdown>;
  }
}

2-container.js

const NotificationList = ({ notifications }) =>
  !notifications ? (
    <Loading />
  ) : (
    notifications.map(notification => (
      <NotificationItem notification={notification} />
    ))
  );

class NotificationDropdown extends Component {
  state = {};

  async componentDidMount() {
    const notifications = await fetchNotifications();
    this.setState({ notifications });
  }

  render() {
    return (
      <Dropdown>
        <NotificationList notifications={this.state.notifications} />
      </Dropdown>
    );
  }
}

3-composition.js

const NotificationList = ({ notifications }) =>
  !notifications ? (
    <Loading />
  ) : (
    notifications.map(notification => (
      <NotificationItem notification={notification} />
    ))
  );

class NotificationFetcher extends Component {
  state = {};

  async componentDidMount() {
    const notifications = await fetchNotifications();
    this.setState({ notifications });
  }

  render() {
    return this.props.children({ notifications: this.state.notifications });
  }
}

const NotificationDropdown = () => (
  <Dropdown>
    <NotificationFetcher>
      {({ notifications }) => (
        <NotificationList notifications={notifications} />
      )}
    </NotificationFetcher>
  </Dropdown>
);

4-tests.js

describe("all-in-one", () => {
  beforeEach(() => {
    mockFetchNotifications();
  });

  it("displays my notifications", () => {
    const tree = shallow(<NotificationDropdown />);

    expect(tree.find(Notification)).toHaveLength(mockNotifications.length);

    // What about <Loading>?
    // What about global pollution of mocking a network request?
  });
});

describe("container", () => {
  describe("<NotificationList>", () => {
    it("displays my notifications", () => {
      const tree = shallow(
        <NotificationList notifications={mockNotifications} />
      );

      expect(tree.find(Notification)).toHaveLength(mockNotifications.length);
    });

    it("displays a loading screen", () => {
      const tree = shallow(<NotificationList />);
      expect(tree.type()).toEqual(Loading);
    });
  });

  describe("<NotificationDropdown>", () => {
    beforeEach(() => {
      mockFetchNotifications();
    });

    it("displays my notifications", () => {
      const tree = shallow(<NotificationDropdown />);

      expect(tree.find(Notification)).toHaveLength(mockNotifications.length);
    });
  });
});

describe("composition", () => {
  describe("<NotificationList>", () => {
    it("displays my notifications", () => {
      const tree = shallow(
        <NotificationList notifications={mockNotifications} />
      );

      expect(tree.find(Notification)).toHaveLength(mockNotifications.length);
    });

    it("displays a loading screen", () => {
      const tree = shallow(<NotificationList />);
      expect(tree.type()).toEqual(Loading);
    });
  });

  describe("<NotificationFetcher>", () => {
    beforeEach(() => {
      mockFetchNotifications();
    });

    it("fetches my notifications", () => {
      shallow(
        <NotificationFetcher>
          ({notifications} => {expect(notifications).toEqual(mockNotifications)})
        </NotificationFetcher>
      );
    });
  });

  describe("<NotificationDropdown>", () => {
    beforeEach(() => {
      mockFetchNotifications();
    });

    it("displays my notifications", () => {
      const tree = shallow(<NotificationDropdown />);

      expect(tree.find(Notification)).toHaveLength(mockNotifications.length);
    });
  });
});

neat