From c67a0f2fb76e6789bc8598f68d4f145dc06dd38c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 8 May 2023 08:53:42 -0400 Subject: [PATCH] test(modal): migrate to generators (#27331) Issue number: N/A --------- ## What is the current behavior? Modal tests are using legacy syntax ## What is the new behavior? - Modal tests use generator syntax https://github.com/ionic-team/ionic-framework/pull/27331/commits/e3e83ef92f11b05ea4f216b76e9a61dbb65b8e65 - This had an unused screenshot test, so I removed it ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Note: Some of these tests are quite slow, so you may see a CI slowdown if this merges. However, I am working on addressing this in https://github.com/ionic-team/ionic-framework/pull/27397. --- .../modal/test/a11y/modal.e2e-legacy.ts | 39 -- .../components/modal/test/a11y/modal.e2e.ts | 39 ++ .../modal/test/basic/modal.e2e-legacy.ts | 184 -------- .../components/modal/test/basic/modal.e2e.ts | 181 ++++++++ ...ic-present-ios-ltr-Mobile-Chrome-linux.png | Bin ...c-present-ios-ltr-Mobile-Firefox-linux.png | Bin ...ic-present-ios-ltr-Mobile-Safari-linux.png | Bin ...ic-present-ios-rtl-Mobile-Chrome-linux.png | Bin ...c-present-ios-rtl-Mobile-Firefox-linux.png | Bin ...ic-present-ios-rtl-Mobile-Safari-linux.png | Bin ...sic-present-md-ltr-Mobile-Chrome-linux.png | Bin ...ic-present-md-ltr-Mobile-Firefox-linux.png | Bin ...sic-present-md-ltr-Mobile-Safari-linux.png | Bin ...sic-present-md-rtl-Mobile-Chrome-linux.png | Bin ...ic-present-md-rtl-Mobile-Firefox-linux.png | Bin ...sic-present-md-rtl-Mobile-Safari-linux.png | Bin ...ent-tablet-ios-ltr-Mobile-Chrome-linux.png | Bin ...nt-tablet-ios-ltr-Mobile-Firefox-linux.png | Bin ...ent-tablet-ios-ltr-Mobile-Safari-linux.png | Bin ...ent-tablet-ios-rtl-Mobile-Chrome-linux.png | Bin ...nt-tablet-ios-rtl-Mobile-Firefox-linux.png | Bin ...ent-tablet-ios-rtl-Mobile-Safari-linux.png | Bin ...sent-tablet-md-ltr-Mobile-Chrome-linux.png | Bin ...ent-tablet-md-ltr-Mobile-Firefox-linux.png | Bin ...sent-tablet-md-ltr-Mobile-Safari-linux.png | Bin ...sent-tablet-md-rtl-Mobile-Chrome-linux.png | Bin ...ent-tablet-md-rtl-Mobile-Firefox-linux.png | Bin ...sent-tablet-md-rtl-Mobile-Safari-linux.png | Bin .../test/can-dismiss/modal.e2e-legacy.ts | 425 ------------------ .../modal/test/can-dismiss/modal.e2e.ts | 422 +++++++++++++++++ .../modal/test/card-nav/modal.e2e-legacy.ts | 50 --- .../modal/test/card-nav/modal.e2e.ts | 53 +++ .../test/card-refresher/modal.e2e-legacy.ts | 26 -- .../modal/test/card-refresher/modal.e2e.ts | 25 ++ .../card-scroll-target/modal.e2e-legacy.ts | 53 --- .../test/card-scroll-target/modal.e2e.ts | 52 +++ .../{modal.e2e-legacy.ts => modal.e2e.ts} | 45 +- ...om-present-ios-ltr-Mobile-Chrome-linux.png | Bin ...m-present-ios-ltr-Mobile-Firefox-linux.png | Bin ...om-present-ios-ltr-Mobile-Safari-linux.png | Bin ...om-present-ios-rtl-Mobile-Chrome-linux.png | Bin ...m-present-ios-rtl-Mobile-Firefox-linux.png | Bin ...om-present-ios-rtl-Mobile-Safari-linux.png | Bin ...tom-present-md-ltr-Mobile-Chrome-linux.png | Bin ...tom-present-md-ltr-Mobile-Safari-linux.png | Bin ...tom-present-md-rtl-Mobile-Chrome-linux.png | Bin ...tom-present-md-rtl-Mobile-Safari-linux.png | Bin ...ent-tablet-ios-ltr-Mobile-Chrome-linux.png | Bin ...nt-tablet-ios-ltr-Mobile-Firefox-linux.png | Bin ...ent-tablet-ios-ltr-Mobile-Safari-linux.png | Bin ...ent-tablet-ios-rtl-Mobile-Chrome-linux.png | Bin ...nt-tablet-ios-rtl-Mobile-Firefox-linux.png | Bin ...ent-tablet-ios-rtl-Mobile-Safari-linux.png | Bin ...ed-present-ios-ltr-Mobile-Chrome-linux.png | Bin ...d-present-ios-ltr-Mobile-Firefox-linux.png | Bin ...ed-present-ios-ltr-Mobile-Safari-linux.png | Bin ...ed-present-ios-rtl-Mobile-Chrome-linux.png | Bin ...d-present-ios-rtl-Mobile-Firefox-linux.png | Bin ...ed-present-ios-rtl-Mobile-Safari-linux.png | Bin ...ked-present-md-ltr-Mobile-Chrome-linux.png | Bin ...ked-present-md-ltr-Mobile-Safari-linux.png | Bin ...ked-present-md-rtl-Mobile-Chrome-linux.png | Bin ...ked-present-md-rtl-Mobile-Safari-linux.png | Bin ...ent-tablet-ios-ltr-Mobile-Chrome-linux.png | Bin ...nt-tablet-ios-ltr-Mobile-Firefox-linux.png | Bin ...ent-tablet-ios-ltr-Mobile-Safari-linux.png | Bin ...ent-tablet-ios-rtl-Mobile-Chrome-linux.png | Bin ...nt-tablet-ios-rtl-Mobile-Firefox-linux.png | Bin ...ent-tablet-ios-rtl-Mobile-Safari-linux.png | Bin ...rd-present-ios-ltr-Mobile-Chrome-linux.png | Bin ...d-present-ios-ltr-Mobile-Firefox-linux.png | Bin ...rd-present-ios-ltr-Mobile-Safari-linux.png | Bin ...rd-present-ios-rtl-Mobile-Chrome-linux.png | Bin ...d-present-ios-rtl-Mobile-Firefox-linux.png | Bin ...rd-present-ios-rtl-Mobile-Safari-linux.png | Bin ...ard-present-md-ltr-Mobile-Chrome-linux.png | Bin ...ard-present-md-ltr-Mobile-Safari-linux.png | Bin ...ard-present-md-rtl-Mobile-Chrome-linux.png | Bin ...ard-present-md-rtl-Mobile-Safari-linux.png | Bin ...ent-tablet-ios-ltr-Mobile-Chrome-linux.png | Bin ...nt-tablet-ios-ltr-Mobile-Firefox-linux.png | Bin ...ent-tablet-ios-ltr-Mobile-Safari-linux.png | Bin ...ent-tablet-ios-rtl-Mobile-Chrome-linux.png | Bin ...nt-tablet-ios-rtl-Mobile-Firefox-linux.png | Bin ...ent-tablet-ios-rtl-Mobile-Safari-linux.png | Bin ...ed-present-ios-ltr-Mobile-Chrome-linux.png | Bin ...d-present-ios-ltr-Mobile-Firefox-linux.png | Bin ...ed-present-ios-ltr-Mobile-Safari-linux.png | Bin ...ed-present-ios-rtl-Mobile-Chrome-linux.png | Bin ...d-present-ios-rtl-Mobile-Firefox-linux.png | Bin ...ed-present-ios-rtl-Mobile-Safari-linux.png | Bin ...ked-present-md-ltr-Mobile-Chrome-linux.png | Bin ...ked-present-md-ltr-Mobile-Safari-linux.png | Bin ...ked-present-md-rtl-Mobile-Chrome-linux.png | Bin ...ked-present-md-rtl-Mobile-Safari-linux.png | Bin ...ent-tablet-ios-ltr-Mobile-Chrome-linux.png | Bin ...nt-tablet-ios-ltr-Mobile-Firefox-linux.png | Bin ...ent-tablet-ios-ltr-Mobile-Safari-linux.png | Bin ...ent-tablet-ios-rtl-Mobile-Chrome-linux.png | Bin ...nt-tablet-ios-rtl-Mobile-Firefox-linux.png | Bin ...ent-tablet-ios-rtl-Mobile-Safari-linux.png | Bin .../test/custom-dialog/modal.e2e-legacy.ts | 21 - .../modal/test/custom-dialog/modal.e2e.ts | 22 + ...tom-dialog-ios-ltr-Mobile-Chrome-linux.png | Bin ...om-dialog-ios-ltr-Mobile-Firefox-linux.png | Bin ...tom-dialog-ios-ltr-Mobile-Safari-linux.png | Bin ...stom-dialog-md-ltr-Mobile-Chrome-linux.png | Bin ...tom-dialog-md-ltr-Mobile-Firefox-linux.png | Bin ...stom-dialog-md-ltr-Mobile-Safari-linux.png | Bin .../modal/test/custom/modal.e2e-legacy.ts | 26 -- .../components/modal/test/custom/modal.e2e.ts | 28 ++ ...om-present-ios-ltr-Mobile-Chrome-linux.png | Bin ...m-present-ios-ltr-Mobile-Firefox-linux.png | Bin ...om-present-ios-ltr-Mobile-Safari-linux.png | Bin ...om-present-ios-rtl-Mobile-Chrome-linux.png | Bin ...m-present-ios-rtl-Mobile-Firefox-linux.png | Bin ...om-present-ios-rtl-Mobile-Safari-linux.png | Bin ...tom-present-md-ltr-Mobile-Chrome-linux.png | Bin ...om-present-md-ltr-Mobile-Firefox-linux.png | Bin ...tom-present-md-ltr-Mobile-Safari-linux.png | Bin ...tom-present-md-rtl-Mobile-Chrome-linux.png | Bin ...om-present-md-rtl-Mobile-Firefox-linux.png | Bin ...tom-present-md-rtl-Mobile-Safari-linux.png | Bin ...ent-tablet-ios-ltr-Mobile-Chrome-linux.png | Bin ...nt-tablet-ios-ltr-Mobile-Firefox-linux.png | Bin ...ent-tablet-ios-ltr-Mobile-Safari-linux.png | Bin ...ent-tablet-ios-rtl-Mobile-Chrome-linux.png | Bin ...nt-tablet-ios-rtl-Mobile-Firefox-linux.png | Bin ...ent-tablet-ios-rtl-Mobile-Safari-linux.png | Bin ...sent-tablet-md-ltr-Mobile-Chrome-linux.png | Bin ...ent-tablet-md-ltr-Mobile-Firefox-linux.png | Bin ...sent-tablet-md-ltr-Mobile-Safari-linux.png | Bin ...sent-tablet-md-rtl-Mobile-Chrome-linux.png | Bin ...ent-tablet-md-rtl-Mobile-Firefox-linux.png | Bin ...sent-tablet-md-rtl-Mobile-Safari-linux.png | Bin .../modal/test/dark-mode/model.e2e-legacy.ts | 23 - .../modal/test/dark-mode/model.e2e.ts | 23 + ...dark-color-ios-ltr-Mobile-Chrome-linux.png | Bin ...ark-color-ios-ltr-Mobile-Firefox-linux.png | Bin ...dark-color-ios-ltr-Mobile-Safari-linux.png | Bin ...-dark-color-md-ltr-Mobile-Chrome-linux.png | Bin ...dark-color-md-ltr-Mobile-Firefox-linux.png | Bin ...-dark-color-md-ltr-Mobile-Safari-linux.png | Bin core/src/components/modal/test/fixtures.ts | 6 +- .../modal/test/inline/modal.e2e-legacy.ts | 65 --- ...ne-dismiss-ios-ltr-Mobile-Safari-linux.png | Bin 23275 -> 0 bytes .../components/modal/test/inline/modal.e2e.ts | 65 +++ .../modal/test/is-open/modal.e2e-legacy.ts | 34 -- .../modal/test/is-open/modal.e2e.ts | 34 ++ .../modal/test/sheet/modal.e2e-legacy.ts | 279 ------------ .../components/modal/test/sheet/modal.e2e.ts | 279 ++++++++++++ ...et-present-ios-ltr-Mobile-Chrome-linux.png | Bin ...t-present-ios-ltr-Mobile-Firefox-linux.png | Bin ...et-present-ios-ltr-Mobile-Safari-linux.png | Bin ...et-present-ios-rtl-Mobile-Chrome-linux.png | Bin ...t-present-ios-rtl-Mobile-Firefox-linux.png | Bin ...et-present-ios-rtl-Mobile-Safari-linux.png | Bin ...eet-present-md-ltr-Mobile-Chrome-linux.png | Bin ...et-present-md-ltr-Mobile-Firefox-linux.png | Bin ...eet-present-md-ltr-Mobile-Safari-linux.png | Bin ...eet-present-md-rtl-Mobile-Chrome-linux.png | Bin ...et-present-md-rtl-Mobile-Firefox-linux.png | Bin ...eet-present-md-rtl-Mobile-Safari-linux.png | Bin .../modal/test/standalone/modal.e2e-legacy.ts | 21 - .../modal/test/standalone/modal.e2e.ts | 21 + .../modal/test/trigger/modal.e2e-legacy.ts | 35 -- .../modal/test/trigger/modal.e2e.ts | 35 ++ 167 files changed, 1303 insertions(+), 1308 deletions(-) delete mode 100644 core/src/components/modal/test/a11y/modal.e2e-legacy.ts create mode 100644 core/src/components/modal/test/a11y/modal.e2e.ts delete mode 100644 core/src/components/modal/test/basic/modal.e2e-legacy.ts create mode 100644 core/src/components/modal/test/basic/modal.e2e.ts rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/basic/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png (100%) delete mode 100644 core/src/components/modal/test/can-dismiss/modal.e2e-legacy.ts create mode 100644 core/src/components/modal/test/can-dismiss/modal.e2e.ts delete mode 100644 core/src/components/modal/test/card-nav/modal.e2e-legacy.ts create mode 100644 core/src/components/modal/test/card-nav/modal.e2e.ts delete mode 100644 core/src/components/modal/test/card-refresher/modal.e2e-legacy.ts create mode 100644 core/src/components/modal/test/card-refresher/modal.e2e.ts delete mode 100644 core/src/components/modal/test/card-scroll-target/modal.e2e-legacy.ts create mode 100644 core/src/components/modal/test/card-scroll-target/modal.e2e.ts rename core/src/components/modal/test/card/{modal.e2e-legacy.ts => modal.e2e.ts} (80%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-tablet-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-tablet-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-tablet-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-tablet-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-tablet-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-present-tablet-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/card/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-card-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png (100%) delete mode 100644 core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts create mode 100644 core/src/components/modal/test/custom-dialog/modal.e2e.ts rename core/src/components/modal/test/custom-dialog/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/custom-dialog/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/custom-dialog/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/custom-dialog/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/custom-dialog/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/custom-dialog/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png (100%) delete mode 100644 core/src/components/modal/test/custom/modal.e2e-legacy.ts create mode 100644 core/src/components/modal/test/custom/modal.e2e.ts rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-tablet-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-tablet-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-tablet-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-tablet-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-tablet-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/custom/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-custom-present-tablet-md-rtl-Mobile-Safari-linux.png (100%) delete mode 100644 core/src/components/modal/test/dark-mode/model.e2e-legacy.ts create mode 100644 core/src/components/modal/test/dark-mode/model.e2e.ts rename core/src/components/modal/test/dark-mode/{model.e2e-legacy.ts-snapshots => model.e2e.ts-snapshots}/modal-dark-color-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/dark-mode/{model.e2e-legacy.ts-snapshots => model.e2e.ts-snapshots}/modal-dark-color-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/dark-mode/{model.e2e-legacy.ts-snapshots => model.e2e.ts-snapshots}/modal-dark-color-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/dark-mode/{model.e2e-legacy.ts-snapshots => model.e2e.ts-snapshots}/modal-dark-color-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/dark-mode/{model.e2e-legacy.ts-snapshots => model.e2e.ts-snapshots}/modal-dark-color-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/dark-mode/{model.e2e-legacy.ts-snapshots => model.e2e.ts-snapshots}/modal-dark-color-md-ltr-Mobile-Safari-linux.png (100%) delete mode 100644 core/src/components/modal/test/inline/modal.e2e-legacy.ts delete mode 100644 core/src/components/modal/test/inline/modal.e2e-legacy.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/modal/test/inline/modal.e2e.ts delete mode 100644 core/src/components/modal/test/is-open/modal.e2e-legacy.ts create mode 100644 core/src/components/modal/test/is-open/modal.e2e.ts delete mode 100644 core/src/components/modal/test/sheet/modal.e2e-legacy.ts create mode 100644 core/src/components/modal/test/sheet/modal.e2e.ts rename core/src/components/modal/test/sheet/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/sheet/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-sheet-present-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/sheet/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/sheet/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-sheet-present-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/sheet/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-sheet-present-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/sheet/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-sheet-present-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/sheet/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/sheet/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-sheet-present-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/sheet/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-sheet-present-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/modal/test/sheet/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-sheet-present-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/modal/test/sheet/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-sheet-present-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/modal/test/sheet/{modal.e2e-legacy.ts-snapshots => modal.e2e.ts-snapshots}/modal-sheet-present-md-rtl-Mobile-Safari-linux.png (100%) delete mode 100644 core/src/components/modal/test/standalone/modal.e2e-legacy.ts create mode 100644 core/src/components/modal/test/standalone/modal.e2e.ts delete mode 100644 core/src/components/modal/test/trigger/modal.e2e-legacy.ts create mode 100644 core/src/components/modal/test/trigger/modal.e2e.ts diff --git a/core/src/components/modal/test/a11y/modal.e2e-legacy.ts b/core/src/components/modal/test/a11y/modal.e2e-legacy.ts deleted file mode 100644 index 6a040388a2..0000000000 --- a/core/src/components/modal/test/a11y/modal.e2e-legacy.ts +++ /dev/null @@ -1,39 +0,0 @@ -import AxeBuilder from '@axe-core/playwright'; -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('modal: a11y', () => { - test.beforeEach(async ({ skip }) => { - skip.rtl(); - skip.mode('md'); - }); - - test('should not have accessibility violations', async ({ page }) => { - await page.goto(`/src/components/modal/test/a11y`); - - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const button = page.locator('#open-modal'); - const modal = page.locator('ion-modal .modal-wrapper'); - - await expect(modal).toHaveAttribute('role', 'dialog'); - - await button.click(); - await ionModalDidPresent.next(); - - const results = await new AxeBuilder({ page }).analyze(); - expect(results.violations).toEqual([]); - }); - - test('should allow for custom role', async ({ page }) => { - /** - * Note: This example should not be used in production. - * This only serves to check that `role` can be customized. - */ - await page.setContent(` - - `); - const modal = page.locator('ion-modal .modal-wrapper'); - - await expect(modal).toHaveAttribute('role', 'alertdialog'); - }); -}); diff --git a/core/src/components/modal/test/a11y/modal.e2e.ts b/core/src/components/modal/test/a11y/modal.e2e.ts new file mode 100644 index 0000000000..656c30df77 --- /dev/null +++ b/core/src/components/modal/test/a11y/modal.e2e.ts @@ -0,0 +1,39 @@ +import AxeBuilder from '@axe-core/playwright'; +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('modal: a11y'), () => { + test('should not have accessibility violations', async ({ page }) => { + await page.goto(`/src/components/modal/test/a11y`, config); + + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const button = page.locator('#open-modal'); + const modal = page.locator('ion-modal .modal-wrapper'); + + await expect(modal).toHaveAttribute('role', 'dialog'); + + await button.click(); + await ionModalDidPresent.next(); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test('should allow for custom role', async ({ page }) => { + /** + * Note: This example should not be used in production. + * This only serves to check that `role` can be customized. + */ + await page.setContent( + ` + + `, + config + ); + const modal = page.locator('ion-modal .modal-wrapper'); + + await expect(modal).toHaveAttribute('role', 'alertdialog'); + }); + }); +}); diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts b/core/src/components/modal/test/basic/modal.e2e-legacy.ts deleted file mode 100644 index c44d38303b..0000000000 --- a/core/src/components/modal/test/basic/modal.e2e-legacy.ts +++ /dev/null @@ -1,184 +0,0 @@ -import { expect } from '@playwright/test'; -import { test, Viewports } from '@utils/test/playwright'; -import type { E2EPage } from '@utils/test/playwright'; - -test.describe('modal: focus trapping', () => { - test.beforeEach(async ({ skip }) => { - skip.rtl(); - skip.mode('md'); - skip.browser('firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content'); - }); - test('focus should be trapped inside of modal', async ({ page, browserName }) => { - /** - * The default WebKit behavior is to - * highlight items on webpages with Option-Tab. - * See "Press Tab to highlight each item on a webpage" - * in Safari Preferences > Advanced. - */ - const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; - await page.goto('/src/components/modal/test/basic'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#basic-modal'); - - await ionModalDidPresent.next(); - - const dismissButton = page.locator('ion-button.dismiss'); - - await page.keyboard.press(tabKey); - await expect(dismissButton).toBeFocused(); - - await page.keyboard.press(`Shift+${tabKey}`); - - await expect(dismissButton).toBeFocused(); - - await page.keyboard.press(tabKey); - await expect(dismissButton).toBeFocused(); - }); - - test('focus should be returned to previously focused element when dismissing modal', async ({ - page, - browserName, - }) => { - await page.goto('/src/components/modal/test/basic'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - const modalButton = page.locator('#basic-modal'); - const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; - - // Focus #basic-modal button - await page.keyboard.press(tabKey); - await expect(modalButton).toBeFocused(); - - await page.keyboard.press('Space'); - await ionModalDidPresent.next(); - - await page.keyboard.press('Escape'); - await ionModalDidDismiss.next(); - - await expect(modalButton).toBeFocused(); - }); -}); - -test.describe('modal: rendering', () => { - const runVisualTests = async (page: E2EPage, screenshotModifier = '') => { - await page.goto('/src/components/modal/test/basic'); - - const ionModalWillDismiss = await page.spyOnEvent('ionModalWillDismiss'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - const ionModalWillPresent = await page.spyOnEvent('ionModalWillPresent'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#basic-modal'); - - await ionModalWillPresent.next(); - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - await expect(modal).toHaveClass(/show-modal/); - - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(`modal-basic-present-${screenshotModifier}${page.getSnapshotSettings()}.png`); - - await modal.evaluate((el: HTMLIonModalElement) => { - el.dismiss(); - }); - - await ionModalWillDismiss.next(); - await ionModalDidDismiss.next(); - - await expect(modal).not.toHaveClass(/show-modal/); - await expect(modal).toBeHidden(); - }; - - test('should not have visual regressions', async ({ page }) => { - await runVisualTests(page); - }); - test('should not have visual regressions with tablet viewport', async ({ page }) => { - await page.setViewportSize(Viewports.tablet.portrait); - await runVisualTests(page, 'tablet-'); - }); -}); - -test.describe('modal: htmlAttributes inheritance', () => { - test('should correctly inherit attributes on host', async ({ page, skip }) => { - skip.rtl(); - skip.mode('md'); - await page.goto('/src/components/modal/test/basic'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#basic-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - - const attribute = await modal.getAttribute('data-testid'); - expect(attribute).toBe('basic-modal'); - }); -}); - -test.describe('modal: backdrop', () => { - test.beforeEach(async ({ page, skip }) => { - skip.rtl(); - skip.mode('md'); - await page.goto('/src/components/modal/test/basic'); - }); - - test('it should dismiss the modal when clicking the backdrop', async ({ page }) => { - await page.setViewportSize(Viewports.tablet.portrait); - - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - await page.click('#basic-modal'); - await ionModalDidPresent.next(); - - await page.mouse.click(20, 20); - await ionModalDidDismiss.next(); - }); -}); - -test.describe('modal: incorrect usage', () => { - test.beforeEach(async ({ page, skip }) => { - skip.rtl(); - skip.mode('md'); - await page.goto('/src/components/modal/test/basic'); - }); - - test('it should warn when setting a breakpoint on a non-sheet modal', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - const warnings: string[] = []; - - page.on('console', (ev) => { - if (ev.type() === 'warning') { - warnings.push(ev.text()); - } - }); - - await page.click('#basic-modal'); - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5)); - - expect(warnings.length).toBe(1); - expect(warnings[0]).toBe('[Ionic Warning]: setCurrentBreakpoint is only supported on sheet modals.'); - }); - - test('it should return undefined when getting the breakpoint on a non-sheet modal', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#basic-modal'); - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => { - return el.getCurrentBreakpoint(); - }); - - expect(breakpoint).toBe(undefined); - }); -}); diff --git a/core/src/components/modal/test/basic/modal.e2e.ts b/core/src/components/modal/test/basic/modal.e2e.ts new file mode 100644 index 0000000000..03c8b28cbb --- /dev/null +++ b/core/src/components/modal/test/basic/modal.e2e.ts @@ -0,0 +1,181 @@ +import { expect } from '@playwright/test'; +import { configs, test, Viewports } from '@utils/test/playwright'; +import type { E2EPage } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('modal: focus trapping'), () => { + test.beforeEach(async ({ skip }) => { + skip.browser('firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content'); + }); + test('focus should be trapped inside of modal', async ({ page, browserName }) => { + /** + * The default WebKit behavior is to + * highlight items on webpages with Option-Tab. + * See "Press Tab to highlight each item on a webpage" + * in Safari Preferences > Advanced. + */ + const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; + await page.goto('/src/components/modal/test/basic', config); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#basic-modal'); + + await ionModalDidPresent.next(); + + const dismissButton = page.locator('ion-button.dismiss'); + + await page.keyboard.press(tabKey); + await expect(dismissButton).toBeFocused(); + + await page.keyboard.press(`Shift+${tabKey}`); + + await expect(dismissButton).toBeFocused(); + + await page.keyboard.press(tabKey); + await expect(dismissButton).toBeFocused(); + }); + + test('focus should be returned to previously focused element when dismissing modal', async ({ + page, + browserName, + }) => { + await page.goto('/src/components/modal/test/basic', config); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const modalButton = page.locator('#basic-modal'); + const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; + + // Focus #basic-modal button + await page.keyboard.press(tabKey); + await expect(modalButton).toBeFocused(); + + await page.keyboard.press('Space'); + await ionModalDidPresent.next(); + + await page.keyboard.press('Escape'); + await ionModalDidDismiss.next(); + + await expect(modalButton).toBeFocused(); + }); + }); +}); + +configs().forEach(({ title, screenshot, config }) => { + test.describe(title('modal: rendering'), () => { + const runVisualTests = async (page: E2EPage, screenshotModifier = '') => { + await page.goto('/src/components/modal/test/basic', config); + + const ionModalWillDismiss = await page.spyOnEvent('ionModalWillDismiss'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const ionModalWillPresent = await page.spyOnEvent('ionModalWillPresent'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#basic-modal'); + + await ionModalWillPresent.next(); + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + await expect(modal).toHaveClass(/show-modal/); + + await page.setIonViewport(); + + await expect(page).toHaveScreenshot(screenshot(`modal-basic-present${screenshotModifier}`)); + + await modal.evaluate((el: HTMLIonModalElement) => { + el.dismiss(); + }); + + await ionModalWillDismiss.next(); + await ionModalDidDismiss.next(); + + await expect(modal).not.toHaveClass(/show-modal/); + await expect(modal).toBeHidden(); + }; + + test('should not have visual regressions', async ({ page }) => { + await runVisualTests(page); + }); + test('should not have visual regressions with tablet viewport', async ({ page }) => { + await page.setViewportSize(Viewports.tablet.portrait); + await runVisualTests(page, '-tablet'); + }); + }); +}); +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('modal: htmlAttributes inheritance'), () => { + test('should correctly inherit attributes on host', async ({ page }) => { + await page.goto('/src/components/modal/test/basic', config); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#basic-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + + const attribute = await modal.getAttribute('data-testid'); + expect(attribute).toBe('basic-modal'); + }); + }); + + test.describe(title('modal: backdrop'), () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/basic', config); + }); + + test('it should dismiss the modal when clicking the backdrop', async ({ page }) => { + await page.setViewportSize(Viewports.tablet.portrait); + + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#basic-modal'); + await ionModalDidPresent.next(); + + await page.mouse.click(20, 20); + await ionModalDidDismiss.next(); + }); + }); + + test.describe(title('modal: incorrect usage'), () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/basic', config); + }); + + test('it should warn when setting a breakpoint on a non-sheet modal', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + const warnings: string[] = []; + + page.on('console', (ev) => { + if (ev.type() === 'warning') { + warnings.push(ev.text()); + } + }); + + await page.click('#basic-modal'); + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5)); + + expect(warnings.length).toBe(1); + expect(warnings[0]).toBe('[Ionic Warning]: setCurrentBreakpoint is only supported on sheet modals.'); + }); + + test('it should return undefined when getting the breakpoint on a non-sheet modal', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#basic-modal'); + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => { + return el.getCurrentBreakpoint(); + }); + + expect(breakpoint).toBe(undefined); + }); + }); +}); diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/can-dismiss/modal.e2e-legacy.ts b/core/src/components/modal/test/can-dismiss/modal.e2e-legacy.ts deleted file mode 100644 index a92779f78f..0000000000 --- a/core/src/components/modal/test/can-dismiss/modal.e2e-legacy.ts +++ /dev/null @@ -1,425 +0,0 @@ -import { expect } from '@playwright/test'; -import { test, dragElementBy } from '@utils/test/playwright'; - -test.describe('modal: canDismiss', () => { - test.describe('regular modal', () => { - test.beforeEach(async ({ page, skip }) => { - skip.rtl(); - await page.goto('/src/components/modal/test/can-dismiss'); - }); - test('should dismiss when canDismiss is true', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - expect(returnValue).toBe(true); - }); - test('should not dismiss when canDismiss is false', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#radio-false'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - expect(returnValue).toBe(false); - }); - test('should dismiss when canDismiss is Promise', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#radio-promise-true'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - expect(returnValue).toBe(true); - }); - test('should not dismiss when canDismiss is Promise', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#radio-promise-false'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - expect(returnValue).toBe(false); - }); - test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent'); - - await page.click('#radio-action-sheet'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - await page.keyboard.press('Escape'); - - await ionActionSheetDidPresent.next(); - await page.click('.button-confirm'); - - await ionModalDidDismiss.next(); - }); - }); - test.describe('card modal', () => { - test.beforeEach(async ({ page, skip }) => { - skip.rtl(); - skip.mode('md'); - await page.goto('/src/components/modal/test/can-dismiss'); - await page.click('#radio-card'); - }); - test('should dismiss when canDismiss is true', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - expect(returnValue).toBe(true); - }); - test('should not dismiss when canDismiss is false', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#radio-false'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - expect(returnValue).toBe(false); - }); - test('should dismiss when canDismiss is Promise', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#radio-promise-true'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - expect(returnValue).toBe(true); - }); - test('should not dismiss when canDismiss is Promise', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#radio-promise-false'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - expect(returnValue).toBe(false); - }); - }); - test.describe('card modal - iOS swiping', () => { - test.beforeEach(async ({ page, skip }) => { - skip.rtl(); - skip.mode('md'); - await page.goto('/src/components/modal/test/can-dismiss'); - await page.click('#radio-card'); - }); - - test('should dismiss on swipe when canDismiss is true', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modalHeader = page.locator('ion-modal #modal-header'); - await dragElementBy(modalHeader, page, 0, 500); - - await ionModalDidDismiss.next(); - }); - test('should not dismiss on swipe when canDismiss is false', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#radio-false'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modalHeader = page.locator('#modal-header'); - await dragElementBy(modalHeader, page, 0, 500); - - const modal = page.locator('ion-modal'); - expect(modal).not.toBe(null); - }); - test('should dismiss on swipe when canDismiss is Promise', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - await page.click('#radio-promise-true'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modalHeader = page.locator('#modal-header'); - await dragElementBy(modalHeader, page, 0, 500); - - await ionModalDidDismiss.next(); - }); - test('should not dismiss on swipe when canDismiss is Promise', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionHandlerDone = await page.spyOnEvent('ionHandlerDone'); - - await page.click('#radio-promise-false'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modalHeader = page.locator('#modal-header'); - await dragElementBy(modalHeader, page, 0, 500); - - await ionHandlerDone.next(); - - const modal = page.locator('ion-modal'); - expect(modal).not.toBe(null); - }); - test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent'); - - await page.click('#radio-action-sheet'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modalHeader = page.locator('#modal-header'); - await dragElementBy(modalHeader, page, 0, 500); - - await ionActionSheetDidPresent.next(); - await page.click('.button-confirm'); - - await ionModalDidDismiss.next(); - }); - }); - - test.describe('sheet modal', () => { - test.beforeEach(async ({ page, skip }) => { - skip.rtl(); - await page.goto('/src/components/modal/test/can-dismiss'); - await page.click('#radio-sheet'); - }); - test('should dismiss when canDismiss is true', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - expect(returnValue).toBe(true); - }); - test('should not dismiss when canDismiss is false', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#radio-false'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - expect(returnValue).toBe(false); - }); - test('should dismiss when canDismiss is Promise', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#radio-promise-true'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - expect(returnValue).toBe(true); - }); - test('should not dismiss when canDismiss is Promise', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#radio-promise-false'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - expect(returnValue).toBe(false); - }); - test('should dismiss on swipe when canDismiss is true', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modalHeader = page.locator('#modal-header'); - await dragElementBy(modalHeader, page, 0, 500); - - await ionModalDidDismiss.next(); - }); - test('should not dismiss on swipe when canDismiss is false', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#radio-false'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modalHeader = page.locator('#modal-header'); - await dragElementBy(modalHeader, page, 0, 500); - - const modal = page.locator('ion-modal'); - expect(modal).not.toBe(null); - }); - test('should dismiss on swipe when canDismiss is Promise', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - await page.click('#radio-promise-true'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modalHeader = page.locator('#modal-header'); - await dragElementBy(modalHeader, page, 0, 500); - - await ionModalDidDismiss.next(); - }); - test('should not dismiss on swipe when canDismiss is Promise', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionHandlerDone = await page.spyOnEvent('ionHandlerDone'); - - await page.click('#radio-promise-false'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modalHeader = page.locator('#modal-header'); - await dragElementBy(modalHeader, page, 0, 500); - - await ionHandlerDone.next(); - - const modal = page.locator('ion-modal'); - expect(modal).not.toBe(null); - }); - test('should not dismiss on swipe when not attempting to close', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#radio-promise-true'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modalHeader = page.locator('#modal-header'); - await dragElementBy(modalHeader, page, 0, -500); - - const modal = page.locator('ion-modal'); - expect(modal).not.toBe(null); - }); - test('should hit the dismiss threshold when swiping', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - await page.click('#radio-promise-true'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modalHeader = page.locator('#modal-header'); - await dragElementBy(modalHeader, page, 0, 100); - - await ionModalDidDismiss.next(); - }); - test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent'); - - await page.click('#radio-action-sheet'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modalHeader = page.locator('#modal-header'); - await dragElementBy(modalHeader, page, 0, 500); - - await ionActionSheetDidPresent.next(); - await page.click('.button-confirm'); - - await ionModalDidDismiss.next(); - }); - }); - - test.describe('function params', () => { - test.beforeEach(async ({ page, skip }) => { - skip.mode('md'); - skip.rtl(); - await page.goto('/src/components/modal/test/can-dismiss'); - }); - test('should pass data and role when calling dismiss', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionHandlerDone = await page.spyOnEvent('ionHandlerDone'); - - await page.click('#radio-promise-true'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - await modal.evaluate((el: HTMLIonModalElement) => el.dismiss('my data', 'my role')); - - await ionHandlerDone.next(); - await expect(ionHandlerDone).toHaveReceivedEventDetail({ data: 'my data', role: 'my role' }); - }); - test('should pass data and role when swiping', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionHandlerDone = await page.spyOnEvent('ionHandlerDone'); - - await page.click('#radio-card'); - await page.click('#radio-promise-true'); - await page.click('#show-modal'); - - await ionModalDidPresent.next(); - - const modalHeader = page.locator('#modal-header'); - await dragElementBy(modalHeader, page, 0, 500); - - await ionHandlerDone.next(); - await expect(ionHandlerDone).toHaveReceivedEventDetail({ data: undefined, role: 'gesture' }); - }); - }); -}); diff --git a/core/src/components/modal/test/can-dismiss/modal.e2e.ts b/core/src/components/modal/test/can-dismiss/modal.e2e.ts new file mode 100644 index 0000000000..9a7369c27c --- /dev/null +++ b/core/src/components/modal/test/can-dismiss/modal.e2e.ts @@ -0,0 +1,422 @@ +import { expect } from '@playwright/test'; +import { configs, test, dragElementBy } from '@utils/test/playwright'; + +/** + * This behavior does not vary across modes/directions + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('modal: canDismiss'), () => { + test.describe('regular modal', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/can-dismiss', config); + }); + test('should dismiss when canDismiss is true', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + expect(returnValue).toBe(true); + }); + test('should not dismiss when canDismiss is false', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#radio-false'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + expect(returnValue).toBe(false); + }); + test('should dismiss when canDismiss is Promise', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#radio-promise-true'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + expect(returnValue).toBe(true); + }); + test('should not dismiss when canDismiss is Promise', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#radio-promise-false'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + expect(returnValue).toBe(false); + }); + test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent'); + + await page.click('#radio-action-sheet'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + await page.keyboard.press('Escape'); + + await ionActionSheetDidPresent.next(); + await page.click('.button-confirm'); + + await ionModalDidDismiss.next(); + }); + }); + test.describe('card modal', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/can-dismiss', config); + await page.click('#radio-card'); + }); + test('should dismiss when canDismiss is true', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + expect(returnValue).toBe(true); + }); + test('should not dismiss when canDismiss is false', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#radio-false'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + expect(returnValue).toBe(false); + }); + test('should dismiss when canDismiss is Promise', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#radio-promise-true'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + expect(returnValue).toBe(true); + }); + test('should not dismiss when canDismiss is Promise', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#radio-promise-false'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + expect(returnValue).toBe(false); + }); + }); + test.describe('card modal - iOS swiping', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/can-dismiss', config); + await page.click('#radio-card'); + }); + + test('should dismiss on swipe when canDismiss is true', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modalHeader = page.locator('ion-modal #modal-header'); + await dragElementBy(modalHeader, page, 0, 500); + + await ionModalDidDismiss.next(); + }); + test('should not dismiss on swipe when canDismiss is false', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#radio-false'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modalHeader = page.locator('#modal-header'); + await dragElementBy(modalHeader, page, 0, 500); + + const modal = page.locator('ion-modal'); + expect(modal).not.toBe(null); + }); + test('should dismiss on swipe when canDismiss is Promise', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#radio-promise-true'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modalHeader = page.locator('#modal-header'); + await dragElementBy(modalHeader, page, 0, 500); + + await ionModalDidDismiss.next(); + }); + test('should not dismiss on swipe when canDismiss is Promise', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionHandlerDone = await page.spyOnEvent('ionHandlerDone'); + + await page.click('#radio-promise-false'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modalHeader = page.locator('#modal-header'); + await dragElementBy(modalHeader, page, 0, 500); + + await ionHandlerDone.next(); + + const modal = page.locator('ion-modal'); + expect(modal).not.toBe(null); + }); + test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent'); + + await page.click('#radio-action-sheet'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modalHeader = page.locator('#modal-header'); + await dragElementBy(modalHeader, page, 0, 500); + + await ionActionSheetDidPresent.next(); + await page.click('.button-confirm'); + + await ionModalDidDismiss.next(); + }); + }); + + test.describe('sheet modal', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/can-dismiss', config); + await page.click('#radio-sheet'); + }); + test('should dismiss when canDismiss is true', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + expect(returnValue).toBe(true); + }); + test('should not dismiss when canDismiss is false', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#radio-false'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + expect(returnValue).toBe(false); + }); + test('should dismiss when canDismiss is Promise', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#radio-promise-true'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + expect(returnValue).toBe(true); + }); + test('should not dismiss when canDismiss is Promise', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#radio-promise-false'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + expect(returnValue).toBe(false); + }); + test('should dismiss on swipe when canDismiss is true', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modalHeader = page.locator('#modal-header'); + await dragElementBy(modalHeader, page, 0, 500); + + await ionModalDidDismiss.next(); + }); + test('should not dismiss on swipe when canDismiss is false', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#radio-false'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modalHeader = page.locator('#modal-header'); + await dragElementBy(modalHeader, page, 0, 500); + + const modal = page.locator('ion-modal'); + expect(modal).not.toBe(null); + }); + test('should dismiss on swipe when canDismiss is Promise', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#radio-promise-true'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modalHeader = page.locator('#modal-header'); + await dragElementBy(modalHeader, page, 0, 500); + + await ionModalDidDismiss.next(); + }); + test('should not dismiss on swipe when canDismiss is Promise', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionHandlerDone = await page.spyOnEvent('ionHandlerDone'); + + await page.click('#radio-promise-false'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modalHeader = page.locator('#modal-header'); + await dragElementBy(modalHeader, page, 0, 500); + + await ionHandlerDone.next(); + + const modal = page.locator('ion-modal'); + expect(modal).not.toBe(null); + }); + test('should not dismiss on swipe when not attempting to close', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#radio-promise-true'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modalHeader = page.locator('#modal-header'); + await dragElementBy(modalHeader, page, 0, -500); + + const modal = page.locator('ion-modal'); + expect(modal).not.toBe(null); + }); + test('should hit the dismiss threshold when swiping', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#radio-promise-true'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modalHeader = page.locator('#modal-header'); + await dragElementBy(modalHeader, page, 0, 100); + + await ionModalDidDismiss.next(); + }); + test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent'); + + await page.click('#radio-action-sheet'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modalHeader = page.locator('#modal-header'); + await dragElementBy(modalHeader, page, 0, 500); + + await ionActionSheetDidPresent.next(); + await page.click('.button-confirm'); + + await ionModalDidDismiss.next(); + }); + }); + + test.describe('function params', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/can-dismiss', config); + }); + test('should pass data and role when calling dismiss', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionHandlerDone = await page.spyOnEvent('ionHandlerDone'); + + await page.click('#radio-promise-true'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + await modal.evaluate((el: HTMLIonModalElement) => el.dismiss('my data', 'my role')); + + await ionHandlerDone.next(); + await expect(ionHandlerDone).toHaveReceivedEventDetail({ data: 'my data', role: 'my role' }); + }); + test('should pass data and role when swiping', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionHandlerDone = await page.spyOnEvent('ionHandlerDone'); + + await page.click('#radio-card'); + await page.click('#radio-promise-true'); + await page.click('#show-modal'); + + await ionModalDidPresent.next(); + + const modalHeader = page.locator('#modal-header'); + await dragElementBy(modalHeader, page, 0, 500); + + await ionHandlerDone.next(); + await expect(ionHandlerDone).toHaveReceivedEventDetail({ data: undefined, role: 'gesture' }); + }); + }); + }); +}); diff --git a/core/src/components/modal/test/card-nav/modal.e2e-legacy.ts b/core/src/components/modal/test/card-nav/modal.e2e-legacy.ts deleted file mode 100644 index 76f081a143..0000000000 --- a/core/src/components/modal/test/card-nav/modal.e2e-legacy.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { expect } from '@playwright/test'; -import { test, dragElementBy } from '@utils/test/playwright'; - -import { CardModalPage } from '../fixtures'; - -test.describe('card modal - nav', () => { - let cardModalPage: CardModalPage; - test.beforeEach(async ({ page, skip }) => { - skip.mode('md'); - skip.rtl('This test only verifies that the gesture activates inside of a modal.'); - skip.browser( - (browserName: string) => browserName !== 'chromium', - 'dragElementBy is flaky outside of Chrome browsers.' - ); - - cardModalPage = new CardModalPage(page); - await cardModalPage.navigate('/src/components/modal/test/card-nav?ionic:_testing=false'); - }); - test('it should swipe to go back', async ({ page }) => { - await cardModalPage.openModalByTrigger('#open-modal'); - - const nav = page.locator('ion-nav') as any; - const ionNavDidChange = await nav.spyOnEvent('ionNavDidChange'); - - await page.click('#go-page-two'); - - await ionNavDidChange.next(); - - const pageOne = page.locator('page-one'); - await expect(pageOne).toHaveClass(/ion-page-hidden/); - - const content = page.locator('.page-two-content'); - - await dragElementBy(content, page, 1000, 0, 10); - - await ionNavDidChange.next(); - }); - test('should swipe to close', async ({ page }) => { - await cardModalPage.openModalByTrigger('#open-modal'); - - const nav = page.locator('ion-nav') as any; - const ionNavDidChange = await nav.spyOnEvent('ionNavDidChange'); - - await page.click('#go-page-two'); - - await ionNavDidChange.next(); - - await cardModalPage.swipeToCloseModal('ion-modal ion-content.page-two-content'); - }); -}); diff --git a/core/src/components/modal/test/card-nav/modal.e2e.ts b/core/src/components/modal/test/card-nav/modal.e2e.ts new file mode 100644 index 0000000000..c4aabaee1f --- /dev/null +++ b/core/src/components/modal/test/card-nav/modal.e2e.ts @@ -0,0 +1,53 @@ +import { expect } from '@playwright/test'; +import { configs, test, dragElementBy } from '@utils/test/playwright'; + +import { CardModalPage } from '../fixtures'; + +/** + * This test only verifies that the gesture activates inside of a modal. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('card modal - nav'), () => { + let cardModalPage: CardModalPage; + test.beforeEach(async ({ page, skip }) => { + skip.browser( + (browserName: string) => browserName !== 'chromium', + 'dragElementBy is flaky outside of Chrome browsers.' + ); + + cardModalPage = new CardModalPage(page); + await cardModalPage.navigate('/src/components/modal/test/card-nav?ionic:_testing=false', config); + }); + test('it should swipe to go back', async ({ page }) => { + await cardModalPage.openModalByTrigger('#open-modal'); + + const nav = page.locator('ion-nav') as any; + const ionNavDidChange = await nav.spyOnEvent('ionNavDidChange'); + + await page.click('#go-page-two'); + + await ionNavDidChange.next(); + + const pageOne = page.locator('page-one'); + await expect(pageOne).toHaveClass(/ion-page-hidden/); + + const content = page.locator('.page-two-content'); + + await dragElementBy(content, page, 1000, 0, 10); + + await ionNavDidChange.next(); + }); + test('should swipe to close', async ({ page }) => { + await cardModalPage.openModalByTrigger('#open-modal'); + + const nav = page.locator('ion-nav') as any; + const ionNavDidChange = await nav.spyOnEvent('ionNavDidChange'); + + await page.click('#go-page-two'); + + await ionNavDidChange.next(); + + await cardModalPage.swipeToCloseModal('ion-modal ion-content.page-two-content'); + }); + }); +}); diff --git a/core/src/components/modal/test/card-refresher/modal.e2e-legacy.ts b/core/src/components/modal/test/card-refresher/modal.e2e-legacy.ts deleted file mode 100644 index 1ba5c2f8f9..0000000000 --- a/core/src/components/modal/test/card-refresher/modal.e2e-legacy.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { expect } from '@playwright/test'; -import { dragElementBy, test } from '@utils/test/playwright'; - -test.describe('card modal - with refresher', () => { - test.beforeEach(async ({ page, skip }) => { - skip.mode('md'); - skip.rtl(); - - await page.goto('/src/components/modal/test/card-refresher'); - }); - test('it should not swipe to close on the content due to the presence of the refresher', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#card'); - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const content = (await page.$('ion-modal ion-content'))!; - - await dragElementBy(content, page, 0, 500); - - await content.waitForElementState('stable'); - - await expect(modal).toBeVisible(); - }); -}); diff --git a/core/src/components/modal/test/card-refresher/modal.e2e.ts b/core/src/components/modal/test/card-refresher/modal.e2e.ts new file mode 100644 index 0000000000..15c91dc783 --- /dev/null +++ b/core/src/components/modal/test/card-refresher/modal.e2e.ts @@ -0,0 +1,25 @@ +import { expect } from '@playwright/test'; +import { configs, dragElementBy, test } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('card modal - with refresher'), () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/card-refresher', config); + }); + test('it should not swipe to close on the content due to the presence of the refresher', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#card'); + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const content = (await page.$('ion-modal ion-content'))!; + + await dragElementBy(content, page, 0, 500); + + await content.waitForElementState('stable'); + + await expect(modal).toBeVisible(); + }); + }); +}); diff --git a/core/src/components/modal/test/card-scroll-target/modal.e2e-legacy.ts b/core/src/components/modal/test/card-scroll-target/modal.e2e-legacy.ts deleted file mode 100644 index c69555ec33..0000000000 --- a/core/src/components/modal/test/card-scroll-target/modal.e2e-legacy.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { expect } from '@playwright/test'; -import { dragElementBy, test } from '@utils/test/playwright'; - -test.describe('card modal - scroll target', () => { - test.beforeEach(async ({ page, skip }) => { - skip.mode('md'); - skip.rtl(); - - await page.goto('/src/components/modal/test/card-scroll-target'); - }); - test.describe('card modal: swipe to close', () => { - test('it should swipe to close when swiped on the content', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - await page.click('#card'); - await ionModalDidPresent.next(); - - const content = page.locator('ion-modal .ion-content-scroll-host'); - await dragElementBy(content, page, 0, 500); - - await ionModalDidDismiss.next(); - }); - test('it should not swipe to close when swiped on the content but the content is scrolled', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#card'); - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - const content = (await page.$('ion-modal .ion-content-scroll-host'))!; - - await content.evaluate((el: HTMLElement) => (el.scrollTop = 500)); - - await dragElementBy(content, page, 0, 500); - - await content.waitForElementState('stable'); - - await expect(modal).toBeVisible(); - }); - test('content should be scrollable after gesture ends', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#card'); - await ionModalDidPresent.next(); - - const content = page.locator('ion-modal .ion-content-scroll-host'); - await dragElementBy(content, page, 0, 20); - - await expect(content).not.toHaveCSS('overflow', 'hidden'); - }); - }); -}); diff --git a/core/src/components/modal/test/card-scroll-target/modal.e2e.ts b/core/src/components/modal/test/card-scroll-target/modal.e2e.ts new file mode 100644 index 0000000000..848fc26e38 --- /dev/null +++ b/core/src/components/modal/test/card-scroll-target/modal.e2e.ts @@ -0,0 +1,52 @@ +import { expect } from '@playwright/test'; +import { configs, dragElementBy, test } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('card modal - scroll target'), () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/card-scroll-target', config); + }); + test.describe('card modal: swipe to close', () => { + test('it should swipe to close when swiped on the content', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#card'); + await ionModalDidPresent.next(); + + const content = page.locator('ion-modal .ion-content-scroll-host'); + await dragElementBy(content, page, 0, 500); + + await ionModalDidDismiss.next(); + }); + test('it should not swipe to close when swiped on the content but the content is scrolled', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#card'); + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + const content = (await page.$('ion-modal .ion-content-scroll-host'))!; + + await content.evaluate((el: HTMLElement) => (el.scrollTop = 500)); + + await dragElementBy(content, page, 0, 500); + + await content.waitForElementState('stable'); + + await expect(modal).toBeVisible(); + }); + test('content should be scrollable after gesture ends', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#card'); + await ionModalDidPresent.next(); + + const content = page.locator('ion-modal .ion-content-scroll-host'); + await dragElementBy(content, page, 0, 20); + + await expect(content).not.toHaveCSS('overflow', 'hidden'); + }); + }); + }); +}); diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts b/core/src/components/modal/test/card/modal.e2e.ts similarity index 80% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts rename to core/src/components/modal/test/card/modal.e2e.ts index dfea5b1453..f359bee268 100644 --- a/core/src/components/modal/test/card/modal.e2e-legacy.ts +++ b/core/src/components/modal/test/card/modal.e2e.ts @@ -1,49 +1,48 @@ import { expect } from '@playwright/test'; -import { test, Viewports } from '@utils/test/playwright'; +import { configs, test, Viewports } from '@utils/test/playwright'; import { CardModalPage } from '../fixtures'; -test.describe('card modal', () => { - test.beforeEach(async ({ skip }) => { - skip.mode('md'); - }); - test.describe('card modal: rendering', () => { +configs({ modes: ['ios'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('card modal: rendering'), () => { let cardModalPage: CardModalPage; test.beforeEach(async ({ page }) => { cardModalPage = new CardModalPage(page); - await cardModalPage.navigate('/src/components/modal/test/card'); + await cardModalPage.navigate('/src/components/modal/test/card', config); }); test('should not have visual regressions', async ({ page }) => { await cardModalPage.openModalByTrigger('#card'); - await expect(page).toHaveScreenshot(`modal-card-present-${page.getSnapshotSettings()}.png`); + await expect(page).toHaveScreenshot(screenshot(`modal-card-present`)); }); test('should not have visual regressions with custom modal', async ({ page }) => { await cardModalPage.openModalByTrigger('#card-custom'); - await expect(page).toHaveScreenshot(`modal-card-custom-present-${page.getSnapshotSettings()}.png`); + await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-present`)); }); test('should not have visual regressions with stacked cards', async ({ page }) => { await cardModalPage.openModalByTrigger('#card'); await cardModalPage.openModalByTrigger('.add'); - await expect(page).toHaveScreenshot(`modal-card-stacked-present-${page.getSnapshotSettings()}.png`); + await expect(page).toHaveScreenshot(screenshot(`modal-card-stacked-present`)); }); test('should not have visual regressions with stacked custom cards', async ({ page }) => { await cardModalPage.openModalByTrigger('#card-custom'); await cardModalPage.openModalByTrigger('.add'); - await expect(page).toHaveScreenshot(`modal-card-custom-stacked-present-${page.getSnapshotSettings()}.png`); + await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-stacked-present`)); }); }); - test.describe('card modal: functionality', () => { +}); + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('card modal: functionality'), () => { let cardModalPage: CardModalPage; - test.beforeEach(async ({ page, skip }) => { - skip.rtl(); + test.beforeEach(async ({ page }) => { cardModalPage = new CardModalPage(page); - await cardModalPage.navigate('/src/components/modal/test/card'); + await cardModalPage.navigate('/src/components/modal/test/card', config); }); - test.describe('card modal: swipe to close', () => { + test.describe(title('card modal: swipe to close'), () => { test('it should swipe to close when swiped on the header', async () => { await cardModalPage.openModalByTrigger('#card'); await cardModalPage.swipeToCloseModal('ion-modal ion-header'); @@ -86,36 +85,34 @@ test.describe('card modal', () => { await expect(content).toHaveJSProperty('scrollY', true); }); }); - test.describe('card modal: rendering - tablet', () => { + test.describe(title('card modal: rendering - tablet'), () => { test.beforeEach(async ({ page }) => { await page.setViewportSize(Viewports.tablet.portrait); }); test('should not have visual regressions', async ({ page }) => { await cardModalPage.openModalByTrigger('#card'); - await expect(page).toHaveScreenshot(`modal-card-present-tablet-${page.getSnapshotSettings()}.png`); + await expect(page).toHaveScreenshot(screenshot(`modal-card-present-tablet`)); }); test('should not have visual regressions with custom modal', async ({ page }) => { await cardModalPage.openModalByTrigger('#card-custom'); - await expect(page).toHaveScreenshot(`modal-card-custom-present-tablet-${page.getSnapshotSettings()}.png`); + await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-present-tablet`)); }); test('should not have visual regressions with stacked cards', async ({ page }) => { await cardModalPage.openModalByTrigger('#card'); await cardModalPage.openModalByTrigger('.add'); - await expect(page).toHaveScreenshot(`modal-card-stacked-present-tablet-${page.getSnapshotSettings()}.png`); + await expect(page).toHaveScreenshot(screenshot(`modal-card-stacked-present-tablet`)); }); test('should not have visual regressions with stacked custom cards', async ({ page }) => { await cardModalPage.openModalByTrigger('#card-custom'); await cardModalPage.openModalByTrigger('.add'); - await expect(page).toHaveScreenshot( - `modal-card-custom-stacked-present-tablet-${page.getSnapshotSettings()}.png` - ); + await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-stacked-present-tablet`)); }); }); - test.describe('card modal: swipe to close - tablet', () => { + test.describe(title('card modal: swipe to close - tablet'), () => { test.beforeEach(async ({ page }) => { await page.setViewportSize(Viewports.tablet.portrait); }); diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts b/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts deleted file mode 100644 index 26a323cf1b..0000000000 --- a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('modal: custom dialog', () => { - test('should size custom modal correctly', async ({ page, skip }) => { - skip.rtl(); - test.info().annotations.push({ - type: 'issue', - description: 'https://github.com/ionic-team/ionic-framework/issues/24080', - }); - - await page.goto('/src/components/modal/test/custom-dialog'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#custom-modal'); - - await ionModalDidPresent.next(); - - await expect(page).toHaveScreenshot(`modal-custom-dialog-${page.getSnapshotSettings()}.png`); - }); -}); diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e.ts b/core/src/components/modal/test/custom-dialog/modal.e2e.ts new file mode 100644 index 0000000000..f1414e2f60 --- /dev/null +++ b/core/src/components/modal/test/custom-dialog/modal.e2e.ts @@ -0,0 +1,22 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('modal: custom dialog'), () => { + test('should size custom modal correctly', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/24080', + }); + + await page.goto('/src/components/modal/test/custom-dialog', config); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#custom-modal'); + + await ionModalDidPresent.next(); + + await expect(page).toHaveScreenshot(screenshot(`modal-custom-dialog`)); + }); + }); +}); diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts b/core/src/components/modal/test/custom/modal.e2e-legacy.ts deleted file mode 100644 index 2ff0164810..0000000000 --- a/core/src/components/modal/test/custom/modal.e2e-legacy.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { expect } from '@playwright/test'; -import { test, Viewports } from '@utils/test/playwright'; -import type { E2EPage } from '@utils/test/playwright'; - -test.describe('modal: custom rendering', () => { - const runVisualTests = async (page: E2EPage, screenshotModifier = '') => { - await page.goto('/src/components/modal/test/custom'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#custom-modal'); - - await ionModalDidPresent.next(); - - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(`modal-custom-present-${screenshotModifier}${page.getSnapshotSettings()}.png`); - }; - test('should not have visual regressions', async ({ page }) => { - await runVisualTests(page); - }); - - test('should not have visual regressions with tablet viewport', async ({ page }) => { - await page.setViewportSize(Viewports.tablet.portrait); - await runVisualTests(page, 'tablet-'); - }); -}); diff --git a/core/src/components/modal/test/custom/modal.e2e.ts b/core/src/components/modal/test/custom/modal.e2e.ts new file mode 100644 index 0000000000..f1bd7a18ea --- /dev/null +++ b/core/src/components/modal/test/custom/modal.e2e.ts @@ -0,0 +1,28 @@ +import { expect } from '@playwright/test'; +import { configs, test, Viewports } from '@utils/test/playwright'; +import type { E2EPage } from '@utils/test/playwright'; + +configs().forEach(({ title, screenshot, config }) => { + test.describe(title('modal: custom rendering'), () => { + const runVisualTests = async (page: E2EPage, screenshotModifier = '') => { + await page.goto('/src/components/modal/test/custom', config); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#custom-modal'); + + await ionModalDidPresent.next(); + + await page.setIonViewport(); + + await expect(page).toHaveScreenshot(screenshot(`modal-custom-present${screenshotModifier}`)); + }; + test('should not have visual regressions', async ({ page }) => { + await runVisualTests(page); + }); + + test('should not have visual regressions with tablet viewport', async ({ page }) => { + await page.setViewportSize(Viewports.tablet.portrait); + await runVisualTests(page, '-tablet'); + }); + }); +}); diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts b/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts deleted file mode 100644 index 02baf425b5..0000000000 --- a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('modal: dark mode', () => { - test('should render the correct text color when outside ion-content', async ({ page, skip }) => { - test.info().annotations.push({ - type: 'issue', - description: 'https://github.com/ionic-team/ionic-framework/issues/26060', - }); - - skip.rtl(); - - await page.goto('/src/components/modal/test/dark-mode'); - - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#basic-modal'); - - await ionModalDidPresent.next(); - - await expect(page).toHaveScreenshot(`modal-dark-color-${page.getSnapshotSettings()}.png`); - }); -}); diff --git a/core/src/components/modal/test/dark-mode/model.e2e.ts b/core/src/components/modal/test/dark-mode/model.e2e.ts new file mode 100644 index 0000000000..28042045d5 --- /dev/null +++ b/core/src/components/modal/test/dark-mode/model.e2e.ts @@ -0,0 +1,23 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('modal: dark mode'), () => { + test('should render the correct text color when outside ion-content', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/26060', + }); + + await page.goto('/src/components/modal/test/dark-mode', config); + + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#basic-modal'); + + await ionModalDidPresent.next(); + + await expect(page).toHaveScreenshot(screenshot(`modal-dark-color`)); + }); + }); +}); diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-md-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/fixtures.ts b/core/src/components/modal/test/fixtures.ts index bb65d41681..297ed32fcb 100644 --- a/core/src/components/modal/test/fixtures.ts +++ b/core/src/components/modal/test/fixtures.ts @@ -1,5 +1,5 @@ import { dragElementBy } from '@utils/test/playwright'; -import type { E2EPage, EventSpy } from '@utils/test/playwright'; +import type { E2EPage, EventSpy, E2EPageOptions } from '@utils/test/playwright'; export class CardModalPage { private ionModalDidPresent!: EventSpy; @@ -9,9 +9,9 @@ export class CardModalPage { constructor(page: E2EPage) { this.page = page; } - async navigate(url: string) { + async navigate(url: string, config: E2EPageOptions) { const { page } = this; - await page.goto(url); + await page.goto(url, config); this.ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); this.ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); } diff --git a/core/src/components/modal/test/inline/modal.e2e-legacy.ts b/core/src/components/modal/test/inline/modal.e2e-legacy.ts deleted file mode 100644 index 14ec7e3cd6..0000000000 --- a/core/src/components/modal/test/inline/modal.e2e-legacy.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('modal: inline', () => { - test('it should present and then remain in the dom on dismiss', async ({ page, skip }) => { - skip.rtl(); - skip.mode('md'); - await page.goto('/src/components/modal/test/inline'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - const modal = page.locator('ion-modal'); - - await page.click('#open-inline-modal'); - - await ionModalDidPresent.next(); - - await expect(modal).toBeVisible(); - - await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - await ionModalDidDismiss.next(); - - await expect(modal).toBeHidden(); - }); - - test('presenting should create a single root element with the ion-page class', async ({ page, skip }, testInfo) => { - skip.mode('md'); - skip.rtl(); - - testInfo.annotations.push({ - type: 'issue', - description: 'https://github.com/ionic-team/ionic-framework/issues/26117', - }); - - await page.setContent(` - - - - - - `); - - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - const modal = page.locator('ion-modal'); - - await page.click('#date-button'); - await ionModalDidPresent.next(); - - // Verifies that the host element exists with the .ion-page class - expect(await modal.evaluate((el: HTMLIonModalElement) => el.firstElementChild!.className)).toContain('ion-page'); - - await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - await ionModalDidDismiss.next(); - - await page.click('#date-button'); - await ionModalDidPresent.next(); - - // Verifies that presenting the overlay again does not create a new host element - expect(await modal.evaluate((el: HTMLIonModalElement) => el.firstElementChild!.className)).toContain('ion-page'); - expect( - await modal.evaluate((el: HTMLIonModalElement) => el.firstElementChild!.firstElementChild!.className) - ).not.toContain('ion-page'); - }); -}); diff --git a/core/src/components/modal/test/inline/modal.e2e-legacy.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/inline/modal.e2e-legacy.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 44fce49c28705fddb47cb4a846723383a4e57171..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 23275 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 diff --git a/core/src/components/modal/test/inline/modal.e2e.ts b/core/src/components/modal/test/inline/modal.e2e.ts new file mode 100644 index 0000000000..05276722d9 --- /dev/null +++ b/core/src/components/modal/test/inline/modal.e2e.ts @@ -0,0 +1,65 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('modal: inline'), () => { + test('it should present and then remain in the dom on dismiss', async ({ page }) => { + await page.goto('/src/components/modal/test/inline', config); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const modal = page.locator('ion-modal'); + + await page.click('#open-inline-modal'); + + await ionModalDidPresent.next(); + + await expect(modal).toBeVisible(); + + await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + await ionModalDidDismiss.next(); + + await expect(modal).toBeHidden(); + }); + + test('presenting should create a single root element with the ion-page class', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/26117', + }); + + await page.setContent( + ` + + + + + + `, + config + ); + + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const modal = page.locator('ion-modal'); + + await page.click('#date-button'); + await ionModalDidPresent.next(); + + // Verifies that the host element exists with the .ion-page class + expect(await modal.evaluate((el: HTMLIonModalElement) => el.firstElementChild!.className)).toContain('ion-page'); + + await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + await ionModalDidDismiss.next(); + + await page.click('#date-button'); + await ionModalDidPresent.next(); + + // Verifies that presenting the overlay again does not create a new host element + expect(await modal.evaluate((el: HTMLIonModalElement) => el.firstElementChild!.className)).toContain('ion-page'); + expect( + await modal.evaluate((el: HTMLIonModalElement) => el.firstElementChild!.firstElementChild!.className) + ).not.toContain('ion-page'); + }); + }); +}); diff --git a/core/src/components/modal/test/is-open/modal.e2e-legacy.ts b/core/src/components/modal/test/is-open/modal.e2e-legacy.ts deleted file mode 100644 index 8ee4531235..0000000000 --- a/core/src/components/modal/test/is-open/modal.e2e-legacy.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('modal: isOpen', () => { - test.beforeEach(async ({ page, skip }) => { - skip.rtl(); - skip.mode('md'); - await page.goto('/src/components/modal/test/is-open'); - }); - - test('should open the modal', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const modal = page.locator('ion-modal'); - - await page.click('#default'); - - await ionModalDidPresent.next(); - await expect(modal).toBeVisible(); - }); - - test('should open the modal then close after a timeout', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - const modal = page.locator('ion-modal'); - - await page.click('#timeout'); - - await ionModalDidPresent.next(); - await expect(modal).toBeVisible(); - - await ionModalDidDismiss.next(); - await expect(modal).toBeHidden(); - }); -}); diff --git a/core/src/components/modal/test/is-open/modal.e2e.ts b/core/src/components/modal/test/is-open/modal.e2e.ts new file mode 100644 index 0000000000..6f7712241e --- /dev/null +++ b/core/src/components/modal/test/is-open/modal.e2e.ts @@ -0,0 +1,34 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('modal: isOpen'), () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/is-open', config); + }); + + test('should open the modal', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const modal = page.locator('ion-modal'); + + await page.click('#default'); + + await ionModalDidPresent.next(); + await expect(modal).toBeVisible(); + }); + + test('should open the modal then close after a timeout', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const modal = page.locator('ion-modal'); + + await page.click('#timeout'); + + await ionModalDidPresent.next(); + await expect(modal).toBeVisible(); + + await ionModalDidDismiss.next(); + await expect(modal).toBeHidden(); + }); + }); +}); diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts b/core/src/components/modal/test/sheet/modal.e2e-legacy.ts deleted file mode 100644 index 08cf4c46f0..0000000000 --- a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts +++ /dev/null @@ -1,279 +0,0 @@ -import { expect } from '@playwright/test'; -import { test, dragElementBy } from '@utils/test/playwright'; - -test.describe('sheet modal: rendering', () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto('/src/components/modal/test/sheet'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#sheet-modal'); - - await ionModalDidPresent.next(); - - await expect(page).toHaveScreenshot(`modal-sheet-present-${page.getSnapshotSettings()}.png`); - }); -}); - -test.describe('sheet modal: backdrop', () => { - test.beforeEach(async ({ page, skip }) => { - skip.rtl(); - await page.goto('/src/components/modal/test/sheet'); - }); - test('should dismiss the sheet modal when clicking the active backdrop', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - await page.click('#backdrop-active'); - - await ionModalDidPresent.next(); - - await page.mouse.click(50, 50); - - await ionModalDidDismiss.next(); - }); - test('should present another sheet modal when clicking an inactive backdrop', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const modal = page.locator('.custom-height'); - - await page.click('#backdrop-inactive'); - await ionModalDidPresent.next(); - - await page.click('#custom-height-modal'); - await ionModalDidPresent.next(); - - await expect(modal).toBeVisible(); - }); - test('input outside sheet modal should be focusable when backdrop is inactive', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#backdrop-inactive'); - - await ionModalDidPresent.next(); - - const input = page.locator('#root-input input').first(); - await input.click(); - await expect(input).toBeFocused(); - }); -}); - -test.describe('sheet modal: setting the breakpoint', () => { - test.describe('sheet modal: invalid values', () => { - let warnings: string[] = []; - test.beforeEach(async ({ page, skip }) => { - skip.rtl(); - await page.goto('/src/components/modal/test/sheet'); - - warnings = []; - - page.on('console', (ev) => { - if (ev.type() === 'warning') { - warnings.push(ev.text()); - } - }); - - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#sheet-modal'); - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.01)); - }); - test('it should not change the breakpoint when setting to an invalid value', async ({ page }) => { - const modal = page.locator('ion-modal'); - const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint()); - expect(breakpoint).toBe(0.25); - }); - test('it should warn when setting an invalid breakpoint', async () => { - expect(warnings.length).toBe(1); - expect(warnings[0]).toBe( - '[Ionic Warning]: Attempted to set invalid breakpoint value 0.01. Please double check that the breakpoint value is part of your defined breakpoints.' - ); - }); - }); - test.describe('sheet modal: valid values', () => { - test.beforeEach(async ({ page, skip }) => { - skip.rtl(); - await page.goto('/src/components/modal/test/sheet'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#sheet-modal'); - await ionModalDidPresent.next(); - }); - test('should update the current breakpoint', async ({ page }) => { - const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); - const modal = page.locator('.modal-sheet'); - - await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5)); - await ionBreakpointDidChange.next(); - - const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint()); - expect(breakpoint).toBe(0.5); - }); - test('should emit ionBreakpointDidChange', async ({ page }) => { - const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); - const modal = page.locator('.modal-sheet'); - - await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5)); - await ionBreakpointDidChange.next(); - expect(ionBreakpointDidChange.events.length).toBe(1); - }); - test('should emit ionBreakpointDidChange when breakpoint is set to 0', async ({ page }) => { - const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); - const modal = page.locator('.modal-sheet'); - - await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0)); - await ionBreakpointDidChange.next(); - expect(ionBreakpointDidChange.events.length).toBe(1); - }); - test('should emit ionBreakpointDidChange when the sheet is swiped to breakpoint 0', async ({ page }) => { - const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); - const header = page.locator('.modal-sheet ion-header'); - - await dragElementBy(header, page, 0, 500); - - await ionBreakpointDidChange.next(); - - expect(ionBreakpointDidChange.events.length).toBe(1); - }); - }); - - test('it should reset the breakpoint value on dismiss', async ({ page, skip }) => { - skip.rtl(); - await page.goto('/src/components/modal/test/sheet'); - test.info().annotations.push({ - type: 'issue', - description: 'https://github.com/ionic-team/ionic-framework/issues/25245', - }); - - await page.setContent(` - - Open - - - Dismiss - Set breakpoint - - - - - `); - - const modal = page.locator('ion-modal'); - const dismissButton = page.locator('#dismiss'); - const openButton = page.locator('#open-modal'); - const setBreakpointButton = page.locator('#set-breakpoint'); - - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); - - await openButton.click(); - await ionModalDidPresent.next(); - - await setBreakpointButton.click(); - await ionBreakpointDidChange.next(); - - await dismissButton.click(); - await ionModalDidDismiss.next(); - - await openButton.click(); - await ionModalDidPresent.next(); - - const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint()); - - expect(breakpoint).toBe(0.25); - - await setBreakpointButton.click(); - await ionBreakpointDidChange.next(); - - const updatedBreakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint()); - - expect(updatedBreakpoint).toBe(0.5); - }); -}); - -test.describe('sheet modal: clicking the handle', () => { - test.beforeEach(async ({ page, skip }) => { - skip.rtl(); - await page.goto('/src/components/modal/test/sheet'); - }); - - test('should advance to the next breakpoint when handleBehavior is cycle', async ({ page }) => { - const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const modal = page.locator('ion-modal'); - - await page.click('#handle-behavior-cycle-modal'); - await ionModalDidPresent.next(); - - const handle = page.locator('ion-modal .modal-handle'); - - await handle.click(); - await ionBreakpointDidChange.next(); - - await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.5); - - await handle.click(); - await ionBreakpointDidChange.next(); - - await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.75); - - await handle.click(); - await ionBreakpointDidChange.next(); - - await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(1); - - await handle.click(); - await ionBreakpointDidChange.next(); - - // Advancing from the last breakpoint should change the breakpoint to the first non-zero breakpoint - await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.25); - }); - - test('should not advance the breakpoint when handleBehavior is none', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const modal = page.locator('ion-modal'); - - await page.click('#sheet-modal'); - await ionModalDidPresent.next(); - - const handle = page.locator('ion-modal .modal-handle'); - - await handle.click(); - - await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.25); - }); - - test('should not dismiss the modal when backdrop is clicked and breakpoint is moving', async ({ page }) => { - const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const modal = page.locator('ion-modal'); - - await page.click('#handle-behavior-cycle-modal'); - await ionModalDidPresent.next(); - - const handle = page.locator('ion-modal .modal-handle'); - const backdrop = page.locator('ion-modal ion-backdrop'); - - await handle.click(); - backdrop.click(); - - await ionBreakpointDidChange.next(); - - await handle.click(); - - await ionBreakpointDidChange.next(); - - await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.75); - }); -}); diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts new file mode 100644 index 0000000000..8b6e322ab8 --- /dev/null +++ b/core/src/components/modal/test/sheet/modal.e2e.ts @@ -0,0 +1,279 @@ +import { expect } from '@playwright/test'; +import { configs, test, dragElementBy } from '@utils/test/playwright'; + +configs().forEach(({ title, screenshot, config }) => { + test.describe(title('sheet modal: rendering'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto('/src/components/modal/test/sheet', config); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#sheet-modal'); + + await ionModalDidPresent.next(); + + await expect(page).toHaveScreenshot(screenshot(`modal-sheet-present`)); + }); + }); +}); + +configs({ directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('sheet modal: backdrop'), () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/sheet', config); + }); + test('should dismiss the sheet modal when clicking the active backdrop', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#backdrop-active'); + + await ionModalDidPresent.next(); + + await page.mouse.click(50, 50); + + await ionModalDidDismiss.next(); + }); + test('should present another sheet modal when clicking an inactive backdrop', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const modal = page.locator('.custom-height'); + + await page.click('#backdrop-inactive'); + await ionModalDidPresent.next(); + + await page.click('#custom-height-modal'); + await ionModalDidPresent.next(); + + await expect(modal).toBeVisible(); + }); + test('input outside sheet modal should be focusable when backdrop is inactive', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#backdrop-inactive'); + + await ionModalDidPresent.next(); + + const input = page.locator('#root-input input').first(); + await input.click(); + await expect(input).toBeFocused(); + }); + }); + test.describe(title('sheet modal: setting the breakpoint'), () => { + test.describe('sheet modal: invalid values', () => { + let warnings: string[] = []; + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/sheet', config); + + warnings = []; + + page.on('console', (ev) => { + if (ev.type() === 'warning') { + warnings.push(ev.text()); + } + }); + + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#sheet-modal'); + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.01)); + }); + test('it should not change the breakpoint when setting to an invalid value', async ({ page }) => { + const modal = page.locator('ion-modal'); + const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint()); + expect(breakpoint).toBe(0.25); + }); + test('it should warn when setting an invalid breakpoint', async () => { + expect(warnings.length).toBe(1); + expect(warnings[0]).toBe( + '[Ionic Warning]: Attempted to set invalid breakpoint value 0.01. Please double check that the breakpoint value is part of your defined breakpoints.' + ); + }); + }); + test.describe('sheet modal: valid values', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/sheet', config); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#sheet-modal'); + await ionModalDidPresent.next(); + }); + test('should update the current breakpoint', async ({ page }) => { + const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); + const modal = page.locator('.modal-sheet'); + + await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5)); + await ionBreakpointDidChange.next(); + + const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint()); + expect(breakpoint).toBe(0.5); + }); + test('should emit ionBreakpointDidChange', async ({ page }) => { + const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); + const modal = page.locator('.modal-sheet'); + + await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5)); + await ionBreakpointDidChange.next(); + expect(ionBreakpointDidChange.events.length).toBe(1); + }); + test('should emit ionBreakpointDidChange when breakpoint is set to 0', async ({ page }) => { + const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); + const modal = page.locator('.modal-sheet'); + + await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0)); + await ionBreakpointDidChange.next(); + expect(ionBreakpointDidChange.events.length).toBe(1); + }); + test('should emit ionBreakpointDidChange when the sheet is swiped to breakpoint 0', async ({ page }) => { + const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); + const header = page.locator('.modal-sheet ion-header'); + + await dragElementBy(header, page, 0, 500); + + await ionBreakpointDidChange.next(); + + expect(ionBreakpointDidChange.events.length).toBe(1); + }); + }); + + test('it should reset the breakpoint value on dismiss', async ({ page }) => { + await page.goto('/src/components/modal/test/sheet', config); + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/25245', + }); + + await page.setContent( + ` + + Open + + + Dismiss + Set breakpoint + + + + + `, + config + ); + + const modal = page.locator('ion-modal'); + const dismissButton = page.locator('#dismiss'); + const openButton = page.locator('#open-modal'); + const setBreakpointButton = page.locator('#set-breakpoint'); + + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); + + await openButton.click(); + await ionModalDidPresent.next(); + + await setBreakpointButton.click(); + await ionBreakpointDidChange.next(); + + await dismissButton.click(); + await ionModalDidDismiss.next(); + + await openButton.click(); + await ionModalDidPresent.next(); + + const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint()); + + expect(breakpoint).toBe(0.25); + + await setBreakpointButton.click(); + await ionBreakpointDidChange.next(); + + const updatedBreakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint()); + + expect(updatedBreakpoint).toBe(0.5); + }); + }); + test.describe(title('sheet modal: clicking the handle'), () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/sheet', config); + }); + + test('should advance to the next breakpoint when handleBehavior is cycle', async ({ page }) => { + const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const modal = page.locator('ion-modal'); + + await page.click('#handle-behavior-cycle-modal'); + await ionModalDidPresent.next(); + + const handle = page.locator('ion-modal .modal-handle'); + + await handle.click(); + await ionBreakpointDidChange.next(); + + await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.5); + + await handle.click(); + await ionBreakpointDidChange.next(); + + await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.75); + + await handle.click(); + await ionBreakpointDidChange.next(); + + await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(1); + + await handle.click(); + await ionBreakpointDidChange.next(); + + // Advancing from the last breakpoint should change the breakpoint to the first non-zero breakpoint + await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.25); + }); + + test('should not advance the breakpoint when handleBehavior is none', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const modal = page.locator('ion-modal'); + + await page.click('#sheet-modal'); + await ionModalDidPresent.next(); + + const handle = page.locator('ion-modal .modal-handle'); + + await handle.click(); + + await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.25); + }); + + test('should not dismiss the modal when backdrop is clicked and breakpoint is moving', async ({ page }) => { + const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const modal = page.locator('ion-modal'); + + await page.click('#handle-behavior-cycle-modal'); + await ionModalDidPresent.next(); + + const handle = page.locator('ion-modal .modal-handle'); + const backdrop = page.locator('ion-modal ion-backdrop'); + + await handle.click(); + backdrop.click(); + + await ionBreakpointDidChange.next(); + + await handle.click(); + + await ionBreakpointDidChange.next(); + + await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.75); + }); + }); +}); diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Safari-linux.png rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/modal/test/standalone/modal.e2e-legacy.ts b/core/src/components/modal/test/standalone/modal.e2e-legacy.ts deleted file mode 100644 index 70195ef99d..0000000000 --- a/core/src/components/modal/test/standalone/modal.e2e-legacy.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { test } from '@utils/test/playwright'; - -test.describe('modal: standalone', () => { - test('should open even without an ion-app', async ({ page, skip }) => { - skip.rtl(); - skip.mode('md'); - await page.goto('/src/components/modal/test/standalone'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - await page.click('#basic-modal'); - await ionModalDidPresent.next(); - - const modal = page.locator('ion-modal'); - await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); - - await ionModalDidDismiss.next(); - - await page.waitForSelector('ion-modal', { state: 'detached' }); - }); -}); diff --git a/core/src/components/modal/test/standalone/modal.e2e.ts b/core/src/components/modal/test/standalone/modal.e2e.ts new file mode 100644 index 0000000000..eaaa7a824f --- /dev/null +++ b/core/src/components/modal/test/standalone/modal.e2e.ts @@ -0,0 +1,21 @@ +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('modal: standalone'), () => { + test('should open even without an ion-app', async ({ page }) => { + await page.goto('/src/components/modal/test/standalone', config); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#basic-modal'); + await ionModalDidPresent.next(); + + const modal = page.locator('ion-modal'); + await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + await ionModalDidDismiss.next(); + + await page.waitForSelector('ion-modal', { state: 'detached' }); + }); + }); +}); diff --git a/core/src/components/modal/test/trigger/modal.e2e-legacy.ts b/core/src/components/modal/test/trigger/modal.e2e-legacy.ts deleted file mode 100644 index adcc76dc41..0000000000 --- a/core/src/components/modal/test/trigger/modal.e2e-legacy.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('modal: trigger', () => { - test.beforeEach(async ({ page, skip }) => { - skip.rtl(); - skip.mode('ios'); - await page.goto('/src/components/modal/test/trigger'); - }); - - test('should open modal by left clicking on trigger', async ({ page }) => { - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#left-click-trigger'); - - await ionModalDidPresent.next(); - - const modal = page.locator('.left-click-modal'); - await expect(modal).toBeVisible(); - }); - - test('should still open modal when it has been removed and re-added to DOM', async ({ page }) => { - const button = page.locator('#left-click-trigger'); - const modal = page.locator('ion-modal'); - - await modal.evaluate((modal: HTMLIonModalElement) => { - modal.remove(); - document.querySelector('ion-button')?.insertAdjacentElement('afterend', modal); - }); - await page.waitForChanges(); - - await button.click(); - await expect(modal).toBeVisible(); - }); -}); diff --git a/core/src/components/modal/test/trigger/modal.e2e.ts b/core/src/components/modal/test/trigger/modal.e2e.ts new file mode 100644 index 0000000000..8513e2fbfb --- /dev/null +++ b/core/src/components/modal/test/trigger/modal.e2e.ts @@ -0,0 +1,35 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('modal: trigger'), () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/trigger', config); + }); + + test('should open modal by left clicking on trigger', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#left-click-trigger'); + + await ionModalDidPresent.next(); + + const modal = page.locator('.left-click-modal'); + await expect(modal).toBeVisible(); + }); + + test('should still open modal when it has been removed and re-added to DOM', async ({ page }) => { + const button = page.locator('#left-click-trigger'); + const modal = page.locator('ion-modal'); + + await modal.evaluate((modal: HTMLIonModalElement) => { + modal.remove(); + document.querySelector('ion-button')?.insertAdjacentElement('afterend', modal); + }); + await page.waitForChanges(); + + await button.click(); + await expect(modal).toBeVisible(); + }); + }); +});