test for opening products from order grid (#3780)

cypress/e2e/orders/orders.js

@@ -40,6 +40,7 @@ import {
   expandPrivateFulfillmentMetadata,
   expandPublicFulfillmentMetadata,
   finalizeDraftOrder,
+  openVariantDetailsOptions,
   selectChannelInPicker,
   updatePrivateMetadataFieldFulfillmentOrder,
   updatePublicMetadataFieldFulfillmentOrder,
@@ -56,6 +57,7 @@ describe("Orders", () => {
   let variantsList;
   let address;
   let taxClass;
+  let productDetails;
 
   const shippingPrice = 2;
   const variantPrice = 1;
@@ -124,7 +126,8 @@ describe("Orders", () => {
           });
         },
       )
-      .then(({ variantsList: variantsResp }) => {
+      .then(({ variantsList: variantsResp, product }) => {
+        productDetails = product;
         variantsList = variantsResp;
         cy.checkIfDataAreNotNull({
           customer,
@@ -518,4 +521,57 @@ describe("Orders", () => {
       });
     },
   );
+  it(
+    "should open product details from order details - unconfirmed order. TC: SALEOR_2133",
+    { tags: ["@orders", "@allEnv", "@stable"] },
+    () => {
+      createUnconfirmedOrder({
+        customerId: customer.id,
+        channelId: defaultChannel.id,
+        shippingMethod,
+        variantsList,
+        address,
+      }).then(unconfirmedOrderResponse => {
+        cy.visit(urlList.orders + `${unconfirmedOrderResponse.order.id}`);
+        openVariantDetailsOptions();
+        cy.get(ORDERS_SELECTORS.openProductDetailsButton).then(
+          openProductInNewTabButton => {
+            cy.wrap(openProductInNewTabButton)
+              .invoke("attr", "target")
+              .should("eq", "_blank");
+            cy.wrap(openProductInNewTabButton)
+              .invoke("attr", "href")
+              .should("contain", productDetails.id.replace("=", ""));
+          },
+        );
+      });
+    },
+  );
+  it(
+    "should open product details from order details - confirmed order. TC: 2134",
+    { tags: ["@orders", "@allEnv", "@stable"] },
+    () => {
+      let order;
+      createReadyToFulfillOrder({
+        customerId: customer.id,
+        channelId: defaultChannel.id,
+        shippingMethod,
+        variantsList,
+        address,
+      }).then(({ order: orderResp }) => {
+        order = orderResp;
+        cy.visit(urlList.orders + `${order.id}`);
+        cy.get(ORDERS_SELECTORS.rowActionButton)
+          .find("a")
+          .then(openProductInNewTabButton => {
+            cy.wrap(openProductInNewTabButton)
+              .invoke("attr", "target")
+              .should("eq", "_blank");
+            cy.wrap(openProductInNewTabButton)
+              .invoke("attr", "href")
+              .should("contain", productDetails.id.replace("=", ""));
+          });
+      });
+    },
+  );
 });

cypress/elements/orders/orders-selectors.js

@@ -10,6 +10,7 @@ export const ORDERS_SELECTORS = {
   refundButton: '[data-test-id="refund-button"]',
   fulfillMenuButton: '[data-test-id="fulfill-menu"]',
   priceCellFirstRowOrderDetails: "[id='glide-cell-5-0']",
+  productNameOrderDetailsRow: "'[id='glide-cell-0-0']'",
   productNameSecondRowOrderDetails: "[id='glide-cell-1-1']",
   quantityCellFirstRowOrderDetails: "[id='glide-cell-4-0']",
   gridClip: "[class='clip-region']",
@@ -24,6 +25,8 @@ export const ORDERS_SELECTORS = {
   grantRefundButton: '[data-test-id="grantRefundButton"]',
   transactionReferenceInput: '[data-test-id="transaction-reference-input"]',
   orderTransactionsList: '[data-test-id="orderTransactionsList"]',
+  openProductDetailsButton: '[data-test-id="open-product-details"]',
+  rowActionButton: '[data-test-id="row-action-button"]',
   captureManualTransactionButton:
     '[data-test-id="captureManualTransactionButton"]',
 };

cypress/support/pages/index.js

@@ -18,6 +18,7 @@ export {
   applyFixedLineDiscountForProduct,
   changeQuantityOfProducts,
   deleteProductFromGridTableOnIndex,
+  openVariantDetailsOptions,
 } from "./ordersOperations";
 export { expectWelcomeMessageIncludes } from "./homePage";
 export { getDisplayedSelectors } from "./permissionsPage";

cypress/support/pages/ordersOperations.js

@@ -60,6 +60,11 @@ export function deleteProductFromGridTableOnIndex(trIndex = 0) {
     .click()
     .wait("@OrderLineDelete");
 }
+
+export function openVariantDetailsOptions(variantIndex = 1) {
+  return cy.get(BUTTON_SELECTORS.showMoreButton).eq(variantIndex).click();
+}
+
 export function addNewProductToOrder(productIndex = 0, variantIndex = 0) {
   cy.get(DRAFT_ORDER_SELECTORS.addProducts).click();
   return cy

src/orders/components/OrderDraftDetailsDatagrid/OrderDraftDetailsDatagrid.tsx

@@ -66,6 +66,7 @@ export const OrderDraftDetailsDatagrid = ({
         Icon: (
           <Link
             to={productUrl(lines[index]?.variant.product.id)}
+            data-test-id="open-product-details"
             target="_blank"
             className={sprinkles({
               display: "flex",