javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: sync

Browse Source
This commit is contained in:
Liam DeBeasi
2023-11-28 16:31:47 -05:00
parent 4ad6df67f0 196a22eb74
commit fd36b953d6
258 changed files with 33688 additions and 8739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/modal/modal.ios.scss
View File

@ -27,7 +27,7 @@
// iOS Card Modal
// --------------------------------------------------
@media screen and (max-width: 767px) {
@include mobile-viewport() {
@supports (width: max(0px, 1px)) {
:host(.modal-card) {
--height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px);
@ -60,7 +60,7 @@
}
}
@media screen and (min-width: 768px) {
@include tablet-viewport() {
:host(.modal-card) {
--width: calc(100% - 120px);
--height: calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));

4
core/src/components/modal/test/a11y/modal.spec.ts
View File

@ -15,8 +15,8 @@ describe('modal: a11y', () => {
`,
});
const modal = page.body.querySelector('ion-modal');
const modalWrapper = modal.shadowRoot.querySelector('.modal-wrapper');
const modal = page.body.querySelector('ion-modal')!;
const modalWrapper = modal.shadowRoot!.querySelector('.modal-wrapper')!;
await expect(modalWrapper.getAttribute('role')).toBe('alertdialog');
});

4
core/src/components/modal/test/basic/modal.spec.tsx
View File

@ -7,10 +7,10 @@ describe('modal: htmlAttributes inheritance', () => {
it('should correctly inherit attributes on host', async () => {
const page = await newSpecPage({
components: [Modal],
template: () => <ion-modal htmlAttributes={{ 'data-testid': 'basic-modal' }}></ion-modal>,
template: () => <ion-modal htmlAttributes={{ 'data-testid': 'basic-modal' }} overlayIndex={1}></ion-modal>,
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await expect(modal.getAttribute('data-testid')).toBe('basic-modal');
});

77
core/src/components/modal/test/can-dismiss/modal.spec.tsx
View File

@ -1,19 +1,18 @@
import { h } from '@stencil/core';
import { h, setMode } from '@stencil/core';
import { newSpecPage } from '@stencil/core/testing';
import { setMode } from '@stencil/core';
import { Modal } from '../../modal';
import { Content } from '../../../content/content';
import { Modal } from '../../modal';
describe('modal: canDismiss', () => {
describe('modal: regular modal', () => {
it('should dismiss when canDismiss is true', async () => {
const page = await newSpecPage({
components: [Modal],
template: () => <ion-modal animated={false} canDismiss={true}></ion-modal>,
template: () => <ion-modal overlayIndex={1} animated={false} canDismiss={true}></ion-modal>,
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await modal.present();
await page.waitForChanges();
@ -26,10 +25,10 @@ describe('modal: canDismiss', () => {
it('should not dismiss when canDismiss is false', async () => {
const page = await newSpecPage({
components: [Modal],
template: () => <ion-modal animated={false} canDismiss={false}></ion-modal>,
template: () => <ion-modal overlayIndex={1} animated={false} canDismiss={false}></ion-modal>,
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await modal.present();
await page.waitForChanges();
@ -44,6 +43,7 @@ describe('modal: canDismiss', () => {
components: [Modal],
template: () => (
<ion-modal
overlayIndex={1}
animated={false}
canDismiss={() => {
return new Promise((resolve) => {
@ -54,7 +54,7 @@ describe('modal: canDismiss', () => {
),
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await modal.present();
await page.waitForChanges();
@ -69,6 +69,7 @@ describe('modal: canDismiss', () => {
components: [Modal],
template: () => (
<ion-modal
overlayIndex={1}
animated={false}
canDismiss={() => {
return new Promise((resolve) => {
@ -79,7 +80,7 @@ describe('modal: canDismiss', () => {
),
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await modal.present();
await page.waitForChanges();
@ -94,19 +95,24 @@ describe('modal: canDismiss', () => {
/**
* Card modal is only available on iOS
*/
setMode((elm) => 'ios');
setMode(() => 'ios');
});
it('should dismiss when canDismiss is true', async () => {
const page = await newSpecPage({
components: [Content, Modal],
template: () => (
<ion-modal presentingElement={document.createElement('div')} animated={false} canDismiss={true}>
<ion-modal
overlayIndex={1}
presentingElement={document.createElement('div')}
animated={false}
canDismiss={true}
>
<ion-content>Test Content</ion-content>
</ion-modal>
),
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await modal.present();
await page.waitForChanges();
@ -120,13 +126,18 @@ describe('modal: canDismiss', () => {
const page = await newSpecPage({
components: [Content, Modal],
template: () => (
<ion-modal presentingElement={document.createElement('div')} animated={false} canDismiss={false}>
<ion-modal
overlayIndex={1}
presentingElement={document.createElement('div')}
animated={false}
canDismiss={false}
>
<ion-content>Test Content</ion-content>
</ion-modal>
),
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await modal.present();
await page.waitForChanges();
@ -141,6 +152,7 @@ describe('modal: canDismiss', () => {
components: [Content, Modal],
template: () => (
<ion-modal
overlayIndex={1}
presentingElement={document.createElement('div')}
animated={false}
canDismiss={() => {
@ -154,7 +166,7 @@ describe('modal: canDismiss', () => {
),
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await modal.present();
await page.waitForChanges();
@ -169,6 +181,7 @@ describe('modal: canDismiss', () => {
components: [Content, Modal],
template: () => (
<ion-modal
overlayIndex={1}
presentingElement={document.createElement('div')}
animated={false}
canDismiss={() => {
@ -182,7 +195,7 @@ describe('modal: canDismiss', () => {
),
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await modal.present();
await page.waitForChanges();
@ -197,11 +210,17 @@ describe('modal: canDismiss', () => {
const page = await newSpecPage({
components: [Modal],
template: () => (
<ion-modal breakpoints={[0, 1]} initialBreakpoint={1} animated={false} canDismiss={true}></ion-modal>
<ion-modal
overlayIndex={1}
breakpoints={[0, 1]}
initialBreakpoint={1}
animated={false}
canDismiss={true}
></ion-modal>
),
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await modal.present();
await page.waitForChanges();
@ -215,11 +234,17 @@ describe('modal: canDismiss', () => {
const page = await newSpecPage({
components: [Modal],
template: () => (
<ion-modal breakpoints={[0, 1]} initialBreakpoint={1} animated={false} canDismiss={false}></ion-modal>
<ion-modal
overlayIndex={1}
breakpoints={[0, 1]}
initialBreakpoint={1}
animated={false}
canDismiss={false}
></ion-modal>
),
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await modal.present();
await page.waitForChanges();
@ -234,6 +259,7 @@ describe('modal: canDismiss', () => {
components: [Modal],
template: () => (
<ion-modal
overlayIndex={1}
breakpoints={[0, 1]}
initialBreakpoint={1}
animated={false}
@ -246,7 +272,7 @@ describe('modal: canDismiss', () => {
),
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await modal.present();
await page.waitForChanges();
@ -261,6 +287,7 @@ describe('modal: canDismiss', () => {
components: [Modal],
template: () => (
<ion-modal
overlayIndex={1}
breakpoints={[0, 1]}
initialBreakpoint={1}
animated={false}
@ -273,7 +300,7 @@ describe('modal: canDismiss', () => {
),
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await modal.present();
await page.waitForChanges();
@ -288,15 +315,15 @@ describe('modal: canDismiss', () => {
const canDismiss = jest.fn();
const page = await newSpecPage({
components: [Modal],
template: () => <ion-modal animated={false} canDismiss={canDismiss}></ion-modal>,
template: () => <ion-modal overlayIndex={1} animated={false} canDismiss={canDismiss}></ion-modal>,
});
const modal = page.body.querySelector('ion-modal');
const modal = page.body.querySelector('ion-modal')!;
await modal.present();
await page.waitForChanges();
const returnValue = await modal.dismiss('my data', 'my role');
await modal.dismiss('my data', 'my role');
expect(canDismiss).toHaveBeenCalledWith('my data', 'my role');
});