github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 13:13:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Switch to data attributes to represent sidebar section name (#20771)

Browse Source 
Data attributes are less restrictive than the class attribute.
This commit is contained in:
Alan Guo Xiang Tan 2023-03-23 13:09:45 +08:00 committed by GitHub
parent d87e78616d
commit 2d46824a87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 455 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/discourse/app/components/sidebar/section.hbs
View File

@ -1,9 +1,7 @@
{{#if this.displaySection}}
<div
class={{concat-class
(concat "sidebar-section-wrapper sidebar-section-" @sectionName)
@class
}}
class={{concat "sidebar-section-wrapper sidebar-section" @class}}
data-section-name={{@sectionName}}
>
<div class="sidebar-section-header-wrapper sidebar-row">
<Sidebar::SectionHeader

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

@ -18,7 +18,7 @@ acceptance("Sidebar - Anonymous - Categories Section", function (needs) {
await visit("/");
const categorySectionLinks = queryAll(
".sidebar-section-categories .sidebar-section-link-wrapper"
".sidebar-section[data-section-name='categories'] .sidebar-section-link-wrapper"
);
const sidebarCategories = Site.current()
@ -64,7 +64,7 @@ acceptance("Sidebar - Anonymous - Categories Section", function (needs) {
await visit("/");
const categories = queryAll(
".sidebar-section-categories .sidebar-section-link-wrapper"
".sidebar-section[data-section-name='categories'] .sidebar-section-link-wrapper"
);
const siteCategories = Site.current().categories;
@ -109,7 +109,7 @@ acceptance("Sidebar - Anonymous - Categories Section", function (needs) {
await visit("/");
const categories = queryAll(
".sidebar-section-categories .sidebar-section-link-wrapper"
".sidebar-section[data-section-name='categories'] .sidebar-section-link-wrapper"
);
assert.strictEqual(categories.length, 4);
@ -138,7 +138,7 @@ acceptance("Sidebar - Anonymous - Categories Section", function (needs) {
assert.notOk(
exists(
`.sidebar-section-categories .sidebar-section-link-${firstCategory.slug}`
`.sidebar-section[data-section-name='categories'] .sidebar-section-link-${firstCategory.slug}`
),
"category section link is not shown in sidebar after being marked as uncategorized"
);

12
app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-community-section-test.js
View File

@ -24,14 +24,14 @@ acceptance("Sidebar - Anonymous user - Community Section", function (needs) {
assert.strictEqual(
query(
".sidebar-section-community .sidebar-section-message"
".sidebar-section[data-section-name='community'] .sidebar-section-message"
).textContent.trim(),
this.siteSettings.short_site_description,
"displays the short site description under the community section"
);
const sectionLinks = queryAll(
".sidebar-section-community .sidebar-section-link"
".sidebar-section[data-section-name='community'] .sidebar-section-link"
);
assert.strictEqual(
@ -45,7 +45,7 @@ acceptance("Sidebar - Anonymous user - Community Section", function (needs) {
await visit("/");
const sectionLinks = queryAll(
".sidebar-section-community .sidebar-section-link"
".sidebar-section[data-section-name='community'] .sidebar-section-link"
);
assert.strictEqual(
@ -79,7 +79,9 @@ acceptance("Sidebar - Anonymous user - Community Section", function (needs) {
await visit("/");
assert.notOk(
exists(".sidebar-section-community .sidebar-section-link-users"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-users"
),
"users section link is not shown in sidebar"
);
});
@ -88,7 +90,7 @@ acceptance("Sidebar - Anonymous user - Community Section", function (needs) {
await visit("/");
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
const sectionLinks = queryAll(

14
app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-tags-section-test.js
View File

@ -22,7 +22,7 @@ acceptance("Sidebar - Anonymous Tags Section", function (needs) {
await visit("/");
const categories = queryAll(
".sidebar-section-tags .sidebar-section-link-wrapper"
".sidebar-section[data-section-name='tags'] .sidebar-section-link-wrapper"
);
assert.strictEqual(categories.length, 4);
@ -43,7 +43,7 @@ acceptance("Sidebar - Anonymous Tags Section", function (needs) {
await visit("/");
const categories = queryAll(
".sidebar-section-tags .sidebar-section-link-wrapper"
".sidebar-section[data-section-name='tags'] .sidebar-section-link-wrapper"
);
assert.strictEqual(categories.length, 3);
assert.strictEqual(categories[0].textContent.trim(), "random");
@ -60,7 +60,10 @@ acceptance("Sidebar - Anonymous Tags Section", function (needs) {
await visit("/");
assert.ok(!exists(".sidebar-section-tags"), "section is not visible");
assert.ok(
!exists(".sidebar-section[data-section-name='tags']"),
"section is not visible"
);
});
test("tag section is hidden when anonymous has no visible top tags and site has not default sidebar tags configured", async function (assert) {
@ -73,6 +76,9 @@ acceptance("Sidebar - Anonymous Tags Section", function (needs) {
await visit("/");
assert.ok(!exists(".sidebar-section-tags"), "section is not visible");
assert.ok(
!exists(".sidebar-section[data-section-name='tags']"),
"section is not visible"
);
});
});

38
app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
View File

@ -218,26 +218,26 @@ acceptance("Sidebar - Plugin API", function (needs) {
assert.strictEqual(
query(
".sidebar-section-test-chat-channels .sidebar-section-header-text"
".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-header-text"
).textContent.trim(),
"chat channels text",
"displays header with correct text"
);
await click(
".sidebar-section-test-chat-channels .sidebar-section-header-dropdown summary"
".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-header-dropdown summary"
);
assert.strictEqual(
queryAll(
".sidebar-section-test-chat-channels .sidebar-section-header-dropdown .select-kit-collection li"
".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-header-dropdown .select-kit-collection li"
).length,
2,
"displays two actions"
);
const actions = queryAll(
".sidebar-section-test-chat-channels .sidebar-section-header-dropdown .select-kit-collection li"
".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-header-dropdown .select-kit-collection li"
);
assert.strictEqual(
@ -253,7 +253,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
);
const links = queryAll(
".sidebar-section-test-chat-channels .sidebar-section-link"
".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-link"
);
assert.strictEqual(
@ -402,7 +402,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
assert.strictEqual(
query(
".sidebar-section-test-chat-channels .sidebar-section-header-text"
".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-header-text"
).textContent.trim(),
"chat channels text",
"displays header with correct text"
@ -414,7 +414,9 @@ acceptance("Sidebar - Plugin API", function (needs) {
);
assert.ok(
!exists(".sidebar-section-test-chat-channels .sidebar-section-content a"),
!exists(
".sidebar-section[data-section-name='test-chat-channels'] .sidebar-section-content a"
),
"displays no links"
);
});
@ -433,11 +435,11 @@ acceptance("Sidebar - Plugin API", function (needs) {
await visit("/");
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
const myCustomTopSectionLink = query(
".sidebar-section-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-my-custom-top"
);
assert.ok(
@ -499,7 +501,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
await visit("/");
const customLatestSectionLink = query(
".sidebar-section-community .sidebar-section-link-latest"
".sidebar-section[data-section-name='community'] .sidebar-section-link-latest"
);
assert.ok(
@ -519,11 +521,11 @@ acceptance("Sidebar - Plugin API", function (needs) {
);
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
const customUnreadSectionLink = query(
".sidebar-section-community .sidebar-section-link-my-unreads"
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-unreads"
);
assert.ok(
@ -543,7 +545,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
);
const customTopSectionLInk = query(
".sidebar-section-community .sidebar-section-link-my-custom-top"
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-custom-top"
);
assert.ok(
@ -552,7 +554,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
);
const openBugsSectionLink = query(
".sidebar-section-community .sidebar-section-link-open-bugs"
".sidebar-section[data-section-name='community'] .sidebar-section-link-open-bugs"
);
assert.ok(
@ -567,14 +569,14 @@ acceptance("Sidebar - Plugin API", function (needs) {
// close more links
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
await visit("/t/internationalization-localization/280");
assert.ok(
exists(
".sidebar-section-community .sidebar-section-link-my-favourite-topic.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-favourite-topic.active"
),
"displays my favourite topic custom section link when current route matches the link's route"
);
@ -583,7 +585,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
assert.notOk(
exists(
".sidebar-section-community .sidebar-section-link-my-favourite-topic.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-favourite-topic.active"
),
"does not display my favourite topic custom section link when current route does not match the link's route"
);
@ -629,7 +631,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
await visit("/");
assert.notOk(
exists(".sidebar-section-test-chat-channels"),
exists(".sidebar-section[data-section-name='test-chat-channels']"),
"does not display the section"
);
});

70
app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
View File

@ -43,7 +43,7 @@ acceptance(
assert.strictEqual(
count(
".sidebar-section-categories .sidebar-section-link:not(.sidebar-section-link-all-categories)"
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
),
1,
"there should only be one section link under the section"
@ -113,10 +113,14 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
setupUserSidebarCategories();
await visit("/t/280");
await click(".sidebar-section-categories .sidebar-section-header");
await click(
".sidebar-section[data-section-name='categories'] .sidebar-section-header"
);
assert.notOk(
exists(".sidebar-section-categories .sidebar-section-content"),
exists(
".sidebar-section[data-section-name='categories'] .sidebar-section-content"
),
"hides the content of the section"
);
});
@ -125,7 +129,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
setupUserSidebarCategories();
await visit("/");
await click(".sidebar-section-categories .sidebar-section-header-button");
await click(
".sidebar-section[data-section-name='categories'] .sidebar-section-header-button"
);
assert.strictEqual(
currentURL(),
@ -140,7 +146,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit("/");
assert.notOk(
exists(".sidebar-section-categories"),
exists(".sidebar-section[data-section-name='categories']"),
"categories section is not shown"
);
});
@ -153,19 +159,19 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit("/");
assert.ok(
exists(".sidebar-section-categories"),
exists(".sidebar-section[data-section-name='categories']"),
"categories section is shown"
);
assert.ok(
exists(
".sidebar-section-categories .sidebar-section-link-configure-categories"
".sidebar-section[data-section-name='categories'] .sidebar-section-link-configure-categories"
),
"section link to add categories to sidebar is displayed"
);
await click(
".sidebar-section-categories .sidebar-section-link-configure-categories"
".sidebar-section[data-section-name='categories'] .sidebar-section-link-configure-categories"
);
assert.strictEqual(
@ -237,7 +243,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit("/");
const categorySectionLinks = queryAll(
".sidebar-section-categories .sidebar-section-link:not(.sidebar-section-link-all-categories)"
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
);
const categoryNames = [...categorySectionLinks].map((categorySectionLink) =>
@ -300,7 +306,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit("/");
const categorySectionLinks = queryAll(
".sidebar-section-categories .sidebar-section-link:not(.sidebar-section-link-all-categories)"
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
);
const categoryNames = [...categorySectionLinks].map((categorySectionLink) =>
@ -363,7 +369,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit("/");
const categorySectionLinks = queryAll(
".sidebar-section-categories .sidebar-section-link:not(.sidebar-section-link-all-categories)"
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
);
const categoryNames = [...categorySectionLinks].map((categorySectionLink) =>
@ -391,7 +397,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
assert.strictEqual(
count(
".sidebar-section-categories .sidebar-section-link:not(.sidebar-section-link-all-categories)"
".sidebar-section[data-section-name='categories'] .sidebar-section-link:not(.sidebar-section-link-all-categories)"
),
4,
"there should only be 4 section link under the section"
@ -421,7 +427,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-categories .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -442,7 +450,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-categories .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -486,7 +496,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-categories .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -526,7 +538,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-categories .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -574,7 +588,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-categories .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -626,7 +642,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit(`/c/${category1.slug}/${category1.id}/l/new`);
assert.strictEqual(
count(".sidebar-section-categories .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -645,7 +663,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit(`/c/${category1.slug}/${category1.id}/l/unread`);
assert.strictEqual(
count(".sidebar-section-categories .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -664,7 +684,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit(`/c/${category1.slug}/${category1.id}/l/top`);
assert.strictEqual(
count(".sidebar-section-categories .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -683,7 +705,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit(`/c/${category1.slug}/${category1.id}/none`);
assert.strictEqual(
count(".sidebar-section-categories .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -702,7 +726,9 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
await visit(`/c/${category1.slug}/${category1.id}/all`);
assert.strictEqual(
count(".sidebar-section-categories .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='categories'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);

274
app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js
View File

@ -47,14 +47,18 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
test("clicking on section header button", async function (assert) {
await visit("/");
await click(".sidebar-section-community .sidebar-section-header-button");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-header-button"
);
assert.ok(exists("#reply-control"), "it opens the composer");
});
test("clicking on section header button while viewing a category", async function (assert) {
await visit("/c/bug");
await click(".sidebar-section-community .sidebar-section-header-button");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-header-button"
);
assert.ok(exists("#reply-control"), "it opens the composer");
@ -69,27 +73,39 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/t/280");
assert.ok(
exists(".sidebar-section-community .sidebar-section-content"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-content"
),
"shows content section"
);
assert.strictEqual(
query(".sidebar-section-community .sidebar-section-header").title,
query(
".sidebar-section[data-section-name='community'] .sidebar-section-header"
).title,
I18n.t("sidebar.toggle_section"),
"caret has the right title"
);
await click(".sidebar-section-community .sidebar-section-header");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-header"
);
assert.notOk(
exists(".sidebar-section-community .sidebar-section-content"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-content"
),
"hides the content of the section"
);
await click(".sidebar-section-community .sidebar-section-header");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-header"
);
assert.ok(
exists(".sidebar-section-community .sidebar-section-content"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-content"
),
"shows content section"
);
});
@ -99,36 +115,36 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
assert.ok(
exists(
".sidebar-section-community .sidebar-more-section-links-details-content"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content"
),
"additional section links are displayed"
);
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
assert.notOk(
exists(
".sidebar-section-community .sidebar-more-section-links-details-content"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content"
),
"additional section links are hidden"
);
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
await click("#main-outlet");
assert.notOk(
exists(
".sidebar-section-community .sidebar-more-section-links-details-content"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-content"
),
"additional section links are hidden when clicking outside"
);
@ -136,7 +152,9 @@ 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-community .sidebar-section-link-everything");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
);
assert.strictEqual(
currentURL(),
@ -145,14 +163,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-community .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
assert.ok(
exists(
".sidebar-section-community .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
),
"the everything link is marked as active"
);
@ -164,7 +184,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
});
await visit("/t/280");
await click(".sidebar-section-community .sidebar-section-link-everything");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
);
assert.strictEqual(
currentURL(),
"/latest",
@ -172,14 +194,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-community .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
assert.ok(
exists(
".sidebar-section-community .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
),
"the everything link is marked as active"
);
@ -200,7 +224,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
sidebar_list_destination: "unread_new",
});
await visit("/t/280");
await click(".sidebar-section-community .sidebar-section-link-everything");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
);
assert.strictEqual(
currentURL(),
@ -209,14 +235,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-community .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
assert.ok(
exists(
".sidebar-section-community .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
),
"the everything link is marked as active"
);
@ -245,7 +273,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
sidebar_list_destination: "unread_new",
});
await visit("/t/280");
await click(".sidebar-section-community .sidebar-section-link-everything");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
);
assert.strictEqual(
currentURL(),
@ -254,14 +284,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-community .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
assert.ok(
exists(
".sidebar-section-community .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
),
"the everything link is marked as active"
);
@ -271,15 +303,19 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/t/280");
assert.notOk(
exists(".sidebar-section-community .sidebar-section-link-users"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-users"
),
"users link is not displayed in sidebar when it is not the active route"
);
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
await click(".sidebar-section-community .sidebar-section-link-users");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-users"
);
assert.strictEqual(
currentURL(),
@ -288,19 +324,23 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-community .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
assert.ok(
exists(".sidebar-section-community .sidebar-section-link-users.active"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-users.active"
),
"the users link is marked as active"
);
assert.strictEqual(
query(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
).textContent.trim(),
I18n.t("sidebar.more"),
"displays the right count as users link is currently active"
@ -309,7 +349,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/u");
assert.ok(
exists(".sidebar-section-community .sidebar-section-link-users.active"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-users.active"
),
"users link is displayed in sidebar when it is the active route"
);
});
@ -320,11 +362,13 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
assert.notOk(
exists(".sidebar-section-community .sidebar-section-link-users"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-users"
),
"users section link is not displayed in sidebar"
);
});
@ -333,10 +377,12 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
await click(".sidebar-section-community .sidebar-section-link-badges");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-badges"
);
assert.strictEqual(
currentURL(),
@ -351,11 +397,13 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
assert.notOk(
exists(".sidebar-section-community .sidebar-section-link-badges"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-badges"
),
"badges section link is not shown in sidebar"
);
});
@ -364,15 +412,19 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/t/280");
assert.notOk(
exists(".sidebar-section-community .sidebar-section-link-groups"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-groups"
),
"groups link is not displayed in sidebar when it is not the active route"
);
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
await click(".sidebar-section-community .sidebar-section-link-groups");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-groups"
);
assert.strictEqual(
currentURL(),
@ -381,19 +433,23 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-community .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
assert.ok(
exists(".sidebar-section-community .sidebar-section-link-groups.active"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-groups.active"
),
"the groups link is marked as active"
);
assert.strictEqual(
query(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
).textContent.trim(),
I18n.t("sidebar.more"),
"displays the right count as groups link is currently active"
@ -402,7 +458,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/g");
assert.ok(
exists(".sidebar-section-community .sidebar-section-link-groups.active"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-groups.active"
),
"groups link is displayed in sidebar when it is the active route"
);
});
@ -413,11 +471,13 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
assert.notOk(
exists(".sidebar-section-community .sidebar-section-link-groups"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-groups"
),
"groups section link is not shown in sidebar"
);
});
@ -426,10 +486,12 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
await click(".sidebar-section-community .sidebar-section-link-about");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-about"
);
assert.strictEqual(
currentURL(),
@ -438,7 +500,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
assert.ok(
exists(".sidebar-section-community .sidebar-section-link-about.active"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-about.active"
),
"about section link link is displayed in the main section and marked as active"
);
});
@ -447,10 +511,12 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
await click(".sidebar-section-community .sidebar-section-link-faq");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-faq"
);
assert.strictEqual(
currentURL(),
@ -465,11 +531,13 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
assert.strictEqual(
query(".sidebar-section-community .sidebar-section-link-faq").href,
query(
".sidebar-section[data-section-name='community'] .sidebar-section-link-faq"
).href,
"http://some.faq.url/",
"href attribute is set to custom FAQ URL on the section link"
);
@ -477,7 +545,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
test("navigating to admin from sidebar", async function (assert) {
await visit("/");
await click(".sidebar-section-community .sidebar-section-link-admin");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-admin"
);
assert.strictEqual(currentRouteName(), "admin.dashboard.general");
});
@ -488,13 +558,17 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
assert.notOk(
exists(".sidebar-section-community .sidebar-section-link-admin")
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-admin"
)
);
});
test("clicking on my posts link", async function (assert) {
await visit("/t/280");
await click(".sidebar-section-community .sidebar-section-link-my-posts");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts"
);
assert.strictEqual(
currentURL(),
@ -503,14 +577,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-community .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
assert.ok(
exists(
".sidebar-section-community .sidebar-section-link-my-posts.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts.active"
),
"the my posts link is marked as active"
);
@ -519,7 +595,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.notOk(
exists(
".sidebar-section-community .sidebar-section-link-my-posts.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts.active"
),
"the my posts link is not marked as active when user has no drafts and visiting the user activity drafts URL"
);
@ -532,7 +608,9 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
draft_count: 1,
});
await click(".sidebar-section-community .sidebar-section-link-my-posts");
await click(
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts"
);
assert.strictEqual(
currentURL(),
@ -541,14 +619,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-community .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
assert.ok(
exists(
".sidebar-section-community .sidebar-section-link-my-posts.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts.active"
),
"the my posts link is marked as active"
);
@ -557,7 +637,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.ok(
exists(
".sidebar-section-community .sidebar-section-link-my-posts.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link-my-posts.active"
),
"the my posts link is marked as active"
);
@ -620,14 +700,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/top");
assert.strictEqual(
count(".sidebar-section-community .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
assert.ok(
exists(
".sidebar-section-community .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
),
"the everything link is marked as active"
);
@ -637,14 +719,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/unread");
assert.strictEqual(
count(".sidebar-section-community .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
assert.ok(
exists(
".sidebar-section-community .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
),
"the everything link is marked as active"
);
@ -654,14 +738,16 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/new");
assert.strictEqual(
count(".sidebar-section-community .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='community'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
assert.ok(
exists(
".sidebar-section-community .sidebar-section-link-everything.active"
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything.active"
),
"the everything link is marked as active"
);
@ -866,16 +952,20 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
assert.notOk(
exists(".sidebar-section-community .sidebar-section-link-review"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-review"
),
"review link is not shown"
);
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
assert.notOk(
exists(".sidebar-section-community .sidebar-section-link-review"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-review"
),
"review link is not shown"
);
});
@ -889,24 +979,28 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/reivew");
assert.notOk(
exists(".sidebar-section-community .sidebar-section-link-review.active"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-review.active"
),
"review link is shown as active when visiting the review route even if there are no pending reviewables"
);
await visit("/");
assert.notOk(
exists(".sidebar-section-community .sidebar-section-link-review"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-review"
),
"review link is not shown as part of the main section links"
);
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
assert.ok(
exists(
".sidebar-section-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-review"
),
"review link is displayed in the more drawer"
);
@ -916,25 +1010,27 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
});
assert.ok(
exists(".sidebar-section-community .sidebar-section-link-review"),
exists(
".sidebar-section[data-section-name='community'] .sidebar-section-link-review"
),
"review link is shown as part of the main section links"
);
assert.strictEqual(
query(
".sidebar-section-community .sidebar-section-link-review .sidebar-section-link-content-badge"
".sidebar-section[data-section-name='community'] .sidebar-section-link-review .sidebar-section-link-content-badge"
).textContent.trim(),
"34 pending",
"displays the pending reviewable count"
);
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
assert.notOk(
exists(
".sidebar-section-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-review"
),
"review link is not displayed in the more drawer"
);
@ -953,7 +1049,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
assert.strictEqual(
@ -1009,7 +1105,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
await visit("/");
await click(
".sidebar-section-community .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
);
await click(".sidebar-section-link-user-summary");
@ -1087,7 +1183,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section-community .sidebar-section-link-everything .sidebar-section-link-content-badge"
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything .sidebar-section-link-content-badge"
).textContent.trim(),
"2",
"count is 2 because there's 1 unread topic and 1 new topic"
@ -1122,7 +1218,7 @@ acceptance(
assert.true(
query(
".sidebar-section-community .sidebar-section-link-everything"
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
).href.endsWith("/new"),
"links to /new because there are 1 new and 1 unread topics"
);
@ -1138,7 +1234,7 @@ acceptance(
assert.true(
query(
".sidebar-section-community .sidebar-section-link-everything"
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
).href.endsWith("/new"),
"links to /new because there is 1 unread topic"
);
@ -1154,7 +1250,7 @@ acceptance(
assert.true(
query(
".sidebar-section-community .sidebar-section-link-everything"
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
).href.endsWith("/latest"),
"links to /latest because there are no unread or new topics"
);
@ -1170,7 +1266,7 @@ acceptance(
assert.true(
query(
".sidebar-section-community .sidebar-section-link-everything"
".sidebar-section[data-section-name='community'] .sidebar-section-link-everything"
).href.endsWith("/new"),
"links to /new because there is 1 new topic"
);

112
app/assets/javascripts/discourse/tests/acceptance/sidebar-user-messages-section-test.js
View File

@ -29,7 +29,7 @@ acceptance(
await visit("/");
assert.ok(
!exists(".sidebar-section-messages"),
!exists(".sidebar-section[data-section-name='messages']"),
"does not display messages section in sidebar"
);
});
@ -74,7 +74,9 @@ acceptance(
test("clicking on section header button", async function (assert) {
await visit("/");
await click(".sidebar-section-messages .sidebar-section-header-button");
await click(
".sidebar-section[data-section-name='messages'] .sidebar-section-header-button"
);
assert.ok(
exists("#reply-control.private-message"),
@ -84,10 +86,14 @@ acceptance(
test("clicking on section header link", async function (assert) {
await visit("/");
await click(".sidebar-section-messages .sidebar-section-header");
await click(
".sidebar-section[data-section-name='messages'] .sidebar-section-header"
);
assert.notOk(
exists(".sidebar-section-messages .sidebar-section-content"),
exists(
".sidebar-section[data-section-name='messages'] .sidebar-section-content"
),
"hides the content of the section"
);
});
@ -97,30 +103,34 @@ acceptance(
assert.ok(
exists(
".sidebar-section-messages .sidebar-section-link-personal-messages-inbox"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox"
),
"displays the personal message inbox link"
);
assert.strictEqual(
count(".sidebar-section-messages .sidebar-section-link"),
count(
".sidebar-section[data-section-name='messages'] .sidebar-section-link"
),
1,
"only displays the personal message inbox link"
);
await click(
".sidebar-section-messages .sidebar-section-link-personal-messages-inbox"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox"
);
assert.ok(
exists(
".sidebar-section-messages .sidebar-section-link-personal-messages-inbox.active"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox.active"
),
"personal message inbox link is marked as active"
);
assert.strictEqual(
count(".sidebar-section-messages .sidebar-section-link"),
count(
".sidebar-section[data-section-name='messages'] .sidebar-section-link"
),
5,
"expands and displays the links for personal messages"
);
@ -131,11 +141,11 @@ acceptance(
await visit("/");
await click(
".sidebar-section-messages .sidebar-section-link-personal-messages-inbox"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox"
);
await click(
`.sidebar-section-messages .sidebar-section-link-personal-messages-${type}`
`.sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-${type}`
);
assert.strictEqual(
@ -145,28 +155,30 @@ acceptance(
);
assert.strictEqual(
count(".sidebar-section-messages .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='messages'] .sidebar-section-link.active"
),
2,
"only two links are marked as active in the sidebar"
);
assert.ok(
exists(
".sidebar-section-messages .sidebar-section-link-personal-messages-inbox.active"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox.active"
),
"personal message inbox link is marked as active"
);
assert.ok(
exists(
`.sidebar-section-messages .sidebar-section-link-personal-messages-${type}.active`
`.sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-${type}.active`
),
`personal message ${type} link is marked as active`
);
assert.notOk(
exists(
`.sidebar-section-messages .sidebar-section-link-personal-messages-${type} .sidebar-section-link-prefix`
`.sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-${type} .sidebar-section-link-prefix`
),
`prefix is not displayed for ${type} personal message section link`
);
@ -194,7 +206,7 @@ acceptance(
await visit("/");
const groupSectionLinks = queryAll(
".sidebar-section-messages .sidebar-section-link"
".sidebar-section[data-section-name='messages'] .sidebar-section-link"
);
assert.deepEqual(
@ -208,29 +220,37 @@ acceptance(
await visit("/u/eviltrout/messages/group/GrOuP1");
assert.strictEqual(
count(".sidebar-section-messages .sidebar-section-link"),
count(
".sidebar-section[data-section-name='messages'] .sidebar-section-link"
),
6,
"expands and displays the links for group1 group messages"
);
assert.strictEqual(
count(".sidebar-section-messages .sidebar-section-link.group1"),
count(
".sidebar-section[data-section-name='messages'] .sidebar-section-link.group1"
),
4,
"expands the links for group1 group messages"
);
await click(
".sidebar-section-messages .sidebar-section-link-group-messages-inbox.group3"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-inbox.group3"
);
assert.strictEqual(
count(".sidebar-section-messages .sidebar-section-link.group1"),
count(
".sidebar-section[data-section-name='messages'] .sidebar-section-link.group1"
),
1,
"collapses the links for group1 group messages"
);
assert.strictEqual(
count(".sidebar-section-messages .sidebar-section-link.group3"),
count(
".sidebar-section[data-section-name='messages'] .sidebar-section-link.group3"
),
4,
"expands the links for group3 group messages"
);
@ -258,11 +278,11 @@ acceptance(
await visit("/");
await click(
`.sidebar-section-messages .sidebar-section-link-group-messages-inbox.group1`
`.sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-inbox.group1`
);
await click(
`.sidebar-section-messages .sidebar-section-link-group-messages-${type}.group1`
`.sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-${type}.group1`
);
assert.strictEqual(
@ -272,21 +292,23 @@ acceptance(
);
assert.strictEqual(
count(".sidebar-section-messages .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='messages'] .sidebar-section-link.active"
),
2,
"only two links are marked as active in the sidebar"
);
assert.ok(
exists(
".sidebar-section-messages .sidebar-section-link-group-messages-inbox.group1.active"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-inbox.group1.active"
),
"group1 group message inbox link is marked as active"
);
assert.ok(
exists(
`.sidebar-section-messages .sidebar-section-link-group-messages-${type}.group1.active`
`.sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-${type}.group1.active`
),
`group1 group message ${type} link is marked as active`
);
@ -306,21 +328,25 @@ acceptance(
await visit("/t/130");
assert.strictEqual(
count(".sidebar-section-messages .sidebar-section-link"),
count(
".sidebar-section[data-section-name='messages'] .sidebar-section-link"
),
5,
"5 section links are displayed"
);
assert.strictEqual(
count(
".sidebar-section-messages .sidebar-section-link.personal-messages"
".sidebar-section[data-section-name='messages'] .sidebar-section-link.personal-messages"
),
1,
"personal messages inbox filter links are not shown"
);
assert.strictEqual(
count(".sidebar-section-messages .sidebar-section-link.foo_group"),
count(
".sidebar-section[data-section-name='messages'] .sidebar-section-link.foo_group"
),
4,
"foo_group messages inbox filter links are shown"
);
@ -339,21 +365,25 @@ acceptance(
await visit("/t/34");
assert.strictEqual(
count(".sidebar-section-messages .sidebar-section-link"),
count(
".sidebar-section[data-section-name='messages'] .sidebar-section-link"
),
6,
"6 section links are displayed"
);
assert.strictEqual(
count(
".sidebar-section-messages .sidebar-section-link.personal-messages"
".sidebar-section[data-section-name='messages'] .sidebar-section-link.personal-messages"
),
5,
"personal messages inbox filter links are shown"
);
assert.strictEqual(
count(".sidebar-section-messages .sidebar-section-link.foo_group"),
count(
".sidebar-section[data-section-name='messages'] .sidebar-section-link.foo_group"
),
1,
"foo_group messages inbox filter links are not shown"
);
@ -377,7 +407,7 @@ acceptance(
);
await click(
".sidebar-section-messages .sidebar-section-link-group-messages-inbox.group1"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-inbox.group1"
);
await publishToMessageBus(pmTopicTrackingState.groupChannel(1), {
@ -404,7 +434,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section-messages .sidebar-section-link-group-messages-unread.group1"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-unread.group1"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.unread_with_count", {
count: 1,
@ -414,7 +444,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section-messages .sidebar-section-link-group-messages-new.group1"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-new.group1"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.new_with_count", {
count: 1,
@ -435,7 +465,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section-messages .sidebar-section-link-group-messages-new.group1"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-group-messages-new.group1"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.new"),
"removes count for group1 new inbox filter link"
@ -450,7 +480,7 @@ acceptance(
);
await click(
".sidebar-section-messages .sidebar-section-link-personal-messages-inbox"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-inbox"
);
await publishToMessageBus(pmTopicTrackingState.userChannel(), {
@ -466,7 +496,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section-messages .sidebar-section-link-personal-messages-unread"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-unread"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.unread_with_count", {
count: 1,
@ -487,7 +517,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section-messages .sidebar-section-link-personal-messages-unread"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-unread"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.unread_with_count", {
count: 2,
@ -508,7 +538,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section-messages .sidebar-section-link-personal-messages-new"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-new"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.new_with_count", {
count: 1,
@ -529,7 +559,7 @@ acceptance(
assert.strictEqual(
query(
".sidebar-section-messages .sidebar-section-link-personal-messages-new"
".sidebar-section[data-section-name='messages'] .sidebar-section-link-personal-messages-new"
).textContent.trim(),
I18n.t("sidebar.sections.messages.links.new"),
"removes the count from the new inbox filter link"

63
app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js
View File

@ -28,7 +28,7 @@ acceptance(
await visit("/");
assert.ok(
!exists(".sidebar-section-tags"),
!exists(".sidebar-section[data-section-name='tags']"),
"does not display the tags section"
);
});
@ -97,14 +97,16 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
await visit("/");
assert.notOk(
exists(".sidebar-section-tags"),
exists(".sidebar-section[data-section-name='tags']"),
"tags section is not displayed"
);
});
test("clicking on section header button", async function (assert) {
await visit("/");
await click(".sidebar-section-tags .sidebar-section-header-button");
await click(
".sidebar-section[data-section-name='tags'] .sidebar-section-header-button"
);
assert.strictEqual(
currentURL(),
@ -121,7 +123,7 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
await visit("/");
assert.notOk(
exists(".sidebar-section-tags"),
exists(".sidebar-section[data-section-name='tags']"),
"tags section is not displayed"
);
});
@ -135,14 +137,21 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
await visit("/");
assert.ok(exists(".sidebar-section-tags"), "tags section is shown");
assert.ok(
exists(".sidebar-section[data-section-name='tags']"),
"tags section is shown"
);
assert.ok(
exists(".sidebar-section-tags .sidebar-section-link-configure-tags"),
exists(
".sidebar-section[data-section-name='tags'] .sidebar-section-link-configure-tags"
),
"section link to add tags to sidebar is displayed"
);
await click(".sidebar-section-tags .sidebar-section-link-configure-tags");
await click(
".sidebar-section[data-section-name='tags'] .sidebar-section-link-configure-tags"
);
assert.strictEqual(
currentURL(),
@ -155,7 +164,7 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
await visit("/");
const tagSectionLinks = queryAll(
".sidebar-section-tags .sidebar-section-link:not(.sidebar-section-link-all-tags)"
".sidebar-section[data-section-name='tags'] .sidebar-section-link:not(.sidebar-section-link-all-tags)"
);
const tagNames = [...tagSectionLinks].map((tagSectionLink) =>
@ -174,7 +183,7 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
assert.strictEqual(
count(
".sidebar-section-tags .sidebar-section-link:not(.sidebar-section-link-all-tags)"
".sidebar-section[data-section-name='tags'] .sidebar-section-link:not(.sidebar-section-link-all-tags)"
),
4,
"4 section links under the section"
@ -207,7 +216,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-tags .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -226,7 +237,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-tags .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -252,7 +265,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-tags .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -292,7 +307,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-tags .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -332,7 +349,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-tags .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -355,7 +374,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
);
assert.strictEqual(
count(".sidebar-section-tags .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -370,7 +391,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
await visit(`/tag/tag1/l/top`);
assert.strictEqual(
count(".sidebar-section-tags .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -385,7 +408,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
await visit(`/tag/tag1/l/new`);
assert.strictEqual(
count(".sidebar-section-tags .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);
@ -400,7 +425,9 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
await visit(`/tag/tag1/l/unread`);
assert.strictEqual(
count(".sidebar-section-tags .sidebar-section-link.active"),
count(
".sidebar-section[data-section-name='tags'] .sidebar-section-link.active"
),
1,
"only one link is marked as active"
);

4
app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js
View File

@ -161,7 +161,7 @@ acceptance(
assert.ok(
exists(
".sidebar-section-community .sidebar-section-header[aria-expanded='true'][aria-controls='sidebar-section-content-community']"
".sidebar-section[data-section-name='community'] .sidebar-section-header[aria-expanded='true'][aria-controls='sidebar-section-content-community']"
),
"accessibility attributes are set correctly on sidebar section header when section is expanded"
);
@ -170,7 +170,7 @@ acceptance(
assert.ok(
exists(
".sidebar-section-community .sidebar-section-header[aria-expanded='false'][aria-controls='sidebar-section-content-community']"
".sidebar-section[data-section-name='community'] .sidebar-section-header[aria-expanded='false'][aria-controls='sidebar-section-content-community']"
),
"accessibility attributes are set correctly on sidebar section header when section is collapsed"
);

44
app/assets/javascripts/discourse/tests/acceptance/user-preferences-sidebar-test.js
View File

@ -67,12 +67,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
assert.ok(
exists(
".sidebar-section-categories .sidebar-section-link[data-category-id=6]"
".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=6]"
),
"support category is present in sidebar"
);
await click(".sidebar-section-categories .sidebar-section-header-button");
await click(
".sidebar-section[data-section-name='categories'] .sidebar-section-header-button"
);
const categorySelector = selectKit(".category-selector");
await categorySelector.expand();
@ -93,14 +95,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
assert.ok(
!exists(
".sidebar-section-categories .sidebar-section-link[data-category-id=10]"
".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=10]"
),
"howto category is not displayed in sidebar"
);
assert.ok(
exists(
".sidebar-section-categories .sidebar-section-link[data-category-id=6]"
".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=6]"
),
"support category is displayed in sidebar"
);
@ -109,7 +111,7 @@ acceptance("User Preferences - Sidebar", function (needs) {
test("user adding categories to sidebar when default sidebar categories have not been configured", async function (assert) {
await visit("/u/eviltrout/preferences/sidebar");
assert.notOk(exists(".sidebar-section-categories"));
assert.notOk(exists(".sidebar-section[data-section-name='categories']"));
const categorySelector = selectKit(".category-selector");
await categorySelector.expand();
@ -120,14 +122,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
assert.ok(
exists(
".sidebar-section-categories .sidebar-section-link[data-category-id=6]"
".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=6]"
),
"support category has been added to sidebar"
);
assert.ok(
exists(
".sidebar-section-categories .sidebar-section-link[data-category-id=1]"
".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=1]"
),
"bug category has been added to sidebar"
);
@ -137,7 +139,9 @@ acceptance("User Preferences - Sidebar", function (needs) {
this.siteSettings.default_sidebar_categories = "5";
await visit("/");
await click(".sidebar-section-categories .sidebar-section-header-button");
await click(
".sidebar-section[data-section-name='categories'] .sidebar-section-header-button"
);
const categorySelector = selectKit(".category-selector");
await categorySelector.expand();
@ -148,14 +152,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
assert.ok(
exists(
".sidebar-section-categories .sidebar-section-link[data-category-id=6]"
".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=6]"
),
"support category has been added to sidebar"
);
assert.ok(
exists(
".sidebar-section-categories .sidebar-section-link[data-category-id=1]"
".sidebar-section[data-section-name='categories'] .sidebar-section-link[data-category-id=1]"
),
"bug category has been added to sidebar"
);
@ -174,12 +178,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
assert.ok(
exists(
".sidebar-section-tags .sidebar-section-link[data-tag-name=monkey]"
".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-tag-name=monkey]"
),
"monkey tag is displayed in sidebar"
);
await click(".sidebar-section-tags .sidebar-section-header-button");
await click(
".sidebar-section[data-section-name='tags'] .sidebar-section-header-button"
);
const tagChooser = selectKit(".tag-chooser");
await tagChooser.expand();
@ -200,14 +206,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
assert.ok(
!exists(
".sidebar-section-tags .sidebar-section-link[data-tag-name=gazelle]"
".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-tag-name=gazelle]"
),
"gazelle tag is not displayed in sidebar"
);
assert.ok(
exists(
".sidebar-section-tags .sidebar-section-link[data-tag-name=monkey]"
".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-tag-name=monkey]"
),
"monkey tag is displayed in sidebar"
);
@ -232,7 +238,7 @@ acceptance("User Preferences - Sidebar", function (needs) {
assert.ok(
exists(
".sidebar-section-tags .sidebar-section-link[data-tag-name=monkey]"
".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-tag-name=monkey]"
),
"monkey tag has been added to sidebar"
);
@ -242,7 +248,9 @@ acceptance("User Preferences - Sidebar", function (needs) {
this.siteSettings.default_sidebar_tags = "tag1|tag2";
await visit("/");
await click(".sidebar-section-tags .sidebar-section-header-button");
await click(
".sidebar-section[data-section-name='tags'] .sidebar-section-header-button"
);
const tagChooser = selectKit(".tag-chooser");
await tagChooser.expand();
@ -253,14 +261,14 @@ acceptance("User Preferences - Sidebar", function (needs) {
assert.ok(
exists(
".sidebar-section-tags .sidebar-section-link[data-tag-name=monkey]"
".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-tag-name=monkey]"
),
"monkey tag has been added to sidebar"
);
assert.ok(
exists(
".sidebar-section-tags .sidebar-section-link[data-tag-name=gazelle]"
".sidebar-section[data-section-name='tags'] .sidebar-section-link[data-tag-name=gazelle]"
),
"gazelle tag has been added to sidebar"
);

20
plugins/chat/spec/system/list_channels/sidebar_spec.rb
View File

@ -22,7 +22,7 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
end
it "shows the channel in the correct section" do
expect(page.find(".sidebar-section-chat-channels")).to have_content(
expect(page.find(".sidebar-section[data-section-name='chat-channels']")).to have_content(
category_channel_1.name,
)
end
@ -70,7 +70,9 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
before { visit("/") }
it "shows the channel in the correct section" do
expect(page.find(".sidebar-section-chat-dms")).to have_content(current_user.username)
expect(page.find(".sidebar-section[data-section-name='chat-dms']")).to have_content(
current_user.username,
)
end
end
@ -87,7 +89,7 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
context "when no category channels" do
it "doesn’t show the section" do
visit("/")
expect(page).to have_no_css(".sidebar-section-chat-channels")
expect(page).to have_no_css(".sidebar-section[data-section-name='chat-channels']")
end
context "when user can create channels" do
@ -95,7 +97,7 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
it "shows the section" do
visit("/")
expect(page).to have_css(".sidebar-section-chat-channels")
expect(page).to have_css(".sidebar-section[data-section-name='chat-channels']")
end
end
end
@ -104,7 +106,7 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
before { visit("/") }
it "shows the section" do
expect(page).to have_css(".sidebar-section-chat-dms")
expect(page).to have_css(".sidebar-section[data-section-name='chat-dms']")
end
end
@ -115,8 +117,8 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
end
it "doesn’t show the sections" do
expect(page).to have_no_css(".sidebar-section-chat-channels")
expect(page).to have_no_css(".sidebar-section-chat-dms")
expect(page).to have_no_css(".sidebar-section[data-section-name='chat-channels']")
expect(page).to have_no_css(".sidebar-section[data-section-name='chat-dms']")
end
end
@ -128,8 +130,8 @@ RSpec.describe "List channels | sidebar", type: :system, js: true do
end
it "doesn’t show the sections" do
expect(page).to have_no_css(".sidebar-section-chat-channels")
expect(page).to have_no_css(".sidebar-section-chat-dms")
expect(page).to have_no_css(".sidebar-section[data-section-name='chat-channels']")
expect(page).to have_no_css(".sidebar-section[data-section-name='chat-dms']")
end
end

14
plugins/chat/spec/system/page_objects/sidebar/sidebar.rb
View File

@ -4,19 +4,25 @@ module PageObjects
module Pages
class Sidebar < PageObjects::Pages::Base
def channels_section
find(".sidebar-section-chat-channels")
find(".sidebar-section[data-section-name='chat-channels']")
end
def dms_section
find(".sidebar-section-chat-dms")
find(".sidebar-section[data-section-name='chat-dms']")
end
def open_draft_channel
find(".sidebar-section-chat-dms .sidebar-section-header-button", visible: false).click
find(
".sidebar-section[data-section-name='chat-dms'] .sidebar-section-header-button",
visible: false,
).click
end
def open_browse
find(".sidebar-section-chat-channels .sidebar-section-header-button", visible: false).click
find(
".sidebar-section[data-section-name='chat-channels'] .sidebar-section-header-button",
visible: false,
).click
end
def open_channel(channel)

13
spec/system/custom_sidebar_sections_spec.rb
View File

@ -136,11 +136,16 @@ describe "Custom sidebar sections", type: :system, js: true do
visit("/latest")
expect(page).to have_button("Public section")
find(".sidebar-section-public-section").hover
find(".sidebar-section[data-section-name='public-section']").hover
expect(page).not_to have_css(
".sidebar-section-public-section button.sidebar-section-header-button",
".sidebar-section[data-section-name='public-section'] button.sidebar-section-header-button",
)
expect(page).not_to have_css(
".sidebar-section[data-section-name='public-section'] .d-icon-globe",
)
expect(page).not_to have_css(".sidebar-section-public-section .d-icon-globe")
end
it "allows the user to delete custom section" do
@ -170,7 +175,7 @@ describe "Custom sidebar sections", type: :system, js: true do
expect(page).to have_button("Public section")
expect(sidebar).to have_link("Sidebar Tags")
expect(page).to have_css(".sidebar-section-public-section .d-icon-globe")
expect(page).to have_css(".sidebar-section[data-section-name='public-section'] .d-icon-globe")
sidebar.edit_custom_section("Public section")
section_modal.fill_name("Edited public section")

7
spec/system/page_objects/components/sidebar.rb
View File

@ -20,8 +20,11 @@ module PageObjects
end
def edit_custom_section(name)
find(".sidebar-section-#{name.parameterize}").hover
find(".sidebar-section-#{name.parameterize} button.sidebar-section-header-button").click
find(".sidebar-section[data-section-name='#{name.parameterize}']").hover
find(
".sidebar-section[data-section-name='#{name.parameterize}'] button.sidebar-section-header-button",
).click
end
def has_link?(name, href: nil)