ionic-framework/packages/react/test-app/cypress/integration/overlay-hooks/useIonModal.spec.ts

describe('useIonModal', () => {
  beforeEach(() => {
    cy.visit('/overlay-hooks/modal');
  });

  it('display modal using component param', () => {
    //show modal
    cy.get('ion-button').contains('Show Modal using component param').click();
    cy.get('ion-modal ion-title').contains('My Component Modal');

    //increment count
    cy.get('ion-button').contains('Increment Count').click();
    cy.get('ion-button').contains('Increment Count').click();
    cy.get('ion-modal').contains('Count in modal: 2');

    //close modal
    cy.get('ion-button').contains('Close').click();
    cy.get('ion-modal').should('not.exist');

    //verify count on main page was updated
    cy.contains('Count: 2');
  });

  it('display modal using element param', () => {
    //show modal
    cy.get('ion-button').contains('Show Modal using element param').click();
    cy.get('ion-modal ion-title').contains('My Element Modal');

    //increment count
    cy.get('ion-button').contains('Increment Count').click();
    cy.get('ion-button').contains('Increment Count').click();
    cy.get('ion-modal').contains('Count in modal: 2');

    //close modal
    cy.get('ion-button').contains('Close').click();
    cy.get('ion-modal').should('not.exist');

    //verify count on main page was updated
    cy.contains('Count: 2');
  });

  it('display modal and call dismiss to close it', () => {
    //show modal
    cy.get('ion-button').contains('Show Modal, hide after 250 ms').click();
    cy.get('ion-modal ion-title').contains('My Element Modal');

    //verify modal is gone
    cy.get('ion-modal').should('not.exist');
  });


  // This test should pass in v6, skipping until merged with v6
  it.skip('display modal with context', () => {
    //show modal
    cy.get('ion-button').contains('Show Modal with Context').click();
    cy.get('ion-modal ion-title').contains('My Element Modal');

    //verify context value is overriden value
    cy.get('div').contains('overriden value')
  });
});