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

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

* fix: update documentation and mock localization logic

* fix: add new messages for cart-summary component

apps/web/src/locales/en/messages.json

@@ -11341,5 +11341,26 @@
   },
   "verifyNow": {
     "message": "Verify now."
+  },
+  "additionalStorageGB": {
+    "message": "Additional storage GB"
+  },
+  "additionalServiceAccountsV2": {
+    "message": "Additional machine accounts"
+  },
+  "secretsManagerSeats": {
+    "message": "Secrets Manager seats"
+  },
+  "additionalStorage": {
+    "message": "Additional Storage"
+  },
+  "expandPurchaseDetails": {
+    "message": "Expand purchase details"
+  },
+  "collapsePurchaseDetails": {
+    "message": "Collapse purchase details"
+  },
+  "familiesMembership": {
+    "message": "Families membership"
   }
 }

libs/pricing/src/components/cart-summary/cart-summary.component.html

@@ -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">
+      <h2
-        {{ "Total" | i18n }}: {{ total() | currency: "USD" : "symbol" }} USD
+        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>
+        <h3 bitTypography="h5" class="tw-text-muted">{{ "estimatedTax" | i18n }}</h3>
-        <div bitTypography="body1" class="tw-text-muted">
+        <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>
+        <h3 bitTypography="h5" class="tw-text-muted">{{ "total" | i18n }}</h3>
-        <div bitTypography="body1" class="tw-text-muted">
+        <div bitTypography="body1" class="tw-text-muted" data-testid="final-total">
           {{ total() | currency: "USD" : "symbol" }} / {{ passwordManager.cadence | i18n }}
         </div>
       </div>

libs/pricing/src/components/cart-summary/cart-summary.component.mdx

@@ -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
 

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

@@ -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",
     },