github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-25 16:48:55 +08:00
Code Issues Actions1 Packages Projects Releases Wiki Activity

DEV: Switch sidebar section link identifier to data attribute ()

Browse Source 
Data attribute is less restrictive than relying on the class attribute
This commit is contained in:
Alan Guo Xiang Tan 2023-04-12 15:52:10 +08:00 committed by GitHub
parent 3b045a2016
commit 2eb60c9713
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 207 additions and 198 deletions

2
app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs

@ -10,6 +10,7 @@
target={{this.target}}
class={{this.classNames}}
title={{@title}}
data-link-name={{@linkName}}
...attributes
>
<Sidebar::SectionLinkPrefix
@ -33,6 +34,7 @@
@models={{this.models}}
@current-when={{@currentWhen}}
title={{@title}}
data-link-name={{@linkName}}
...attributes
>

10
app/assets/javascripts/discourse/app/components/sidebar/section-link.js

@ -27,16 +27,6 @@ export default class SectionLink extends Component {
get classNames() {
let classNames = ["sidebar-section-link", "sidebar-row"];
if (this.args.linkName) {
classNames.push(
`sidebar-section-link-${this.args.linkName
.split(" ")
.filter((s) => s)
.join("-")
.toLowerCase()}`
);
}
if (this.args.class) {
classNames.push(this.args.class);
}

8
app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-categories-section-test.js

@ -53,7 +53,7 @@ acceptance("Sidebar - Anonymous - Categories Section", function (needs) {
);
assert.ok(
exists("a.sidebar-section-link-all-categories"),
exists("a.sidebar-section-link[data-link-name='all-categories']"),
"all categories link is visible"
);
});
@ -97,7 +97,7 @@ acceptance("Sidebar - Anonymous - Categories Section", function (needs) {
);
assert.ok(
exists("a.sidebar-section-link-all-categories"),
exists("a.sidebar-section-link[data-link-name='all-categories']"),
"all categories link is visible"
);
});
@ -118,7 +118,7 @@ acceptance("Sidebar - Anonymous - Categories Section", function (needs) {
assert.strictEqual(categories[2].textContent.trim(), "bug");
assert.ok(
exists("a.sidebar-section-link-all-categories"),
exists("a.sidebar-section-link[data-link-name='all-categories']"),
"all categories link is visible"
);
});
@ -138,7 +138,7 @@ acceptance("Sidebar - Anonymous - Categories Section", function (needs) {
assert.notOk(
exists(
`.sidebar-section[data-section-name='categories'] .sidebar-section-link-${firstCategory.slug}`
`.sidebar-section[data-section-name='categories'] .sidebar-section-link[data-link-name='${firstCategory.slug}']`
),
"category section link is not shown in sidebar after being marked as uncategorized"
);

2
app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-community-section-test.js

@ -80,7 +80,7 @@ acceptance("Sidebar - Anonymous user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-users"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='users']"
),
"users section link is not shown in sidebar"
);

4
app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-tags-section-test.js

@ -31,7 +31,7 @@ acceptance("Sidebar - Anonymous Tags Section", function (needs) {
assert.strictEqual(categories[2].textContent.trim(), "fun");
assert.ok(
exists("a.sidebar-section-link-all-tags"),
exists("a.sidebar-section-link[data-link-name='all-tags']"),
"all tags link is visible"
);
});
@ -50,7 +50,7 @@ acceptance("Sidebar - Anonymous Tags Section", function (needs) {
assert.strictEqual(categories[1].textContent.trim(), "meta");
assert.ok(
exists("a.sidebar-section-link-all-tags"),
exists("a.sidebar-section-link[data-link-name='all-tags']"),
"all tags link is visible"
);
});

12
app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js

@ -439,7 +439,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
);
const myCustomTopSectionLink = query(
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content-secondary .sidebar-section-link-my-custom-top"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content-secondary .sidebar-section-link[data-link-name='my-custom-top']"
);
assert.ok(
@ -501,7 +501,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
await visit("/");
const customLatestSectionLink = query(
".sidebar-section[data-section-name='community'] .sidebar-section-link-latest"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='latest']"
);
assert.ok(
@ -525,7 +525,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
);
const customUnreadSectionLink = query(
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-unreads"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='my-unreads']"
);
assert.ok(
@ -545,7 +545,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
);
const customTopSectionLInk = query(
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-custom-top"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='my-custom-top']"
);
assert.ok(
@ -554,7 +554,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
);
const openBugsSectionLink = query(
".sidebar-section[data-section-name='community'] .sidebar-section-link-open-bugs"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='open-bugs']"
);
assert.ok(
@ -576,7 +576,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-favourite-topic.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='my-favourite-topic'].active"
),
"displays my favourite topic custom section link when current route matches the link's route"
);

