bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-10 21:33:27 +00:00
Code Issues Releases Wiki Activity

[PM-26012] Add Test-ids to Cart Summary Component (#16497)

Browse Source 
* fix: update component with localized messages and data-testids

* fix: update documentation and mock localization logic

* fix: add new messages for cart-summary component
This commit is contained in:
Stephon Brown
2025-09-22 10:08:26 -04:00
committed by GitHub
parent 8531109081
commit c3b2c1bfc9
4 changed files with 117 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
libs/pricing/src/components/cart-summary/cart-summary.component.html
View File

@@ -6,8 +6,13 @@
<div class="tw-size-full">
<div class="tw-flex tw-items-center tw-pb-4">
<div class="tw-flex tw-items-center">
<h2 bitTypography="h4" id="purchase-summary-heading" class="!tw-m-0">
{{ "Total" | i18n }}: {{ total() | currency: "USD" : "symbol" }} USD
<h2
bitTypography="h4"
id="purchase-summary-heading"
class="!tw-m-0"
data-testid="purchase-summary-heading-total"
>
{{ "total" | i18n }}: {{ total() | currency: "USD" : "symbol" }} USD
</h2>
<span bitTypography="h3">&nbsp;</span>
<span bitTypography="body1" class="tw-text-main">/ {{ passwordManager.cadence | i18n }}</span>
@@ -17,9 +22,12 @@
size="small"
(click)="toggleExpanded()"
[bitIconButton]="isExpanded() ? 'bwi-angle-up' : 'bwi-angle-down'"
[label]="isExpanded() ? 'Collapse purchase details' : 'Expand purchase details'"
[label]="
isExpanded() ? ('Collapse purchase details' | i18n) : ('Expand purchase details' | i18n)
"
[attr.aria-expanded]="isExpanded()"
[attr.aria-controls]="'purchase-summary-details'"
data-testid="toggle-purchase-summary-details"
></button>
</div>
@@ -28,7 +36,7 @@
<!-- Password Manager Section -->
<div class="tw-border-b tw-border-secondary-100 tw-pb-2">
<div class="tw-flex tw-justify-between tw-mb-1">
<h3 bitTypography="h5" class="tw-text-muted">{{ "Password Manager" | i18n }}</h3>
<h3 bitTypography="h5" class="tw-text-muted">{{ "passwordManager" | i18n }}</h3>
</div>
<!-- Password Manager Members -->
@@ -41,7 +49,7 @@
{{ passwordManager.cadence | i18n }}
</div>
</div>
<div bitTypography="body1" class="tw-text-muted">
<div bitTypography="body1" class="tw-text-muted" data-testid="password-manager-total">
{{ passwordManagerTotal() | currency: "USD" : "symbol" }}
</div>
</div>
@@ -56,7 +64,7 @@
{{ additionalStorage.cadence | i18n }}
</div>
</div>
<div bitTypography="body1" class="tw-text-muted">
<div bitTypography="body1" class="tw-text-muted" data-testid="additional-storage-total">
{{ additionalStorageTotal() | currency: "USD" : "symbol" }}
</div>
</div>
@@ -67,7 +75,7 @@
@if (secretsManager) {
<div class="tw-border-b tw-border-secondary-100 tw-py-2">
<div class="tw-flex tw-justify-between">
<h3 bitTypography="h5" class="tw-text-muted">{{ "Secrets Manager" | i18n }}</h3>
<h3 bitTypography="h5" class="tw-text-muted">{{ "secretsManager" | i18n }}</h3>
</div>
<!-- Secrets Manager Members -->
@@ -77,7 +85,11 @@
{{ secretsManager.seats.cost | currency: "USD" : "symbol" }}
/ {{ secretsManager.seats.cadence | i18n }}
</div>
<div bitTypography="body1" class="tw-text-muted">
<div
bitTypography="body1"
class="tw-text-muted"
data-testid="secrets-manager-seats-total"
>
{{ secretsManagerSeatsTotal() | currency: "USD" : "symbol" }}
</div>
</div>
@@ -92,7 +104,11 @@
/
{{ additionalServiceAccounts.cadence | i18n }}
</div>
<div bitTypography="body1" class="tw-text-muted">
<div
bitTypography="body1"
class="tw-text-muted"
data-testid="additional-service-accounts-total"
>
{{ additionalServiceAccountsTotal() | currency: "USD" : "symbol" }}
</div>
</div>
@@ -102,16 +118,16 @@
<!-- Estimated Tax -->
<div class="tw-flex tw-justify-between tw-border-b tw-border-secondary-100 tw-pt-2 tw-pb-0.5">
<h3 bitTypography="h5" class="tw-text-muted">{{ "Estimated tax" | i18n }}</h3>
<div bitTypography="body1" class="tw-text-muted">
<h3 bitTypography="h5" class="tw-text-muted">{{ "estimatedTax" | i18n }}</h3>
<div bitTypography="body1" class="tw-text-muted" data-testid="estimated-tax">
{{ estimatedTax() | currency: "USD" : "symbol" }}
</div>
</div>
<!-- Total -->
<div class="tw-flex tw-justify-between tw-items-center tw-pt-2">
<h3 bitTypography="h5" class="tw-text-muted">{{ "Total" | i18n }}</h3>
<div bitTypography="body1" class="tw-text-muted">
<h3 bitTypography="h5" class="tw-text-muted">{{ "total" | i18n }}</h3>
<div bitTypography="body1" class="tw-text-muted" data-testid="final-total">
{{ total() | currency: "USD" : "symbol" }} / {{ passwordManager.cadence | i18n }}
</div>
</div>

35
libs/pricing/src/components/cart-summary/cart-summary.component.mdx
View File

@@ -88,7 +88,7 @@ The cart summary component provides flexibility through its structured input pro
<billing-cart-summary
[passwordManager]="{
quantity: 5,
name: 'Members',
name: 'members',
cost: 50.00,
cadence: 'month'
}"
@@ -100,13 +100,13 @@ The cart summary component provides flexibility through its structured input pro
<billing-cart-summary
[passwordManager]="{
quantity: 5,
name: 'Members',
name: 'members',
cost: 50.00,
cadence: 'month'
}"
[additionalStorage]="{
quantity: 2,
name: 'Additional storage GB',
name: 'additionalStorageGB',
cost: 10.00,
cadence: 'month'
}"
@@ -140,7 +140,7 @@ Show cart with yearly subscription:
<billing-cart-summary
[passwordManager]="{
quantity: 5,
name: 'Members',
name: 'members',
cost: 500.00,
cadence: 'year'
}"
@@ -159,13 +159,13 @@ Show cart with password manager and additional storage:
<billing-cart-summary
[passwordManager]="{
quantity: 5,
name: 'Members',
name: 'members',
cost: 50.00,
cadence: 'month'
}"
[additionalStorage]="{
quantity: 2,
name: 'Additional storage GB',
name: 'additionalStorageGB',
cost: 10.00,
cadence: 'month'
}"
@@ -184,14 +184,14 @@ Show cart with password manager and secrets manager seats only:
<billing-cart-summary
[passwordManager]="{
quantity: 5,
name: 'Members',
name: 'members',
cost: 50.00,
cadence: 'month'
}"
[secretsManager]="{
seats: {
quantity: 3,
name: 'Members',
name: 'members',
cost: 30.00,
cadence: 'month'
}
@@ -211,20 +211,20 @@ Show cart with password manager, secrets manager seats, and additional service a
<billing-cart-summary
[passwordManager]="{
quantity: 5,
name: 'Members',
name: 'members',
cost: 50.00,
cadence: 'month'
}"
[secretsManager]="{
seats: {
quantity: 3,
name: 'Members',
name: 'members',
cost: 30.00,
cadence: 'month'
},
additionalServiceAccounts: {
quantity: 2,
name: 'Additional machine accounts',
name: 'additionalServiceAccounts',
cost: 6.00,
cadence: 'month'
}
@@ -244,26 +244,26 @@ Show a cart with all available products:
<billing-cart-summary
[passwordManager]="{
quantity: 5,
name: 'Members',
name: 'members',
cost: 50.00,
cadence: 'month'
}"
[additionalStorage]="{
quantity: 2,
name: 'Additional storage GB',
name: 'additionalStorageGB',
cost: 10.00,
cadence: 'month'
}"
[secretsManager]="{
seats: {
quantity: 3,
name: 'Members',
name: 'members',
cost: 30.00,
cadence: 'month'
},
additionalServiceAccounts: {
quantity: 2,
name: 'Additional machine accounts',
name: 'additionalServiceAccounts',
cost: 6.00,
cadence: 'month'
}
@@ -282,7 +282,7 @@ Show cart with premium plan:
<billing-cart-summary
[passwordManager]="{
quantity: 1,
name: 'Premium membership',
name: 'premiumMembership',
cost: 10.00,
cadence: 'month'
}"
@@ -300,7 +300,7 @@ Show cart with families plan:
<billing-cart-summary
[passwordManager]="{
quantity: 1,
name: 'Families membership',
name: 'familiesMembership',
cost: 40.00,
cadence: 'month'
}"
@@ -330,6 +330,7 @@ Show cart with families plan:
- Ensure tax estimates are accurate and clearly labeled
- Maintain consistent cadence formats across related items
- Use the same cadence for all items within a single cart
- Use localized strings for LineItem names
### ❌ Don't

