Posting comment in e2e test.

.gitignore

@@ -3,6 +3,7 @@ npm-debug.log
 dist
 !dist/coral-admin
 dist/coral-admin/bundle.js
+tests/e2e/reports
 .DS_Store
 *.iml
 .env

nightwatch.conf.js

@@ -0,0 +1,44 @@
+require('babel-core/register');
+
+module.exports = {
+  'src_folders': './tests/e2e/tests',
+  'output_folder': './tests/e2e/reports',
+  'page_objects_path': './tests/e2e/pages',
+  'globals_path': './tests/e2e/globals',
+  'custom_commands_path' : '',
+  'custom_assertions_path' : '',
+  'selenium': {
+    'start_process': true,
+    'server_path': 'node_modules/selenium-standalone/.selenium/selenium-server/2.53.1-server.jar',
+    'log_path': './tests/e2e/reports',
+    'host': '127.0.0.1',
+    'port': 6666,
+    'cli_args': {
+      'webdriver.chrome.driver': 'node_modules/selenium-standalone/.selenium/chromedriver/2.25-x64-chromedriver'
+    }
+  },
+  'test_settings': {
+    'default': {
+      'selenium_port': 6666,
+      'selenium_host': 'localhost',
+      'silent': true,
+      'desiredCapabilities': {
+        'browserName': 'chrome',
+        'javascriptEnabled': true,
+        'acceptSslCerts': true,
+        'webStorageEnabled' : true,
+        'databaseEnabled' : true,
+        'applicationCacheEnabled' : false,
+        'nativeEvents' : true
+      },
+      'screenshots' : {
+        'enabled' : true,
+        'on_failure' : true,
+        'on_error' : true,
+        'path' : './tests/e2e/reports'
+      },
+      'exclude': [
+      ]
+    }
+  }
+};

package.json

@@ -12,7 +12,9 @@
     "pretest": "npm install",
     "test": "mocha --compilers js:babel-core/register --recursive tests",
     "test-watch": "mocha --compilers js:babel-core/register --recursive -w tests",
-    "embed-start": "npm run build && ./bin/www"
+    "embed-start": "npm run build && ./bin/www",
+    "pree2e": "node_modules/selenium-standalone/bin/selenium-standalone install",
+    "e2e": "node_modules/.bin/nightwatch"
   },
   "config": {
     "pre-git": {
@@ -94,6 +96,7 @@
     "material-design-lite": "^1.2.1",
     "mocha": "^3.1.2",
     "mocha-junit-reporter": "^1.12.1",
+    "nightwatch": "^0.9.9",
     "postcss-loader": "^1.1.0",
     "postcss-modules": "^0.5.2",
     "postcss-smart-import": "^0.5.1",
@@ -110,6 +113,7 @@
     "redux-mock-store": "^1.2.1",
     "redux-thunk": "^2.1.0",
     "regenerator": "^0.8.46",
+    "selenium-standalone": "^5.8.0",
     "style-loader": "^0.13.1",
     "supertest": "^2.0.1",
     "timeago.js": "^2.0.3",

tests/e2e/globals.js

@@ -0,0 +1,4 @@
+module.exports = {
+  waitForConditionTimeout: 20000,
+  baseUrl: 'http://localhost:3000'
+};

tests/e2e/pages/embedStream.js

@@ -0,0 +1,31 @@
+const embedCommands = {
+  ready() {
+    return this
+      .waitForElementVisible('body', 1000);
+  },
+  enterComment() {
+    const comment = 'This is a test comment';
+    return this
+      .waitForElementVisible('@commentBox')
+      .setValue('@commentBox', comment)
+      .click('@postButton')
+      .waitForElementVisible('.comment', 1000);
+  },
+  validateComment(comment) {
+    return this
+      .assert.equal(comment, '.comment');
+  }
+};
+
+module.exports = {
+  commands: [embedCommands],
+  elements: {
+
+    commentBox: {
+      selector: '#commentBox'
+    },
+    postButton: {
+      selector: '#commentBox .coral-plugin-commentbox-button'
+    }
+  }
+};

tests/e2e/tests/AppTest.js

@@ -0,0 +1,13 @@
+export default {
+  '@tags': ['app'],
+  'Base url and Hostname': browser => {
+    const { baseUrl } = browser.globals;
+    browser
+      .url(baseUrl)
+      .assert.title('Talk - Coral (Beta)')
+      .waitForElementPresent("body", 1000)
+  },
+  after: client => {
+    client.end()
+  }
+};

tests/e2e/tests/EmbedStreamTests.js

@@ -0,0 +1,15 @@
+const comment = 'This is a test comment.'
+
+module.exports = {
+  '@tags': ['embed-stream', 'post'],
+  'User posts a comment': client => {
+    client.resizeWindow(1200, 800)
+    .url(`${client.globals.baseUrl}`)
+    .frame('coralStreamIframe')
+    .waitForElementVisible('#commentBox', 1000)
+    .setValue('#commentBox .coral-plugin-commentbox-textarea', comment)
+    .click('#commentBox .coral-plugin-commentbox-button')
+    .waitForElementVisible('.comment', 1000)
+    .expect.element('.coral-plugin-comment').to.equal(comment);
+  }
+};

views/home.ejs

@@ -1,5 +1,6 @@
 <html>
   <head>
+  <title>Talk - Coral (Beta)</title>
   </head>
   <body>
   <div style="margin-left:auto; margin-right:auto; width:500px">
@@ -9,7 +10,7 @@
 <div id='coralStreamEmbed'></div>
 <script type='text/javascript' src='https://pym.nprapps.org/pym.v1.min.js'></script>
 <script>
-var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream', {title: 'Talk Comments'});
+var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream', {title: 'Talk Comments', id:'coralStreamIframe'});
 pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'})</script>
 </div>
   </body>