feat(e2e): add data-testids for discount related parts in checkout

Author: QAComet

src/modules/checkout/components/discount-code/index.tsx

@@ -69,9 +69,15 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
               >
                 <Text className="flex gap-x-1 items-baseline">
                   <span>Code: </span>
-                  <span className="truncate" data-testid="gift-card-code">{gc.code}</span>
+                  <span className="truncate" data-testid="gift-card-code">
+                    {gc.code}
+                  </span>
                 </Text>
-                <Text className="font-semibold" data-testid="gift-card-amount">
+                <Text
+                  className="font-semibold"
+                  data-testid="gift-card-amount"
+                  data-value={gc.balance}
+                >
                   {formatAmount({
                     region: region,
                     amount: gc.balance,
@@ -95,15 +101,27 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
           <div className="w-full flex items-center">
             <div className="flex flex-col w-full">
               <Heading className="txt-medium">Discount applied:</Heading>
-              <div className="flex items-center justify-between w-full max-w-full">
+              <div
+                className="flex items-center justify-between w-full max-w-full"
+                data-testid="discount-row"
+              >
                 <Text className="flex gap-x-1 items-baseline txt-small-plus w-4/5 pr-1">
                   <span>Code:</span>
-                  <span className="truncate">{discounts[0].code}</span>
-                  <span className="min-w-fit">({appliedDiscount})</span>
+                  <span className="truncate" data-testid="discount-code">
+                    {discounts[0].code}
+                  </span>
+                  <span
+                    className="min-w-fit"
+                    data-testid="discount-amount"
+                    data-value={discounts[0].rule.value}
+                  >
+                    ({appliedDiscount})
+                  </span>
                 </Text>
                 <button
                   className="flex items-center"
                   onClick={removeDiscountCode}
+                  data-testid="remove-discount-button"
                 >
                   <Trash size={14} />
                   <span className="sr-only">
@@ -138,9 +156,17 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
                     autoFocus={false}
                     data-testid="discount-input"
                   />
-                  <SubmitButton variant="secondary" data-testid="discount-apply-button">Apply</SubmitButton>
+                  <SubmitButton
+                    variant="secondary"
+                    data-testid="discount-apply-button"
+                  >
+                    Apply
+                  </SubmitButton>
                 </div>
-                <ErrorMessage error={message} data-testid="discount-error-message" />
+                <ErrorMessage
+                  error={message}
+                  data-testid="discount-error-message"
+                />
               </>
             )}
           </form>

src/modules/checkout/components/payment-button/index.tsx

@@ -72,7 +72,11 @@ const GiftCardPaymentButton = () => {
   }
 
   return (
-    <Button onClick={handleOrder} isLoading={submitting}>
+    <Button
+      onClick={handleOrder}
+      isLoading={submitting}
+      data-testid="submit-order-button"
+    >
       Place order
     </Button>
   )