From eb585f9c02ef462233730826f07290d3041cbd81 Mon Sep 17 00:00:00 2001 From: Stephen Sauceda Date: Mon, 3 Oct 2022 14:49:21 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20active=20state=20bug=20i?= =?UTF-8?q?n=20sidebar=20nav=20(#15511)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit closes: https://github.com/TryGhost/Ghost/issues/15506 - The sidebar items that don't open the editor were missing some relative current-when attributes so the nested views weren't considered "active". --- .../admin/app/components/gh-nav-menu/main.hbs | 8 +++---- ghost/admin/tests/acceptance/members-test.js | 18 +++++++++++++++ ghost/admin/tests/acceptance/offers-test.js | 22 +++++++++++++++++++ .../tests/acceptance/settings/tags-test.js | 11 ++++++++++ ghost/admin/tests/helpers/members.js | 6 +++++ 5 files changed, 61 insertions(+), 4 deletions(-) diff --git a/ghost/admin/app/components/gh-nav-menu/main.hbs b/ghost/admin/app/components/gh-nav-menu/main.hbs index 95af0b88fb..0e41523c7b 100644 --- a/ghost/admin/app/components/gh-nav-menu/main.hbs +++ b/ghost/admin/app/components/gh-nav-menu/main.hbs @@ -87,18 +87,18 @@ {{/if}} {{#if this.showTagsNavigation}} -
  • {{svg-jar "tag"}}Tags
    • +
  • {{svg-jar "tag"}}Tags
    • {{/if}} {{#if (gh-user-can-admin this.session.user)}}
  • {{#if (eq this.router.currentRouteName "members.index")}} - {{svg-jar "members"}}Members + {{svg-jar "members"}}Members {{#unless this.memberCountLoading}} {{format-number this.membersStats.memberCount}} {{/unless}} {{else}} - {{svg-jar "members"}}Members + {{svg-jar "members"}}Members {{#unless this.memberCountLoading}} {{format-number this.membersStats.memberCount}} {{/unless}} @@ -108,7 +108,7 @@ {{#if this.settings.paidMembersEnabled}}
  • - {{svg-jar "percentage"}}Offers + {{svg-jar "percentage"}}Offers
    • {{/if}} {{/if}} diff --git a/ghost/admin/tests/acceptance/members-test.js b/ghost/admin/tests/acceptance/members-test.js index 86bdbc4424..59cdcc2e6e 100644 --- a/ghost/admin/tests/acceptance/members-test.js +++ b/ghost/admin/tests/acceptance/members-test.js @@ -56,6 +56,12 @@ describe('Acceptance: Members', function () { expect(findAll('[data-test-list="members-list-item"]').length, 'members list count') .to.equal(2); + // it highlights active state in nav menu + expect( + find('[data-test-nav="members"]'), + 'highlights nav menu item' + ).to.have.class('active'); + let member = find('[data-test-list="members-list-item"]'); expect(member.querySelector('.gh-members-list-name').textContent, 'member list item title') .to.equal(member1.name); @@ -73,6 +79,12 @@ describe('Acceptance: Members', function () { expect(find('[data-test-input="member-email"]').value, 'loads correct email into form') .to.equal(member1.email); + // it maintains active state in nav menu + expect( + find('[data-test-nav="members"]'), + 'highlights nav menu item' + ).to.have.class('active'); + // trigger save await fillIn('[data-test-input="member-name"]', 'New Name'); await blur('[data-test-input="member-name"]'); @@ -109,6 +121,12 @@ describe('Acceptance: Members', function () { expect(find('.gh-canvas-header h2').textContent, 'settings pane title') .to.contain('New'); + // it highlights active state in nav menu + expect( + find('[data-test-nav="members"]'), + 'highlights nav menu item' + ).to.have.class('active'); + // all fields start blank findAll('.gh-member-settings-primary .gh-input').forEach(function (elem) { expect(elem.value, `input field for ${elem.getAttribute('name')}`) diff --git a/ghost/admin/tests/acceptance/offers-test.js b/ghost/admin/tests/acceptance/offers-test.js index 53f9121d60..404c1f2cdd 100644 --- a/ghost/admin/tests/acceptance/offers-test.js +++ b/ghost/admin/tests/acceptance/offers-test.js @@ -2,6 +2,7 @@ import moment from 'moment-timezone'; import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support'; import {beforeEach, describe, it} from 'mocha'; import {blur, click, currentURL, fillIn, find, findAll, settled} from '@ember/test-helpers'; +import {enablePaidMembers} from '../helpers/members'; import {expect} from 'chai'; import {setupApplicationTest} from 'ember-mocha'; import {setupMirage} from 'ember-cli-mirage/test-support'; @@ -38,6 +39,8 @@ describe('Acceptance: Offers', function () { let role = this.server.create('role', {name: 'Owner'}); this.server.create('user', {roles: [role]}); + enablePaidMembers(this.server); + return await authenticateSession(); }); @@ -56,6 +59,12 @@ describe('Acceptance: Offers', function () { // it has correct page title expect(document.title, 'page title').to.equal('Offers - Test Blog'); + // it highlights active state in nav menu + expect( + find('[data-test-nav="offers"]'), + 'highlights nav menu item' + ).to.have.class('active'); + // it lists all offers expect(findAll('[data-test-list="offers-list-item"]').length, 'offers list count') .to.equal(2); @@ -73,6 +82,12 @@ describe('Acceptance: Offers', function () { expect(find('[data-test-input="offer-name"]').value, 'loads correct offer into form') .to.equal(offer1.name); + // it maintains active state in nav menu + expect( + find('[data-test-nav="offers"]'), + 'highlights nav menu item' + ).to.have.class('active'); + // trigger save await fillIn('[data-test-input="offer-name"]', 'New Name'); await blur('[data-test-input="offer-name"]'); @@ -88,5 +103,12 @@ describe('Acceptance: Offers', function () { // lands on correct page expect(currentURL(), 'currentURL').to.equal('/offers'); }); + + it('maintains active state in nav menu when creating a new tag', async function () { + await visit('offers/new'); + expect(currentURL()).to.equal('offers/new'); + expect(find('[data-test-nav="offers"]'), 'highlights nav menu item') + .to.have.class('active'); + }); }); }); diff --git a/ghost/admin/tests/acceptance/settings/tags-test.js b/ghost/admin/tests/acceptance/settings/tags-test.js index e58375ea5e..687a720364 100644 --- a/ghost/admin/tests/acceptance/settings/tags-test.js +++ b/ghost/admin/tests/acceptance/settings/tags-test.js @@ -94,6 +94,10 @@ describe('Acceptance: Tags', function () { await visit('tags'); await click(`[data-test-tag="${tag.id}"] [data-test-tag-name]`); + // it maintains active state in nav menu + expect(find('[data-test-nav="tags"]'), 'highlights nav menu item') + .to.have.class('active'); + expect(currentURL()).to.equal('/tags/to-be-edited'); expect(find('[data-test-input="tag-name"]')).to.have.value('To be edited'); @@ -156,5 +160,12 @@ describe('Acceptance: Tags', function () { expect(currentRouteName()).to.equal('error404'); expect(currentURL()).to.equal('/tags/unknown'); }); + + it('maintains active state in nav menu when creating a new tag', async function () { + await visit('tags/new'); + expect(currentURL()).to.equal('tags/new'); + expect(find('[data-test-nav="tags"]'), 'highlights nav menu item') + .to.have.class('active'); + }); }); }); diff --git a/ghost/admin/tests/helpers/members.js b/ghost/admin/tests/helpers/members.js index 3130c79b68..a65a14769c 100644 --- a/ghost/admin/tests/helpers/members.js +++ b/ghost/admin/tests/helpers/members.js @@ -13,3 +13,9 @@ export function disableMembers(server) { ? server.db.settings.update({key: 'members_signup_access'}, {value: 'none'}) : server.create('setting', {key: 'members_signup_access', value: 'none', group: 'members'}); } + +export function enablePaidMembers(server) { + server.db.settings.find({key: 'paid_members_enabled'}) + ? server.db.settings.update({key: 'paid_members_enabled'}, {value: true}) + : server.create('setting', {key: 'paid_members_enabled', value: true, group: 'members'}); +}