Merge pull request #41 from nesrineabdmouleh/enableModalFO

Progi1984 · web-flow · commit b085c92b7c0a · 2024-05-31T14:09:36.000+02:00
Enable Quick view and Block Cart modals
diff --git a/src/data/types/product.ts b/src/data/types/product.ts
@@ -136,17 +136,31 @@ type ProductCustomizations = {
 };
 
 type ProductDetailsBasic = {
-  image: string
+  image?: string
   name: string
   price: number
-  quantity: number
+  quantity?: number
 };
 
 type ProductDetails = ProductDetailsBasic & {
-  summary: string
-  description: string
+  summary?: string
+  description?: string
   shipping?: string
   subtotal?: number
+  coverImage?:string,
+  thumbImage?:string,
+  taxShippingDeliveryLabel?: string,
+  shortDescription?: string,
+};
+
+type ProductDetailsWithDiscount = ProductDetailsBasic & {
+  discountPercentage: string,
+  regularPrice: number,
+  subtotal?: number,
+  taxShippingDeliveryLabel?: string,
+  coverImage?:string,
+  thumbImage?:string,
+  shortDescription?: string,
 };
 
 type ProductDiscount = {
@@ -242,6 +256,7 @@ export type {
   ProductCustomization,
   ProductDetails,
   ProductDetailsBasic,
+  ProductDetailsWithDiscount,
   ProductDiscount,
   ProductFilterMinMax,
   ProductHeaderSummary,
diff --git a/src/index.ts b/src/index.ts
@@ -94,6 +94,8 @@ export {default as foClassicCheckoutPage} from '@pages/FO/classic/checkout';
 export {default as foClassicCheckoutOrderConfirmationPage} from '@pages/FO/classic/checkout/orderConfirmation';
 export {default as foClassicHomePage} from '@pages/FO/classic/home';
 export {default as foClassicLoginPage} from '@pages/FO/classic/login';
+export {default as foClassicModalBlockCartPage} from '@pages/FO/classic/modal/blockCart';
+export {default as foClassicModalQuickViewPage} from '@pages/FO/classic/modal/quickView';
 export {default as foClassicProductPage} from '@pages/FO/classic/product';
 
 // Export Modules
diff --git a/src/interfaces/FO/cart/index.ts b/src/interfaces/FO/cart/index.ts
@@ -1,5 +1,5 @@
 import {FOBasePagePageInterface} from '@interfaces/FO';
-import type {ProductAttribute} from '@data/types/product';
+import type {ProductAttribute, ProductDetailsWithDiscount} from '@data/types/product';
 import type {Page} from '@playwright/test';
 
 export interface FoCartPageInterface extends FOBasePagePageInterface {
@@ -28,7 +28,7 @@ export interface FoCartPageInterface extends FOBasePagePageInterface {
     getNoItemsInYourCartMessage(page: Page): Promise<string>;
     getNotificationMessage(page: Page): Promise<string>;
     getProductAttributes(page: Page, row: number): Promise<ProductAttribute[]>;
-    getProductDetail(page: Page, row: number): Promise<object>;
+    getProductDetail(page: Page, row: number): Promise<ProductDetailsWithDiscount>;
     getProductsNumber(page: Page): Promise<number>;
     getSubtotalDiscountValue(page: Page): Promise<number>;
     isAlertWarningForMinimumPurchaseVisible(page: Page): Promise<boolean>;
diff --git a/src/interfaces/FO/checkout/orderConfirmation.ts b/src/interfaces/FO/checkout/orderConfirmation.ts
@@ -3,7 +3,12 @@ import type {Page} from '@playwright/test';
 
 export interface FoCheckoutOrderConfirmationPageInterface extends FOBasePagePageInterface {
     readonly orderConfirmationCardTitle: string;
+    readonly pageTitle: string;
 
+    getGiftWrappingValue(page: Page): Promise<number>;
     getOrderConfirmationCardTitle(page: Page): Promise<string>;
     getOrderReferenceValue(page: Page): Promise<string>;
+    getPaymentMethod(page: Page): Promise<string>;
+    goToContactUsPage(page: Page): Promise<void>;
+    isFinalSummaryVisible(page: Page): Promise<boolean>;
 }
diff --git a/src/interfaces/FO/modal/blockCart.ts b/src/interfaces/FO/modal/blockCart.ts
@@ -0,0 +1,17 @@
+import {FOBasePagePageInterface} from '@interfaces/FO';
+
+// Import data
+import type {ProductAttribute} from '@data/types/product';
+import type {CartProductDetails} from '@data/types/cart';
+
+import type {Page} from '@playwright/test';
+
+export interface FoModalBlockCartPageInterface extends FOBasePagePageInterface {
+    getBlockCartModalTitle(page: Page): Promise<string>;
+    isBlockCartModalVisible(page: Page): Promise<boolean>;
+    getProductDetailsFromBlockCartModal(page: Page): Promise<CartProductDetails>;
+    getProductAttributesFromBlockCartModal(page: Page): Promise<ProductAttribute[]>;
+    proceedToCheckout(page: Page): Promise<void>;
+    continueShopping(page: Page): Promise<boolean>;
+    closeBlockCartModal(page: Page, clickOutside?: boolean): Promise<boolean>;
+}
diff --git a/src/interfaces/FO/modal/quickView.ts b/src/interfaces/FO/modal/quickView.ts
@@ -0,0 +1,34 @@
+import {FOBasePagePageInterface} from '@interfaces/FO';
+
+// Import data
+import type {ProductAttribute, ProductDetails, ProductDetailsWithDiscount} from '@data/types/product';
+
+import type {Page} from '@playwright/test';
+
+export interface FoModalQuickViewPageInterface extends FOBasePagePageInterface {
+    quickViewModalDiv: string;
+
+    addToCartByQuickView(page: Page): Promise<void>;
+    closeQuickViewModal(page: Page, clickOutside?: boolean): Promise<boolean>;
+    getProductAttributesFromQuickViewModal(page: Page): Promise<ProductAttribute[]>;
+    getProductAvailabilityText(page: Page): Promise<string>;
+    getProductDetailsFromQuickViewModal(page: Page): Promise<ProductDetails>;
+    getProductQuantityFromQuickViewModal(page: Page): Promise<number>;
+    getProductWithDiscountDetailsFromQuickViewModal(page: Page): Promise<ProductDetailsWithDiscount>;
+    getQuickViewCoverImage(page: Page): Promise<string | null>;
+    getQuickViewImageMain(page: Page): Promise<string | null>;
+    getSelectedAttributes(page: Page): Promise<ProductAttribute[]>;
+    getSelectedAttributesFromQuickViewModal(page: Page, attribute: ProductAttribute): Promise<ProductAttribute[]>;
+    getSocialSharingLink(page: Page, socialSharing: string): Promise<string>;
+    isAddToCartButtonDisabled(page: Page): Promise<boolean>;
+    isAddToCartButtonEnabled(page: Page): Promise<boolean>;
+    isQuickViewProductModalVisible(page: Page): Promise<boolean>;
+    selectThumbImage(page: Page, position: number): Promise<string>;
+    setAttribute(page: Page, attributes: ProductAttribute): Promise<void>;
+    setAttributes(page: Page, attributes: ProductAttribute[]): Promise<void>;
+    setAttributesAndAddToCart(page: Page, attributes: ProductAttribute[], quantity: number): Promise<void>;
+    setQuantity(page: Page, quantity: number | string): Promise<void>;
+    setQuantityAndAddToCart(page: Page, quantityWanted?: number | string): Promise<void>;
+    setQuantityByArrowUpDown(page: Page, quantityWanted: number, direction: string): Promise<void>;
+
+}
diff --git a/src/pages/BO/catalog/products/index.ts b/src/pages/BO/catalog/products/index.ts
@@ -4,14 +4,13 @@ import testContext from '@utils/test';
 
 const psVersion = testContext.getPSVersion();
 
-/* eslint-disable global-require */
+/* eslint-disable global-require, @typescript-eslint/no-var-requires */
 function requirePage(): BOProductsPageInterface {
   if (semver.gte(psVersion, '0.0.0')) {
-    return require('@versions/develop/pages/BO/catalog/products');
+    return require('@versions/develop/pages/BO/catalog/products').productsPage;
   }
-  return require('@versions/develop/pages/BO/catalog/products');
+  return require('@versions/develop/pages/BO/catalog/products').productsPage;
 }
-
-/* eslint-enable global-require */
+/* eslint-disable global-require, @typescript-eslint/no-var-requires */
 
 export default requirePage();
diff --git a/src/pages/FO/classic/modal/blockCart.ts b/src/pages/FO/classic/modal/blockCart.ts
@@ -0,0 +1,16 @@
+import type {FoModalBlockCartPageInterface} from '@interfaces/FO/modal/blockCart';
+import testContext from '@utils/test';
+import semver from 'semver';
+
+const psVersion = testContext.getPSVersion();
+
+/* eslint-disable global-require, @typescript-eslint/no-var-requires */
+function requirePage(): FoModalBlockCartPageInterface {
+  if (semver.gte(psVersion, '0.0.0')) {
+    return require('@versions/develop/pages/FO/classic/modal/blockCart').blockCartModal;
+  }
+  return require('@versions/develop/pages/FO/classic/modal/blockCart').blockCartModal;
+}
+/* eslint-enable global-require, @typescript-eslint/no-var-requires */
+
+export default requirePage();
diff --git a/src/pages/FO/classic/modal/quickView.ts b/src/pages/FO/classic/modal/quickView.ts
@@ -0,0 +1,16 @@
+import type {FoModalQuickViewPageInterface} from '@interfaces/FO/modal/quickView';
+import testContext from '@utils/test';
+import semver from 'semver';
+
+const psVersion = testContext.getPSVersion();
+
+/* eslint-disable global-require, @typescript-eslint/no-var-requires */
+function requirePage(): FoModalQuickViewPageInterface {
+  if (semver.gte(psVersion, '0.0.0')) {
+    return require('@versions/develop/pages/FO/classic/modal/quickView').quickViewModal;
+  }
+  return require('@versions/develop/pages/FO/classic/modal/quickView').quickViewModal;
+}
+/* eslint-enable global-require, @typescript-eslint/no-var-requires */
+
+export default requirePage();
diff --git a/src/versions/develop/pages/FO/classic/cart/index.ts b/src/versions/develop/pages/FO/classic/cart/index.ts
@@ -3,7 +3,7 @@ import type {FoCartPageInterface} from '@interfaces/FO/cart';
 import FOBasePage from '@pages/FO/FOBasePage';
 
 // Import data
-import type {ProductAttribute} from '@data/types/product';
+import type {ProductAttribute, ProductDetailsWithDiscount} from '@data/types/product';
 
 import type {Page} from 'playwright';
 
@@ -216,23 +216,15 @@ class CartPage extends FOBasePage implements FoCartPageInterface {
    * @returns {Promise<{discountPercentage: string, image: string|null, quantity: number, totalPrice: number,
    *     price: number, regularPrice: number, name: string}>}
    */
-  async getProductDetail(page: Page, row: number): Promise<{
-    discountPercentage: string,
-    image: string | null,
-    quantity: number,
-    totalPrice: number,
-    price: number,
-    regularPrice: number,
-    name: string,
-  }> {
+  async getProductDetail(page: Page, row: number): Promise<ProductDetailsWithDiscount> {
     return {
       name: await this.getTextContent(page, this.productName(row)),
       regularPrice: await this.getPriceFromText(page, this.productRegularPrice(row)),
       price: await this.getPriceFromText(page, this.productPrice(row)),
       discountPercentage: await this.getTextContent(page, this.productDiscountPercentage(row)),
       image: await this.getAttributeContent(page, this.productImage(row), 'src'),
       quantity: parseFloat(await this.getAttributeContent(page, this.productQuantity(row), 'value') ?? ''),
-      totalPrice: await this.getPriceFromText(page, this.productTotalPrice(row)),
+      subtotal: await this.getPriceFromText(page, this.productTotalPrice(row)),
     };
   }
 
diff --git a/src/versions/develop/pages/FO/classic/modal/blockCart.ts b/src/versions/develop/pages/FO/classic/modal/blockCart.ts
@@ -0,0 +1,163 @@
+// Import pages
+import type {FoModalBlockCartPageInterface} from '@interfaces/FO/modal/blockCart';
+import FOBasePage from '@pages/FO/FOBasePage';
+
+// Import data
+import type {ProductAttribute} from '@data/types/product';
+import type {CartProductDetails} from '@data/types/cart';
+
+import type {Page} from 'playwright';
+
+/**
+ * Block cart modal, contains functions that can be used on the modal
+ * @class
+ * @extends FOBasePage
+ */
+class BlockCartModal extends FOBasePage implements FoModalBlockCartPageInterface {
+  private readonly blockCartLabel: string;
+
+  protected readonly blockCartModalDiv: string;
+
+  protected blockCartModalCloseButton: string;
+
+  private readonly cartModalProductNameBlock: string;
+
+  private readonly cartModalProductPriceBlock: string;
+
+  private readonly cartModalProductSizeBlock: string;
+
+  private readonly cartModalProductColorBlock: string;
+
+  private readonly cartModalProductQuantityBlock: string;
+
+  private readonly cartContentBlock: string;
+
+  protected cartModalProductsCountBlock: string;
+
+  protected cartModalShippingBlock: string;
+
+  protected cartModalSubtotalBlock: string;
+
+  protected cartModalProductTaxInclBlock: string;
+
+  protected cartModalCheckoutLink: string;
+
+  protected continueShoppingButton: string;
+
+  /**
+     * @constructs
+     * Setting up texts and selectors to use on home page
+     */
+  constructor(theme: string = 'classic') {
+    super(theme);
+
+    this.blockCartModalDiv = '#blockcart-modal';
+    this.blockCartLabel = '#myModalLabel';
+    this.blockCartModalCloseButton = `${this.blockCartModalDiv} button.close`;
+    this.cartModalProductNameBlock = `${this.blockCartModalDiv} .product-name`;
+    this.cartModalProductPriceBlock = `${this.blockCartModalDiv} .product-price`;
+    this.cartModalProductSizeBlock = `${this.blockCartModalDiv} .size strong`;
+    this.cartModalProductColorBlock = `${this.blockCartModalDiv} .color strong`;
+    this.cartModalProductQuantityBlock = `${this.blockCartModalDiv} .product-quantity`;
+    this.cartContentBlock = `${this.blockCartModalDiv} .cart-content`;
+    this.cartModalProductsCountBlock = `${this.cartContentBlock} .cart-products-count`;
+    this.cartModalShippingBlock = `${this.cartContentBlock} .shipping.value`;
+    this.cartModalSubtotalBlock = `${this.cartContentBlock} .subtotal.value`;
+    this.cartModalProductTaxInclBlock = `${this.cartContentBlock} .product-total .value`;
+    this.cartModalCheckoutLink = `${this.blockCartModalDiv} div.cart-content-btn a`;
+    this.continueShoppingButton = `${this.blockCartModalDiv} div.cart-content-btn button.btn-secondary`;
+  }
+
+  /**
+     * Get block cart modal title
+     * @param page {Page} Browser tab
+     * @returns {Promise<string>}
+     */
+  async getBlockCartModalTitle(page: Page): Promise<string> {
+    return this.getTextContent(page, this.blockCartLabel);
+  }
+
+  /**
+     * Is block cart modal visible
+     * @param page {Page} Browser tab
+     * @returns {Promise<boolean>}
+     */
+  async isBlockCartModalVisible(page: Page): Promise<boolean> {
+    return this.elementVisible(page, this.blockCartModalDiv, 2000);
+  }
+
+  /**
+     * Get product details from blockCart modal
+     * @param page {Page} Browser tab
+     * @returns {Promise<CartProductDetails>}
+     */
+  async getProductDetailsFromBlockCartModal(page: Page): Promise<CartProductDetails> {
+    return {
+      name: await this.getTextContent(page, this.cartModalProductNameBlock),
+      price: parseFloat((await this.getTextContent(page, this.cartModalProductPriceBlock)).replace('€', '')),
+      quantity: await this.getNumberFromText(page, this.cartModalProductQuantityBlock),
+      cartProductsCount: await this.getNumberFromText(page, this.cartModalProductsCountBlock),
+      cartSubtotal: parseFloat((await this.getTextContent(page, this.cartModalSubtotalBlock)).replace('€', '')),
+      cartShipping: await this.getTextContent(page, this.cartModalShippingBlock),
+      totalTaxIncl: parseFloat((await this.getTextContent(page, this.cartModalProductTaxInclBlock)).replace('€', '')),
+    };
+  }
+
+  /**
+     * Get product attributes from block cart modal
+     * @param page {Page} Browser tab
+     * @returns {Promise<ProductAttribute[]>}
+     */
+  async getProductAttributesFromBlockCartModal(page: Page): Promise<ProductAttribute[]> {
+    return [
+      {
+        name: 'size',
+        value: await this.getTextContent(page, this.cartModalProductSizeBlock),
+      },
+      {
+        name: 'color',
+        value: await this.getTextContent(page, this.cartModalProductColorBlock),
+      },
+    ];
+  }
+
+  /**
+     * Click on proceed to checkout after adding product to cart (in modal homePage)
+     * @param page {Page} Browser tab
+     * @return {Promise<void>}
+     */
+  async proceedToCheckout(page: Page): Promise<void> {
+    await this.clickAndWaitForURL(page, this.cartModalCheckoutLink);
+    await page.waitForLoadState('domcontentloaded');
+  }
+
+  /**
+     * Click on continue shopping
+     * @param page {Page} Browser tab
+     * @returns {Promise<boolean>}
+     */
+  async continueShopping(page: Page): Promise<boolean> {
+    await this.waitForSelectorAndClick(page, this.continueShoppingButton);
+
+    return this.elementNotVisible(page, this.blockCartModalDiv, 2000);
+  }
+
+  /**
+     * Close block cart modal
+     * @param page {Page} Browser tab
+     * @param clickOutside {boolean} True if we need to click outside to close the modal
+     * @returns {Promise<boolean>}
+     */
+  async closeBlockCartModal(page: Page, clickOutside: boolean = false): Promise<boolean> {
+    if (clickOutside) {
+      await page.waitForTimeout(1000);
+      await page.mouse.click(5, 5);
+    } else {
+      await this.waitForSelectorAndClick(page, this.blockCartModalCloseButton);
+    }
+    return this.elementNotVisible(page, this.blockCartModalDiv, 1000);
+  }
+}
+
+const blockCartModal = new BlockCartModal();
+export {blockCartModal, BlockCartModal};
diff --git a/src/versions/develop/pages/FO/classic/modal/quickView.ts b/src/versions/develop/pages/FO/classic/modal/quickView.ts
