Casper tests for CodeMirror editor

There are still some issues surrounding spaces and new lines which will need to be worked out, but we can at least start to test some of the markdown.

core/test/functional/admin/03_editor_test.js

@@ -1,6 +1,6 @@
 /*globals casper, __utils__, url, testPost */
 
-casper.test.begin("Ghost editor is correct", 7, function suite(test) {
+casper.test.begin("Ghost editor is correct", 8, function suite(test) {
 
     casper.test.filename = "editor_test.png";
 
@@ -12,35 +12,38 @@ casper.test.begin("Ghost editor is correct", 7, function suite(test) {
     }).viewport(1280, 1024);
 
     function handleResource(resource) {
-        if (resource.url === 'http://localhost:2368/api/v0.1/posts') {
+        if (resource.url === url + 'api/v0.1/posts') {
             casper.removeListener('resource.received', handleResource);
             casper.test.assertEquals(resource.status, 200, "Received correct response");
         }
     }
 
-    casper.then(function testCreatePost() {
-        // bind to resource events so we can get the API response
-        casper.on('resource.received', handleResource);
-
+    casper.then(function createTestPost() {
         casper.sendKeys('#entry-title', testPost.title);
-        casper.evaluate(function () {
-            var txt = document.querySelector('.CodeMirror-wrap textarea');
-            txt.focus();
-            // TODO: finish figuring out codemirror this works in chrome console.. but not in evaluate?
-            txt.value = "abcd";
-        });
-
-        casper.click('.button-save');
+        casper.writeContentToCodeMirror(testPost.content);
     });
 
+    // We must wait after sending keys to CodeMirror
     casper.wait(1000, function doneWait() {
         this.echo("I've waited for 1 seconds.");
+        // bind to resource events so we can get the API response
+        casper.on('resource.received', handleResource);
+    });
+
+    casper.thenClick('.button-save').wait(1000, function doneWait() {
+        this.echo("I've waited for another 1 seconds.");
     });
 
     casper.then(function checkPostWasCreated() {
         var urlRegExp = new RegExp("^" + url + "ghost\/editor\/[0-9]*");
         test.assertUrlMatch(urlRegExp, 'got an id on our URL');
         test.assertExists('.notification-success', 'got success notification');
+        test.assertEvalEquals(function () {
+            return document.querySelector('#entry-title').value;
+        }, testPost.title, 'Title is correct');
+
+        // TODO: make this work - spaces & newlines are problematic
+        // test.assertTextExists(testPost.content, 'Post content exists');
     });
 
     casper.run(function () {
@@ -48,3 +51,36 @@ casper.test.begin("Ghost editor is correct", 7, function suite(test) {
         test.done();
     });
 });
+
+
+casper.test.begin("Haunted markdown in editor works", 3, function suite(test) {
+
+    casper.test.filename = "markdown_test.png";
+
+    casper.start(url + "ghost/editor", function testTitleAndUrl() {
+        test.assertTitle("", "Ghost admin has no title");
+    }).viewport(1280, 1024);
+
+    casper.then(function testImage() {
+        casper.writeContentToCodeMirror("![some text]()");
+    });
+
+    // We must wait after sending keys to CodeMirror
+    casper.wait(1000, function doneWait() {
+        this.echo("I've waited for 1 seconds.");
+        // bind to resource events so we can get the API response
+    });
+
+    casper.then(function checkPostWasCreated() {
+
+        test.assertEvalEquals(function () {
+            return document.querySelector('.CodeMirror-wrap textarea').value;
+        }, "![some text]()", 'Editor value is correct');
+
+        test.assertSelectorHasText('.entry-preview .rendered-markdown', 'Add image of some text', 'Editor value is correct');
+    });
+
+    casper.run(function () {
+        test.done();
+    });
+});

core/test/functional/base.js

@@ -9,30 +9,45 @@
  *
  * Usage (from test/functional):
  *
- * casperjs test admin/ --includes=base.js [--host=localhost --port=2368 --email=ghost@tryghost.org --password=Sl1m3r]
+ * casperjs test admin/ --includes=base.js [--host=localhost --port=2368 --noPort=false --email=ghost@tryghost.org --password=Sl1m3r]
  *
  * --host - your local host address e.g. localhost or local.tryghost.org
  * --port - port number of your local Ghost
  * --email - the email address your admin user is registered with
  * --password - the password your admin user is registered with
+ * --noPort - don't include a port number
  *
  * Requirements:
  * you must have phantomjs 1.9.1 and casperjs 1.1.0-DEV installed in order for these tests to work
  */
 
-var host = casper.cli.options.url || 'localhost',
+var host = casper.cli.options.host || 'localhost',
+    noPort = casper.cli.options.noPort || false,
     port = casper.cli.options.port || '2368',
     email = casper.cli.options.email || 'ghost@tryghost.org',
     password = casper.cli.options.password || 'Sl1m3r',
-    url = "http://" + host + ":" + port + "/",
+    url = "http://" + host + (noPort ? '/' : ":" + port + "/"),
     user = {
         email: email,
         password: password
     },
-    testPost = {title: "A post title", content: "I am a post \n #With some content"};
+    testPost = {
+        title: "Bacon ipsum dolor sit amet",
+        content: "I am a test post.\n#I have some small content"
+    };
 
+casper.writeContentToCodeMirror = function (content) {
+    var lines = content.split("\n");
 
-casper.test.on("fail", function captureFailure(failure) {
+    casper.each(lines, function (self, line) {
+        self.sendKeys('.CodeMirror-wrap textarea', line, {keepFocus: true});
+        self.sendKeys('.CodeMirror-wrap textarea', casper.page.event.key.Enter, {keepFocus: true});
+    });
+
+    return this;
+};
+
+casper.test.on("fail", function captureFailure() {
     var filename = casper.test.filename || "casper_test_fail.png";
     casper.capture(new Date().getTime() + '_' + filename);
 });