diff --git a/frontend/src/lib/components/proposals/ActionableProposalCountBadge.svelte b/frontend/src/lib/components/proposals/ActionableProposalCountBadge.svelte
index 7c3f3f3589a..a330b8eb36e 100644
--- a/frontend/src/lib/components/proposals/ActionableProposalCountBadge.svelte
+++ b/frontend/src/lib/components/proposals/ActionableProposalCountBadge.svelte
@@ -37,7 +37,8 @@
duration: 250,
easing: cubicOut,
}}
- class="tag">{count}{count}
{/if}
diff --git a/frontend/src/lib/components/ui/ProposalStatusTag.svelte b/frontend/src/lib/components/ui/ProposalStatusTag.svelte
index 934814518f0..81ddd682c97 100644
--- a/frontend/src/lib/components/ui/ProposalStatusTag.svelte
+++ b/frontend/src/lib/components/ui/ProposalStatusTag.svelte
@@ -1,6 +1,10 @@
-{label}
+
+ {label}
+ {#if actionable}
+
+ {/if}
+
+
diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json
index 7ef7e83b2c6..483f6fafeae 100644
--- a/frontend/src/lib/i18n/en.json
+++ b/frontend/src/lib/i18n/en.json
@@ -377,7 +377,8 @@
"all_proposals": "All Proposals",
"actionable_proposals": "Actionable Proposals",
"nns_actionable_proposal_tooltip": "There are $count NNS proposals you can vote on.",
- "sns_actionable_proposal_tooltip": "There are $count $snsName proposals you can vote on."
+ "sns_actionable_proposal_tooltip": "There are $count $snsName proposals you can vote on.",
+ "is_actionable_status_badge_tooltip": "You can still vote on this proposal."
},
"actionable_proposals_sign_in": {
"title": "You are not signed in.",
diff --git a/frontend/src/lib/types/i18n.d.ts b/frontend/src/lib/types/i18n.d.ts
index d26ebd57821..5b8d6137d8d 100644
--- a/frontend/src/lib/types/i18n.d.ts
+++ b/frontend/src/lib/types/i18n.d.ts
@@ -392,6 +392,7 @@ interface I18nVoting {
actionable_proposals: string;
nns_actionable_proposal_tooltip: string;
sns_actionable_proposal_tooltip: string;
+ is_actionable_status_badge_tooltip: string;
}
interface I18nActionable_proposals_sign_in {
diff --git a/frontend/src/tests/lib/components/sns-proposals/SnsProposalsList.spec.ts b/frontend/src/tests/lib/components/sns-proposals/SnsProposalsList.spec.ts
index 59e817bc5dd..6108d943492 100644
--- a/frontend/src/tests/lib/components/sns-proposals/SnsProposalsList.spec.ts
+++ b/frontend/src/tests/lib/components/sns-proposals/SnsProposalsList.spec.ts
@@ -235,15 +235,15 @@ describe("SnsProposalsList", () => {
await runResolvedPromises();
const cards = await po.getProposalCardPos();
- expect(await cards[0].getProposalStatusTagPo().hasActionableMark()).toBe(
- false
- );
- expect(await cards[1].getProposalStatusTagPo().hasActionableMark()).toBe(
- true
- );
- expect(await cards[2].getProposalStatusTagPo().hasActionableMark()).toBe(
- true
- );
+ expect(
+ await cards[0].getProposalStatusTagPo().hasActionableStatusBadge()
+ ).toBe(false);
+ expect(
+ await cards[1].getProposalStatusTagPo().hasActionableStatusBadge()
+ ).toBe(true);
+ expect(
+ await cards[2].getProposalStatusTagPo().hasActionableStatusBadge()
+ ).toBe(true);
});
});
});
diff --git a/frontend/src/tests/lib/components/ui/ProposalStatusTag.spec.ts b/frontend/src/tests/lib/components/ui/ProposalStatusTag.spec.ts
index e6db7571c44..e37a5f7ddfd 100644
--- a/frontend/src/tests/lib/components/ui/ProposalStatusTag.spec.ts
+++ b/frontend/src/tests/lib/components/ui/ProposalStatusTag.spec.ts
@@ -48,11 +48,15 @@ describe("ProposalStatusTag", () => {
expect(await po.hasStatusClass("failed")).toBe(true);
});
- it("should render actionable mark", async () => {
+ it("should render actionable badge", async () => {
const po = await renderComponent({ status: "open", actionable: true });
- expect(await po.hasActionableMark()).toBe(true);
+ expect(await po.hasActionableStatusBadge()).toBe(true);
+ expect(await po.getActionableStatusBadgeTooltip().isPresent()).toBe(true);
+ expect(await po.getActionableStatusBadgeTooltip().getTooltipText()).toBe(
+ "You can still vote on this proposal."
+ );
const po2 = await renderComponent({ status: "open" });
- expect(await po2.hasActionableMark()).toBe(false);
+ expect(await po2.hasActionableStatusBadge()).toBe(false);
});
});
diff --git a/frontend/src/tests/lib/pages/NnsProposals.spec.ts b/frontend/src/tests/lib/pages/NnsProposals.spec.ts
index f7fe15dda95..f9272ebcb88 100644
--- a/frontend/src/tests/lib/pages/NnsProposals.spec.ts
+++ b/frontend/src/tests/lib/pages/NnsProposals.spec.ts
@@ -167,7 +167,7 @@ describe("NnsProposals", () => {
expect(
await (await po.getProposalCardPos())[0]
.getProposalStatusTagPo()
- .hasActionableMark()
+ .hasActionableStatusBadge()
).toEqual(false);
// actionable proposal
expect(
@@ -176,7 +176,7 @@ describe("NnsProposals", () => {
expect(
await (await po.getProposalCardPos())[1]
.getProposalStatusTagPo()
- .hasActionableMark()
+ .hasActionableStatusBadge()
).toEqual(true);
});
diff --git a/frontend/src/tests/page-objects/ProposalStatusTag.page-object.ts b/frontend/src/tests/page-objects/ProposalStatusTag.page-object.ts
index 9caa9fd7a9e..bb2f9ac0e69 100644
--- a/frontend/src/tests/page-objects/ProposalStatusTag.page-object.ts
+++ b/frontend/src/tests/page-objects/ProposalStatusTag.page-object.ts
@@ -1,4 +1,5 @@
import type { UniversalProposalStatus } from "$lib/types/proposals";
+import { TooltipPo } from "$tests/page-objects/Tooltip.page-object";
import { BasePageObject } from "$tests/page-objects/base.page-object";
import type { PageObjectElement } from "$tests/types/page-object.types";
@@ -9,13 +10,22 @@ export class ProposalStatusTagPo extends BasePageObject {
return new ProposalStatusTagPo(element.byTestId(ProposalStatusTagPo.TID));
}
+ getActionableStatusBadgeElement(): PageObjectElement {
+ return this.root.byTestId("actionable-status-badge");
+ }
+
+ getActionableStatusBadgeTooltip(): TooltipPo {
+ return TooltipPo.under(this.getActionableStatusBadgeElement());
+ }
+
async hasStatusClass(className: UniversalProposalStatus): Promise {
const classNames = await this.root.getClasses();
return classNames.includes(className);
}
- async hasActionableMark(): Promise {
- const classNames = await this.root.getClasses();
- return classNames.includes("actionable");
+ async hasActionableStatusBadge(): Promise {
+ return this.getActionableStatusBadgeElement()
+ .querySelector(".actionable-status-badge")
+ .isPresent();
}
}