feat(e2e): update data-testids for order related components

Author: QAComet

src/modules/account/components/order-card/index.tsx

@@ -23,7 +23,9 @@ const OrderCard = ({ order }: OrderCardProps) => {
 
   return (
     <div className="bg-white flex flex-col" data-testid="order-card">
-      <div className="uppercase text-large-semi mb-1" data-testid="order-display-id">#{order.display_id}</div>
+      <div className="uppercase text-large-semi mb-1">
+        #<span data-testid="order-display-id">{order.display_id}</span>
+      </div>
       <div className="flex items-center divide-x divide-gray-200 text-small-regular text-ui-fg-base">
         <span className="pr-2" data-testid="order-created-at">
           {new Date(order.created_at).toDateString()}
@@ -42,10 +44,19 @@ const OrderCard = ({ order }: OrderCardProps) => {
       <div className="grid grid-cols-2 small:grid-cols-4 gap-4 my-4">
         {order.items.slice(0, 3).map((i) => {
           return (
-            <div key={i.id} className="flex flex-col gap-y-2" data-testid="order-item">
+            <div
+              key={i.id}
+              className="flex flex-col gap-y-2"
+              data-testid="order-item"
+            >
               <Thumbnail thumbnail={i.thumbnail} images={[]} size="full" />
               <div className="flex items-center text-small-regular text-ui-fg-base">
-                <span className="text-ui-fg-base font-semibold" data-testid="item-title">{i.title}</span>
+                <span
+                  className="text-ui-fg-base font-semibold"
+                  data-testid="item-title"
+                >
+                  {i.title}
+                </span>
                 <span className="ml-2">x</span>
                 <span data-testid="item-quantity">{i.quantity}</span>
               </div>
@@ -63,7 +74,9 @@ const OrderCard = ({ order }: OrderCardProps) => {
       </div>
       <div className="flex justify-end">
         <LocalizedClientLink href={`/account/orders/details/${order.id}`}>
-          <Button data-testid="order-details-link" variant="secondary">See details</Button>
+          <Button data-testid="order-details-link" variant="secondary">
+            See details
+          </Button>
         </LocalizedClientLink>
       </div>
     </div>

src/modules/account/components/order-overview/index.tsx

@@ -23,14 +23,19 @@ const OrderOverview = ({ orders }: { orders: Order[] }) => {
   }
 
   return (
-    <div className="w-full flex flex-col items-center gap-y-4" data-test="no-orders-container">
+    <div
+      className="w-full flex flex-col items-center gap-y-4"
+      data-testid="no-orders-container"
+    >
       <h2 className="text-large-semi">Nothing to see here</h2>
       <p className="text-base-regular">
         You don&apos;t have any orders yet, let us change that {":)"}
       </p>
       <div className="mt-4">
         <LocalizedClientLink href="/" passHref>
-          <Button data-testid="continue-shopping-button">Continue shopping</Button>
+          <Button data-testid="continue-shopping-button">
+            Continue shopping
+          </Button>
         </LocalizedClientLink>
       </div>
     </div>

src/modules/checkout/components/shipping/index.tsx

@@ -95,7 +95,7 @@ const Shipping: React.FC<ShippingProps> = ({
           )}
       </div>
       {isOpen ? (
-        <div>
+        <div data-testid="delivery-options-container">
           <div className="pb-8">
             <RadioGroup
               value={cart.shipping_methods[0]?.shipping_option_id}
@@ -144,7 +144,10 @@ const Shipping: React.FC<ShippingProps> = ({
             </RadioGroup>
           </div>
 
-          <ErrorMessage error={error} data-testid="delivery-option-error-message" />
+          <ErrorMessage
+            error={error}
+            data-testid="delivery-option-error-message"
+          />
 
           <Button
             size="large"

src/modules/order/templates/order-details-template.tsx

@@ -30,7 +30,10 @@ const OrderDetailsTemplate: React.FC<OrderDetailsTemplateProps> = ({
           <XMark /> Back to overview
         </LocalizedClientLink>
       </div>
-      <div className="flex flex-col gap-4 h-full bg-white w-full">
+      <div
+        className="flex flex-col gap-4 h-full bg-white w-full"
+        data-testid="order-details-container"
+      >
         <OrderDetails order={order} showStatus />
         <Items items={order.items} region={order.region} />
         <ShippingDetails order={order} />