Cleaned up class and :contains based test selectors

no issue
- nav menu had many unused CSS classes that were sometimes used for test selectors
- `:contains` is not a native CSS selector so will cause issues when we switch to native test helpers

app/templates/components/gh-mobile-nav-bar.hbs

@@ -1,9 +1,9 @@
-{{#link-to "editor.new" classNames="gh-nav-main-editor"}}{{svg-jar "pen"}}New story{{/link-to}}
+{{#link-to "editor.new" data-test-mobile-nav="new-story"}}{{svg-jar "pen"}}New story{{/link-to}}
 {{#if (eq router.currentRouteName "posts.index")}}
-    {{#link-to "posts" (query-params type=null) classNames="gh-nav-main-content active"}}{{svg-jar "content"}}Stories{{/link-to}}
+    {{#link-to "posts" (query-params type=null) classNames="active" data-test-mobile-nav="stories"}}{{svg-jar "content"}}Stories{{/link-to}}
 {{else}}
-    {{#link-to "posts" classNames="gh-nav-main-content"}}{{svg-jar "content"}}Content{{/link-to}}
+    {{#link-to "posts"}}{{svg-jar "content" data-test-mobile-nav="stories"}}Content{{/link-to}}
 {{/if}}
-{{#link-to "team" classNames="gh-nav-main-users"}}{{svg-jar "account-group"}}Team{{/link-to}}
-<div class="gh-mobile-nav-bar-more" {{action "openMobileMenu" target=ui}}>{{svg-jar "icon" class="icon-gh"}}More</div>
+{{#link-to "team" classNames="gh-nav-main-users" data-test-mobile-nav="team"}}{{svg-jar "account-group"}}Team{{/link-to}}
+<div class="gh-mobile-nav-bar-more" {{action "openMobileMenu" target=ui data-test-mobile-nav="more"}}>{{svg-jar "icon" class="icon-gh"}}More</div>
 {{yield}}

app/templates/components/gh-nav-menu.hbs

@@ -10,12 +10,12 @@
     {{/dropdown.trigger}}
     {{#dropdown.content class="gh-nav-menu-dropdown"}}
         <ul class="dropdown-menu dropdown-triangle-top" role="menu" {{action dropdown.actions.close on="click" preventDefault=false}}>
-            <li role="presentation">{{#link-to "about" classNames="gh-nav-menu-about dropdown-item js-nav-item" role="menuitem" tabindex="-1"}}{{svg-jar "store"}} About Ghost{{/link-to}}</li>
+            <li role="presentation">{{#link-to "about" classNames="dropdown-item" role="menuitem" tabindex="-1" data-test-nav="about"}}{{svg-jar "store"}} About Ghost{{/link-to}}</li>
             <li class="divider"></li>
-            <li role="presentation">{{#link-to "team.user" session.user.slug classNames="dropdown-item user-menu-profile js-nav-item" role="menuitem" tabindex="-1"}}{{svg-jar "user-circle"}} Your Profile{{/link-to}}</li>
-            <li role="presentation"><a class="dropdown-item help-menu-support" role="menuitem" tabindex="-1" href="https://help.ghost.org/" target="_blank">{{svg-jar "ambulance"}} Support Center</a></li>
-            <li role="presentation"><a class="dropdown-item help-menu-tweet" role="menuitem" tabindex="-1" href="https://twitter.com/intent/tweet?text=%40TryGhost+Hi%21+Can+you+help+me+with+&related=TryGhost" target="_blank" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">{{svg-jar "twitter"}} Tweet @TryGhost!</a></li>
-            <li role="presentation"><a class="dropdown-item help-menu-how-to" role="menuitem" tabindex="-1" href="https://help.ghost.org/article/7-how-to-use-ghost" target="_blank">{{svg-jar "book-open"}} How to Use Ghost</a></li>
+            <li role="presentation">{{#link-to "team.user" session.user.slug classNames="dropdown-item" role="menuitem" tabindex="-1" data-test-nav="user-profile"}}{{svg-jar "user-circle"}} Your Profile{{/link-to}}</li>
+            <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="https://help.ghost.org/" target="_blank">{{svg-jar "ambulance"}} Support Center</a></li>
+            <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="https://twitter.com/intent/tweet?text=%40TryGhost+Hi%21+Can+you+help+me+with+&related=TryGhost" target="_blank" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">{{svg-jar "twitter"}} Tweet @TryGhost!</a></li>
+            <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="https://help.ghost.org/article/7-how-to-use-ghost" target="_blank">{{svg-jar "book-open"}} How to Use Ghost</a></li>
             <li class="divider"></li>
 
             {{#if showDropdownExtension}}
@@ -25,7 +25,7 @@
                     {{else}}
                         <li role="presentation">
                           <a href="{{menuItem.href}}" target="_blank"
-                             class="dropdown-item js-nav-item {{menuItem.classes}}"
+                             class="dropdown-item {{menuItem.classes}}"
                              role="menuitem" tabindex="-1">{{svg-jar menuItem.icon}}{{menuItem.text}}</a>
                         </li>
                     {{/if}}
@@ -41,31 +41,31 @@
         {{gh-search-input class="gh-nav-search-input"}}
     </section>
     <ul class="gh-nav-list gh-nav-main">
-        <li>{{#link-to "editor.new" classNames="gh-nav-main-editor"}}{{svg-jar "pen"}}New story{{/link-to}}</li>
+        <li>{{#link-to "editor.new" data-test-nav="new-story"}}{{svg-jar "pen"}}New story{{/link-to}}</li>
         <li>
             {{!-- clicking the Content link whilst on the content screen should reset the filter --}}
             {{#if (eq router.currentRouteName "posts.index")}}
-                {{#link-to "posts" (query-params type=null author=null tag=null order=null) classNames="gh-nav-main-content active"}}{{svg-jar "content"}}Stories{{/link-to}}
+                {{#link-to "posts" (query-params type=null author=null tag=null order=null) classNames="active" data-test-nav="stories"}}{{svg-jar "content"}}Stories{{/link-to}}
             {{else}}
-                {{#link-to "posts" classNames="gh-nav-main-content"}}{{svg-jar "content"}}Stories{{/link-to}}
+                {{#link-to "posts" data-test-nav="stories"}}{{svg-jar "content"}}Stories{{/link-to}}
             {{/if}}
         </li>
-        <li>{{#link-to "team" classNames="gh-nav-main-users"}}{{svg-jar "account-group"}}Team{{/link-to}}</li>
+        <li>{{#link-to "team" data-test-nav="team"}}{{svg-jar "account-group"}}Team{{/link-to}}</li>
         {{#if feature.subscribers}}
             {{#if (gh-user-can-admin session.user)}}
-                <li>{{#link-to "subscribers" classNames="gh-nav-main-subscribers"}}{{svg-jar "email"}}Subscribers{{/link-to}}</li>
+                <li>{{#link-to "subscribers" data-test-nav="subscribers"}}{{svg-jar "email"}}Subscribers{{/link-to}}</li>
             {{/if}}
         {{/if}}
     </ul>
     {{#if (gh-user-can-admin session.user)}}
         <ul class="gh-nav-list gh-nav-settings">
             <li class="gh-nav-list-h">Settings</li>
-            <li>{{#link-to "settings.general" classNames="gh-nav-settings-general"}}{{svg-jar "settings"}}General{{/link-to}}</li>
-            <li>{{#link-to "settings.design" classNames="gh-nav-settings-navigation"}}{{svg-jar "compass"}}Design{{/link-to}}</li>
-            <li>{{#link-to "settings.tags" classNames="gh-nav-settings-tags"}}{{svg-jar "tag"}}Tags{{/link-to}}</li>
-            <li>{{#link-to "settings.code-injection" classNames="gh-nav-settings-code-injection"}}{{svg-jar "brackets"}}Code injection{{/link-to}}</li>
-            <li>{{#link-to "settings.integrations" classNames="gh-nav-settings-apps"}}{{svg-jar "box"}}Integrations{{/link-to}}</li>
-            <li>{{#link-to "settings.labs" classNames="gh-nav-settings-labs"}}{{svg-jar "wrench-double"}}Labs{{/link-to}}</li>
+            <li>{{#link-to "settings.general" data-test-nav="settings"}}{{svg-jar "settings"}}General{{/link-to}}</li>
+            <li>{{#link-to "settings.design" data-test-nav="design"}}{{svg-jar "compass"}}Design{{/link-to}}</li>
+            <li>{{#link-to "settings.tags" data-test-nav="tags"}}{{svg-jar "tag"}}Tags{{/link-to}}</li>
+            <li>{{#link-to "settings.code-injection" data-test-nav="code-injection"}}{{svg-jar "brackets"}}Code injection{{/link-to}}</li>
+            <li>{{#link-to "settings.integrations" data-test-nav="integrations"}}{{svg-jar "box"}}Integrations{{/link-to}}</li>
+            <li>{{#link-to "settings.labs" data-test-nav="labs"}}{{svg-jar "wrench-double"}}Labs{{/link-to}}</li>
         </ul>
     {{/if}}
 

app/templates/components/modal-upload-theme.hbs

@@ -1,4 +1,4 @@
-<header class="modal-header">
+<header class="modal-header" data-test-modal="upload-theme">
     <h1>
         {{#if theme}}
             {{#if hasWarningsOrErrors}}

app/templates/editor.hbs

@@ -9,7 +9,7 @@
             <div class="flex items-center pe-auto">
                 {{#if ui.isFullScreen}}
                     <div class="{{ui-text "ts"}} h9 br b--lightgrey pl3 pr4 flex items-center br2 br--left {{unless infoMessage "bg-white"}}">
-                        {{#link-to "posts" classNames="blue link fw4 flex items-center"}}
+                        {{#link-to "posts" classNames="blue link fw4 flex items-center" data-test-link="stories"}}
                             {{svg-jar "arrow-left" class="w3 fill-blue mr1 nudge-right--2"}}
                             Stories
                         {{/link-to}}

app/templates/subscribers.hbs

@@ -2,9 +2,9 @@
     <header class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>Subscribers <span style="font-weight:200;margin-left:10px;display:inline-block;" data-test-total-subscribers> ({{total}})</span></h2>
         <div class="view-actions">
-            {{#link-to "subscribers.import" class="gh-btn gh-btn-hover-green"}}<span>Import CSV</span>{{/link-to}}
+            {{#link-to "subscribers.import" class="gh-btn gh-btn-hover-green" data-test-link="import-csv"}}<span>Import CSV</span>{{/link-to}}
             <a href="#" {{action 'exportData'}} class="gh-btn gh-btn-hover-blue"><span>Export CSV</span></a>
-            {{#link-to "subscribers.new" class="gh-btn gh-btn-green"}}<span>Add Subscriber</span>{{/link-to}}
+            {{#link-to "subscribers.new" class="gh-btn gh-btn-green" data-test-link="add-subscriber"}}<span>Add Subscriber</span>{{/link-to}}
         </div>
     </header>
 

tests/acceptance/error-handling-test.js

@@ -50,7 +50,7 @@ describe('Acceptance: Error Handling', function () {
                 expect(find('.gh-alert').text()).to.match(/refresh/);
 
                 // try navigating back to the content list
-                await click('.gh-nav-main-content');
+                await click('[data-test-link="stories"]');
 
                 expect(currentPath()).to.equal('editor.edit');
             });
@@ -61,7 +61,7 @@ describe('Acceptance: Error Handling', function () {
                 // mock the tags endpoint to return version mismatch
                 server.get('/tags/', versionMismatchResponse);
 
-                await click('.gh-nav-settings-tags');
+                await click('[data-test-nav="tags"]');
 
                 // navigation is blocked on loading screen
                 expect(currentPath()).to.equal('settings.tags_loading');
@@ -75,7 +75,7 @@ describe('Acceptance: Error Handling', function () {
                 server.get('/configuration/timezones/', versionMismatchResponse);
 
                 await visit('/settings/tags');
-                await click('.gh-nav-settings-general');
+                await click('[data-test-nav="settings"]');
 
                 // navigation is blocked
                 expect(currentPath()).to.equal('settings.general_loading');
@@ -89,7 +89,7 @@ describe('Acceptance: Error Handling', function () {
                 server.post('/subscribers/csv/', versionMismatchResponse);
 
                 await visit('/subscribers');
-                await click('.gh-btn:contains("Import CSV")');
+                await click('[data-test-link="import-csv"]');
                 await fileUpload('.fullscreen-modal input[type="file"]', ['test'], {name: 'test.csv'});
 
                 // alert is shown

tests/acceptance/settings/code-injection-test.js

@@ -77,7 +77,7 @@ describe('Acceptance: Settings - Code-Injection', function () {
             expect(document.title, 'page title').to.equal('Settings - Code injection - Test Blog');
 
             // highlights nav menu
-            expect($('.gh-nav-settings-code-injection').hasClass('active'), 'highlights nav menu item')
+            expect($('[data-test-nav="code-injection"]').hasClass('active'), 'highlights nav menu item')
                 .to.be.true;
 
             expect(find('[data-test-save-button]').text().trim(), 'save button text').to.equal('Save');

tests/acceptance/settings/design-test.js

@@ -245,7 +245,7 @@ describe('Acceptance: Settings - Design', function () {
             // theme upload displays modal
             await click('[data-test-upload-theme-button]');
             expect(
-                find('.fullscreen-modal .modal-content:contains("Upload a theme")').length,
+                find('[data-test-modal="upload-theme"]').length,
                 'theme upload modal displayed after button click'
             ).to.equal(1);
 

tests/acceptance/settings/general-test.js

@@ -75,7 +75,7 @@ describe('Acceptance: Settings - General', function () {
             expect(document.title, 'page title').to.equal('Settings - General - Test Blog');
 
             // highlights nav menu
-            expect($('.gh-nav-settings-general').hasClass('active'), 'highlights nav menu item')
+            expect($('[data-test-nav="settings"]').hasClass('active'), 'highlights nav menu item')
                 .to.be.true;
 
             expect(

tests/acceptance/settings/labs-test.js

@@ -73,7 +73,7 @@ describe('Acceptance: Settings - Labs', function () {
             expect(document.title, 'page title').to.equal('Settings - Labs - Test Blog');
 
             // highlights nav menu
-            expect($('.gh-nav-settings-labs').hasClass('active'), 'highlights nav menu item')
+            expect($('[data-test-nav="labs"]').hasClass('active'), 'highlights nav menu item')
                 .to.be.true;
 
             await click('#settings-resetdb .js-delete');

tests/acceptance/settings/tags-test.js

@@ -113,7 +113,7 @@ describe('Acceptance: Settings - Tags', function () {
             expect(document.title, 'page title').to.equal('Settings - Tags - Test Blog');
 
             // it highlights nav menu
-            expect($('.gh-nav-settings-tags').hasClass('active'), 'highlights nav menu item')
+            expect($('[data-test-nav="tags"]').hasClass('active'), 'highlights nav menu item')
                 .to.be.true;
 
             // it lists all tags

tests/acceptance/subscribers-test.js

@@ -30,7 +30,7 @@ describe('Acceptance: Subscribers', function () {
         await visit('/subscribers');
 
         expect(currentURL()).to.equal('/');
-        expect(find('.gh-nav-main a:contains("Subscribers")').length, 'sidebar link is visible')
+        expect(find('[data-test-nav="subscribers"]').length, 'sidebar link is visible')
             .to.equal(0);
     });
 
@@ -42,7 +42,7 @@ describe('Acceptance: Subscribers', function () {
         await visit('/subscribers');
 
         expect(currentURL()).to.equal('/');
-        expect(find('.gh-nav-main a:contains("Subscribers")').length, 'sidebar link is visible')
+        expect(find('[data-test-nav="subscribers"]').length, 'sidebar link is visible')
             .to.equal(0);
     });
 
@@ -54,7 +54,7 @@ describe('Acceptance: Subscribers', function () {
         await visit('/subscribers');
 
         expect(currentURL()).to.equal('/');
-        expect(find('.gh-nav-main a:contains("Subscribers")').length, 'sidebar link is visible')
+        expect(find('[data-test-nav="subscribers"]').length, 'sidebar link is visible')
             .to.equal(0);
     });
 
@@ -70,7 +70,7 @@ describe('Acceptance: Subscribers', function () {
             server.createList('subscriber', 40);
 
             await visit('/');
-            await click('.gh-nav-main a:contains("Subscribers")');
+            await click('[data-test-nav="subscribers"]');
 
             // it navigates to the correct page
             expect(currentPath()).to.equal('subscribers.index');
@@ -209,7 +209,7 @@ describe('Acceptance: Subscribers', function () {
                 .to.equal('(40)');
 
             // click the import subscribers button
-            await click('.gh-btn:contains("Import CSV")');
+            await click('[data-test-link="import-csv"]');
 
             // it displays the import subscribers modal
             expect(find('.fullscreen-modal').length, 'import subscribers modal displayed')
@@ -224,7 +224,7 @@ describe('Acceptance: Subscribers', function () {
             expect(find('.fullscreen-modal').length, 'import subscribers modal displayed after cancel')
                 .to.equal(0);
 
-            await click('.gh-btn:contains("Import CSV")');
+            await click('[data-test-link="import-csv"]');
             await fileUpload('.fullscreen-modal input[type="file"]', ['test'], {name: 'test.csv'});
 
             // modal title changes