fix e2e tests with .comment selector that avoids hidden dialog

client/coral-embed-stream/src/Embed.js

@@ -173,23 +173,25 @@ class Embed extends Component {
               assetId={asset.id}
               updateCountCache={this.props.updateCountCache}
               />
-            <Stream
-              refetch={refetch}
-              addNotification={this.props.addNotification}
-              postItem={this.props.postItem}
-              asset={asset}
-              currentUser={user}
-              postLike={this.props.postLike}
-              postFlag={this.props.postFlag}
-              postDontAgree={this.props.postDontAgree}
-              addCommentTag={this.props.addCommentTag}
-              removeCommentTag={this.props.removeCommentTag}
-              getCounts={this.props.getCounts}
-              updateCountCache={this.props.updateCountCache}
-              loadMore={this.props.loadMore}
-              deleteAction={this.props.deleteAction}
-              showSignInDialog={this.props.showSignInDialog}
-              comments={asset.comments} />
+            <div className="embed__stream">
+              <Stream
+                refetch={refetch}
+                addNotification={this.props.addNotification}
+                postItem={this.props.postItem}
+                asset={asset}
+                currentUser={user}
+                postLike={this.props.postLike}
+                postFlag={this.props.postFlag}
+                postDontAgree={this.props.postDontAgree}
+                addCommentTag={this.props.addCommentTag}
+                removeCommentTag={this.props.removeCommentTag}
+                getCounts={this.props.getCounts}
+                updateCountCache={this.props.updateCountCache}
+                loadMore={this.props.loadMore}
+                deleteAction={this.props.deleteAction}
+                showSignInDialog={this.props.showSignInDialog}
+                comments={asset.comments} />
+            </div>
             <Notification
               notifLength={4500}
               clearNotification={this.props.clearNotification}

client/coral-plugin-likes/LikeButton.js

@@ -57,7 +57,7 @@ class LikeButton extends Component {
     };
 
     return <div className={`${name}-container`}>
-      <button onClick={onLikeClick} className={`${name}-button ${liked && 'likedButton'}`}>
+      <button onClick={onLikeClick} className={`${name}-button ${liked ? 'likedButton' : ''}`}>
         <span className={`${name}-button-text`}>{lang.t(liked ? 'liked' : 'like')}</span>
         <i className={`${name}-icon material-icons`}
           aria-hidden={true}>thumb_up</i>

test/e2e/pages/embedStreamPage.js

@@ -117,46 +117,46 @@ module.exports = {
       selector: '#commentBox .coral-plugin-commentbox-button'
     },
     likeButton: {
-      selector: '.comment .coral-plugin-likes-container .coral-plugin-likes-button'
+      selector: '.embed__stream .comment .coral-plugin-likes-container .coral-plugin-likes-button'
     },
     likeText: {
-      selector: '.comment .coral-plugin-likes-container .coral-plugin-likes-button .coral-plugin-likes-button-text'
+      selector: '.embed__stream .comment .coral-plugin-likes-container .coral-plugin-likes-button .coral-plugin-likes-button-text'
     },
     likesCount: {
-      selector: '.comment .coral-plugin-likes-container .coral-plugin-likes-button .coral-plugin-likes-like-count'
+      selector: '.embed__stream .comment .coral-plugin-likes-container .coral-plugin-likes-button .coral-plugin-likes-like-count'
     },
     flagButton: {
-      selector: '.comment .coral-plugin-flags-container .coral-plugin-flags-button'
+      selector: '.embed__stream .comment .coral-plugin-flags-container .coral-plugin-flags-button'
     },
     flagPopUp: {
-      selector: '.comment .coral-plugin-flags-popup'
+      selector: '.embed__stream .comment .coral-plugin-flags-popup'
     },
     flagCommentOption: {
-      selector: '.comment .coral-plugin-flags-popup .coral-plugin-flags-popup-radio-label[for="COMMENTS"]'
+      selector: '.embed__stream .comment .coral-plugin-flags-popup .coral-plugin-flags-popup-radio-label[for="COMMENTS"]'
     },
     flagUsernameOption: {
-      selector: '.comment .coral-plugin-flags-popup .coral-plugin-flags-popup-radio-label[for="USERS"]'
+      selector: '.embed__stream .comment .coral-plugin-flags-popup .coral-plugin-flags-popup-radio-label[for="USERS"]'
     },
     flagOtherOption: {
-      selector: '.comment .coral-plugin-flags-popup .coral-plugin-flags-popup-radio-label[for="other"]'
+      selector: '.embed__stream .comment .coral-plugin-flags-popup .coral-plugin-flags-popup-radio-label[for="other"]'
     },
     flagHeaderMessage: {
-      selector: '.comment .coral-plugin-flags-popup .coral-plugin-flags-popup-header'
+      selector: '.embed__stream .comment .coral-plugin-flags-popup .coral-plugin-flags-popup-header'
     },
     flagButtonText: {
-      selector: '.comment .coral-plugin-flags-button-text'
+      selector: '.embed__stream .comment .coral-plugin-flags-button-text'
     },
     flagDoneButton: {
-      selector: '.comment .coral-plugin-flags-popup .coral-plugin-flags-popup-button'
+      selector: '.embed__stream .comment .coral-plugin-flags-popup .coral-plugin-flags-popup-button'
     },
     permalinkButton: {
-      selector: '.comment .coral-plugin-permalinks-button'
+      selector: '.embed__stream .comment .coral-plugin-permalinks-button'
     },
     permalinkPopUp: {
-      selector: '.comment .coral-plugin-permalinks-popover.active'
+      selector: '.embed__stream .comment .coral-plugin-permalinks-popover.active'
     },
     permalinkInput: {
-      selector: '.comment .coral-plugin-permalinks-popover.active input'
+      selector: '.embed__stream .comment .coral-plugin-permalinks-popover.active input'
     },
     registerButton: {
       selector: '#signInDialog #coralRegister'

test/e2e/tests/Commenter/LikeCommentTest.js

@@ -15,6 +15,7 @@ module.exports = {
     const embedStreamPage = client.page.embedStreamPage();
 
     embedStreamPage
+      .postComment(`hi ${Math.random()}`)
       .likeComment()
       .waitForElementVisible('@likesCount', 2000)
       .expect.element('@likeText').text.to.equal('Liked');

test/e2e/tests/EmbedStreamTests.js

@@ -49,10 +49,10 @@ module.exports = {
           // Post a comment
           .setValue('.coral-plugin-commentbox-textarea', mockComment)
           .click('.coral-plugin-commentbox-button')
-          .waitForElementVisible('.coral-plugin-content-text', 1000)
+          .waitForElementVisible('.embed__stream .coral-plugin-commentcontent-text', 1000)
 
           // Verify that it appears
-          .assert.containsText('.coral-plugin-content-text', mockComment);
+          .assert.containsText('.embed__stream .coral-plugin-commentcontent-text', mockComment);
         done();
       })
       .catch((err) => {
@@ -95,22 +95,19 @@ module.exports = {
         client.resizeWindow(1200, 800)
           .url(client.globals.baseUrl)
           .frame('coralStreamEmbed_iframe');
-
           // Post a comment
         client.waitForElementVisible('.coral-plugin-commentbox-button', 2000)
           .setValue('.coral-plugin-commentbox-textarea', mockComment)
           .click('.coral-plugin-commentbox-button')
-
           // Post a reply
-          .waitForElementVisible('.coral-plugin-replies-reply-button', 5000)
-          .click('.coral-plugin-replies-reply-button')
+          .waitForElementVisible('.embed__stream .coral-plugin-replies-reply-button', 5000)
+          .click('.embed__stream .coral-plugin-replies-reply-button')
           .waitForElementVisible('#replyText')
           .setValue('#replyText', mockReply)
-          .click('.coral-plugin-replies-textarea .coral-plugin-commentbox-button')
-          .waitForElementVisible('.reply', 20000)
-
+          .click('.embed__stream .coral-plugin-replies-textarea .coral-plugin-commentbox-button')
+          .waitForElementVisible('.embed__stream .reply', 20000)
           // Verify that it appears
-          .assert.containsText('.reply', mockReply);
+          .assert.containsText('.embed__stream .reply', mockReply);
         done();
       })
       .catch((err) => {