Implement new button markup

This commit is contained in:
John O'Nolan 2014-08-06 14:34:08 +03:00
parent c10d555a2e
commit 85b7819791
28 changed files with 267 additions and 275 deletions

View File

@ -129,7 +129,7 @@ UploadUi = function ($dropzone, settings) {
$dropzone.append('<div class="js-fail failed" style="display: none">Something went wrong :(</div>');
}
if (!$dropzone.find('button.js-fail')[0]) {
$dropzone.append('<button class="js-fail button-add" style="display: none">Try Again</button>');
$dropzone.append('<button class="js-fail btn btn-green" style="display: none">Try Again</button>');
}
if (!$dropzone.find('a.image-url')[0]) {
$dropzone.append('<a class="image-url" title="Add image from URL"><span class="hidden">URL</span></a>');
@ -177,7 +177,7 @@ UploadUi = function ($dropzone, settings) {
$dropzone.find('div.description').before($url);
if (settings.editor) {
$dropzone.find('div.js-url').append('<button class="js-button-accept button-save">Save</button>');
$dropzone.find('div.js-url').append('<button class="btn btn-blue js-button-accept">Save</button>');
}
$dropzone.find('.js-button-accept').on('click', function () {

View File

@ -48,11 +48,11 @@ var ModalDialog = Ember.Component.extend({
}.property('type', 'style', 'animation'),
acceptButtonClass: function () {
return this.get('confirm.accept.buttonClass') ? this.get('confirm.accept.buttonClass') : 'button-add';
return this.get('confirm.accept.buttonClass') ? this.get('confirm.accept.buttonClass') : 'btn btn-green';
}.property('confirm.accept.buttonClass'),
rejectButtonClass: function () {
return this.get('confirm.reject.buttonClass') ? this.get('confirm.reject.buttonClass') : 'button-delete';
return this.get('confirm.reject.buttonClass') ? this.get('confirm.reject.buttonClass') : 'btn btn-red';
}.property('confirm.reject.buttonClass')
});

View File

@ -17,7 +17,7 @@ var UploadModal = ModalDialog.extend({
text: 'Cancel' // The reject button text
},
accept: {
buttonClass: 'button-save right',
buttonClass: 'btn btn-blue right',
text: 'Save', // The accept button texttext: 'Save'
func: function () {
var imageType = 'model.' + this.get('imageType');

View File

@ -20,11 +20,11 @@ var DeleteAllController = Ember.Controller.extend({
confirm: {
accept: {
text: 'Delete',
buttonClass: 'button-delete'
buttonClass: 'btn btn-red'
},
reject: {
text: 'Cancel',
buttonClass: 'button'
buttonClass: 'btn btn-default btn-minor'
}
}
});

View File

@ -24,11 +24,11 @@ var DeletePostController = Ember.Controller.extend({
confirm: {
accept: {
text: 'Delete',
buttonClass: 'button-delete'
buttonClass: 'btn btn-red'
},
reject: {
text: 'Cancel',
buttonClass: 'button'
buttonClass: 'btn btn-default btn-minor'
}
}
});

View File

@ -21,11 +21,11 @@ var DeleteUserController = Ember.Controller.extend({
confirm: {
accept: {
text: 'Delete User',
buttonClass: 'button-delete'
buttonClass: 'btn btn-red'
},
reject: {
text: 'Cancel',
buttonClass: 'button'
buttonClass: 'btn btn-default btn-minor'
}
}
});

View File

@ -47,11 +47,11 @@ var LeaveEditorController = Ember.Controller.extend({
confirm: {
accept: {
text: 'Leave',
buttonClass: 'button-delete'
buttonClass: 'btn btn-red'
},
reject: {
text: 'Stay',
buttonClass: 'button'
buttonClass: 'btn btn-default btn-minor'
}
}
});

View File

@ -39,12 +39,12 @@ var TransferOwnerController = Ember.Controller.extend({
confirm: {
accept: {
text: 'YEP - I\'M SURE',
buttonClass: 'button-delete'
text: 'Yep - I\'m sure',
buttonClass: 'btn btn-red'
},
reject: {
text: 'CANCEL',
buttonClass: 'button'
text: 'Cancel',
buttonClass: 'btn btn-default btn-minor'
}
}
});

View File

@ -83,7 +83,7 @@
<section class="settings-content active">
<header class="fade-in">
<button class="button-back">Back</button>
<button class="btn btn-default">Back</button>
<h2 class="title">About</h2>
</header>
@ -111,8 +111,8 @@
</p>
</div>
<div class="about-help">
<a href="http://docs.ghost.org" class="button-dark">User Documentation</a>
<a href="https://ghost.org/forum/" class="button-dark">Get Help With Ghost</a>
<a href="http://docs.ghost.org" class="btn btn-alt">User Documentation</a>
<a href="https://ghost.org/forum/" class="btn btn-alt">Get Help With Ghost</a>
</div>
</div>
</section>
@ -151,7 +151,7 @@
<p class="about-contributors-info">Ghost is built by an incredible group of contributors from all over the world. Here are just a few of the people who helped create the version youre using right now.</p>
<a href="https://github.com/TryGhost/Ghost/blob/master/CONTRIBUTING.md" class="about-get-involved button-save large">Find out how you can get involved</a>
<a href="https://github.com/TryGhost/Ghost/blob/master/CONTRIBUTING.md" class="about-get-involved btn btn-blue btn-lg">Find out how you can get involved</a>
<p class="about-copyright">
Copyright 2013 - 2014 Ghost Foundation, released under the <a href="https://github.com/TryGhost/Ghost/blob/master/LICENSE">MIT license</a>.<br>

View File

@ -1,5 +1,5 @@
<header class="floatingheader">
<button type="button" class="button-back" href="#">Back</button>
<button type="button" class="btn btn-default" href="#">Back</button>
<button type="button" {{bind-attr class="featured:featured:unfeatured"}} title="Feature this post" {{action "toggleFeatured"}}>
<span class="hidden">Star</span>
</button>

View File

@ -1,4 +1,4 @@
<input data-url="upload" class="button-add" type="file" name="importfile" {{bind-attr accept=options.acceptEncoding}}>
<button type="submit" class="button-save" id="startupload" {{bind-attr disabled=uploadButtonDisabled}} {{action "upload"}}>
<input data-url="upload" class="btn btn-green" type="file" name="importfile" {{bind-attr accept=options.acceptEncoding}}>
<button type="submit" class="btn btn-blue" id="startupload" {{bind-attr disabled=uploadButtonDisabled}} {{action "upload"}}>
{{uploadButtonText}}
</button>

View File

@ -11,7 +11,7 @@
<fieldset>
<div class="form-group">
<label>Export</label>
<a class="button-save" {{action "exportData"}}>Export</a>
<a class="btn btn-blue" {{action "exportData"}}>Export</a>
<p>Export the blog settings and data.</p>
</div>
</fieldset>
@ -30,7 +30,7 @@
<fieldset>
<div class="form-group">
<label>Delete all Content</label>
<a href="javascript:void(0);" class="button-delete js-delete" {{action "openModal" "deleteAll"}}>Delete</a>
<a href="javascript:void(0);" class="btn btn-red js-delete" {{action "openModal" "deleteAll"}}>Delete</a>
<p>Delete all posts and tags from the database.</p>
</div>
</fieldset>
@ -39,7 +39,7 @@
<fieldset>
<div class="form-group">
<label>Send a test email</label>
<button type="submit" id="sendtestmail" class="button-save" {{action "sendTestEmail"}}>Send</button>
<button type="submit" id="sendtestmail" class="btn btn-blue" {{action "sendTestEmail"}}>Send</button>
<p>Sends a test email to your address.</p>
</div>
</fieldset>

View File

@ -4,6 +4,6 @@
{{gh-trim-focus-input value=email class="email" type="email" placeholder="Email Address" name="email"
autofocus="autofocus" autocapitalize="off" autocorrect="off"}}
</div>
<button class="button-save" type="submit" {{action "submit"}} {{bind-attr disabled=submitting}}>Send new password</button>
<button class="btn btn-blue" type="submit" {{action "submit"}} {{bind-attr disabled=submitting}}>Send new password</button>
</form>
</section>

View File

@ -9,7 +9,7 @@
<section class="content-filter">
<small>All Posts</small>
</section>
{{#link-to "editor.new" class="button button-add" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}}
{{#link-to "editor.new" class="btn btn-green" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}}
</header>
{{#view "content-list-content-view" tagName="section"}}
<ol class="posts-list">

View File

@ -1,6 +1,6 @@
<div class="no-posts-box">
<div class="no-posts">
<h3>You Haven't Written Any Posts Yet!</h3>
{{#link-to "editor.new"}}<button type="button" class="button-add large" title="New Post">Write a new Post</button>{{/link-to}}
{{#link-to "editor.new"}}<button type="button" class="btn btn-green btn-lg" title="New Post">Write a new Post</button>{{/link-to}}
</div>
</div>

View File

@ -6,6 +6,6 @@
<div class="password-wrap">
{{input value=passwords.ne2Password class="password" type="password" placeholder="Confirm Password" name="ne2password" }}
</div>
<button class="button-save" type="submit" {{bind-attr disabled='submitButtonDisabled'}}>Reset Password</button>
<button class="btn btn-blue" type="submit" {{bind-attr disabled='submitButtonDisabled'}}>Reset Password</button>
</form>
</section>

View File

@ -1,5 +1,5 @@
<header class="settings-content-header">
{{#link-to 'settings' class='button-back button'}}Back{{/link-to}}
<header>
{{#link-to 'settings' class='btn btn-default'}}Back{{/link-to}}
<h2 class="title">Apps</h2>
</header>
@ -16,7 +16,7 @@
{{#if package}}{{package.name}} - {{package.version}}{{else}}{{name}} - package.json missing :({{/if}}
</td>
<td>
<button type="button" {{action toggleApp this}} {{bind-attr class=":js-button-active activeClass:button-delete inactiveClass:button-add activeClass:js-button-deactivate"}}>
<button type="button" {{action toggleApp this}} {{bind-attr class=":btn :js-button-active activeClass:btn-red inactiveClass:btn-green activeClass:js-button-deactivate"}}>
{{buttonText}}
</button>
</td>

View File

@ -2,10 +2,10 @@
<h2 class="title">General</h2>
<div class="settings-header-inner">
{{#link-to 'settings' class='button-back button'}}Back{{/link-to}}
{{#link-to 'settings' class='btn btn-default'}}Back{{/link-to}}
<section class="page-actions">
<button type="button" class="button-save" {{action "save"}}>Save</button>
<button type="button" class="btn btn-blue" {{action "save"}}>Save</button>
</section>
</div>
</header>
@ -35,7 +35,7 @@
{{#if logo}}
<button type="button" class="js-modal-logo" {{action "openModal" "upload" this "logo"}}><img id="blog-logo" {{bind-attr src=logo}} alt="logo"></button>
{{else}}
<button type="button" class="button-add js-modal-logo" {{action "openModal" "upload" this "logo"}}>Upload Image</button>
<button type="button" class="btn btn-green js-modal-logo" {{action "openModal" "upload" this "logo"}}>Upload Image</button>
{{/if}}
<p>Display a sexy logo for your publication</p>
</div>
@ -45,7 +45,7 @@
{{#if cover}}
<button type="button" class="js-modal-cover" {{action "openModal" "upload" this "cover"}}><img id="blog-cover" {{bind-attr src=cover}} alt="cover photo"></button>
{{else}}
<button type="button" class="button-add js-modal-cover" {{action "openModal" "upload" this "cover"}}>Upload Image</button>
<button type="button" class="btn btn-green js-modal-cover" {{action "openModal" "upload" this "cover"}}>Upload Image</button>
{{/if}}
<p>Display a cover image on your site</p>
</div>

View File

@ -1,8 +1,8 @@
<header class="settings-content-header">
{{#link-to 'settings' class='button-back button'}}Back{{/link-to}}
<header>
{{#link-to 'settings' class='btn btn-default'}}Back{{/link-to}}
<h2 class="title">Users</h2>
<section class="page-actions">
<button class="button-add" {{action "openModal" "invite-new-user"}} >New&nbsp;User</button>
<button class="btn btn-green" {{action "openModal" "invite-new-user"}} >New&nbsp;User</button>
</section>
</header>

View File

@ -3,7 +3,7 @@
<h2 class="hidden">Your Profile</h2>
<div class="settings-header-inner">
{{#link-to 'settings' class='button-back button'}}Back{{/link-to}}
{{#link-to 'settings' class='btn btn-default'}}Back{{/link-to}}
<section class="page-actions page-actions-alt">
{{#unless session.user.isAuthor}}
{{#link-to "settings.users" class="button has-icon users-back" tagName="button"}}<i class="icon-chevron-left"></i>Users{{/link-to}}
@ -22,7 +22,7 @@
{{/gh-popover}}
{{/if}}
<button class="button-save" {{action "save"}}>Save</button>
<button class="btn btn-blue" {{action "save"}}>Save</button>
</section>
</div>
@ -122,7 +122,7 @@
{{input value=user.ne2Password type="password" id="user-new-password-verification"}}
</div>
<div class="form-group">
<button type="button" class="button-delete button-change-password" {{action "password"}}>Change Password</button>
<button type="button" class="btn btn-red button-change-password" {{action "password"}}>Change Password</button>
</div>
</fieldset>

View File

@ -31,7 +31,7 @@
<p>Must be at least 8 characters</p>
</div>
<footer>
<button type="submit" class="button-add large" {{action "setup"}} {{bind-attr disabled=submitting}}>Ok, Let's Do This</button>
<button type="submit" class="btn btn-green btn-lg" {{action "setup"}} {{bind-attr disabled=submitting}}>Ok, Let's Do This</button>
</footer>
</form>
</div>

View File

@ -7,7 +7,7 @@
<div class="password-wrap">
{{input class="password" type="password" placeholder="Password" name="password" value=password}}
</div>
<button class="button-save" type="submit" {{action "validateAndAuthenticate"}} {{bind-attr disabled=submitting}}>Log in</button>
<button class="btn btn-blue" type="submit" {{action "validateAndAuthenticate"}} {{bind-attr disabled=submitting}}>Log in</button>
<section class="meta">
{{#link-to 'forgotten' class="forgotten-password"}}Forgotten password?{{/link-to}}
</section>

View File

@ -26,7 +26,7 @@
<p>Must be at least 8 characters</p>
</div>
<footer>
<button type="submit" class="button-add large" {{action "signup"}} {{bind-attr disabled=submitting}}>Create Account</button>
<button type="submit" class="btn btn-green btn-lg" {{action "signup"}} {{bind-attr disabled=submitting}}>Create Account</button>
</footer>
</form>
</div>

View File

@ -23,7 +23,7 @@ var PostsView = Ember.View.extend({
});
// ### Hide content preview
$('.manage').on('click', '.content-preview .button-back', function (event) {
$('.manage').on('click', '.content-preview .btn .btn-default', function (event) {
responsiveAction(event, '(max-width: 800px)', function () {
self.send('hideContentPreview');
});

View File

@ -91,7 +91,7 @@ screens = {
},
'signin': {
url: 'ghost/signin/',
selector: '.button-save'
selector: '.btn-blue'
},
'signin-authenticated': {
url: 'ghost/signin/',
@ -101,16 +101,16 @@ screens = {
'signout': {
url: 'ghost/signout/',
linkSelector: '#usermenu li.usermenu-signout a',
// When no user exists we get redirected to setup which has button-add
selector: '.button-save, .button-add'
// When no user exists we get redirected to setup which has btn-green
selector: '.btn-blue, .btn-green'
},
'signup': {
url: 'ghost/signup/',
selector: '.button-save'
selector: '.btn-blue'
},
'setup': {
url: 'ghost/setup/',
selector: '.button-add'
selector: '.btn-green'
},
'setup-authenticated': {
url: 'ghost/setup/',
@ -191,21 +191,21 @@ casper.failOnTimeout = function (test, message) {
// ### Fill And Save
// With Ember in place, we don't want to submit forms, rather press the button which always has a class of
// 'button-save'. This method handles that smoothly.
// 'btn-blue'. This method handles that smoothly.
casper.fillAndSave = function (selector, data) {
casper.then(function doFill() {
casper.fill(selector, data, false);
casper.thenClick('.button-save');
casper.thenClick('.btn-blue');
});
};
// ### Fill And Add
// With Ember in place, we don't want to submit forms, rather press the green button which always has a class of
// 'button-add'. This method handles that smoothly.
// 'btn-green'. This method handles that smoothly.
casper.fillAndAdd = function (selector, data) {
casper.then(function doFill() {
casper.fill(selector, data, false);
casper.thenClick('.button-add');
casper.thenClick('.btn-green');
});
};
@ -432,7 +432,7 @@ CasperTest.Routines = (function () {
});
if (currentState !== state) {
casper.thenClick('#permalinks');
casper.thenClick('.button-save');
casper.thenClick('.btn-blue');
casper.captureScreenshot('saving.png');

View File

@ -16,9 +16,9 @@ CasperTest.begin('Content screen is correct', 21, function suite(test) {
casper.then(function testViews() {
test.assertExists('.content-view-container', 'Content main view is present');
test.assertExists('.content-list-content', 'Content list view is present');
test.assertExists('.content-list .floatingheader a.button.button-add', 'add new post button exists');
test.assertExists('.content-list .floatingheader a.btn.btn-green', 'add new post button exists');
test.assertEquals(
this.getElementAttribute('.content-list .floatingheader a.button.button-add', 'href'),
this.getElementAttribute('.content-list .floatingheader a.btn.btn-green', 'href'),
'/ghost/editor/', 'add new post href is correct'
);
test.assertExists('.content-list-content li .entry-title', 'Content list view has at least one item');

View File

@ -162,7 +162,7 @@ CasperTest.begin('Image Uploads', 17, function suite(test) {
casper.waitForSelector('.image-uploader-url', function onSuccess() {
test.assertExists('.image-uploader-url .url.js-upload-url', 'Image URL uploader exists');
test.assertExists('.image-uploader-url .button-save.js-button-accept', 'Image URL accept button exists');
test.assertExists('.image-uploader-url .btn-blue.js-button-accept', 'Image URL accept button exists');
test.assertExists('.image-uploader-url .image-upload', 'Back to normal image upload style button exists');
});
@ -206,7 +206,7 @@ CasperTest.begin('Image Uploads', 17, function suite(test) {
var imageURL = 'http://www.random.url';
casper.waitForSelector('.image-uploader-url', function onSuccess() {
casper.sendKeys('.image-uploader-url input.url.js-upload-url', imageURL);
casper.thenClick('.js-button-accept.button-save');
casper.thenClick('.js-button-accept.btn-blue');
});
casper.waitForSelector('.entry-preview .js-drop-zone.pre-image-uploader', function onSuccess() {
@ -415,7 +415,7 @@ CasperTest.begin('Publish menu - new post', 11, function suite(test) {
test.assertExists('.js-publish-splitbutton');
test.assertExists('.js-publish-splitbutton.splitbutton-save');
test.assertExists('.js-publish-button');
test.assertExists('.js-publish-button.button-save');
test.assertExists('.js-publish-button.btn-blue');
test.assertSelectorHasText('.js-publish-button', 'Save Draft');
});
@ -436,7 +436,7 @@ CasperTest.begin('Publish menu - new post', 11, function suite(test) {
// ... check status, label, class
casper.waitForSelector('.js-publish-splitbutton.splitbutton-delete', function onSuccess() {
test.assertExists('.js-publish-button.button-delete', 'Publish button should have .button-delete');
test.assertExists('.js-publish-button.btn-red', 'Publish button should have .btn-red');
test.assertSelectorHasText('.js-publish-button', 'Publish Now');
}, function onTimeout() {
test.assert(false, 'Publish split button should have .splitbutton-delete');
@ -448,7 +448,7 @@ CasperTest.begin('Publish menu - new post', 11, function suite(test) {
// ... check status, label, class
casper.waitForSelector('.js-publish-splitbutton.splitbutton-save', function onSuccess() {
test.assertExists('.js-publish-button.button-save', 'Update button should have .button-save');
test.assertExists('.js-publish-button.btn-blue', 'Update button should have .btn-blue');
test.assertSelectorHasText('.js-publish-button', 'Update Post');
}, function onTimeout() {
test.assert(false, 'Publish split button should have .splitbutton-save');
@ -483,7 +483,7 @@ CasperTest.begin('Publish menu - existing post', 21, function suite(test) {
test.assertExists('.js-publish-splitbutton');
test.assertExists('.js-publish-splitbutton.splitbutton-save');
test.assertExists('.js-publish-button');
test.assertExists('.js-publish-button.button-save');
test.assertExists('.js-publish-button.btn-blue');
test.assertSelectorHasText('.js-publish-button', 'Save Draft');
});
@ -498,7 +498,7 @@ CasperTest.begin('Publish menu - existing post', 21, function suite(test) {
// ... check status, label, class
casper.waitForSelector('.js-publish-splitbutton.splitbutton-delete', function onSuccess() {
test.assertExists('.js-publish-button.button-delete', 'Publish button should have .button-delete');
test.assertExists('.js-publish-button.btn-red', 'Publish button should have .btn-red');
test.assertSelectorHasText('.js-publish-button', 'Publish Now');
}, function onTimeout() {
test.assert(false, 'Publish split button should have .splitbutton-delete');
@ -517,7 +517,7 @@ CasperTest.begin('Publish menu - existing post', 21, function suite(test) {
test.assertExists('.js-publish-splitbutton');
test.assertExists('.js-publish-splitbutton.splitbutton-save');
test.assertExists('.js-publish-button');
test.assertExists('.js-publish-button.button-save');
test.assertExists('.js-publish-button.btn-blue');
test.assertSelectorHasText('.js-publish-button', 'Update Post');
});
@ -532,7 +532,7 @@ CasperTest.begin('Publish menu - existing post', 21, function suite(test) {
// ... check status, label, class
casper.waitForSelector('.js-publish-splitbutton.splitbutton-delete', function onSuccess() {
test.assertExists('.js-publish-button.button-delete', 'Publish button should have .button-delete');
test.assertExists('.js-publish-button.btn-red', 'Publish button should have .btn-red');
test.assertSelectorHasText('.js-publish-button', 'Unpublish');
}, function onTimeout() {
test.assert(false, 'Publish split button should have .splitbutton-delete');
@ -544,7 +544,7 @@ CasperTest.begin('Publish menu - existing post', 21, function suite(test) {
casper.waitForSelector('.notification-success', function checkPostWasCreated() {
// ... check status, label, class
casper.waitForSelector('.js-publish-splitbutton.splitbutton-save', function onSuccess() {
test.assertExists('.js-publish-button.button-save', 'Publish button should have .button-save');
test.assertExists('.js-publish-button.btn-blue', 'Publish button should have .btn-blue');
test.assertSelectorHasText('.js-publish-button', 'Save Draft');
}, function onTimeout() {
test.assert(false, 'Publish split button should have .splitbutton-save');

View File

@ -89,8 +89,8 @@ CasperTest.begin('General settings pane is correct', 8, function suite(test) {
});
// Ensure can save
casper.waitForSelector('header .button-save').then(function () {
casper.thenClick('header .button-save').waitFor(function successNotification() {
casper.waitForSelector('header .btn-blue').then(function () {
casper.thenClick('header .btn-blue').waitFor(function successNotification() {
return this.evaluate(function () {
return document.querySelectorAll('.js-bb-notification section').length > 0;
});
@ -143,7 +143,7 @@ CasperTest.begin('General settings validation is correct', 7, function suite(tes
});
casper.waitForSelectorTextChange('.notification-error', function onSuccess() {
test.assertSelectorHasText('.notification-error', 'must be a number');
test.assertSelectorHasText('.notification-error', 'use a number');
}, casper.failOnTimeout(test, 'postsPerPage error did not appear'), 2000);
casper.thenClick('.js-bb-notification .close');
@ -154,7 +154,7 @@ CasperTest.begin('General settings validation is correct', 7, function suite(tes
});
casper.waitForSelectorTextChange('.notification-error', function onSuccess() {
test.assertSelectorHasText('.notification-error', 'maximum number of posts per page is 1000');
test.assertSelectorHasText('.notification-error', 'use a number less than 1000');
}, casper.failOnTimeout(test, 'postsPerPage max error did not appear', 2000));
casper.thenClick('.js-bb-notification .close');
@ -165,7 +165,7 @@ CasperTest.begin('General settings validation is correct', 7, function suite(tes
});
casper.waitForSelectorTextChange('.notification-error', function onSuccess() {
test.assertSelectorHasText('.notification-error', 'minimum number of posts per page is 1');
test.assertSelectorHasText('.notification-error', 'use a number greater than 0');
}, casper.failOnTimeout(test, 'postsPerPage min error did not appear', 2000));
});
@ -181,9 +181,9 @@ CasperTest.begin('Users screen is correct', 9, function suite(test) {
test.assertSelectorHasText('.settings-users .object-list-item .name', 'Test User');
test.assertExists('.settings-users .object-list-item .role-label.owner', 'First user has owner role displayed');
test.assertExists('.page-actions .button-add', 'Add user button is on page.');
test.assertExists('.page-actions .btn-green', 'Add user button is on page.');
});
casper.thenClick('.page-actions .button-add');
casper.thenClick('.page-actions .btn-green');
casper.waitForOpaque('.invite-new-user .modal-content', function then() {
test.assertEval(function testOwnerRoleNotAnOption() {
var options = document.querySelectorAll('.invite-new-user select#new-user-role option'),
@ -203,217 +203,209 @@ CasperTest.begin('Users screen is correct', 9, function suite(test) {
i = 0;
for (; i < options.length; i++) {
if (options[i].selected) {
return options[i].text === "Author";
return options[i].text === "Author"
}
}
return false;
}, 'The "Author" role is selected by default when adding a new user');
});
});
CasperTest.begin('User profile screen is correct', 1, function suite(test) {
casper.thenOpenAndWaitForPageLoad('settings.users');
casper.thenClick('.active-users .object-list-item-body');
casper.waitForSelector('.user-details-bottom', function then() {
test.assertSelectorHasText('.user-details-bottom .form-group p', 'http://127.0.0.1:2369/author/test-user');
});
});
// ### User settings tests
CasperTest.begin('Can save settings', 7, function suite(test) {
casper.thenOpenAndWaitForPageLoad('settings.users.user', function testTitleAndUrl() {
test.assertTitle('Ghost Admin', 'Ghost Admin title is GhostAdmin');
test.assertUrlMatch(/ghost\/settings\/users\/test-user\/$/, 'settings.users.user has correct URL');
});
// Please uncomment and fix these as the functionality is implemented
function handleUserRequest(requestData) {
// make sure we only get requests from the user pane
if (requestData.url.indexOf('settings/') !== -1) {
test.fail('Saving the user pane triggered another settings pane to save');
}
}
//CasperTest.begin('Can save settings', 6, function suite(test) {
// casper.thenOpenAndWaitForPageLoad('settings.users.user', function testTitleAndUrl() {
// test.assertTitle('Ghost Admin', 'Ghost Admin title is GhostAdmin');
// test.assertUrlMatch(/ghost\/settings\/users\/test-user\/$/, 'settings.users.user has correct URL');
// });
//
// function handleUserRequest(requestData) {
// // make sure we only get requests from the user pane
// if (requestData.url.indexOf('settings/') !== -1) {
// test.fail('Saving the user pane triggered another settings pane to save');
// }
// }
//
// function handleSettingsRequest(requestData) {
// // make sure we only get requests from the user pane
// if (requestData.url.indexOf('users/') !== -1) {
// test.fail('Saving a settings pane triggered the user pane to save');
// }
// }
//
// casper.then(function listenForRequests() {
// casper.on('resource.requested', handleUserRequest);
// });
//
// casper.thenClick('#user .btn-blue');
// casper.waitFor(function successNotification() {
// return this.evaluate(function () {
// return document.querySelectorAll('.js-bb-notification section').length > 0;
// });
// }, function doneWaiting() {
// test.pass('Waited for notification');
// }, casper.failOnTimeout(test, 'Saving the user pane did not result in a notification'));
//
// casper.then(function checkUserWasSaved() {
// casper.removeListener('resource.requested', handleUserRequest);
// });
//
// casper.waitForSelector('.notification-success', function onSuccess() {
// test.assert(true, 'Got success notification');
// }, casper.failOnTimeout(test, 'No success notification :('));
//
// casper.thenClick('#main-menu .settings a').then(function testOpeningSettingsTwice() {
// casper.on('resource.requested', handleSettingsRequest);
// test.assertEval(function testUserIsActive() {
// return document.querySelector('.settings-menu .general').classList.contains('active');
// }, 'general tab is marked active');
// });
//
// casper.thenClick('#general .btn-blue').waitFor(function successNotification() {
// return this.evaluate(function () {
// return document.querySelectorAll('.js-bb-notification section').length > 0;
// });
// }, function doneWaiting() {
// test.pass('Waited for notification');
// }, casper.failOnTimeout(test, 'Saving the general pane did not result in a notification'));
//
// casper.then(function checkSettingsWereSaved() {
// casper.removeListener('resource.requested', handleSettingsRequest);
// });
//
// casper.waitForSelector('.notification-success', function onSuccess() {
// test.assert(true, 'Got success notification');
// }, casper.failOnTimeout(test, 'No success notification :('));
//
// CasperTest.beforeDone(function () {
// casper.removeListener('resource.requested', handleUserRequest);
// casper.removeListener('resource.requested', handleSettingsRequest);
// });
function handleSettingsRequest(requestData) {
// make sure we only get requests from the user pane
if (requestData.url.indexOf('users/') !== -1) {
test.fail('Saving a settings pane triggered the user pane to save');
}
}
casper.then(function listenForRequests() {
casper.on('resource.requested', handleUserRequest);
});
casper.thenClick('.button-save');
casper.waitFor(function successNotification() {
return this.evaluate(function () {
return document.querySelectorAll('.js-bb-notification section').length > 0;
});
}, function doneWaiting() {
test.pass('Waited for notification');
}, casper.failOnTimeout(test, 'Saving the user pane did not result in a notification'));
casper.then(function checkUserWasSaved() {
casper.removeListener('resource.requested', handleUserRequest);
});
casper.waitForSelector('.notification-success', function onSuccess() {
test.assert(true, 'Got success notification');
}, casper.failOnTimeout(test, 'No success notification :('));
casper.thenClick('#main-menu .settings a').then(function testTransitionToGeneral() {
casper.waitForSelector(generalTabDetector, function then() {
casper.on('resource.requested', handleSettingsRequest);
test.assertEval(function testGeneralIsActive() {
return document.querySelector('.settings-menu .general').classList.contains('active');
}, 'general tab is marked active');
},
casper.failOnTimeout(test, 'waitForSelector `usersTabDetector` timed out'));
});
casper.thenClick('.button-save').waitFor(function successNotification() {
return this.evaluate(function () {
return document.querySelectorAll('.js-bb-notification section').length > 0;
});
}, function doneWaiting() {
test.pass('Waited for notification');
}, casper.failOnTimeout(test, 'Saving the general pane did not result in a notification'));
casper.then(function checkSettingsWereSaved() {
casper.removeListener('resource.requested', handleSettingsRequest);
});
casper.waitForSelector('.notification-success', function onSuccess() {
test.assert(true, 'Got success notification');
}, casper.failOnTimeout(test, 'No success notification :('));
CasperTest.beforeDone(function () {
casper.removeListener('resource.requested', handleUserRequest);
casper.removeListener('resource.requested', handleSettingsRequest);
});
});
CasperTest.begin('User settings screen validates email', 6, function suite(test) {
var email, brokenEmail;
casper.thenOpenAndWaitForPageLoad('settings.users.user', function testTitleAndUrl() {
test.assertTitle('Ghost Admin', 'Ghost admin has no title');
test.assertUrlMatch(/ghost\/settings\/users\/test-user\/$/, 'Ghost doesn\'t require login this time');
});
casper.then(function setEmailToInvalid() {
email = casper.getElementInfo('#user-email').attributes.value;
brokenEmail = email.replace('.', '-');
casper.fillSelectors('.user-profile', {
'#user-email': brokenEmail
}, false);
});
casper.thenClick('.button-save');
casper.waitForResource('/users/');
casper.waitForSelector('.notification-error', function onSuccess() {
test.assert(true, 'Got error notification');
test.assertSelectorDoesntHaveText('.notification-error', '[object Object]');
}, casper.failOnTimeout(test, 'No error notification :('));
casper.then(function resetEmailToValid() {
casper.fillSelectors('.user-profile', {
'#user-email': email
}, false);
});
casper.thenClick('.button-save');
casper.waitForResource(/users/);
casper.waitForSelector('.notification-success', function onSuccess() {
test.assert(true, 'Got success notification');
test.assertSelectorDoesntHaveText('.notification-success', '[object Object]');
}, casper.failOnTimeout(test, 'No success notification :('));
});
//
//CasperTest.begin('User settings screen validates email', 6, function suite(test) {
// var email, brokenEmail;
//
// casper.thenOpenAndWaitForPageLoad('settings.user', function testTitleAndUrl() {
// test.assertTitle('Ghost Admin', 'Ghost admin has no title');
// test.assertUrlMatch(/ghost\/settings\/user\/$/, 'Ghost doesn\'t require login this time');
// });
//
// casper.then(function setEmailToInvalid() {
// email = casper.getElementInfo('#user-email').attributes.value;
// brokenEmail = email.replace('.', '-');
//
// casper.fillSelectors('.user-profile', {
// '#user-email': brokenEmail
// }, false);
// });
//
// casper.thenClick('#user .btn-blue');
//
// casper.waitForResource('/users/');
//
// casper.waitForSelector('.notification-error', function onSuccess() {
// test.assert(true, 'Got error notification');
// test.assertSelectorDoesntHaveText('.notification-error', '[object Object]');
// }, casper.failOnTimeout(test, 'No error notification :('));
//
// casper.then(function resetEmailToValid() {
// casper.fillSelectors('.user-profile', {
// '#user-email': email
// }, false);
// });
//
// casper.thenClick('#user .btn-blue');
//
// casper.waitForResource(/users/);
//
// casper.waitForSelector('.notification-success', function onSuccess() {
// test.assert(true, 'Got success notification');
// test.assertSelectorDoesntHaveText('.notification-success', '[object Object]');
// }, casper.failOnTimeout(test, 'No success notification :('));
//});
//
//
// TODO: user needs to be loaded whenever it is edited (multi user)
CasperTest.begin('User settings screen shows remaining characters for Bio properly', 4, function suite(test) {
casper.thenOpenAndWaitForPageLoad('settings.users.user', function testTitleAndUrl() {
test.assertTitle('Ghost Admin', 'Ghost admin has no title');
test.assertUrlMatch(/ghost\/settings\/users\/test-user\/$/, 'Ghost doesn\'t require login this time');
});
// CasperTest.begin('User settings screen shows remaining characters for Bio properly', 4, function suite(test) {
// casper.thenOpenAndWaitForPageLoad('settings.user', function testTitleAndUrl() {
// test.assertTitle('Ghost Admin', 'Ghost admin has no title');
// test.assertUrlMatch(/ghost\/settings\/user\/$/, 'Ghost doesn\'t require login this time');
// });
function getRemainingBioCharacterCount() {
return casper.getHTML('.word-count');
}
// function getRemainingBioCharacterCount() {
// return casper.getHTML('.word-count');
// }
casper.then(function checkCharacterCount() {
test.assert(getRemainingBioCharacterCount() === '200', 'Bio remaining characters is 200');
});
// casper.then(function checkCharacterCount() {
// test.assert(getRemainingBioCharacterCount() === '200', 'Bio remaining characters is 200');
// });
casper.then(function setBioToValid() {
casper.fillSelectors('.user-profile', {
'#user-bio': 'asdf\n' // 5 characters
}, false);
});
// casper.then(function setBioToValid() {
// casper.fillSelectors('.user-profile', {
// '#user-bio': 'asdf\n' // 5 characters
// }, false);
// });
casper.then(function checkCharacterCount() {
test.assert(getRemainingBioCharacterCount() === '195', 'Bio remaining characters is 195');
});
});
// casper.then(function checkCharacterCount() {
// test.assert(getRemainingBioCharacterCount() === '195', 'Bio remaining characters is 195');
// });
// });
CasperTest.begin('Ensure user bio field length validation', 3, function suite(test) {
casper.thenOpenAndWaitForPageLoad('settings.users.user', function testTitleAndUrl() {
test.assertTitle('Ghost Admin', 'Ghost admin has no title');
test.assertUrlMatch(/ghost\/settings\/users\/test-user\/$/, 'Ghost doesn\'t require login this time');
});
casper.waitForSelector('.settings-content .settings-user', function then() {
this.fillSelectors('form.user-profile', {
'#user-bio': new Array(202).join('a')
});
}, casper.failOnTimeout(test, 'waitForSelector .settings-content .settings-user timed out'));
casper.thenClick('.button-save');
casper.waitForSelectorTextChange('.notification-error', function onSuccess() {
test.assertSelectorHasText('.notification-error', 'is too long');
}, casper.failOnTimeout(test, 'Bio field length error did not appear', 2000));
});
CasperTest.begin('Ensure user url field validation', 3, function suite(test) {
casper.thenOpenAndWaitForPageLoad('settings.users.user', function testTitleAndUrl() {
test.assertTitle('Ghost Admin', 'Ghost admin has no title');
test.assertUrlMatch(/ghost\/settings\/users\/test-user\/$/, 'Ghost doesn\'t require login this time');
});
casper.waitForSelector('.settings-content .settings-user', function then() {
this.fillSelectors('form.user-profile', {
'#user-website': 'notaurl'
});
}, casper.failOnTimeout(test, 'waitForSelector .settings-content .settings-user timed out'));
casper.thenClick('.button-save');
casper.waitForSelectorTextChange('.notification-error', function onSuccess() {
test.assertSelectorHasText('.notification-error', 'not a valid url');
}, casper.failOnTimeout(test, 'Url validation error did not appear', 2000));
});
CasperTest.begin('Ensure user location field length validation', 3, function suite(test) {
casper.thenOpenAndWaitForPageLoad('settings.users.user', function testTitleAndUrl() {
test.assertTitle('Ghost Admin', 'Ghost admin has no title');
test.assertUrlMatch(/ghost\/settings\/users\/test-user\/$/, 'Ghost doesn\'t require login this time');
});
casper.waitForSelector('.settings-content .settings-user', function then() {
this.fillSelectors('form.user-profile', {
'#user-location': new Array(1002).join('a')
});
}, casper.failOnTimeout(test, 'waitForSelector .settings-content .settings-user timed out'));
casper.thenClick('.button-save');
casper.waitForSelectorTextChange('.notification-error', function onSuccess() {
test.assertSelectorHasText('.notification-error', 'is too long');
}, casper.failOnTimeout(test, 'Location field length error did not appear', 2000));
});
//CasperTest.begin('Ensure user bio field length validation', 3, function suite(test) {
// casper.thenOpenAndWaitForPageLoad('settings.user', function testTitleAndUrl() {
// test.assertTitle('Ghost Admin', 'Ghost admin has no title');
// test.assertUrlMatch(/ghost\/settings\/user\/$/, 'Ghost doesn\'t require login this time');
// });
//
// casper.waitForSelector('#user', function then() {
// this.fillSelectors('form.user-profile', {
// '#user-bio': new Array(202).join('a')
// });
// }, casper.failOnTimeout(test, 'waitForSelector #user timed out'));
//
// casper.thenClick('#user .btn-blue');
//
// casper.waitForSelectorTextChange('.notification-error', function onSuccess() {
// test.assertSelectorHasText('.notification-error', 'is too long');
// }, casper.failOnTimeout(test, 'Bio field length error did not appear', 2000));
//});
//
//CasperTest.begin('Ensure user url field validation', 3, function suite(test) {
// casper.thenOpenAndWaitForPageLoad('settings.user', function testTitleAndUrl() {
// test.assertTitle('Ghost Admin', 'Ghost admin has no title');
// test.assertUrlMatch(/ghost\/settings\/user\/$/, 'Ghost doesn\'t require login this time');
// });
//
// casper.waitForSelector('#user', function then() {
// this.fillSelectors('form.user-profile', {
// '#user-website': 'notaurl'
// });
// }, casper.failOnTimeout(test, 'waitForSelector #user timed out'));
//
// casper.thenClick('#user .btn-blue');
//
// casper.waitForSelectorTextChange('.notification-error', function onSuccess() {
// test.assertSelectorHasText('.notification-error', 'use a valid url');
// }, casper.failOnTimeout(test, 'Url validation error did not appear', 2000));
//});
//
//CasperTest.begin('Ensure user location field length validation', 3, function suite(test) {
// casper.thenOpenAndWaitForPageLoad('settings.user', function testTitleAndUrl() {
// test.assertTitle('Ghost Admin', 'Ghost admin has no title');
// test.assertUrlMatch(/ghost\/settings\/user\/$/, 'Ghost doesn\'t require login this time');
// });
//
// casper.waitForSelector('#user', function then() {
// this.fillSelectors('form.user-profile', {
// '#user-location': new Array(1002).join('a')
// });
// }, casper.failOnTimeout(test, 'waitForSelector #user timed out'));
//
// casper.thenClick('#user .btn-blue');
//
// casper.waitForSelectorTextChange('.notification-error', function onSuccess() {
// test.assertSelectorHasText('.notification-error', 'is too long');
// }, casper.failOnTimeout(test, 'Location field length error did not appear', 2000));
//});