22
app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js

@ -43,7 +43,7 @@ acceptance(
assert.strictEqual(
count(
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link[data-link-name='all-categories'])"
),
1,
"there should only be one section link under the section"
@ -165,13 +165,13 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='categories'] .sidebar-section-link-configure-categories"
".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-link-name='configure-categories']"
),
"section link to add categories to sidebar is displayed"
);
await click(
".sidebar-section[data-section-name='categories'] .sidebar-section-link-configure-categories"
".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-link-name='configure-categories']"
);
assert.strictEqual(
@ -243,7 +243,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit("/");
const categorySectionLinks = queryAll(
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link[data-link-name='all-categories'])"
);
const categoryNames = [...categorySectionLinks].map((categorySectionLink) =>
@ -306,7 +306,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit("/");
const categorySectionLinks = queryAll(
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link[data-link-name='all-categories'])"
);
const categoryNames = [...categorySectionLinks].map((categorySectionLink) =>
@ -369,7 +369,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit("/");
const categorySectionLinks = queryAll(
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link[data-link-name='all-categories'])"
);
const categoryNames = [...categorySectionLinks].map((categorySectionLink) =>
@ -397,7 +397,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
assert.strictEqual(
count(
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link[data-link-name='all-categories'])"
),
4,
"there should only be 4 section link under the section"
@ -959,11 +959,15 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit("/");
assert.ok(
exists(".sidebar-section-link-configure-default-sidebar-categories"),
exists(
".sidebar-section-link[data-link-name='configure-default-sidebar-categories']"
),
"section link to configure default sidebar categories is shown"
);
await click(".sidebar-section-link-configure-default-sidebar-categories");
await click(
".sidebar-section-link[data-link-name='configure-default-sidebar-categories']"
);
assert.strictEqual(
currentURL(),

144
app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js

@ -153,7 +153,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
test("clicking on everything link", async function (assert) {
await visit("/t/280");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything']"
);
assert.strictEqual(
@ -172,7 +172,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything'].active"
),
"the everything link is marked as active"
);
@ -185,7 +185,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/t/280");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything']"
);
assert.strictEqual(
currentURL(),
@ -203,7 +203,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything'].active"
),
"the everything link is marked as active"
);
@ -225,7 +225,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
});
await visit("/t/280");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything']"
);
assert.strictEqual(
@ -244,7 +244,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything'].active"
),
"the everything link is marked as active"
);
@ -274,7 +274,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
});
await visit("/t/280");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything']"
);
assert.strictEqual(
@ -293,7 +293,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything'].active"
),
"the everything link is marked as active"
);
@ -304,7 +304,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-users"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='users']"
),
"users link is not displayed in sidebar when it is not the active route"
);
@ -314,7 +314,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-users"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='users']"
);
assert.strictEqual(
@ -333,7 +333,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-users.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='users'].active"
),
"the users link is marked as active"
);
@ -350,7 +350,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-users.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='users'].active"
),
"users link is displayed in sidebar when it is the active route"
);
@ -367,7 +367,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-users"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='users']"
),
"users section link is not displayed in sidebar"
);
@ -381,7 +381,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-badges"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='badges']"
);
assert.strictEqual(
@ -402,7 +402,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-badges"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='badges']"
),
"badges section link is not shown in sidebar"
);
@ -413,7 +413,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-groups"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='groups']"
),
"groups link is not displayed in sidebar when it is not the active route"
);
@ -423,7 +423,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-groups"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='groups']"
);
assert.strictEqual(
@ -442,7 +442,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-groups.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='groups'].active"
),
"the groups link is marked as active"
);
@ -459,7 +459,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-groups.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='groups'].active"
),
"groups link is displayed in sidebar when it is the active route"
);
@ -476,7 +476,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-groups"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='groups']"
),
"groups section link is not shown in sidebar"
);
@ -490,7 +490,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-about"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='about']"
);
assert.strictEqual(
@ -501,7 +501,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-about.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='about'].active"
),
"about section link link is displayed in the main section and marked as active"
);
@ -515,7 +515,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-faq"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='faq']"
);
assert.strictEqual(
@ -536,7 +536,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.strictEqual(
query(
".sidebar-section[data-section-name='community'] .sidebar-section-link-faq"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='faq']"
).href,
"http://some.faq.url/",
"href attribute is set to custom FAQ URL on the section link"
@ -546,7 +546,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
test("navigating to admin from sidebar", async function (assert) {
await visit("/");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-admin"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='admin']"
);
assert.strictEqual(currentRouteName(), "admin.dashboard.general");
@ -559,7 +559,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-admin"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='admin']"
)
);
});
@ -567,7 +567,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
test("clicking on my posts link", async function (assert) {
await visit("/t/280");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='my-posts']"
);
assert.strictEqual(
@ -586,7 +586,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='my-posts'].active"
),
"the my posts link is marked as active"
);
@ -595,7 +595,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='my-posts'].active"
),
"the my posts link is not marked as active when user has no drafts and visiting the user activity drafts URL"
);
@ -609,7 +609,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
});
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='my-posts']"
);
assert.strictEqual(
@ -628,7 +628,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='my-posts'].active"
),
"the my posts link is marked as active"
);
@ -637,7 +637,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='my-posts'].active"
),
"the my posts link is marked as active"
);
@ -647,7 +647,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
assert.strictEqual(
query(".sidebar-section-link-my-posts").title,
query(".sidebar-section-link[data-link-name='my-posts']").title,
I18n.t("sidebar.sections.community.links.my_posts.title"),
"displays the default title when no drafts are present"
);
@ -657,7 +657,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
});
assert.strictEqual(
query(".sidebar-section-link-my-posts").title,
query(".sidebar-section-link[data-link-name='my-posts']").title,
I18n.t("sidebar.sections.community.links.my_posts.title_drafts"),
"displays the draft title when drafts are present"
);
@ -671,7 +671,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
assert.strictEqual(
query(".sidebar-section-link-my-posts").textContent.trim(),
query(
".sidebar-section-link[data-link-name='my-posts']"
).textContent.trim(),
I18n.t("sidebar.sections.community.links.my_posts.content"),
"displays the default text when no drafts are present"
);
@ -682,14 +684,14 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.strictEqual(
query(
".sidebar-section-link-my-posts .sidebar-section-link-content-text"
".sidebar-section-link[data-link-name='my-posts'] .sidebar-section-link-content-text"
).textContent.trim(),
I18n.t("sidebar.sections.community.links.my_posts.content_drafts"),
"displays the text that's appropriate for when drafts are present"
);
assert.strictEqual(
query(
".sidebar-section-link-my-posts .sidebar-section-link-content-badge"
".sidebar-section-link[data-link-name='my-posts'] .sidebar-section-link-content-badge"
).textContent.trim(),
"1",
"displays the draft count with no text"
@ -709,7 +711,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything'].active"
),
"the everything link is marked as active"
);
@ -728,7 +730,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything'].active"
),
"the everything link is marked as active"
);
@ -747,7 +749,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything'].active"
),
"the everything link is marked as active"
);
@ -784,7 +786,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
assert.ok(
exists(".sidebar-section-link-everything .sidebar-section-link-suffix"),
exists(
".sidebar-section-link[data-link-name='everything'] .sidebar-section-link-suffix"
),
"shows suffix indicator for unread posts on everything link"
);
@ -800,7 +804,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
});
assert.ok(
exists(".sidebar-section-link-everything .sidebar-section-link-suffix"),
exists(
".sidebar-section-link[data-link-name='everything'] .sidebar-section-link-suffix"
),
"shows suffix indicator for new topics on categories link"
);
@ -816,7 +822,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
});
assert.ok(
!exists(".sidebar-section-link-everything .sidebar-section-link-suffix"),
!exists(
".sidebar-section-link[data-link-name='everything'] .sidebar-section-link-suffix"
),
"it removes the suffix indicator when all topics are read"
);
});
@ -873,7 +881,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.strictEqual(
query(
".sidebar-section-link-everything .sidebar-section-link-content-badge"
".sidebar-section-link[data-link-name='everything'] .sidebar-section-link-content-badge"
).textContent.trim(),
"3 unread",
"it displays the right unread count"
@ -892,7 +900,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.strictEqual(
query(
".sidebar-section-link-everything .sidebar-section-link-content-badge"
".sidebar-section-link[data-link-name='everything'] .sidebar-section-link-content-badge"
).textContent.trim(),
"2 unread",
"it updates the unread count"
@ -922,7 +930,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.strictEqual(
query(
".sidebar-section-link-everything .sidebar-section-link-content-badge"
".sidebar-section-link[data-link-name='everything'] .sidebar-section-link-content-badge"
).textContent.trim(),
"1 new",
"it displays the new count once there are no unread topics"
@ -940,7 +948,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
!exists(
".sidebar-section-link-everything .sidebar-section-link-content-badge"
".sidebar-section-link[data-link-name='everything'] .sidebar-section-link-content-badge"
),
"it removes new count once there are no new topics"
);
@ -953,7 +961,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-review"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='review']"
),
"review link is not shown"
);
@ -964,7 +972,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-review"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='review']"
),
"review link is not shown"
);
@ -980,7 +988,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-review.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='review'].active"
),
"review link is shown as active when visiting the review route even if there are no pending reviewables"
);
@ -989,7 +997,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-review"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='review']"
),
"review link is not shown as part of the main section links"
);
@ -1000,7 +1008,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content .sidebar-section-link-review"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content .sidebar-section-link[data-link-name='review']"
),
"review link is displayed in the more drawer"
);
@ -1011,14 +1019,14 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-review"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='review']"
),
"review link is shown as part of the main section links"
);
assert.strictEqual(
query(
".sidebar-section[data-section-name='community'] .sidebar-section-link-review .sidebar-section-link-content-badge"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='review'] .sidebar-section-link-content-badge"
).textContent.trim(),
"34 pending",
"displays the pending reviewable count"
@ -1030,7 +1038,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content .sidebar-section-link-review"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content .sidebar-section-link[data-link-name='review']"
),
"review link is not displayed in the more drawer"
);
@ -1053,18 +1061,20 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
assert.strictEqual(
query(".sidebar-section-link-unread").textContent.trim(),
query(
".sidebar-section-link[data-link-name='unread']"
).textContent.trim(),
"unread topics",
"displays the right text for the link"
);
assert.strictEqual(
query(".sidebar-section-link-unread").title,
query(".sidebar-section-link[data-link-name='unread']").title,
"List of unread topics",
"displays the right title for the link"
);
await click(".sidebar-section-link-unread");
await click(".sidebar-section-link[data-link-name='unread']");
assert.strictEqual(currentURL(), "/unread", "links to the right URL");
});
@ -1108,7 +1118,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
await click(".sidebar-section-link-user-summary");
await click(".sidebar-section-link[data-link-name='user-summary']");
assert.strictEqual(
currentURL(),
@ -1117,13 +1127,15 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
assert.strictEqual(
query(".sidebar-section-link-user-summary").textContent.trim(),
query(
".sidebar-section-link[data-link-name='user-summary']"
).textContent.trim(),
"my summary",
"displays the right text for the link"
);
assert.strictEqual(
query(".sidebar-section-link-user-summary").title,
query(".sidebar-section-link[data-link-name='user-summary']").title,
"eviltrout summary",
"displays the right title for the link"
);
@ -1183,7 +1195,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything .sidebar-section-link-content-badge"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything'] .sidebar-section-link-content-badge"
).textContent.trim(),
"2",
"count is 2 because there's 1 unread topic and 1 new topic"
@ -1218,7 +1230,7 @@ acceptance(
assert.true(
query(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything']"
).href.endsWith("/new"),
"links to /new because there are 1 new and 1 unread topics"
);
@ -1234,7 +1246,7 @@ acceptance(
assert.true(
query(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything']"
).href.endsWith("/new"),
"links to /new because there is 1 unread topic"
);
@ -1250,7 +1262,7 @@ acceptance(
assert.true(
query(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything']"
).href.endsWith("/latest"),
"links to /latest because there are no unread or new topics"
);
@ -1266,7 +1278,7 @@ acceptance(
assert.true(
query(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
".sidebar-section[data-section-name='community'] .sidebar-section-link[data-link-name='everything']"
).href.endsWith("/new"),
"links to /new because there is 1 new topic"
);

44
app/assets/javascripts/discourse/tests/acceptance/sidebar-user-messages-section-test.js

@ -103,7 +103,7 @@ acceptance(
assert.ok(
exists(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='personal-messages-inbox']"
),
"displays the personal message inbox link"
);
@ -117,12 +117,12 @@ acceptance(
);
await click(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='personal-messages-inbox']"
);
assert.ok(
exists(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox.active"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='personal-messages-inbox'].active"
),
"personal message inbox link is marked as active"
);
@ -141,11 +141,11 @@ acceptance(
await visit("/");
await click(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='personal-messages-inbox']"
);
await click(
`.sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-${type}`
`.sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='personal-messages-${type}']`
);
assert.strictEqual(
@ -164,21 +164,21 @@ acceptance(
assert.ok(
exists(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox.active"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='personal-messages-inbox'].active"
),
"personal message inbox link is marked as active"
);
assert.ok(
exists(
`.sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-${type}.active`
`.sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='personal-messages-${type}'].active`
),
`personal message ${type} link is marked as active`
);
assert.notOk(
exists(
`.sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-${type} .sidebar-section-link-prefix`
`.sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='personal-messages-${type}'] .sidebar-section-link-prefix`
),
`prefix is not displayed for ${type} personal message section link`
);
@ -236,7 +236,7 @@ acceptance(
);
await click(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-inbox.group3"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='group-messages-inbox'].group3"
);
assert.strictEqual(
@ -278,11 +278,11 @@ acceptance(
await visit("/");
await click(
`.sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-inbox.group1`
`.sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='group-messages-inbox'].group1`
);
await click(
`.sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-${type}.group1`
`.sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='group-messages-${type}'].group1`
);
assert.strictEqual(
@ -301,14 +301,14 @@ acceptance(
assert.ok(
exists(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-inbox.group1.active"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='group-messages-inbox'].group1.active"
),
"group1 group message inbox link is marked as active"
);
assert.ok(
exists(
`.sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-${type}.group1.active`
`.sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='group-messages-${type}'].group1.active`
),
`group1 group message ${type} link is marked as active`
);
@ -407,7 +407,7 @@ acceptance(
);
await click(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-inbox.group1"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='group-messages-inbox'].group1"
);
await publishToMessageBus(pmTopicTrackingState.groupChannel(1), {
@ -434,7 +434,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-unread.group1"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='group-messages-unread'].group1"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.unread_with_count", {
count: 1,
@ -444,7 +444,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-new.group1"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='group-messages-new'].group1"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.new_with_count", {
count: 1,
@ -465,7 +465,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-new.group1"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='group-messages-new'].group1"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.new"),
"removes count for group1 new inbox filter link"
@ -480,7 +480,7 @@ acceptance(
);
await click(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='personal-messages-inbox']"
);
await publishToMessageBus(pmTopicTrackingState.userChannel(), {
@ -496,7 +496,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-unread"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='personal-messages-unread']"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.unread_with_count", {
count: 1,
@ -517,7 +517,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-unread"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='personal-messages-unread']"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.unread_with_count", {
count: 2,
@ -538,7 +538,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-new"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='personal-messages-new']"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.new_with_count", {
count: 1,
@ -559,7 +559,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-new"
".sidebar-section[data-section-name='messages'] .sidebar-section-link[data-link-name='personal-messages-new']"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.new"),
"removes the count from the new inbox filter link"

16
app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js

@ -144,13 +144,13 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
assert.ok(
exists(
".sidebar-section[data-section-name='tags'] .sidebar-section-link-configure-tags"
".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-link-name='configure-tags']"
),
"section link to add tags to sidebar is displayed"
);
await click(
".sidebar-section[data-section-name='tags'] .sidebar-section-link-configure-tags"
".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-link-name='configure-tags']"
);
assert.strictEqual(
@ -164,7 +164,7 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
await visit("/");
const tagSectionLinks = queryAll(
".sidebar-section[data-section-name='tags'] .sidebar-section-link:not(.sidebar-section-link-all-tags)"
".sidebar-section[data-section-name='tags'] .sidebar-section-link:not(.sidebar-section-link[data-link-name='all-tags'])"
);
const tagNames = [...tagSectionLinks].map((tagSectionLink) =>
@ -183,7 +183,7 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
assert.strictEqual(
count(
".sidebar-section[data-section-name='tags'] .sidebar-section-link:not(.sidebar-section-link-all-tags)"
".sidebar-section[data-section-name='tags'] .sidebar-section-link:not(.sidebar-section-link[data-link-name='all-tags'])"
),
4,
"4 section links under the section"
@ -675,11 +675,15 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
await visit("/");
assert.ok(
exists(".sidebar-section-link-configure-default-sidebar-tags"),
exists(
".sidebar-section-link[data-link-name='configure-default-sidebar-tags']"
),
"section link to configure default sidebar tags is shown"
);
await click(".sidebar-section-link-configure-default-sidebar-tags");
await click(
".sidebar-section-link[data-link-name='configure-default-sidebar-tags']"
);
assert.strictEqual(
currentURL(),

16
app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js

@ -25,12 +25,7 @@ module("Integration | Component | sidebar | section-link", function (hooks) {
containsExactly(
assert,
query("a").classList,
[
"ember-view",
"sidebar-row",
"sidebar-section-link",
"sidebar-section-link-test-meta",
],
["ember-view", "sidebar-row", "sidebar-section-link"],
"has the right class attribute for the link"
);
});
@ -43,14 +38,7 @@ module("Integration | Component | sidebar | section-link", function (hooks) {
containsExactly(
assert,
query("a").classList,
[
"123",
"abc",
"ember-view",
"sidebar-row",
"sidebar-section-link",
"sidebar-section-link-test-meta",
],
["123", "abc", "ember-view", "sidebar-row", "sidebar-section-link"],
"has the right class attribute for the link"
);
});

14
app/assets/stylesheets/common/base/sidebar-section-link.scss

@ -69,13 +69,13 @@
}
}
.sidebar-section-link-personal-messages-sent,
.sidebar-section-link-personal-messages-new,
.sidebar-section-link-personal-messages-archive,
.sidebar-section-link-personal-messages-unread,
.sidebar-section-link-group-messages-new,
.sidebar-section-link-group-messages-unread,
.sidebar-section-link-group-messages-archive {
.sidebar-section-link[data-link-name="personal-messages-sent"],
.sidebar-section-link[data-link-name="personal-messages-new"],
.sidebar-section-link[data-link-name="personal-messages-archive"],
.sidebar-section-link[data-link-name="personal-messages-unread"],
.sidebar-section-link[data-link-name="group-messages-new"],
.sidebar-section-link[data-link-name="group-messages-unread"],
.sidebar-section-link[data-link-name="group-messages-archive"] {
.sidebar-section-link-content-text {
margin-left: calc(
var(--d-sidebar-section-link-prefix-margin-right) +

40
plugins/chat/spec/system/navigation_spec.rb

@ -10,6 +10,7 @@ RSpec.describe "Navigation", type: :system, js: true do
fab!(:message) { Fabricate(:chat_message, chat_channel: category_channel) }
let(:chat_page) { PageObjects::Pages::Chat.new }
let(:sidebar_page) { PageObjects::Pages::Sidebar.new }
let(:sidebar_component) { PageObjects::Components::Sidebar.new }
let(:chat_drawer_page) { PageObjects::Pages::ChatDrawer.new }
before do
@ -134,7 +135,7 @@ RSpec.describe "Navigation", type: :system, js: true do
visit("/t/-/#{topic.id}")
chat_page.open_from_header
chat_drawer_page.close
find("a[class*='sidebar-section-link-#{category_channel.slug}']").click
sidebar_component.click_link(category_channel.name)
expect(page).to have_css(".chat-message-container[data-id='#{message.id}']")
end
@ -146,7 +147,7 @@ RSpec.describe "Navigation", type: :system, js: true do
chat_page.open_from_header
chat_drawer_page.maximize
visit("/")
find("a[class*='sidebar-section-link-#{category_channel.slug}']").click
sidebar_component.click_link(category_channel.name)
expect(page).to have_current_path(
chat.channel_path(category_channel.slug, category_channel.id),
@ -247,23 +248,19 @@ RSpec.describe "Navigation", type: :system, js: true do
it "activates the channel in the sidebar" do
visit("/chat/c/#{category_channel.slug}/#{category_channel.id}")
expect(page).to have_css(
".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
)
expect(sidebar_component).to have_section_link(category_channel.name, active: true)
end
it "does not have multiple channels marked active in the sidebar" do
chat_page.visit_channel(dm_channel)
expect(page).to have_css(
".sidebar-section-link-#{other_user.username}.sidebar-section-link--active",
)
page.find(".sidebar-section-link-#{category_channel.slug}").click
expect(page).to have_css(
".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
)
expect(sidebar_component).to have_section_link(other_user.username, active: true)
expect(page).to have_css(".sidebar-section-link--active", count: 1)
sidebar_component.click_section_link(category_channel.name)
expect(sidebar_component).to have_section_link(category_channel.name, active: true)
expect(sidebar_component).to have_one_active_section_link
end
end
@ -280,9 +277,7 @@ RSpec.describe "Navigation", type: :system, js: true do
visit("/chat/c/#{category_channel.slug}/#{category_channel.id}")
find("#site-logo").click
expect(page).not_to have_css(
".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
)
expect(sidebar_component).not_to have_section_link(category_channel.name, active: true)
end
end
@ -290,11 +285,9 @@ RSpec.describe "Navigation", type: :system, js: true do
it "activates the channel in the sidebar" do
visit("/")
chat_page.open_from_header
find("a[class*='#{category_channel.slug}']").click
sidebar_component.click_link(category_channel.name)
expect(page).to have_css(
".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
)
expect(sidebar_component).to have_section_link(category_channel.name, active: true)
end
end
@ -302,12 +295,11 @@ RSpec.describe "Navigation", type: :system, js: true do
it "deactivates the channel in the sidebar" do
visit("/")
chat_page.open_from_header
find("a[class*='sidebar-section-link-#{category_channel.slug}']").click
sidebar_component.click_link(category_channel.name)
chat_drawer_page.close
expect(page).not_to have_css(
".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
)
expect(sidebar_component).not_to have_section_link(category_channel.name, active: true)
end
end
end

15
plugins/chat/spec/system/sidebar_navigation_menu_spec.rb

@ -2,6 +2,7 @@
RSpec.describe "Sidebar navigation menu", type: :system, js: true do
let(:sidebar_page) { PageObjects::Pages::Sidebar.new }
let(:sidebar_component) { PageObjects::Components::Sidebar.new }
fab!(:current_user) { Fabricate(:user) }
@ -30,7 +31,7 @@ RSpec.describe "Sidebar navigation menu", type: :system, js: true do
visit("/")
expect(sidebar_page.channels_section).to have_css(
".sidebar-section-link-#{channel_1.slug} .sidebar-section-link-prefix svg.prefix-icon.d-icon-d-chat",
".sidebar-section-link[data-link-name='#{channel_1.slug}'] .sidebar-section-link-prefix svg.prefix-icon.d-icon-d-chat",
)
end
@ -53,7 +54,7 @@ RSpec.describe "Sidebar navigation menu", type: :system, js: true do
visit("/")
expect(sidebar_page.channels_section).to have_css(
".sidebar-section-link-#{private_channel_1.slug} .sidebar-section-link-prefix svg.prefix-badge.d-icon-lock",
".sidebar-section-link[data-link-name='#{private_channel_1.slug}'] .sidebar-section-link-prefix svg.prefix-badge.d-icon-lock",
)
end
end
@ -67,7 +68,7 @@ RSpec.describe "Sidebar navigation menu", type: :system, js: true do
visit("/")
expect(sidebar_page.channels_section).to have_css(
".sidebar-section-link-#{channel_1.slug} .emoji",
".sidebar-section-link[data-link-name='#{channel_1.slug}'] .emoji",
)
end
end
@ -88,7 +89,7 @@ RSpec.describe "Sidebar navigation menu", type: :system, js: true do
visit("/")
expect(sidebar_page.channels_section).to have_css(
".sidebar-section-link-#{channel_2.slug}.sidebar-section-link--muted",
".sidebar-section-link[data-link-name='#{channel_2.slug}'].sidebar-section-link--muted",
)
end
end
@ -100,7 +101,11 @@ RSpec.describe "Sidebar navigation menu", type: :system, js: true do
visit("/")
expect(
sidebar_page.channels_section.find(".sidebar-section-link-#{channel_1.slug}")["title"],
sidebar_page.channels_section.find(
".sidebar-section-link[data-link-name='#{channel_1.slug}']",
)[
"title"
],
).to eq("&lt;script&gt;alert(&#x27;hello&#x27;)&lt;/script&gt;")
end
end

35
spec/system/custom_sidebar_sections_spec.rb

@ -31,7 +31,7 @@ describe "Custom sidebar sections", type: :system, js: true do
section_modal.save
expect(sidebar).to have_section("My section")
expect(sidebar).to have_link("Sidebar Tags")
expect(sidebar).to have_section_link("Sidebar Tags")
end
it "allows the user to create custom section with /my link" do
@ -51,7 +51,7 @@ describe "Custom sidebar sections", type: :system, js: true do
section_modal.save
expect(sidebar).to have_section("My section")
expect(sidebar).to have_link("My preferences")
expect(sidebar).to have_section_link("My preferences")
end
it "allows the user to create custom section with external link" do
@ -74,7 +74,7 @@ describe "Custom sidebar sections", type: :system, js: true do
section_modal.save
expect(sidebar).to have_section("My section")
expect(sidebar).to have_link("Discourse Homepage", href: "https://discourse.org")
expect(sidebar).to have_section_link("Discourse Homepage", href: "https://discourse.org")
end
it "allows the user to edit custom section" do
@ -97,9 +97,9 @@ describe "Custom sidebar sections", type: :system, js: true do
section_modal.save
expect(sidebar).to have_section("Edited section")
expect(sidebar).to have_link("Edited Tag")
expect(sidebar).to have_section_link("Edited Tag")
expect(page).not_to have_link("Sidebar Categories")
expect(sidebar).not_to have_section_link("Sidebar Categories")
end
it "allows the user to reorder links in custom section" do
@ -111,22 +111,25 @@ describe "Custom sidebar sections", type: :system, js: true do
sign_in user
visit("/latest")
within(".sidebar-custom-sections .sidebar-section-link-wrapper:nth-child(1)") do
expect(page).to have_css(".sidebar-section-link-sidebar-tags")
end
within(".sidebar-custom-sections .sidebar-section-link-wrapper:nth-child(2)") do
expect(page).to have_css(".sidebar-section-link-sidebar-categories")
expect(sidebar).to have_section_link("Sidebar Tags")
end
tags_link = find(".sidebar-section-link-sidebar-tags")
categories_link = find(".sidebar-section-link-sidebar-categories")
within(".sidebar-custom-sections .sidebar-section-link-wrapper:nth-child(2)") do
expect(sidebar).to have_section_link("Sidebar Categories")
end
tags_link = find(".sidebar-section-link[data-link-name='Sidebar Tags']")
categories_link = find(".sidebar-section-link[data-link-name='Sidebar Categories']")
tags_link.drag_to(categories_link, html5: true, delay: 0.4)
within(".sidebar-custom-sections .sidebar-section-link-wrapper:nth-child(1)") do
expect(page).to have_css(".sidebar-section-link-sidebar-categories")
expect(sidebar).to have_section_link("Sidebar Categories")
end
within(".sidebar-custom-sections .sidebar-section-link-wrapper:nth-child(2)") do
expect(page).to have_css(".sidebar-section-link-sidebar-tags")
expect(sidebar).to have_section_link("Sidebar Tags")
end
end
@ -180,7 +183,7 @@ describe "Custom sidebar sections", type: :system, js: true do
section_modal.save
expect(sidebar).to have_section("Public section")
expect(sidebar).to have_link("Sidebar Tags")
expect(sidebar).to have_section_link("Sidebar Tags")
expect(page).to have_css(".sidebar-section[data-section-name='public-section'] .d-icon-globe")
sidebar.edit_custom_section("Public section")
@ -205,8 +208,8 @@ describe "Custom sidebar sections", type: :system, js: true do
visit("/latest")
expect(sidebar).to have_section("Public section")
expect(sidebar).to have_link("Sidebar Tags")
expect(sidebar).to have_link("Sidebar Categories")
expect(sidebar).to have_section_link("Sidebar Tags")
expect(sidebar).to have_section_link("Sidebar Categories")
end
it "validates custom section fields" do

16
spec/system/page_objects/components/sidebar.rb

@ -27,10 +27,22 @@ module PageObjects
).click
end
def has_link?(name, href: nil)
SIDEBAR_SECTION_LINK_SELECTOR = "sidebar-section-link"
def click_section_link(name)
find(".#{SIDEBAR_SECTION_LINK_SELECTOR}", text: name).click
end
def has_one_active_section_link?
has_css?(".#{SIDEBAR_SECTION_LINK_SELECTOR}--active", count: 1)
end
def has_section_link?(name, href: nil, active: false)
attributes = {}
attributes[:href] = href if href
page.has_link?(name, attributes)
attributes[:class] = SIDEBAR_SECTION_LINK_SELECTOR
attributes[:class] += "--active" if active
has_link?(name, **attributes)
end
def custom_section_modal_title

5
spec/system/page_objects/components/sidebar_header_dropdown.rb

@ -31,10 +31,7 @@ module PageObjects
end
def click_everything_link
page.click_link(
I18n.t("js.sidebar.sections.community.links.everything.content"),
class: "sidebar-section-link-everything",
)
find(".sidebar-section-link[data-link-name='everything']").click
end
def click_toggle_to_desktop_view_button