test(e2e): update price and cart fixtures

Author: QAComet

e2e/fixtures/base/cart-dropdown.ts

@@ -19,23 +19,33 @@ export class CartDropdown {
     await this.navCartLink.hover()
   }
 
-  async getCartItem(name: string) {
-    const cartItem = this.cartDropdown.getByTestId("cart-item").filter({
-      hasText: name,
-    })
-    const quantity = cartItem
-      .getByTestId("cart-item-quantity")
-      .getAttribute("data-value")
-    const variant = cartItem
-      .getByTestId("cart-item-variant")
-      .getAttribute("data-value")
+  async close() {
+    if (await this.cartDropdown.isVisible()) {
+      const box = await this.cartDropdown.boundingBox()
+      if (!box) {
+        return
+      }
+      await this.page.mouse.move(box.x + box.width / 4, box.y + box.height / 4)
+      await this.page.mouse.move(5, 10)
+    }
+  }
+
+  async getCartItem(name: string, variant: string) {
+    const cartItem = this.cartDropdown
+      .getByTestId("cart-item")
+      .filter({
+        hasText: name,
+      })
+      .filter({
+        hasText: `Variant: ${variant}`,
+      })
     return {
       locator: cartItem,
       productLink: cartItem.getByTestId("product-link"),
       removeButton: cartItem.getByTestId("cart-item-remove-button"),
       name,
-      quantity,
-      variant,
+      quantity: cartItem.getByTestId("cart-item-quantity"),
+      variant: cartItem.getByTestId("cart-item-variant"),
     }
   }
 }

e2e/fixtures/cart-page.ts

