diff --git a/CHANGELOG.md b/CHANGELOG.md index 6a91431cd3..fde95d3ae8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,20 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.3.2](https://github.com/ionic-team/ionic-framework/compare/v6.3.1...v6.3.2) (2022-10-17) + + +### Bug Fixes + +* **datetime:** header renders correct date ([#26120](https://github.com/ionic-team/ionic-framework/issues/26120)) ([04df45a](https://github.com/ionic-team/ionic-framework/commit/04df45a443e4faeea644daa76dc509fea0d24ca2)), closes [#26116](https://github.com/ionic-team/ionic-framework/issues/26116) +* **datetime:** selecting days updates value ([#26121](https://github.com/ionic-team/ionic-framework/issues/26121)) ([d76a24d](https://github.com/ionic-team/ionic-framework/commit/d76a24dd9e485a2f3cc517231bbb1dab51fa1fd3)) +* **modal:** sheet modal dismisses correctly ([#26110](https://github.com/ionic-team/ionic-framework/issues/26110)) ([256b03f](https://github.com/ionic-team/ionic-framework/commit/256b03f12a57c2b5904d9017e4fa93b11eea8fc7)), closes [#26108](https://github.com/ionic-team/ionic-framework/issues/26108) +* **vue:** routing components define child components ([#26107](https://github.com/ionic-team/ionic-framework/issues/26107)) ([d60973b](https://github.com/ionic-team/ionic-framework/commit/d60973b2449b29a982b752a98b10d2b043ecff2f)) + + + + + ## [6.3.1](https://github.com/ionic-team/ionic-framework/compare/v6.3.0...v6.3.1) (2022-10-12) diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md index 807ace0c0a..aed7ea32cc 100644 --- a/angular/CHANGELOG.md +++ b/angular/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.3.2](https://github.com/ionic-team/ionic/compare/v6.3.1...v6.3.2) (2022-10-17) + +**Note:** Version bump only for package @ionic/angular + + + + + ## [6.3.1](https://github.com/ionic-team/ionic/compare/v6.3.0...v6.3.1) (2022-10-12) **Note:** Version bump only for package @ionic/angular diff --git a/angular/package-lock.json b/angular/package-lock.json index 1f8a11585d..8c01bc076c 100644 --- a/angular/package-lock.json +++ b/angular/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular", - "version": "6.3.1", + "version": "6.3.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular", - "version": "6.3.1", + "version": "6.3.2", "license": "MIT", "dependencies": { - "@ionic/core": "^6.3.1", + "@ionic/core": "6.3.2", "jsonc-parser": "^3.0.0", "tslib": "^2.0.0" }, @@ -1023,9 +1023,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz", - "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==", + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz", + "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==", "dependencies": { "@stencil/core": "^2.18.0", "ionicons": "^6.0.3", @@ -7951,9 +7951,9 @@ "dev": true }, "@ionic/core": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz", - "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==", + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.2.tgz", + "integrity": "sha512-L4xqJyixmGApwYc5fQgGoK80wXGCrbjL8vGfeNbjYqxxP0ZIKGAhURPoMAtSTqLLK9gdhh4Mv6gw4gNKvxodPA==", "requires": { "@stencil/core": "^2.18.0", "ionicons": "^6.0.3", diff --git a/angular/package.json b/angular/package.json index 36d02d4a5e..1a9537cebd 100644 --- a/angular/package.json +++ b/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "6.3.1", + "version": "6.3.2", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -46,7 +46,7 @@ "validate": "npm i && npm run lint && npm run test && npm run build" }, "dependencies": { - "@ionic/core": "^6.3.1", + "@ionic/core": "6.3.2", "jsonc-parser": "^3.0.0", "tslib": "^2.0.0" }, diff --git a/angular/src/directives/control-value-accessors/value-accessor.ts b/angular/src/directives/control-value-accessors/value-accessor.ts index 65ac7a4e7e..4cc30e7469 100644 --- a/angular/src/directives/control-value-accessors/value-accessor.ts +++ b/angular/src/directives/control-value-accessors/value-accessor.ts @@ -19,7 +19,7 @@ export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDes writeValue(value: any): void { /** - * TODO for Ionic 6: + * TODO FW-2646 * Change `value == null ? '' : value;` * to `value`. This was a fix for IE9, but IE9 * is no longer supported; however, this change diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 3ddbba9518..7dace3d041 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,19 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.3.2](https://github.com/ionic-team/ionic/compare/v6.3.1...v6.3.2) (2022-10-17) + + +### Bug Fixes + +* **datetime:** header renders correct date ([#26120](https://github.com/ionic-team/ionic/issues/26120)) ([04df45a](https://github.com/ionic-team/ionic/commit/04df45a443e4faeea644daa76dc509fea0d24ca2)), closes [#26116](https://github.com/ionic-team/ionic/issues/26116) +* **datetime:** selecting days updates value ([#26121](https://github.com/ionic-team/ionic/issues/26121)) ([d76a24d](https://github.com/ionic-team/ionic/commit/d76a24dd9e485a2f3cc517231bbb1dab51fa1fd3)) +* **modal:** sheet modal dismisses correctly ([#26110](https://github.com/ionic-team/ionic/issues/26110)) ([256b03f](https://github.com/ionic-team/ionic/commit/256b03f12a57c2b5904d9017e4fa93b11eea8fc7)), closes [#26108](https://github.com/ionic-team/ionic/issues/26108) + + + + + ## [6.3.1](https://github.com/ionic-team/ionic/compare/v6.3.0...v6.3.1) (2022-10-12) diff --git a/core/package-lock.json b/core/package-lock.json index b88d9b21db..ad938eceb8 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/core", - "version": "6.3.1", + "version": "6.3.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "6.3.1", + "version": "6.3.2", "license": "MIT", "dependencies": { "@stencil/core": "^2.18.0", diff --git a/core/package.json b/core/package.json index 43b63719e8..09e398c4ab 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "6.3.1", + "version": "6.3.2", "description": "Base components for Ionic", "keywords": [ "ionic", diff --git a/core/src/components/datetime-button/datetime-button.tsx b/core/src/components/datetime-button/datetime-button.tsx index 1d80a763bf..73f1e6ed46 100644 --- a/core/src/components/datetime-button/datetime-button.tsx +++ b/core/src/components/datetime-button/datetime-button.tsx @@ -160,7 +160,8 @@ export class DatetimeButton implements ComponentInterface { * to keep checking if the datetime value is `string` or `string[]`. */ private getParsedDateValues = (value?: string[] | string | null): string[] => { - if (value === undefined || value === null) { + // TODO FW-2646 Remove value === '' + if (value === '' || value === undefined || value === null) { return []; } diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 205620199b..92ff2119d9 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -616,7 +616,7 @@ export class Datetime implements ComponentInterface { }; private setActiveParts = (parts: DatetimeParts, removeDate = false) => { - const { multiple, activePartsClone } = this; + const { multiple, minParts, maxParts, activePartsClone } = this; /** * When setting the active parts, it is possible @@ -628,7 +628,7 @@ export class Datetime implements ComponentInterface { * Additionally, we need to update the working parts * too in the event that the validated parts are different. */ - const validatedParts = validateParts(parts); + const validatedParts = validateParts(parts, minParts, maxParts); this.setWorkingParts(validatedParts); if (multiple) { @@ -2131,12 +2131,8 @@ export class Datetime implements ComponentInterface { , ]; } - private renderCalendarViewHeader() { - const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null; - if (!hasSlottedTitle && !this.showDefaultTitle) { - return; - } + private getHeaderSelectedDateText() { const { activeParts, multiple, titleSelectedDatesFormatter } = this; const isArray = Array.isArray(activeParts); @@ -2155,12 +2151,21 @@ export class Datetime implements ComponentInterface { headerText = getMonthAndDay(this.locale, this.getDefaultPart()); } + return headerText; + } + + private renderCalendarViewHeader(showExpandedHeader = true) { + const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null; + if (!hasSlottedTitle && !this.showDefaultTitle) { + return; + } + return (
Select Date
-
{headerText}
+ {showExpandedHeader &&
{this.getHeaderSelectedDateText()}
}
); } @@ -2207,7 +2212,7 @@ export class Datetime implements ComponentInterface { */ const hasWheelVariant = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date'; if (preferWheel && hasWheelVariant) { - return [this.renderWheelView(), this.renderFooter()]; + return [this.renderCalendarViewHeader(false), this.renderWheelView(), this.renderFooter()]; } switch (presentation) { diff --git a/core/src/components/datetime/test/manipulation.spec.ts b/core/src/components/datetime/test/manipulation.spec.ts index 864ba4b775..f2c8188295 100644 --- a/core/src/components/datetime/test/manipulation.spec.ts +++ b/core/src/components/datetime/test/manipulation.spec.ts @@ -14,6 +14,7 @@ import { calculateHourFromAMPM, subtractDays, addDays, + validateParts, } from '../utils/manipulation'; describe('addDays()', () => { @@ -487,3 +488,72 @@ describe('getPreviousYear()', () => { }); }); }); + +describe('validateParts()', () => { + it('should move day in bounds', () => { + expect(validateParts({ month: 2, day: 31, year: 2022, hour: 8, minute: 0 })).toEqual({ + month: 2, + day: 28, + year: 2022, + hour: 8, + minute: 0, + }); + }); + it('should move the hour back in bounds according to the min', () => { + expect( + validateParts( + { month: 1, day: 1, year: 2022, hour: 8, minute: 0 }, + { month: 1, day: 1, year: 2022, hour: 9, minute: 0 } + ) + ).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 0 }); + }); + it('should move the minute back in bounds according to the min', () => { + expect( + validateParts( + { month: 1, day: 1, year: 2022, hour: 9, minute: 20 }, + { month: 1, day: 1, year: 2022, hour: 9, minute: 30 } + ) + ).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 30 }); + }); + it('should move the hour and minute back in bounds according to the min', () => { + expect( + validateParts( + { month: 1, day: 1, year: 2022, hour: 8, minute: 30 }, + { month: 1, day: 1, year: 2022, hour: 9, minute: 0 } + ) + ).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 0 }); + }); + it('should move the hour back in bounds according to the max', () => { + expect( + validateParts({ month: 1, day: 1, year: 2022, hour: 10, minute: 0 }, undefined, { + month: 1, + day: 1, + year: 2022, + hour: 9, + minute: 0, + }) + ).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 0 }); + }); + it('should move the minute back in bounds according to the max', () => { + expect( + validateParts({ month: 1, day: 1, year: 2022, hour: 9, minute: 40 }, undefined, { + month: 1, + day: 1, + year: 2022, + hour: 9, + minute: 30, + }) + ).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 30 }); + }); + it('should move the hour and minute back in bounds according to the max', () => { + expect( + validateParts({ month: 1, day: 1, year: 2022, hour: 10, minute: 20 }, undefined, { + month: 1, + day: 1, + year: 2022, + hour: 9, + minute: 30, + }) + ).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 30 }); + }); +}); diff --git a/core/src/components/datetime/test/minmax/datetime.e2e.ts b/core/src/components/datetime/test/minmax/datetime.e2e.ts index 7cc7207a19..27e39281bb 100644 --- a/core/src/components/datetime/test/minmax/datetime.e2e.ts +++ b/core/src/components/datetime/test/minmax/datetime.e2e.ts @@ -234,4 +234,53 @@ test.describe('datetime: minmax', () => { ); await expect(hourPickerItems).toHaveText(['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']); }); + + test.describe('minmax value adjustment when out of bounds', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + skip.mode('ios', 'This implementation is the same across modes.'); + }); + test('should reset to min time if out of bounds', async ({ page }) => { + await page.setContent(` + + `); + + await page.waitForSelector('.datetime-ready'); + + const datetime = page.locator('ion-datetime'); + const ionChange = await page.spyOnEvent('ionChange'); + const dayButton = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="10"][data-year="2022"]'); + await dayButton.click(); + + await ionChange.next(); + + const value = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value); + await expect(typeof value).toBe('string'); + await expect(value!.includes('2022-10-10T08:00')).toBe(true); + }); + test('should reset to max time if out of bounds', async ({ page }) => { + await page.setContent(` + + `); + + await page.waitForSelector('.datetime-ready'); + + const datetime = page.locator('ion-datetime'); + const ionChange = await page.spyOnEvent('ionChange'); + const dayButton = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="10"][data-year="2022"]'); + await dayButton.click(); + + await ionChange.next(); + + const value = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value); + await expect(typeof value).toBe('string'); + await expect(value!.includes('2022-10-10T08:00')).toBe(true); + }); + }); }); diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts index e39f139dc3..e7102c402a 100644 --- a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts +++ b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts @@ -40,6 +40,18 @@ test.describe('datetime: prefer wheel', () => { `datetime-wheel-time-date-diff-${page.getSnapshotSettings()}.png` ); }); + test('should render a condense header when specified', async ({ page }) => { + await page.setContent(` +
My Custom Title
 + `); + await page.waitForSelector('.datetime-ready'); + + const datetime = page.locator('ion-datetime'); + + expect(await datetime.screenshot()).toMatchSnapshot( + `datetime-wheel-header-diff-${page.getSnapshotSettings()}.png` + ); + }); }); test.describe('datetime: date wheel', () => { test.beforeEach(({ skip }) => { diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..15ee7c6f00 Binary files /dev/null and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..58e06f8ca5 Binary files /dev/null and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8d7aeab63f Binary files /dev/null and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d3fc7ed8be Binary files /dev/null and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..59d83e1156 Binary files /dev/null and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..c98821778f Binary files /dev/null and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0bd51d34c7 Binary files /dev/null and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b15b79f4f8 Binary files /dev/null and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e9127f64bc Binary files /dev/null and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..fbb775b6e0 Binary files /dev/null and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..26b68c42de Binary files /dev/null and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0cd4974b4b Binary files /dev/null and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-header-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/utils/manipulation.ts b/core/src/components/datetime/utils/manipulation.ts index 98f25750af..34ac4af7d4 100644 --- a/core/src/components/datetime/utils/manipulation.ts +++ b/core/src/components/datetime/utils/manipulation.ts @@ -1,5 +1,6 @@ import type { DatetimeParts } from '../datetime-interface'; +import { isSameDay } from './comparison'; import { getNumDaysInMonth } from './helpers'; const twoDigit = (val: number | undefined): string => { @@ -345,7 +346,11 @@ export const calculateHourFromAMPM = (currentParts: DatetimeParts, newAMPM: 'am' * values are valid. For days that do not exist, * the closest valid day is used. */ -export const validateParts = (parts: DatetimeParts): DatetimeParts => { +export const validateParts = ( + parts: DatetimeParts, + minParts?: DatetimeParts, + maxParts?: DatetimeParts +): DatetimeParts => { const { month, day, year } = parts; const partsCopy = { ...parts }; @@ -361,5 +366,66 @@ export const validateParts = (parts: DatetimeParts): DatetimeParts => { partsCopy.day = numDays; } + /** + * If value is same day as min day, + * make sure the time value is in bounds. + */ + if (minParts !== undefined && isSameDay(partsCopy, minParts)) { + /** + * If the hour is out of bounds, + * update both the hour and minute. + * This is done so that the new time + * is closest to what the user selected. + */ + if (partsCopy.hour !== undefined && minParts.hour !== undefined) { + if (partsCopy.hour < minParts.hour) { + partsCopy.hour = minParts.hour; + partsCopy.minute = minParts.minute; + + /** + * If only the minute is out of bounds, + * set it to the min minute. + */ + } else if ( + partsCopy.hour === minParts.hour && + partsCopy.minute !== undefined && + minParts.minute !== undefined && + partsCopy.minute < minParts.minute + ) { + partsCopy.minute = minParts.minute; + } + } + } + + /** + * If value is same day as max day, + * make sure the time value is in bounds. + */ + if (maxParts !== undefined && isSameDay(parts, maxParts)) { + /** + * If the hour is out of bounds, + * update both the hour and minute. + * This is done so that the new time + * is closest to what the user selected. + */ + if (partsCopy.hour !== undefined && maxParts.hour !== undefined) { + if (partsCopy.hour > maxParts.hour) { + partsCopy.hour = maxParts.hour; + partsCopy.minute = maxParts.minute; + /** + * If only the minute is out of bounds, + * set it to the max minute. + */ + } else if ( + partsCopy.hour === maxParts.hour && + partsCopy.minute !== undefined && + maxParts.minute !== undefined && + partsCopy.minute > maxParts.minute + ) { + partsCopy.minute = maxParts.minute; + } + } + } + return partsCopy; }; diff --git a/core/src/components/footer/test/basic/e2e.ts b/core/src/components/footer/test/basic/e2e.ts deleted file mode 100644 index 82cc1c55ee..0000000000 --- a/core/src/components/footer/test/basic/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('footer: basic', async () => { - const page = await newE2EPage({ - url: '/src/components/footer/test/basic?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/footer/test/basic/footer.e2e.ts b/core/src/components/footer/test/basic/footer.e2e.ts new file mode 100644 index 0000000000..155bb94ab2 --- /dev/null +++ b/core/src/components/footer/test/basic/footer.e2e.ts @@ -0,0 +1,57 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('footer: basic', () => { + test.describe('footer: rendering', () => { + test('should not have visual regressions with basic footer', async ({ page }) => { + await page.setContent(` + + + Footer - Default + + + `); + + const footer = page.locator('ion-footer'); + expect(await footer.screenshot()).toMatchSnapshot(`footer-diff-${page.getSnapshotSettings()}.png`); + }); + }); + + test.describe('footer: feature rendering', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + }); + + test('should not have visual regressions with no border', async ({ page }) => { + await page.setContent(` + + + Footer - No Border + + + `); + + const footer = page.locator('ion-footer'); + expect(await footer.screenshot()).toMatchSnapshot(`footer-no-border-diff-${page.getSnapshotSettings()}.png`); + }); + + test('should not have visual regressions with translucent footer', async ({ page, skip }) => { + skip.mode('md', 'Translucent effect is only available in iOS mode.'); + skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.'); + + await page.setContent(` + +
+ +
+ + Footer - Translucent + + + `); + + const footer = page.locator('ion-footer'); + expect(await footer.screenshot()).toMatchSnapshot(`footer-translucent-diff-${page.getSnapshotSettings()}.png`); + }); + }); +}); diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..eaf5115dda Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..194e58051d Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..64ecaa0fe1 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..eaf5115dda Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..194e58051d Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..64ecaa0fe1 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..cae9bfb58f Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..20aa854180 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f52c7d0a07 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..433f06246d Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c1355394d9 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8176f1ea20 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..432dccd7e7 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9267557401 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..164e1152aa Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3cbe28a291 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..97a42667e9 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d32036669e Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3e0375dc6a Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..615344ad8d Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/index.html b/core/src/components/footer/test/basic/index.html index 669c4070a9..7929cd8426 100644 --- a/core/src/components/footer/test/basic/index.html +++ b/core/src/components/footer/test/basic/index.html @@ -15,23 +15,14 @@ - -
- - - - Footer - Default - - - -
- - - - Footer - No Border - - + +

Content

 + + + Footer + + diff --git a/core/src/components/footer/test/fade/e2e.ts b/core/src/components/footer/test/fade/e2e.ts deleted file mode 100644 index 650312bac6..0000000000 --- a/core/src/components/footer/test/fade/e2e.ts +++ /dev/null @@ -1,27 +0,0 @@ -import type { E2EPage } from '@stencil/core/testing'; -import { newE2EPage } from '@stencil/core/testing'; -import { scrollToBottom } from '@utils/test'; - -describe('footer: fade: iOS', () => { - let page: E2EPage; - - beforeEach(async () => { - page = await newE2EPage({ - url: '/src/components/footer/test/fade?ionic:_testing=true&ionic:mode=ios', - }); - }); - - it('should match existing visual screenshots', async () => { - const compares = []; - - compares.push(await page.compareScreenshot('footer: blurred')); - - await scrollToBottom(page, 'ion-content'); - - compares.push(await page.compareScreenshot('footer: not blurred')); - - for (const compare of compares) { - expect(compare).toMatchScreenshot(); - } - }); -}); diff --git a/core/src/components/footer/test/fade/footer.e2e.ts b/core/src/components/footer/test/fade/footer.e2e.ts new file mode 100644 index 0000000000..eef8cd2de2 --- /dev/null +++ b/core/src/components/footer/test/fade/footer.e2e.ts @@ -0,0 +1,24 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('footer: fade', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + }); + + test('should not have visual regressions with fade footer', async ({ page, skip }) => { + skip.mode('md', 'Translucent effect is only available in iOS mode.'); + skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.'); + + await page.goto('/src/components/footer/test/fade'); + + const footer = page.locator('ion-footer'); + expect(await footer.screenshot()).toMatchSnapshot(`footer-fade-blurred-diff-${page.getSnapshotSettings()}.png`); + + const content = page.locator('ion-content'); + await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0)); + await page.waitForChanges(); + + expect(await footer.screenshot()).toMatchSnapshot(`footer-fade-not-blurred-diff-${page.getSnapshotSettings()}.png`); + }); +}); diff --git a/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6cbde80d23 Binary files /dev/null and b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..defff583e5 Binary files /dev/null and b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b52a9a51cb Binary files /dev/null and b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..43e2909019 Binary files /dev/null and b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/fade/index.html b/core/src/components/footer/test/fade/index.html index 3f9da5c233..620318404e 100644 --- a/core/src/components/footer/test/fade/index.html +++ b/core/src/components/footer/test/fade/index.html @@ -12,78 +12,73 @@ -
- Mailboxes + Header - Mailboxes + Header -
-
-
-
-
-
-
-
-
+
+

Content

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, justo vitae rhoncus porttitor, + massa elit molestie nisl, ut tincidunt orci enim ac ante. Vestibulum tincidunt dignissim elit. Morbi + cursus hendrerit turpis, ut egestas tortor pulvinar sit amet. Interdum et malesuada fames ac ante ipsum + primis in faucibus. Phasellus faucibus consequat purus vel mollis. Ut ultricies elit nunc. Quisque + ultrices turpis vel augue auctor accumsan. Donec bibendum at nisi vel finibus. Fusce id imperdiet odio. + Morbi orci ipsum, imperdiet ut iaculis sit amet, suscipit vulputate felis. Nullam arcu leo, volutpat eu + porttitor sed, fringilla et arcu. Pellentesque ac libero sapien. Quisque id dui velit. Mauris et pretium + tortor. +

+

+ Ut ultricies id augue vel aliquam. Etiam ornare finibus nisl, nec egestas urna. Nam pellentesque libero + nec justo tristique lacinia. In sit amet gravida metus, ac tincidunt mauris. Fusce sit amet tempus turpis. + Nulla ligula nunc, vestibulum quis quam in, feugiat aliquet nibh. Quisque in ante non nulla luctus gravida + vel at lacus. Vivamus erat magna, elementum et dignissim nec, posuere eu ante. Praesent elementum, arcu + scelerisque venenatis sodales, turpis nulla aliquam urna, id hendrerit est orci et purus. Duis sem ipsum, + imperdiet eu elit id, tincidunt tempus sapien. Praesent tincidunt, sapien sed rhoncus euismod, lectus + velit ornare nunc, dapibus varius turpis leo ut magna. +

+

+ Nam quis quam id ante mattis pulvinar non sed mauris. Donec tempor sed nulla at semper. Vivamus ac nunc + bibendum, ullamcorper lacus quis, ornare massa. Cras gravida nibh risus, id sollicitudin eros ultricies + non. Integer velit massa, suscipit tincidunt rhoncus ut, lacinia et nisl. Maecenas volutpat ipsum blandit + sollicitudin lobortis. Suspendisse potenti. Cras non mi non arcu varius dapibus. Suspendisse maximus eget + justo a lobortis. Donec nulla ipsum, efficitur eget velit eget, varius rutrum quam. Nulla metus risus, + accumsan a tellus ac, faucibus blandit quam. Donec luctus, nisl ac ultricies ornare, nunc elit finibus + magna, id elementum ante urna congue ex. Cras condimentum nisi sollicitudin tortor vestibulum luctus. + Curabitur non ipsum et ex vestibulum congue. +

+

+ Maecenas rhoncus elit ut consectetur faucibus. Etiam sed sem sed mauris condimentum viverra sit amet at + nibh. Mauris bibendum at purus a cursus. Suspendisse potenti. Donec vel lacus ac odio euismod lacinia id + in urna. Donec commodo ipsum augue, at bibendum ex convallis suscipit. Nulla ac rhoncus odio. Aenean + elementum est nec arcu ultricies dignissim. +

+

+ Sed tincidunt bibendum massa, egestas bibendum est imperdiet vitae. Fusce dignissim consectetur ante a + fermentum. Morbi suscipit turpis sapien. Suspendisse eleifend sapien eget nunc mattis mattis. Phasellus + rhoncus sodales libero a imperdiet. Nam in vulputate lectus. Proin accumsan enim non nibh sagittis + ultricies. Nullam vitae ultricies nunc. Nullam ultrices dolor nec vehicula posuere. +

+
+ +
- Updated Just Now + Footer
diff --git a/core/src/components/footer/test/img.jpg b/core/src/components/footer/test/img.jpg new file mode 100644 index 0000000000..d7bd6ebe62 Binary files /dev/null and b/core/src/components/footer/test/img.jpg differ diff --git a/core/src/components/footer/test/scroll-target/e2e.ts b/core/src/components/footer/test/scroll-target/e2e.ts deleted file mode 100644 index f96f99c813..0000000000 --- a/core/src/components/footer/test/scroll-target/e2e.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { E2EPage } from '@stencil/core/testing'; -import { newE2EPage } from '@stencil/core/testing'; -import { scrollToBottom } from '@utils/test'; - -/** - * This test suite verifies that the fade effect for iOS is working correctly - * when the `ion-footer` is using a custom scroll target with the `.ion-content-scroll-host` - * selector. - */ -describe('footer: fade with custom scroll target: iOS', () => { - let page: E2EPage; - - beforeEach(async () => { - page = await newE2EPage({ - url: '/src/components/footer/test/scroll-target?ionic:_testing=true&ionic:mode=ios', - }); - }); - - it('should match existing visual screenshots', async () => { - const compares = []; - - compares.push(await page.compareScreenshot('footer: blurred')); - - await scrollToBottom(page, '#scroll-target'); - - compares.push(await page.compareScreenshot('footer: not blurred')); - - for (const compare of compares) { - expect(compare).toMatchScreenshot(); - } - }); -}); diff --git a/core/src/components/footer/test/scroll-target/footer.e2e.ts b/core/src/components/footer/test/scroll-target/footer.e2e.ts new file mode 100644 index 0000000000..17907696fc --- /dev/null +++ b/core/src/components/footer/test/scroll-target/footer.e2e.ts @@ -0,0 +1,33 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('footer: scroll-target', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + }); + + /** + * This test suite verifies that the fade effect for iOS is working correctly + * when the `ion-footer` is using a custom scroll target with the `.ion-content-scroll-host` + * selector. + */ + test('should not have visual regressions with custom scroll target footer', async ({ page, skip }) => { + skip.mode('md', 'Translucent effect is only available in iOS mode.'); + skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.'); + + await page.goto('/src/components/footer/test/scroll-target'); + + const footer = page.locator('ion-footer'); + expect(await footer.screenshot()).toMatchSnapshot( + `footer-fade-scroll-target-blurred-diff-${page.getSnapshotSettings()}.png` + ); + + const scrollTarget = page.locator('#scroll-target'); + await scrollTarget.evaluate((el: HTMLDivElement) => (el.scrollTop = el.scrollHeight)); + await page.waitForChanges(); + + expect(await footer.screenshot()).toMatchSnapshot( + `footer-fade-scroll-target-not-blurred-diff-${page.getSnapshotSettings()}.png` + ); + }); +}); diff --git a/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6cbde80d23 Binary files /dev/null and b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..defff583e5 Binary files /dev/null and b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b52a9a51cb Binary files /dev/null and b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..43e2909019 Binary files /dev/null and b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/scroll-target/index.html b/core/src/components/footer/test/scroll-target/index.html index 7fb03f5aee..870ec33297 100644 --- a/core/src/components/footer/test/scroll-target/index.html +++ b/core/src/components/footer/test/scroll-target/index.html @@ -2,7 +2,7 @@ - Footer - Fade (custom scroll host) + Footer - Scroll Target + -
- Mailboxes + Header
-
-
-
-
-
-
-
-
-
-
+

Content

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, justo vitae rhoncus porttitor, + massa elit molestie nisl, ut tincidunt orci enim ac ante. Vestibulum tincidunt dignissim elit. Morbi + cursus hendrerit turpis, ut egestas tortor pulvinar sit amet. Interdum et malesuada fames ac ante ipsum + primis in faucibus. Phasellus faucibus consequat purus vel mollis. Ut ultricies elit nunc. Quisque + ultrices turpis vel augue auctor accumsan. Donec bibendum at nisi vel finibus. Fusce id imperdiet odio. + Morbi orci ipsum, imperdiet ut iaculis sit amet, suscipit vulputate felis. Nullam arcu leo, volutpat eu + porttitor sed, fringilla et arcu. Pellentesque ac libero sapien. Quisque id dui velit. Mauris et pretium + tortor. +

+

+ Ut ultricies id augue vel aliquam. Etiam ornare finibus nisl, nec egestas urna. Nam pellentesque libero + nec justo tristique lacinia. In sit amet gravida metus, ac tincidunt mauris. Fusce sit amet tempus turpis. + Nulla ligula nunc, vestibulum quis quam in, feugiat aliquet nibh. Quisque in ante non nulla luctus gravida + vel at lacus. Vivamus erat magna, elementum et dignissim nec, posuere eu ante. Praesent elementum, arcu + scelerisque venenatis sodales, turpis nulla aliquam urna, id hendrerit est orci et purus. Duis sem ipsum, + imperdiet eu elit id, tincidunt tempus sapien. Praesent tincidunt, sapien sed rhoncus euismod, lectus + velit ornare nunc, dapibus varius turpis leo ut magna. +

+

+ Nam quis quam id ante mattis pulvinar non sed mauris. Donec tempor sed nulla at semper. Vivamus ac nunc + bibendum, ullamcorper lacus quis, ornare massa. Cras gravida nibh risus, id sollicitudin eros ultricies + non. Integer velit massa, suscipit tincidunt rhoncus ut, lacinia et nisl. Maecenas volutpat ipsum blandit + sollicitudin lobortis. Suspendisse potenti. Cras non mi non arcu varius dapibus. Suspendisse maximus eget + justo a lobortis. Donec nulla ipsum, efficitur eget velit eget, varius rutrum quam. Nulla metus risus, + accumsan a tellus ac, faucibus blandit quam. Donec luctus, nisl ac ultricies ornare, nunc elit finibus + magna, id elementum ante urna congue ex. Cras condimentum nisi sollicitudin tortor vestibulum luctus. + Curabitur non ipsum et ex vestibulum congue. +

+

+ Maecenas rhoncus elit ut consectetur faucibus. Etiam sed sem sed mauris condimentum viverra sit amet at + nibh. Mauris bibendum at purus a cursus. Suspendisse potenti. Donec vel lacus ac odio euismod lacinia id + in urna. Donec commodo ipsum augue, at bibendum ex convallis suscipit. Nulla ac rhoncus odio. Aenean + elementum est nec arcu ultricies dignissim. +

+

+ Sed tincidunt bibendum massa, egestas bibendum est imperdiet vitae. Fusce dignissim consectetur ante a + fermentum. Morbi suscipit turpis sapien. Suspendisse eleifend sapien eget nunc mattis mattis. Phasellus + rhoncus sodales libero a imperdiet. Nam in vulputate lectus. Proin accumsan enim non nibh sagittis + ultricies. Nullam vitae ultricies nunc. Nullam ultrices dolor nec vehicula posuere. +

+
+ +
- Updated Just Now + Footer
diff --git a/core/src/components/footer/test/translucent/e2e.ts b/core/src/components/footer/test/translucent/e2e.ts deleted file mode 100644 index e3a65fd0ce..0000000000 --- a/core/src/components/footer/test/translucent/e2e.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; -import { checkComponentModeClasses } from '@utils/test'; - -test('footer: translucent', async () => { - const page = await newE2EPage({ - url: '/src/components/footer/test/translucent?ionic:_testing=true', - }); - - const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode')); - await checkComponentModeClasses(await page.find('ion-footer'), globalMode!, 'footer-translucent'); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/footer/test/translucent/index.html b/core/src/components/footer/test/translucent/index.html deleted file mode 100644 index 6b511eb075..0000000000 --- a/core/src/components/footer/test/translucent/index.html +++ /dev/null @@ -1,171 +0,0 @@ - - - - - Header - Translucent - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lobortis felis, eu sodales enim. Nam - risus nibh, placerat at rutrum ac, vehicula vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing - elit. Vestibulum quis elementum ligula, ac aliquet nulla. Mauris non placerat mauris. Aenean dignissim lacinia - porttitor. Praesent fringilla at est et ullamcorper. In ac ante ac massa porta venenatis ut id nibh. Fusce - felis neque, aliquet in velit vitae, venenatis euismod libero. Donec vulputate, urna sed sagittis tempor, mi - arcu tristique lacus, eget fringilla urna sem eget felis. Fusce dignissim lacus a scelerisque vehicula. Nulla - nec enim nunc. Quisque nec dui eu nibh pulvinar bibendum quis ut nunc. Duis ex odio, sollicitudin ac mollis - nec, fringilla non lacus. Maecenas sed tincidunt urna. Nunc feugiat maximus venenatis. Donec porttitor, felis - eget porttitor tempor, quam nulla dapibus nisl, sit amet posuere sapien sapien malesuada tortor. Pellentesque - habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus, sapien nec - tincidunt efficitur, nibh turpis faucibus felis, in sodales massa augue nec erat. Morbi sollicitudin nisi ex, - et gravida nisi euismod eu. Suspendisse hendrerit dapibus orci, non viverra neque vestibulum id. Quisque vitae - interdum ligula, quis consectetur nibh. Phasellus in mi at erat ultrices semper. Fusce sollicitudin at dolor - ac lobortis. Morbi sit amet sem quis nulla pellentesque imperdiet. Nullam eu sem a enim maximus eleifend non - vulputate leo. Proin quis congue lacus. Pellentesque placerat, quam at tempus pulvinar, nisl ligula tempor - risus, quis pretium arcu odio et nulla. Nullam mollis consequat pharetra. Phasellus dictum velit sed purus - mattis maximus. In molestie eget massa ut dignissim. In a interdum elit. In finibus nibh a mauris lobortis - aliquet. Proin rutrum varius consequat. In mollis dapibus nisl, eu finibus urna viverra ac. Quisque - scelerisque nisl eu suscipit consectetur. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Footer - Translucent - - - Primary - Translucent - - - Secondary - Translucent - - - Tertiary - Translucent - - - Success - Translucent - - - Warning - Translucent - - - Danger - Translucent - - - Light - Translucent - - - Medium - Translucent - - - - - - - diff --git a/core/src/components/footer/test/with-tabs/index.html b/core/src/components/footer/test/with-tabs/index.html index a1bc4b9ff5..4b7694b56f 100644 --- a/core/src/components/footer/test/with-tabs/index.html +++ b/core/src/components/footer/test/with-tabs/index.html @@ -12,6 +12,7 @@ +