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(); } }