qe-fe-automation/cypress/e2e/trips/lib/trips.ts

FE test automation framework using cypress

import { Timeouts } from '@utility-lib/index';

const selectors = {
  browseTripsByButton: 'ta-select-dropdown[qaid="filterBrowseBy"]',
  bookingCardId: '.ta-booking-card__booking-id',
  canceledTripTag: '.ta-tag--soft-warning',
  changeCancelButton: '.navan-trip-card__actions__change__button',
  editTripNameButton: '.itinerary-information__title__icon',
  editTripNameInput: '.itinerary-information__title__trip-name-input',
  filterTripsType: 'ta-select-dropdown[qaid="filterTripType"]',
  itineraryCanceledBanner: '.status-wrap--canceled',
  manageTripButton: 'button[qaid="goToItinerary"]',
  mergeTripButton: '.trip-list-filter__row__button',
  mergeTripBox1: '#mat-checkbox-1',
  mergeTripBox2: '#mat-checkbox-2',
  mergeTripComplete: '.merge-trips-modal__footer .ta-button--primary-color',
  mergeTripConfirm: '.ta-merge-trips-footer__merge',
  mergeTripInput: '.merge-trips-modal__field',
  noResultsLink: '.ta-trip-card-no-results__link',
  navanHome: '.navan-home',
  searchMinimized: '.search-form-container-minimized',
  specialTrip: '.navan-home__special-trip',
  tripCardContent: '.navan-trip-card__content',
  tripName: '.navan-trip-card__content__trip-name',
  tripTypeTagBusiness: '.trip-type-tag__business',
  tripTypeTagPersonal: '.trip-type-tag__personal',
  userName: '.ta-user-menu__name--user-name',
  userSearch: '.ta-user-search',
  userSearchPopoverItem: '.ta-user-search-popover__item',
  userSearchTag: '.ta-user-tag--clickable',
  upcomingTrips: '.upcoming-items',
  ulNthChild: (index: number) => `ul > :nth-child(${index})`,
  tripTab: (tabName: string) => `button[aria-label="${tabName}"]`
};

export class TripsPage {
  static visitPage(): void {
    cy.allure().logStep('Visit trips page');
    cy.visit('app/user2/trips');
  }

  static expectNoResultsLinkToExist() {
    cy.get(selectors.noResultsLink).should('be.visible');
  }

  static expectEmptyHomePage() {
    cy.get(selectors.specialTrip).should('not.exist');
    cy.get(selectors.upcomingTrips).should('not.be.visible');
  }

  static openNoResultsLink() {
    cy.get(selectors.noResultsLink).click();
  }

  static expectHomePage() {
    cy.get(selectors.navanHome).should('be.visible');
    cy.get(selectors.searchMinimized).should('be.visible');
    cy.url().then((url) => {
      expect(url).to.include('/app/user2/home');
    });
  }

  static openItinerary() {
    cy.allure().logStep('Opening itinerary page');
    cy.get(selectors.manageTripButton, Timeouts.MEDIUM_TIMEOUT_60_SEC)
      .should('be.visible')
      .click();
  }

  static renameTrip(tripName: string) {
    cy.allure().logStep('Renaming trip');
    cy.get(selectors.editTripNameButton).click();
    cy.clearInputAndType(selectors.editTripNameInput, tripName);
    cy.get(selectors.editTripNameButton).click();
    this.visitPage();
    cy.get(selectors.tripName).should('contain.text', tripName);
  }

  static mergeTrip(mergedName: string) {
    cy.allure().logStep('Merging trips');
    cy.get(selectors.mergeTripButton).click();
    cy.get(selectors.mergeTripBox1).click();
    cy.get(selectors.mergeTripBox2).click();
    cy.get(selectors.mergeTripConfirm).click();
    cy.clearInputAndType(selectors.mergeTripInput, mergedName);
    cy.get(selectors.mergeTripComplete).click();
    cy.get(selectors.tripName).should('contain.text', mergedName);
  }

  static viewCancelledTrips() {
    cy.allure().logStep('Viewing and confirming canceled trips');
    const canceledTab = 'Canceled';
    this.switchTripsTab(canceledTab);
    cy.get(selectors.canceledTripTag).should('exist');
    this.openItinerary();
    cy.get(selectors.itineraryCanceledBanner).should('exist');
  }

  static verifyFilterByTripType() {
    cy.allure().logStep('Filtering by trip type');
    this.switchTripType(2);
    cy.get(selectors.tripTypeTagBusiness).should('be.visible');
    this.switchTripType(3);
    cy.get(selectors.tripTypeTagPersonal).should('be.visible');
    this.switchTripType(1);
    cy.get(selectors.tripTypeTagBusiness).should('be.visible');
    cy.get(selectors.tripTypeTagPersonal).should('be.visible');
  }

  static verifyBrowseTripsBy() {
    cy.allure().logStep('Browse trips by trips and bookings');
    this.switchBrowseBy(2);
    cy.get(selectors.bookingCardId).first().should('be.visible');
    this.switchBrowseBy(1);
    cy.get(selectors.tripCardContent).first().should('be.visible');
  }

  static searchByPassenger() {
    cy.allure().logStep('Search by passenger');
    cy.get(selectors.userName)
      .invoke('text')
      .then((text) => {
        cy.get(selectors.userSearch).type(text);
        cy.get(selectors.userSearchPopoverItem).click();
      });
    cy.get(selectors.userSearchTag).first().should('be.visible');
    cy.get(selectors.tripCardContent).first().should('be.visible');
  }

  static switchTripType(index: number) {
    cy.get(selectors.filterTripsType).click();
    cy.get(selectors.ulNthChild(index)).click();
  }

  static switchBrowseBy(index: number) {
    cy.get(selectors.browseTripsByButton).click();
    cy.get(selectors.ulNthChild(index)).click();
  }

  static switchTripsTab(tabName: string) {
    cy.allure().logStep('Switching to ' + tabName + ' tab');
    cy.get(selectors.tripTab(tabName)).click();
  }
}