qe-fe-automation/cypress/e2e/profile/lib/payment-method.ts

FE test automation framework using cypress

import { paymentMethodData } from '@fixtures/payment-method/payment-method-data';
import { utilitySelector, Timeouts } from '@utility-lib/index';

const paymentSelectors = {
  formNickname: '[formcontrolname="nickname"]',
  formNumber: '[formcontrolname="number"]',
  formCvc: '[formcontrolname="cvc"]',
  formGivenName: '[formcontrolname="givenName"]',
  formFamilyName: '[formcontrolname="familyName"]',
  formFullName: '[formcontrolname="fullName"]',
  formMonth: '[formcontrolname="expirationMonth"]',
  formYear: '[formcontrolname="expirationYear"]',
  formAddress1: '[formcontrolname="addressLine1"]',
  formCity: '[formcontrolname="city"]',
  formState: '[formcontrolname="state"]',
  formPostalCode: '[formcontrolname="postalCode"]',
  menuOption: '.ta-select-option__label',
  editButton: '[icon="edit"]',
  deleteButton: '.ta-payment-methods__icon-delete',
  paymentCardsMain: '.ta-payment-methods__main',
  paymentCardItem: 'ta-profile-payment-card',
  announcementOverlay: '.announcement-overlay',
  toastMessage: '.ta-toastr-event__message',
  uatpError: '.new-credit-card-modal__uatp-error',
  cardType: (cardType: string) => `[qaid="${cardType}"]`,
  saveCardToggle: '[data-testid="saveCreditCardToggle"] input',
  allowGuestRadio: '[data-testid="saveCCRadioAvailbleGuest"]',
  savePaymentButton: '[qaId="creditCardModalCardSavePayment"]'
};
const ALLOW_CARD_GUEST = 0;
const DONT_ALLOW_CARD_GUEST = 1;

export class PaymentMethods {
  static visitPage(): void {
    cy.allure().logStep('Visit profile page on Payment methods tab');
    cy.visit('app/user2/profile?tab=paymentMethods');
  }

  static clickAddCard(cardTypeQaid: string): void {
    cy.get(paymentSelectors.cardType(cardTypeQaid)).click();
  }

  static enterGivenAndFamilyName(): void {
    cy.get(paymentSelectors.formGivenName).type(paymentMethodData.creditCard.givenName);
    cy.get(paymentSelectors.formFamilyName).type(paymentMethodData.creditCard.familyName);
  }

  static enterPaymentMethodInfo(): void {
    cy.allure().logStep('Entering credit card information');
    cy.get(paymentSelectors.formNumber).type(paymentMethodData.creditCard.number);
    cy.get(paymentSelectors.formMonth).click();
    cy.get(paymentSelectors.menuOption)
      .contains(paymentMethodData.creditCard.expirationMonthName)
      .click();
    cy.get(paymentSelectors.formYear).click();
    cy.get(paymentSelectors.menuOption)
      .contains(paymentMethodData.creditCard.expirationYear)
      .click();
    cy.get(paymentSelectors.formCvc).type(paymentMethodData.creditCard.cvc);
    cy.get(paymentSelectors.formAddress1).type(
      paymentMethodData.navanTexasBillingAddress.addressLine1
    );
    cy.get(paymentSelectors.formCity).type(
      paymentMethodData.navanTexasBillingAddress.city
    );
    cy.get(paymentSelectors.formState).click();
    cy.get(paymentSelectors.menuOption)
      .contains(paymentMethodData.navanTexasBillingAddress.state)
      .click();
    cy.wait(Timeouts.SHORT_TIMEOUT_3_SEC.timeout);
    cy.get(paymentSelectors.formPostalCode).type(
      paymentMethodData.navanTexasBillingAddress.postalCode
    );
  }
  static enterCard(cardNumber: string): void {
    cy.allure().logStep('Entering airplus UATP credit card information');
    cy.get(paymentSelectors.formNumber).type(cardNumber);
  }
  static ShouldNotAddtheCard(): void {
    cy.get(paymentSelectors.uatpError).contains(
      paymentMethodData.errorMessage.uatpcardError
    );
  }

  static clickEditPaymentMethodInfo(index: number): void {
    cy.get(paymentSelectors.editButton).eq(index).click();
  }

  static deletePaymentMethod(index: number): void {
    cy.get(paymentSelectors.deleteButton).eq(index).click();
    cy.get(utilitySelector.closePersonalTravelerInputModal).contains('Delete').click();
    cy.get(paymentSelectors.toastMessage).contains(
      paymentMethodData.deleteCardSuccessfulMessage
    );
  }

  static addCard(cardTypeQaid: string): void {
    this.clickAddCard(cardTypeQaid);
    this.enterNickname(paymentMethodData.nickname);
    this.enterFullName();
    this.enterPaymentMethodInfo();
    this.clickOnSavePayment();
    cy.get(paymentSelectors.toastMessage).contains(
      paymentMethodData.addCardSuccessfulMessage
    );
  }

  static editCard(index: number): void {
    cy.allure().logStep('Editing a card');
    this.clickEditPaymentMethodInfo(index);
    this.enterNickname(paymentMethodData.creditCard._fullName);
    this.clickOnSavePayment();
    cy.get(paymentSelectors.toastMessage).contains(
      paymentMethodData.editCardSuccessfulMessage
    );
  }

  static checkIfCardShould(state: string, index: number, nickname: string): void {
    cy.get(paymentSelectors.paymentCardsMain).eq(index).contains(nickname).should(state);
  }

  static enterFullName(): void {
    cy.get(paymentSelectors.formFullName).type(paymentMethodData.creditCard._fullName);
  }

  static clickOnSavePayment(): void {
    cy.get(paymentSelectors.savePaymentButton).contains('Save payment').click();
  }

  static clickOnSaveCardToggle(): void {
    cy.allure().logStep('setting save card on');
    cy.get(paymentSelectors.saveCardToggle).click();
  }

  static chooseAvailableForGuest(isSave: boolean): void {
    cy.allure().logStep('Choose available for guest');
    cy.get(paymentSelectors.allowGuestRadio)
      .eq(isSave ? ALLOW_CARD_GUEST : DONT_ALLOW_CARD_GUEST)
      .click();
  }
  static enterNickname(nickname: string): void {
    cy.clearInputAndType(paymentSelectors.formNickname, nickname);
  }

  static verifyCompanyCard(): void {
    cy.get(paymentSelectors.paymentCardsMain)
      .eq(2)
      .should('be.visible')
      .should(($el) => {
        expect($el.find(paymentSelectors.paymentCardItem)).to.exist;
      });
  }

  static verifyIsSaveCardToggleOnCorrectMode(isEnabled: boolean): void {
    cy.get(paymentSelectors.saveCardToggle)
      .should('be.visible')
      .should(isEnabled ? 'not.be.disabled' : 'be.disabled');
  }

  static waitForAnnouncement(): void {
    cy.url().should('match', /\/home/);
    if (Cypress.$(paymentSelectors.announcementOverlay).is('visible')) {
      cy.get(paymentSelectors.announcementOverlay, Timeouts.MEDIUM_TIMEOUT_60_SEC).should(
        'not.be.visible'
      );
    }
  }
}