@@ -23,6 +23,7 @@ export class CartPage extends BasePage {
   cartGiftCardAmount: Locator
   cartShipping: Locator
   cartTaxes: Locator
+  cartTotal: Locator
   checkoutButton: Locator
 
   constructor(page: Page) {
@@ -61,22 +62,23 @@ export class CartPage extends BasePage {
     )
     this.cartShipping = this.container.getByTestId("cart-shipping")
     this.cartTaxes = this.container.getByTestId("cart-taxes")
+    this.cartTotal = this.container.getByTestId("cart-total")
   }
 
   async getProduct(title: string, variant: string) {
     const productRow = this.productRow
       .filter({
-        has: this.productTitle.filter({ hasText: title }),
+        hasText: title,
       })
       .filter({
-        has: this.productVariant.filter({ hasText: variant }),
+        hasText: `Variant: ${variant}`,
       })
     return {
       productRow,
       title: productRow.getByTestId("product-title"),
       variant: productRow.getByTestId("product-variant"),
       deleteButton: productRow.getByTestId("delete-button"),
-      quantitySelect: productRow.getByTestId("quantity-select"),
+      quantitySelect: productRow.getByTestId("product-select-button"),
       price: productRow.getByTestId("product-unit-price"),
       total: productRow.getByTestId("product-price"),
     }

e2e/fixtures/product-page.ts

@@ -9,6 +9,7 @@ export class ProductPage extends BasePage {
   productTitle: Locator
   productDescription: Locator
   productOptions: Locator
+  productPrice: Locator
   addProductButton: Locator
   mobileActionsContainer: Locator
   mobileTitle: Locator
@@ -24,6 +25,7 @@ export class ProductPage extends BasePage {
     this.productTitle = this.container.getByTestId("product-title")
     this.productDescription = this.container.getByTestId("product-description")
     this.productOptions = this.container.getByTestId("product-options")
+    this.productPrice = this.container.getByTestId("product-price")
     this.addProductButton = this.container.getByTestId("add-product-button")
     this.mobileActionsContainer = page.getByTestId("mobile-actions")
     this.mobileTitle = this.mobileActionsContainer.getByTestId("mobile-title")
@@ -35,10 +37,16 @@ export class ProductPage extends BasePage {
     )
   }
 
+  async clickAddProduct() {
+    await this.addProductButton.click()
+    await this.cartDropdown.cartDropdown.waitFor({ state: "visible" })
+  }
+
   async selectOption(option: string) {
+    await this.page.mouse.move(0, 0) // hides the checkout container
     const optionButton = this.productOptions
       .getByTestId("option-button")
       .filter({ hasText: option })
-    await optionButton.click()
+    await optionButton.click({ clickCount: 2 })
   }
 }

src/lib/util/get-product-price.ts

@@ -36,11 +36,13 @@ export function getProductPrice({
     })
 
     return {
+      calculated_price_number: cheapestVariant.calculated_price,
       calculated_price: formatAmount({
         amount: cheapestVariant.calculated_price,
         region,
         includeTaxes: false,
       }),
+      original_price_number: cheapestVariant.original_price,
       original_price: formatAmount({
         amount: cheapestVariant.original_price,
         region,
@@ -68,11 +70,13 @@ export function getProductPrice({
     }
 
     return {
+      calculated_price_number: variant.calculated_price,
       calculated_price: formatAmount({
         amount: variant.calculated_price,
         region,
         includeTaxes: false,
       }),
+      original_price_number: variant.original_price,
       original_price: formatAmount({
         amount: variant.original_price,
         region,

src/modules/common/components/cart-totals/index.tsx

@@ -38,37 +38,57 @@ const CartTotals: React.FC<CartTotalsProps> = ({ data }) => {
               <InformationCircleSolid color="var(--fg-muted)" />
             </Tooltip>
           </span>
-          <span data-testid="cart-subtotal">{getAmount(subtotal)}</span>
+          <span data-testid="cart-subtotal" data-value={subtotal || 0}>
+            {getAmount(subtotal)}
+          </span>
         </div>
         {!!discount_total && (
           <div className="flex items-center justify-between">
             <span>Discount</span>
-            <span className="text-ui-fg-interactive" data-testid="cart-discount" data-value={getAmount(discount_total)}>
+            <span
+              className="text-ui-fg-interactive"
+              data-testid="cart-discount"
+              data-value={discount_total || 0}
+            >
               - {getAmount(discount_total)}
             </span>
           </div>
         )}
         {!!gift_card_total && (
           <div className="flex items-center justify-between">
             <span>Gift card</span>
-            <span className="text-ui-fg-interactive" data-testid="cart-gift-card-amount" data-value={getAmount(gift_card_total)}>
+            <span
+              className="text-ui-fg-interactive"
+              data-testid="cart-gift-card-amount"
+              data-value={gift_card_total || 0}
+            >
               - {getAmount(gift_card_total)}
             </span>
           </div>
         )}
         <div className="flex items-center justify-between">
           <span>Shipping</span>
-          <span data-testid="cart-shipping">{getAmount(shipping_total)}</span>
+          <span data-testid="cart-shipping" data-value={shipping_total || 0}>
+            {getAmount(shipping_total)}
+          </span>
         </div>
         <div className="flex justify-between">
           <span className="flex gap-x-1 items-center ">Taxes</span>
-          <span data-testid="cart-taxes">{getAmount(tax_total)}</span>
+          <span data-testid="cart-taxes" data-value={tax_total || 0}>
+            {getAmount(tax_total)}
+          </span>
         </div>
       </div>
       <div className="h-px w-full border-b border-gray-200 my-4" />
       <div className="flex items-center justify-between text-ui-fg-base mb-2 txt-medium ">
         <span>Total</span>
-        <span className="txt-xlarge-plus" data-testid="cart-taxes">{getAmount(total)}</span>
+        <span
+          className="txt-xlarge-plus"
+          data-testid="cart-total"
+          data-value={total || 0}
+        >
+          {getAmount(total)}
+        </span>
       </div>
       <div className="h-px w-full border-b border-gray-200 mt-4" />
     </div>

src/modules/layout/components/cart-dropdown/index.tsx

@@ -133,8 +133,17 @@ const CartDropdown = ({
                                     {item.title}
                                   </LocalizedClientLink>
                                 </h3>
-                                <LineItemOptions variant={item.variant} data-testid="cart-item-variant" data-value={item.variant} />
-                                <span data-testid="cart-item-quantity" data-value={item.quantity}>Quantity: {item.quantity}</span>
+                                <LineItemOptions
+                                  variant={item.variant}
+                                  data-testid="cart-item-variant"
+                                  data-value={item.variant}
+                                />
+                                <span
+                                  data-testid="cart-item-quantity"
+                                  data-value={item.quantity}
+                                >
+                                  Quantity: {item.quantity}
+                                </span>
                               </div>
                               <div className="flex justify-end">
                                 <LineItemPrice
@@ -145,7 +154,11 @@ const CartDropdown = ({
                               </div>
                             </div>
                           </div>
-                          <DeleteButton id={item.id} className="mt-1" data-testid="cart-item-remove-button">
+                          <DeleteButton
+                            id={item.id}
+                            className="mt-1"
+                            data-testid="cart-item-remove-button"
+                          >
                             Remove
                           </DeleteButton>
                         </div>
@@ -158,7 +171,11 @@ const CartDropdown = ({
                       Subtotal{" "}
                       <span className="font-normal">(excl. taxes)</span>
                     </span>
-                    <span className="text-large-semi" data-testid="cart-subtotal">
+                    <span
+                      className="text-large-semi"
+                      data-testid="cart-subtotal"
+                      data-value={cartState.subtotal || 0}
+                    >
                       {formatAmount({
                         amount: cartState.subtotal || 0,
                         region: cartState.region,
@@ -167,7 +184,11 @@ const CartDropdown = ({
                     </span>
                   </div>
                   <LocalizedClientLink href="/cart" passHref>
-                    <Button className="w-full" size="large" data-testid="go-to-cart-button">
+                    <Button
+                      className="w-full"
+                      size="large"
+                      data-testid="go-to-cart-button"
+                    >
                       Go to cart
                     </Button>
                   </LocalizedClientLink>

src/modules/products/components/product-price/index.tsx

@@ -36,13 +36,24 @@ export default function ProductPrice({
         })}
       >
         {!variant && "From "}
-        {selectedPrice.calculated_price}
+        <span
+          data-testid="product-price"
+          data-value={selectedPrice.calculated_price_number}
+        >
+          {selectedPrice.calculated_price}
+        </span>
       </span>
       {selectedPrice.price_type === "sale" && (
         <>
           <p>
             <span className="text-ui-fg-subtle">Original: </span>
-            <span className="line-through">{selectedPrice.original_price}</span>
+            <span
+              className="line-through"
+              data-testid="original-product-price"
+              data-value={selectedPrice.original_price_number}
+            >
+              {selectedPrice.original_price}
+            </span>
           </p>
           <span className="text-ui-fg-interactive">
             -{selectedPrice.percentage_diff}%