From 2c2f9693d29a3aaf1bbca17147e6f4994dd238d0 Mon Sep 17 00:00:00 2001
From: cobbspur <cobbspur@hotmail.com>
Date: Tue, 19 May 2015 14:21:39 +0100
Subject: [PATCH] Add UI link classes

No Issue

- Adds contextual classnames to Nav Bar links
- Various test updates

TODO
- Increase test coverage for new admin UI
- Fix up Caspertests for new Admin UI
---
 core/client/app/templates/-nav-menu.hbs    | 16 +++----
 core/test/functional/base.js               | 26 +++++-----
 core/test/functional/client/app_test.js    | 56 +++++++++++-----------
 core/test/functional/client/signin_test.js |  6 +--
 4 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/core/client/app/templates/-nav-menu.hbs b/core/client/app/templates/-nav-menu.hbs
index 049952578f..659dd40fd7 100644
--- a/core/client/app/templates/-nav-menu.hbs
+++ b/core/client/app/templates/-nav-menu.hbs
@@ -23,20 +23,20 @@
         </section>
         <ul class="gh-nav-list gh-nav-main">
             {{!<li><i class="icon-dash"></i>Dashboard</li>}}
-            <li>{{#link-to "editor.new"}}<i class="icon-pen"></i>New Post{{/link-to}}</li>
-            <li>{{#link-to "posts"}}<i class="icon-content"></i>Content{{/link-to}}</li>
+            <li>{{#link-to "editor.new" classNames="gh-nav-main-editor"}}<i class="icon-pen"></i>New Post{{/link-to}}</li>
+            <li>{{#link-to "posts" classNames="gh-nav-main-content"}}<i class="icon-content"></i>Content{{/link-to}}</li>
             {{!<li><a href="#"><i class="icon-user"></i>My Posts</a></li>}}
-            <li>{{#link-to "settings.users"}}<i class="icon-team"></i>Team{{/link-to}}</li>
+            <li>{{#link-to "settings.users" classnames="gh-nav-main-settings-users"}}<i class="icon-team"></i>Team{{/link-to}}</li>
             {{!<li><a href="#"><i class="icon-idea"></i>Ideas</a></li>}}
         </ul>
         <ul class="gh-nav-list gh-nav-settings">
             <li class="gh-nav-list-h">Settings</li>
-            <li>{{#link-to "settings.general"}}<i class="icon-settings"></i>General{{/link-to}}</li>
+            <li>{{#link-to "settings.general" classNames="gh-nav-settings-general"}}<i class="icon-settings"></i>General{{/link-to}}</li>
             {{!<li><i class="icon-design"></i>Themes</li>}}
-            <li>{{#link-to "settings.navigation"}}<i class="icon-compass"></i>Navigation{{/link-to}}</li>
-            <li>{{#link-to "settings.tags"}}<i class="icon-tag"></i>Tags{{/link-to}}</li>
-            <li>{{#link-to "settings.code-injection"}}<i class="icon-code"></i>Code Injection{{/link-to}}</li>
-            <li>{{#link-to "settings.labs"}}<i class="icon-apps"></i>Labs{{/link-to}}</li>
+            <li>{{#link-to "settings.navigation" classNames="gh-nav-settings-navigation"}}<i class="icon-compass"></i>Navigation{{/link-to}}</li>
+            <li>{{#link-to "settings.tags" classNames="gh-nav-settings-tags"}}<i class="icon-tag"></i>Tags{{/link-to}}</li>
+            <li>{{#link-to "settings.code-injection" classNames="gh-nav-settings-code-injection"}}<i class="icon-code"></i>Code Injection{{/link-to}}</li>
+            <li>{{#link-to "settings.labs" classNames="gh-nav-settings-labs"}}<i class="icon-apps"></i>Labs{{/link-to}}</li>
         </ul>
     </section>
     <footer class="gh-nav-footer">
diff --git a/core/test/functional/base.js b/core/test/functional/base.js
index bcbee32bfe..aef01b0bc4 100644
--- a/core/test/functional/base.js
+++ b/core/test/functional/base.js
@@ -62,27 +62,27 @@ var DEBUG = false, // TOGGLE THIS TO GET MORE SCREENSHOTS
 screens = {
     root: {
         url: 'ghost/',
-        linkSelector: '.nav-content',
-        selector: '.nav-content.active'
+        linkSelector: '.gh-nav-main-content',
+        selector: '.gh-nav-main-content.active'
     },
     content: {
         url: 'ghost/content/',
-        linkSelector: '.nav-content',
-        selector: '.nav-content.active'
+        linkSelector: '.gh-nav-main-content',
+        selector: '.gh-nav-main-content.active'
     },
     editor: {
         url: 'ghost/editor/',
-        linkSelector: '.nav-new',
-        selector: '#entry-title'
+        linkSelector: '.gh-nav-main-editor',
+        selector: '.gh-nav-main-editor.active'
     },
     settings: {
         url: 'ghost/settings/',
-        linkSelector: '.nav-settings',
-        selector: '.nav-settings.active'
+        linkSelector: '.gh-nav-settings-general',
+        selector: '.gh-nav-settings-general.active'
     },
     'settings.general': {
         url: 'ghost/settings/general',
-        selector: '.settings-nav-general.active'
+        selector: '.gh-nav-settings-general.active'
     },
     'settings.about': {
         url: 'ghost/settings/about',
@@ -90,7 +90,7 @@ screens = {
     },
     'settings.users': {
         url: 'ghost/settings/users',
-        linkSelector: '.settings-nav-users a',
+        linkSelector: '.gh-nav-main-settings-users',
         selector: '.settings-nav-users.active'
     },
     'settings.users.user': {
@@ -105,7 +105,7 @@ screens = {
     'signin-authenticated': {
         url: 'ghost/signin/',
         // signin with authenticated user redirects to posts
-        selector: '.nav-content.active'
+        selector: '.gh-nav-main-content.active'
     },
     signout: {
         url: 'ghost/signout/',
@@ -123,7 +123,7 @@ screens = {
     },
     'setup-authenticated': {
         url: 'ghost/setup/',
-        selector: '.nav-content.active'
+        selector: '.gh-nav-main-content.active'
     }
 };
 
@@ -414,7 +414,7 @@ CasperTest.Routines = (function () {
 
     function signin() {
         casper.thenOpenAndWaitForPageLoad('signin', function then() {
-            casper.waitForOpaque('.login-box', function then() {
+            casper.waitForOpaque('.gh-signin', function then() {
                 casper.captureScreenshot('signing_in.png');
                 this.fillAndSave('#login', user);
                 casper.captureScreenshot('signing_in2.png');
diff --git a/core/test/functional/client/app_test.js b/core/test/functional/client/app_test.js
index a65ded4d62..5eeb9c1504 100644
--- a/core/test/functional/client/app_test.js
+++ b/core/test/functional/client/app_test.js
@@ -10,47 +10,47 @@ CasperTest.begin('Admin navigation bar is correct', 45, function suite(test) {
     });
 
     casper.then(function testNavItems() {
-        var logoHref = this.getElementAttribute('.ghost-logo', 'href'),
-            contentHref = this.getElementAttribute('.nav-content', 'href'),
-            editorHref = this.getElementAttribute('.nav-new', 'href'),
-            settingsHref = this.getElementAttribute('.nav-settings', 'href');
+        var logoHref = this.getElementAttribute('.gh-nav-footer-sitelink', 'href'),
+            contentHref = this.getElementAttribute('.gh-nav-main-content', 'href'),
+            editorHref = this.getElementAttribute('.gh-nav-main-editor', 'href'),
+            settingsGeneralHref = this.getElementAttribute('.gh-nav-settings-general', 'href');
 
         // Logo
-        test.assertExists('.ghost-logo', 'Ghost logo home page link exists');
+        test.assertExists('.gh-nav-footer-sitelink', 'Ghost logo home page link exists');
         test.assertEquals(logoHref, 'http://127.0.0.1:2369/', 'Ghost logo link href is correct');
 
         // Content
-        test.assertExists('.nav-content', 'Content nav item exists');
-        test.assertSelectorHasText('.nav-content', 'Content', 'Content nav item has correct text');
+        test.assertExists('.gh-nav-main-content', 'Content nav item exists');
+        test.assertSelectorHasText('.gh-nav-main-content', 'Content', 'Content nav item has correct text');
         test.assertEquals(contentHref, '/ghost/', 'Content href is correct');
-        test.assertExists('.nav-content.active', 'Content nav item is not marked active');
+        test.assertExists('.gh-nav-main-content.active', 'Content nav item is not marked active');
 
         // Editor
-        test.assertExists('.nav-new', 'Editor nav item exists');
-        test.assertSelectorHasText('.nav-new', 'New Post', 'Editor nav item has correct text');
+        test.assertExists('.gh-nav-main-editor', 'Editor nav item exists');
+        test.assertSelectorHasText('.gh-nav-main-editor', 'New Post', 'Editor nav item has correct text');
         test.assertEquals(editorHref, '/ghost/editor/', 'Editor href is correct');
-        test.assertDoesntExist('.nav-new.active', 'Editor nav item is not marked active');
+        test.assertDoesntExist('.gh-nav-main-editor.active', 'Editor nav item is not marked active');
 
         // Settings
-        test.assertExists('.nav-settings', 'Settings nav item exists');
-        test.assertSelectorHasText('.nav-settings', 'Settings', 'Settings nav item has correct text');
-        test.assertEquals(settingsHref, '/ghost/settings/', 'Settings href is correct');
-        test.assertDoesntExist('.nav-settings.active', 'Settings nav item is marked active');
+        test.assertExists('.gh-nav-settings-general', 'Settings nav item exists');
+        test.assertSelectorHasText('.gh-nav-settings-general', 'General', 'Settings nav item has correct text');
+        test.assertEquals(settingsGeneralHref, '/ghost/settings/general/', 'Settings href is correct');
+        test.assertDoesntExist('.gh-nav-settings-general.active', 'Settings nav item is marked active');
     });
 
     casper.then(function testHelpMenuNotVisible() {
-        test.assertExists('.help-menu', 'Help menu nav item exists');
-        test.assertNotExists('.help-menu .dropdown.open', 'Help menu should not be visible');
+        test.assertExists('.gh-help-button', 'Help menu nav item exists');
+        test.assertNotExists('.gh-help-button .dropdown.open', 'Help menu should not be visible');
     });
 
-    casper.thenClick('.help-menu .nav-label');
-    casper.waitForSelector('.help-menu .dropdown.open', function then() {
+    casper.thenClick('.gh-help-button');
+    casper.waitForSelector('.dropdown', function then() {
         var supportHref = this.getElementAttribute('.help-menu-support', 'href'),
             tweetHref = this.getElementAttribute('.help-menu-tweet', 'href'),
             howtoHref = this.getElementAttribute('.help-menu-how-to', 'href'),
             wishlistHref = this.getElementAttribute('.help-menu-wishlist', 'href');
 
-        test.assertVisible('.help-menu .dropdown-menu', 'Help menu should be visible');
+        test.assertVisible('.dropdown-menu', 'Help menu should be visible');
 
         test.assertExists('.help-menu-support', 'Support menu item exists');
         test.assertSelectorHasText('.help-menu-support', 'Support Center', 'Support menu item has correct text');
@@ -87,22 +87,22 @@ CasperTest.begin('Admin navigation bar is correct', 45, function suite(test) {
         casper.waitWhileVisible('.modal-container', function onSuccess() {
             test.assert(true, 'clicking close should remove the markdown help modal');
         });
-    }, casper.failOnTimeout(test, 'WaitForSelector .help-menu .dropdown failed'));
+    }, casper.failOnTimeout(test, 'WaitForSelector .gh-help-menu .ember-view.open failed'));
 
     casper.then(function testUserMenuNotVisible() {
-        test.assertExists('.user-menu', 'User menu nav item exists');
-        test.assertNotExists('.user-menu .dropdown.open', 'User menu should not be visible');
+        test.assertExists('.gh-nav-menu .gh-nav-menu-details-user', 'User menu nav item exists');
+        test.assertNotExists('.gh-nav-menu-details-user .user-menu-profile', 'User menu should not be visible');
     });
 
-    casper.thenClick('.user-menu .nav-label');
-    casper.waitForSelector('.user-menu .dropdown.open', function then() {
+    casper.thenClick('.gh-nav-menu');
+    casper.waitForSelector('.dropdown', function then() {
         var profileHref = this.getElementAttribute('.user-menu-profile', 'href'),
             signoutHref = this.getElementAttribute('.user-menu-signout', 'href');
 
-        test.assertVisible('.user-menu .dropdown-menu', 'User menu should be visible');
+        test.assertVisible('.dropdown-item.user-menu-profile', 'User menu should be visible');
 
-        test.assertExists('.user-menu-profile', 'Profile menu item exists');
-        test.assertSelectorHasText('.user-menu-profile', 'Your Profile',
+        test.assertExists('.dropdown-item.user-menu-profile', 'Profile menu item exists');
+        test.assertSelectorHasText('.dropdown-item.user-menu-profile', 'Your Profile',
             'Profile menu item has correct text');
         test.assertEquals(profileHref, '/ghost/settings/users/' + newUser.slug + '/', 'Profile href is correct');
 
diff --git a/core/test/functional/client/signin_test.js b/core/test/functional/client/signin_test.js
index dcc7276e31..68629ac5cd 100644
--- a/core/test/functional/client/signin_test.js
+++ b/core/test/functional/client/signin_test.js
@@ -39,7 +39,7 @@ CasperTest.begin('Login limit is in place', 4, function suite(test) {
         test.assertUrlMatch(/ghost\/signin\/$/, 'Landed on the correct URL');
     });
 
-    casper.waitForOpaque('.login-box',
+    casper.waitForOpaque('.gh-signin',
         function then() {
             this.fillAndSave('#login', falseUser);
         },
@@ -67,7 +67,7 @@ CasperTest.begin('Can login to Ghost', 5, function suite(test) {
         test.assertUrlMatch(/ghost\/signin\/$/, 'Landed on the correct URL');
     });
 
-    casper.waitForOpaque('.login-box', function then() {
+    casper.waitForOpaque('.gh-signin', function then() {
         this.fillAndSave('#login', user);
     });
 
@@ -90,7 +90,7 @@ CasperTest.begin('Authenticated user is redirected', 8, function suite(test) {
         test.assertUrlMatch(/ghost\/signin\/$/, 'Landed on the correct URL');
     });
 
-    casper.waitForOpaque('.login-box', function then() {
+    casper.waitForOpaque('.gh-signin', function then() {
         this.fillAndSave('#login', user);
     });