Adding e2e for the stream - open and closed asset features

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

@@ -38,7 +38,7 @@ export default class Embed extends React.Component {
     ];
     if (can(user, 'UPDATE_CONFIG')) {
       tabs.push(
-        <Tab key='config' tabId='config'>
+        <Tab key='config' tabId='config' className='talk-embed-stream-config-tab'>
           {t('framework.configure_stream')}
         </Tab>
       );
@@ -90,7 +90,7 @@ export default class Embed extends React.Component {
             <TabPane key='profile' tabId='profile' className='talk-embed-stream-profile-tab-pane'>
               <ProfileContainer />
             </TabPane>,
-            <TabPane key='config' tabId='config' className='talk-embed-stream-configuration-tab-pane'>
+            <TabPane key='config' tabId='config' className='talk-embed-stream-config-tab-pane'>
               <Configure data={data} root={root} asset={root.asset} />
             </TabPane>,
           ]}

client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js

@@ -46,14 +46,16 @@ class AssetStatusInfo extends React.Component {
   render() {
     const {isClosed, closedAt, onClose, onOpen} = this.props;
     return (
-      <div>
+      <div className="talk-config-close-comments">
         <h3>{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
         {(!isClosed && closedAt) ? <p>{t('configure.comment_stream_will_close')} {timeago(new Date(closedAt))}.</p> : ''}
-        <div className={cn('close-comments-intro-wrapper', styles.wrapper)}>
+        <div className={cn('talk-config-close-comments-wrapper', styles.wrapper)}>
           <p>
             {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')}
           </p>
-          <Button className={styles.button} onClick={!isClosed ? onClose : onOpen}>
+          <Button
+            className={cn(styles.button, `talk-config-close-comments-${isClosed ? 'open' : 'close'}-button`)}
+            onClick={!isClosed ? onClose : onOpen}>
             {!isClosed ? t('configure.close_stream') : t('configure.open_stream')}
           </Button>
         </div>

test/e2e/page_objects/embedStream.js

@@ -8,6 +8,12 @@ module.exports = {
       this.expect.section('@comments').to.be.visible;
       return this.section.comments;
     },
+    goToConfigSection: function() {
+      this.waitForElementVisible('@configTabButton');
+      this.click('@configTabButton');
+      this.expect.section('@config').to.be.visible;
+      return this.section.config;
+    },
     goToProfileSection: function() {
       this.waitForElementVisible('@profileTabButton');
       this.click('@profileTabButton');
@@ -42,6 +48,7 @@ module.exports = {
     iframe: `#${iframeId}`,
     commentsTabButton: '.talk-embed-stream-comments-tab > button',
     profileTabButton: '.talk-embed-stream-profile-tab > button',
+    configTabButton: '.talk-embed-stream-profile-tab > button',
     banDialog: '.talk-ban-user-dialog',
     banDialogConfirmButton: '.talk-ban-user-dialog-button-confirm',
   },
@@ -95,6 +102,7 @@ module.exports = {
         firstComment: '.talk-stream-comment.talk-stream-comment-level-0',
         firstCommentContent: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-content',
         flagButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-plugin-flags-button',
+        replyButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-plugin-replies-reply-button',
         respectButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-footer .talk-plugin-respect-button',
         restrictedMessageBox: '.talk-restricted-message-box',
         suspendedAccountInput: '.talk-suspended-account-username-input',
@@ -132,5 +140,26 @@ module.exports = {
         myCommentHistoryComment: '.talk-my-profile-comment-history .my-comment-body',
       },
     },
+    config: {
+      selector: '.talk-embed-stream-config-tab-pane',
+      elements: {
+        openStream: '.talk-config-close-comments-open-button',
+        closeStream: '.talk-config-close-comments-close-button',
+      },
+      commands: [{
+        openStream: function() {
+          this.waitForElementVisible('@openStream');
+          this.click('@openStream');
+          this.waitForElementVisible('@closeStream');
+          return this.section.config;
+        },
+        closeStream: function() {
+          this.waitForElementVisible('@closeStream');
+          this.click('@closeStream');
+          this.waitForElementVisible('@openStream');
+          return this.section.config;
+        },
+      }]
+    },
   },
 };

test/e2e/specs/03_embedStream.js

@@ -96,6 +96,20 @@ module.exports = {
         profile.assert.equal(result.value, '1');
       });
   },
+  'stream is closed, user won\'t be able to perform some actions: reply ': (client) => {
+
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .waitForElementVisible('@firstComment')
+      .waitForElementVisible('@replyButton')
+      .goToProfileSection()
+      .closeStream()
+      .goToCommentsSection()
+      .waitForElementVisible('@firstComment')
+      .waitForElementNotVisible('@replyButton')
+      .openStream();
+  },
   'user logs out': (client) => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.goToCommentsSection();