qe-fe-automation/cypress/e2e/growth/growth_common_lib/policy-page.ts

FE test automation framework using cypress

import { AmplitudeEvents, GrowthAmplitudeEvents } from './amplitude-events';
import { Timeouts } from '@utility-lib/constants';

const selectors = {
  talkToAnExpertSection: '[data-testid="travel-policy-talk-to-an-expert"]',
  videoThumbnail: '[data-testid="video-tooltip-thumbnail"]',
  videoDismiss: '[data-testid="video-tooltip-dismiss"]',
  infoTooltip: '[data-testid="travel-policy-self-sell-tooltip"]',
  videoTooltipDropdown: '[data-testid="video-tooltip-dropdown"]',
  videoIframe: '[data-testid="navanPolicyVideo"]',
  videoClose: '[data-testid="navanPolicyVideoClose"]',
  chilipiperModal: '#chilipiper-frame',
  chilipiperCloseModal: '[data-test-id="ModalCloseButton"]',
  adminNavBarPolicyMenuButton: '[data-qaid="POLICY"]',
  travelPolicyButtonInMenu: '[qaid="TRAVEL_POLICY-menu-item"]',
  expenseMAUNumberOnSlider: '[data-testid="3"]'
};

export class PolicyPages {
  static goToTravelPolicyPage(): void {
    cy.allure().logStep('Go to travel policy page');
    cy.visit('app/company/policy/travel');
  }

  static goToExpensePolicyPage(): void {
    cy.allure().logStep('Go to expense policy page');
    cy.visit('app/liquid/admin/company/settings/pricing-overview');
  }

  static verifyVideoTooltipShown(): void {
    cy.allure().logStep('Verify video tooltip is shown');
    cy.get(selectors.videoThumbnail).should('exist');
  }

  static verifyTalkToAnExpertShown(): void {
    cy.allure().logStep('Verify talk to an expert section is shown');
    cy.get(selectors.talkToAnExpertSection).should('exist');
  }

  // for now not in use because im not sure we need to test iframe content
  static checkTalkToAnExpertOpens(): void {
    cy.allure().logStep('check talk to an expert section is open');
    cy.get(selectors.talkToAnExpertSection).click();
    cy.get(selectors.chilipiperModal)
      .its('0.contentDocument')
      .should('exist')
      .then(cy.wrap)
      .find(selectors.chilipiperCloseModal)
      .click();
  }

  static clickOnVideoThumbnailAndVerify(): void {
    cy.allure().logStep('Open video');
    AmplitudeEvents.addExpectedAmplitudeEvents(GrowthAmplitudeEvents.WATCH_VIDEO_CLICKED);
    cy.get(selectors.videoThumbnail).click();
    cy.wait(Timeouts.SHORT_TIMEOUT_3_SEC.timeout);
    cy.get(selectors.videoIframe).should('exist');
    cy.get(selectors.videoClose).click();
    cy.get(selectors.videoIframe).should('not.exist');
  }

  static checkTooltipChangeToDropdown(): void {
    cy.allure().logStep('check tooltip change to dropdown');
    cy.get(selectors.infoTooltip).click();
    cy.get(selectors.videoTooltipDropdown).should('exist');
  }

  static verifyExpensePricingSliderAndMAUAreVisible(): void {
    cy.get(selectors.expenseMAUNumberOnSlider).should('be.visible');
    cy.get('.price-calculation__calculator__slider').should('be.visible');
  }

  static clickTravelPolicyButtonInMenu(): void {
    cy.allure().logStep('click travel policy button in menu');
    cy.get(selectors.adminNavBarPolicyMenuButton).click();
    cy.get(selectors.travelPolicyButtonInMenu).click();
  }

  static verifyTravelAndExpensePolicyPages(): void {
    cy.allure().logStep('Verify travel and expense policy pages');
    this.goToTravelPolicyPage();
    this.verifyVideoTooltipShown();
    this.verifyTalkToAnExpertShown();
    this.clickOnVideoThumbnailAndVerify();
    this.checkTooltipChangeToDropdown();
    this.goToExpensePolicyPage();
    this.verifyExpensePricingSliderAndMAUAreVisible();
  }
}