Render the "add emoji" button when no reaction groups are present

Author: smashwilson

lib/views/emoji-reactions-view.js

@@ -44,12 +44,12 @@ export class BareEmojiReactionsView extends React.Component {
     const viewerReacted = this.props.reactable.reactionGroups
       .filter(group => group.viewerHasReacted)
       .map(group => group.content);
-    const emptyGroupExists = this.props.reactable.reactionGroups
-      .some(g => g.users.totalCount === 0);
+    const {reactionGroups} = this.props.reactable;
+    const showAddButton = reactionGroups.length === 0 || reactionGroups.some(g => g.users.totalCount === 0);
 
     return (
       <div className="github-EmojiReactions btn-toolbar">
-        {emptyGroupExists && (
+        {showAddButton && (
           <div className="btn-group">
             <button
               className="github-EmojiReactions-add btn icon icon-smiley"

test/views/emoji-reactions-view.test.js

@@ -118,6 +118,15 @@ describe('EmojiReactionsView', function() {
     assert.isTrue(wrapper.find(ReactionPickerController).exists());
   });
 
+  it('displays an "add emoji" control when no reaction groups are present', function() {
+    // This happens when the Reactable is optimistically rendered.
+    const reactable = issueBuilder(reactableQuery).build();
+
+    const wrapper = shallow(buildApp({reactable}));
+    assert.isTrue(wrapper.exists('.github-EmojiReactions-add'));
+    assert.isTrue(wrapper.find(ReactionPickerController).exists());
+  });
+
   it('does not display the "add emoji" control if all reaction groups are nonempty', function() {
     const reactable = issueBuilder(reactableQuery)
       .addReactionGroup(group => group.content('THUMBS_UP').users(u => u.totalCount(1)))