Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>;
}
}
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>
);
}
}
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>
);
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);
});
});
});
@GrantJamesPowell
Copy link

GrantJamesPowell commented Jun 20, 2018

neat

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment