Use page objects + one more test

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

@@ -75,13 +75,13 @@ export default class Embed extends React.Component {
           activeTab={activeTab}
           id='talk-embed-stream-tab-content'
         >
-          <TabPane tabId={'stream'}>
+          <TabPane tabId={'stream'} className={'talk-embed-stream-comments-tab-pane'}>
             <Stream data={data} root={root} />
           </TabPane>
-          <TabPane tabId={'profile'}>
+          <TabPane tabId={'profile'} className={'talk-embed-stream-profile-tab-pane'}>
             <ProfileContainer />
           </TabPane>
-          <TabPane tabId={'config'}>
+          <TabPane tabId={'config'} className={'talk-embed-stream-configuration-tab-pane'}>
             <ConfigureStreamContainer />
           </TabPane>
         </TabContent>

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

@@ -6,9 +6,9 @@ import styles from './StreamTabPanel.css';
 class StreamTabPanel extends React.Component {
 
   render() {
-    const {activeTab, setActiveTab, tabs, tabPanes, sub, loading} = this.props;
+    const {activeTab, setActiveTab, tabs, tabPanes, sub, loading, ...rest} = this.props;
     return (
-      <div>
+      <div {...rest}>
         <TabBar activeTab={activeTab} onTabClick={setActiveTab} sub={sub}>
           {tabs}
         </TabBar>
@@ -26,6 +26,7 @@ class StreamTabPanel extends React.Component {
 StreamTabPanel.propTypes = {
   activeTab: PropTypes.string.isRequired,
   setActiveTab: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
   tabs: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.arrayOf(PropTypes.element)

client/coral-settings/components/NotLoggedIn.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import styles from './NotLoggedIn.css';
+import cn from 'classnames';
 
 import t from 'coral-framework/services/i18n';
 
 export default ({showSignInDialog}) => (
-  <div className={styles.message}>
+  <div className={cn(styles.message, 'talk-embed-stream-not-logged-in')}>
     <div>
       <a onClick={showSignInDialog}>{t('settings.sign_in')}</a> {t('settings.to_access')}
     </div>

nightwatch.conf.js

@@ -1,6 +1,7 @@
 const nightwatch_config = {
   src_folders: './test/e2e/specs/',
   output_folder: './test/e2e/tests_output',
+  page_objects_path: './test/e2e/page_objects',
 
   selenium : {
     'start_process': false,

test/e2e/page_objects/embedStream.js

@@ -0,0 +1,45 @@
+const iframeId = 'coralStreamEmbed_iframe';
+
+module.exports = {
+  commands: [{
+    navigateToAsset: function(asset) {
+      this.api.url(`${this.api.launchUrl}/assets/title/${asset}`);
+      return this;
+    },
+    getEmbedSection: function() {
+      this.waitForElementVisible('@iframe');
+      this.api.frame(iframeId);
+      this.expect.section('@embed').to.be.present;
+      return this.section.embed;
+    },
+  }],
+  url: function() {
+    return this.api.launchUrl;
+  },
+  elements: {
+    iframe: `#${iframeId}`,
+  },
+  sections: {
+    embed: {
+      commands: [{
+        getProfileSection: function() {
+          this.click('@profileTabButton');
+          this.expect.section('@profile').to.be.present;
+          return this.section.profile;
+        },
+      }],
+      selector: '#talk-embed-stream-container',
+      elements: {
+        profileTabButton: '.talk-embed-stream-profile-tab > button',
+      },
+      sections: {
+        profile: {
+          selector: '.talk-embed-stream-profile-tab-pane',
+          elements: {
+            notLoggedIn: '.talk-embed-stream-not-logged-in',
+          },
+        },
+      },
+    },
+  },
+};

test/e2e/specs/embedStream.js

@@ -1,24 +1,34 @@
 const uuid = require('uuid');
 const {murmur3} = require('murmurhash-js');
 
-const iframeId = 'coralStreamEmbed_iframe';
-
-const $ = {
-  streamEmbedIframe: `#${iframeId}`,
-  streamTabContainer: '.talk-stream-tab-container',
-};
-
 module.exports = {
   'Creates a new asset': (client) => {
-    const assetTitle = `test@${murmur3(uuid.v4())}`;
+    const asset = `test@${murmur3(uuid.v4())}`;
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .navigateToAsset(asset)
+      .assert.title(asset)
+      .getEmbedSection();
 
     client
-      .url(`${client.launchUrl}/assets/title/${assetTitle}`)
-      .assert.title(assetTitle)
-      .waitForElementVisible($.streamEmbedIframe)
-      .frame(iframeId)
-        .waitForElementVisible($.streamTabContainer)
-        .frameParent()
       .end();
-  }
+  },
+
+  'not logged in user clicks my profile tab': (client) => {
+    const embedStream = client.page.embedStream();
+
+    const embed = embedStream
+      .navigate()
+      .getEmbedSection();
+
+    const profile = embed
+      .getProfileSection();
+
+    profile
+      .assert.visible('@notLoggedIn');
+
+    client
+      .end();
+  },
 };