61
libs/pricing/src/components/cart-summary/cart-summary.component.stories.ts
View File

@@ -16,7 +16,44 @@ export default {
providers: [
{
provide: I18nService,
useValue: { t: (key: string) => key },
useValue: {
t: (key: string) => {
switch (key) {
case "month":
return "month";
case "year":
return "year";
case "members":
return "Members";
case "additionalStorageGB":
return "Additional storage GB";
case "additionalServiceAccountsV2":
return "Additional machine accounts";
case "secretsManagerSeats":
return "Secrets Manager seats";
case "passwordManager":
return "Password Manager";
case "secretsManager":
return "Secrets Manager";
case "additionalStorage":
return "Additional Storage";
case "estimatedTax":
return "Estimated tax";
case "total":
return "Total";
case "expandPurchaseDetails":
return "Expand purchase details";
case "collapsePurchaseDetails":
return "Collapse purchase details";
case "familiesMembership":
return "Families membership";
case "premiumMembership":
return "Premium membership";
default:
return key;
}
},
},
},
],
}),
@@ -24,7 +61,7 @@ export default {
args: {
passwordManager: {
quantity: 5,
name: "Members",
name: "members",
cost: 50.0,
cadence: "month",
},
@@ -46,7 +83,7 @@ export const WithAdditionalStorage: Story = {
...Default.args,
additionalStorage: {
quantity: 2,
name: "Additional storage GB",
name: "additionalStorageGB",
cost: 10.0,
cadence: "month",
},
@@ -58,7 +95,7 @@ export const PasswordManagerYearlyCadence: Story = {
args: {
passwordManager: {
quantity: 5,
name: "Members",
name: "members",
cost: 500.0,
cadence: "year",
},
@@ -72,7 +109,7 @@ export const SecretsManagerSeatsOnly: Story = {
secretsManager: {
seats: {
quantity: 3,
name: "Members",
name: "members",
cost: 30.0,
cadence: "month",
},
@@ -87,13 +124,13 @@ export const SecretsManagerSeatsAndServiceAccounts: Story = {
secretsManager: {
seats: {
quantity: 3,
name: "Members",
name: "members",
cost: 30.0,
cadence: "month",
},
additionalServiceAccounts: {
quantity: 2,
name: "Additional machine accounts",
name: "additionalServiceAccountsV2",
cost: 6.0,
cadence: "month",
},
@@ -107,20 +144,20 @@ export const AllProducts: Story = {
...Default.args,
additionalStorage: {
quantity: 2,
name: "Additional storage GB",
name: "additionalStorageGB",
cost: 10.0,
cadence: "month",
},
secretsManager: {
seats: {
quantity: 3,
name: "Members",
name: "members",
cost: 30.0,
cadence: "month",
},
additionalServiceAccounts: {
quantity: 2,
name: "Additional machine accounts",
name: "additionalServiceAccountsV2",
cost: 6.0,
cadence: "month",
},
@@ -133,7 +170,7 @@ export const FamiliesPlan: Story = {
args: {
passwordManager: {
quantity: 1,
name: "Families membership",
name: "familiesMembership",
cost: 40.0,
cadence: "year",
},
@@ -145,7 +182,7 @@ export const PremiumPlan: Story = {
args: {
passwordManager: {
quantity: 1,
name: "Premium membership",
name: "premiumMembership",
cost: 10.0,
cadence: "year",
},