diff --git a/core/src/components/action-sheet/test/test.utils.ts b/core/src/components/action-sheet/test/test.utils.ts index 0d8673f8823..6f497bebc7c 100644 --- a/core/src/components/action-sheet/test/test.utils.ts +++ b/core/src/components/action-sheet/test/test.utils.ts @@ -19,7 +19,7 @@ export async function testActionSheet( url: pageUrl }); - const screenShotCompares = []; + const screenshotCompares = []; const presentBtn = await page.find(selector); await presentBtn.click(); @@ -27,20 +27,20 @@ export async function testActionSheet( let actionSheet = await page.find('ion-action-sheet'); await actionSheet.waitForVisible(); - screenShotCompares.push(await page.compareScreenshot(screenshotName)); + screenshotCompares.push(await page.compareScreenshot(screenshotName)); - await afterScreenshotHook(page, screenshotName, screenShotCompares, actionSheet); + await afterScreenshotHook(page, screenshotName, screenshotCompares, actionSheet); await actionSheet.callMethod('dismiss'); await actionSheet.waitForNotVisible(); - screenShotCompares.push(await page.compareScreenshot(`dismissed ${screenshotName}`)); + screenshotCompares.push(await page.compareScreenshot(`dismissed ${screenshotName}`)); actionSheet = await page.find('ion-action-sheet'); expect(actionSheet).toBe(null); - for (const screenShotCompare of screenShotCompares) { - expect(screenShotCompare).toMatchScreenshot(); + for (const screenshotCompare of screenshotCompares) { + expect(screenshotCompare).toMatchScreenshot(); } } catch (err) { @@ -51,7 +51,7 @@ export async function testActionSheet( export async function testActionSheetBackdrop( page: any, screenshotName: string, - screenShotCompares: any, + screenshotCompares: any, actionSheet: any ) { try { @@ -59,7 +59,7 @@ export async function testActionSheetBackdrop( const backdrop = await page.find('ion-backdrop'); await backdrop.click(); - screenShotCompares.push(await page.compareScreenshot(`dismissed backdrop ${screenshotName}`)); + screenshotCompares.push(await page.compareScreenshot(`dismissed backdrop ${screenshotName}`)); const isVisible = await actionSheet.isVisible(); expect(isVisible).toBe(true); @@ -71,7 +71,7 @@ export async function testActionSheetBackdrop( export async function testActionSheetAlert( page: any, screenshotName: string, - screenShotCompares: any + screenshotCompares: any ) { try { const openAlertBtn = await page.find({ text: 'Open Alert' }); @@ -81,7 +81,7 @@ export async function testActionSheetAlert( await alert.waitForVisible(); await page.waitFor(250); - screenShotCompares.push(await page.compareScreenshot(`alert open ${screenshotName}`)); + screenshotCompares.push(await page.compareScreenshot(`alert open ${screenshotName}`)); const alertOkayBtn = await page.find({ contains: 'Okay' }); await alertOkayBtn.click(); diff --git a/core/src/components/alert/test/test.utils.ts b/core/src/components/alert/test/test.utils.ts index e78c40943df..4038d072cf6 100644 --- a/core/src/components/alert/test/test.utils.ts +++ b/core/src/components/alert/test/test.utils.ts @@ -18,7 +18,7 @@ export async function testAlert( url: pageUrl }); - const screenShotCompares = []; + const screenshotCompares = []; await page.click(selector); await page.waitForSelector(selector); @@ -28,18 +28,18 @@ export async function testAlert( expect(alert).not.toBe(null); await alert.waitForVisible(); - screenShotCompares.push(await page.compareScreenshot(screenshotName)); + screenshotCompares.push(await page.compareScreenshot(screenshotName)); await alert.callMethod('dismiss'); await alert.waitForNotVisible(); - screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`)); + screenshotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`)); alert = await page.find('ion-alert'); expect(alert).toBe(null); - for (const screenShotCompare of screenShotCompares) { - expect(screenShotCompare).toMatchScreenshot(); + for (const screenshotCompare of screenshotCompares) { + expect(screenshotCompare).toMatchScreenshot(); } } catch (err) { diff --git a/core/src/components/fab/test/test.utils.ts b/core/src/components/fab/test/test.utils.ts index 52a599a8cb6..fdfabf24ace 100644 --- a/core/src/components/fab/test/test.utils.ts +++ b/core/src/components/fab/test/test.utils.ts @@ -35,8 +35,8 @@ export async function testFab( screenshotCompares.push(await page.compareScreenshot(`${screenshotName} close`)); - for (const screenShotCompare of screenshotCompares) { - expect(screenShotCompare).toMatchScreenshot(); + for (const screenshotCompare of screenshotCompares) { + expect(screenshotCompare).toMatchScreenshot(); } } catch (err) { throw err; @@ -69,8 +69,8 @@ export async function testDisabledFab( screenshotCompares.push(await page.compareScreenshot(`disabled ${screenshotName} attempt open`)); - for (const screenShotCompare of screenshotCompares) { - expect(screenShotCompare).toMatchScreenshot(); + for (const screenshotCompare of screenshotCompares) { + expect(screenshotCompare).toMatchScreenshot(); } } catch (err) { throw err; diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss index aa9a9ed1265..30ba65d8d42 100644 --- a/core/src/components/item-option/item-option.scss +++ b/core/src/components/item-option/item-option.scss @@ -38,6 +38,8 @@ @include text-inherit(); @include padding(0, .7em); + display: inline-block; + position: relative; width: 100%; @@ -51,13 +53,14 @@ cursor: pointer; appearance: none; + + box-sizing: border-box; } .button-inner { display: flex; - flex-direction: column; - flex-flow: row nowrap; + flex-flow: column nowrap; flex-shrink: 0; align-items: center; justify-content: center; @@ -66,6 +69,29 @@ height: 100%; } +.horizontal-wrapper { + display: flex; + + flex-flow: row nowrap; + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 100%; +} + +::slotted(*) { + flex-shrink: 0; +} + +::slotted([slot="start"]) { + @include margin(0, 5px, 0, 0); +} + +::slotted([slot="end"]) { + @include margin(0, 0, 0, 5px); +} + ::slotted([slot="icon-only"]) { @include padding(0); @include margin(0, 10px); diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx index 6e93fbde4d7..1a231a11088 100644 --- a/core/src/components/item-option/item-option.tsx +++ b/core/src/components/item-option/item-option.tsx @@ -80,12 +80,14 @@ export class ItemOption implements ComponentInterface { href={this.href} > - - - - - - + +
+ + + + +
+ {this.mode === 'md' && } diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index f9df7fc2575..c7f1f7f83a5 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -319,10 +319,10 @@ export class ItemSliding implements ComponentInterface { function swipeShouldReset(isResetDirection: boolean, isMovingFast: boolean, isOnResetZone: boolean): boolean { // The logic required to know when the sliding item should close (openAmount=0) - // depends on three booleans (isCloseDirection, isMovingFast, isOnCloseZone) + // depends on three booleans (isResetDirection, isMovingFast, isOnResetZone) // and it ended up being too complicated to be written manually without errors // so the truth table is attached below: (0=false, 1=true) - // isCloseDirection | isMovingFast | isOnCloseZone || shouldClose + // isResetDirection | isMovingFast | isOnResetZone || shouldClose // 0 | 0 | 0 || 0 // 0 | 0 | 1 || 1 // 0 | 1 | 0 || 0 diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md index 19bdf38ea9c..b41c1c5455c 100644 --- a/core/src/components/item-sliding/readme.md +++ b/core/src/components/item-sliding/readme.md @@ -35,19 +35,145 @@ Options can be expanded to take up the full width of the item if you swipe past ```html + - - Item - Favorite Share + + Item Options + + Unread + + + + + + Delete + + + + + Expandable Options + + + + + Archive + + + + + + + + +

HubStruck Notifications

+

A new message in your network

+

Oceanic Next has joined your network

+ + + 10:45 AM + + + + + + + + + + + + + + + + + + + + + + + + Sliding Item, Icons Start + + + + + + More + + + + Archive + + + + + + + + + Sliding Item, Icons End + + + + + + More + + + + Archive + + + + + + + + + Sliding Item, Icons Top + + + + + + More + + + + Archive + + + + + + + + + Sliding Item, Icons Bottom + + + + + + More + + + + Archive + + + ``` @@ -56,19 +182,145 @@ Options can be expanded to take up the full width of the item if you swipe past ```html + - - Item - Favorite Share + + Item Options + + Unread + + + + + + Delete + + + + + Expandable Options + + + + + Archive + + + + + + + + +

HubStruck Notifications

+

A new message in your network

+

Oceanic Next has joined your network

+ + + 10:45 AM + + + + + + + + + + + + + + + + + + + + + + + + Sliding Item, Icons Start + + + + + + More + + + + Archive + + + + + + + + + Sliding Item, Icons End + + + + + + More + + + + Archive + + + + + + + + + Sliding Item, Icons Top + + + + + + More + + + + Archive + + + + + + + + + Sliding Item, Icons Bottom + + + + + + More + + + + Archive + + + ``` @@ -83,17 +335,143 @@ import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOpti const Example: React.SFC<{}> = () => ( + {/* Sliding item with text options on both sides */} + + + Favorite + Share + + + + Item Options + + + + Unread + + + + {/* Sliding item with expandable options on both sides */} + + + Delete + + + - Item + Expandable Options + + + + + Archive + + + + + {/* Multi-line sliding item with icon options on both sides */} + + + +

HubStruck Notifications

+

A new message in your network

+

Oceanic Next has joined your network

+ + + 10:45 AM + + - {}}>Favorite - {}}>Share + + + - {}}>Unread + + + + + + + + + + {/* Sliding item with icon start options on end side */} + + + + Sliding Item, Icons Start + + + + + + More + + + + Archive + + + + + {/* Sliding item with icon end options on end side */} + + + + Sliding Item, Icons End + + + + + + More + + + + Archive + + + + + {/* Sliding item with icon top options on end side */} + + + + Sliding Item, Icons Top + + + + + + More + + + + Archive + + + + + {/* Sliding item with icon bottom options on end side */} + + + + Sliding Item, Icons Bottom + + + + + + More + + + + Archive + @@ -109,19 +487,145 @@ export default Example; ```html ``` diff --git a/core/src/components/item-sliding/test/interactive/e2e.ts b/core/src/components/item-sliding/test/interactive/e2e.ts index 7319b27c7ac..608820f88e0 100644 --- a/core/src/components/item-sliding/test/interactive/e2e.ts +++ b/core/src/components/item-sliding/test/interactive/e2e.ts @@ -1,12 +1,14 @@ import { newE2EPage } from '@stencil/core/testing'; +import { openItemSliding } from '../test.utils'; + test('item-sliding: interactive', async () => { const page = await newE2EPage({ url: '/src/components/item-sliding/test/interactive?ionic:_testing=true' }); - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); + const compares = []; + compares.push(await page.compareScreenshot()); const items = await page.$$('ion-item-sliding'); expect(items.length).toEqual(3); @@ -20,30 +22,30 @@ test('item-sliding: interactive', async () => { const itemsAfterSecondSlide = await page.$$('ion-item-sliding'); expect(itemsAfterSecondSlide.length).toEqual(1); + + for (const compare of compares) { + expect(compare).toMatchScreenshot(); + } }); async function slideAndDelete(item: any, page: any) { try { // Get the element's ID const id = await(await item.getProperty('id')).jsonValue(); - - // Simulate a drag - const boundingBox = await item.boundingBox(); - const centerX = parseFloat(boundingBox.x + boundingBox.width / 2); - const centerY = parseFloat(boundingBox.y + boundingBox.height / 2); - - await page.mouse.move(centerX, centerY); - await page.mouse.down(); - await page.mouse.move(0, centerY); - await page.mouse.up(); - - // Click the "delete" option - const options = await item.$$('ion-item-option'); - await options[0].click(); - - // Wait for element to be removed from DOM - await page.waitForSelector(id, { hidden: true }); + await openItemSliding(`#${id}`, page); + await deleteItemSliding(item, page, id); } catch (err) { throw err; } } + +async function deleteItemSliding(item: any, page: any, id: string) { + // Click the "delete" option + const options = await item.$$('ion-item-option'); + await options[0].click(); + + // Wait for element to be removed from DOM + await page.waitForSelector(id, { hidden: true }); + + await page.waitFor(1000); +} diff --git a/core/src/components/item-sliding/test/standalone/e2e.ts b/core/src/components/item-sliding/test/standalone/e2e.ts index 668574e0273..7b3c7cef70d 100644 --- a/core/src/components/item-sliding/test/standalone/e2e.ts +++ b/core/src/components/item-sliding/test/standalone/e2e.ts @@ -1,10 +1,31 @@ import { newE2EPage } from '@stencil/core/testing'; +import { closeItemSliding, openItemSliding } from '../test.utils'; + test('item-sliding: standalone', async () => { const page = await newE2EPage({ url: '/src/components/item-sliding/test/standalone?ionic:_testing=true' }); - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); + const compares = []; + compares.push(await page.compareScreenshot()); + + // Pass sliding item with start icons in option + await openItemSliding('#startItem', page); + compares.push(await page.compareScreenshot(`start icons open`)); + await closeItemSliding(page); + + // Pass sliding item with top icons in option + await openItemSliding('#topItem', page); + compares.push(await page.compareScreenshot(`top icons open`)); + await closeItemSliding(page); + + // Pass sliding item with anchor option + await openItemSliding('#anchorItem', page); + compares.push(await page.compareScreenshot(`anchor option`)); + await closeItemSliding(page); + + for (const compare of compares) { + expect(compare).toMatchScreenshot(); + } }); diff --git a/core/src/components/item-sliding/test/standalone/index.html b/core/src/components/item-sliding/test/standalone/index.html index 1fdf33e00d1..04e945474dc 100644 --- a/core/src/components/item-sliding/test/standalone/index.html +++ b/core/src/components/item-sliding/test/standalone/index.html @@ -4,7 +4,8 @@ Item Sliding - Standalone - + @@ -12,38 +13,168 @@ + + + Favorite + Share + + + Item Options + + + + Unread + + + + + + + + Delete + + + + + Expandable Options + + + + + Archive + + + + + + + - One Line, icon only +

HubStruck Notifications

+

A new message in your network

+

Oceanic Next has joined your network

 + + 10:45 AM + - - + + + + + + - + + + + + + + + + + + + + Sliding Item, Icons Start + + + + + + More + + + + Archive + + + + + + + + + Sliding Item, Icons End + + + + + + More + + + + Archive + + + + + Sliding Item, Icons Top + + + + + + More + + + + Archive + + + + + - One Line, icon and text + Sliding Item, Icons Bottom - - More + + More + + + + Archive + + + + + + + + + Sliding Item, Anchor Icon Option + + + + + - - Archive + + + + diff --git a/core/src/components/item-sliding/test/test.utils.ts b/core/src/components/item-sliding/test/test.utils.ts new file mode 100644 index 00000000000..b8543550a56 --- /dev/null +++ b/core/src/components/item-sliding/test/test.utils.ts @@ -0,0 +1,31 @@ +// Opens a sliding item by simulating a drag event +export async function openItemSliding(id: string, page: any) { + try { + const slidingItem = await page.$(id); + + // Simulate a drag + const boundingBox = await slidingItem.boundingBox(); + const centerX = parseFloat(boundingBox.x + boundingBox.width / 2); + const centerY = parseFloat(boundingBox.y + boundingBox.height / 2); + + await page.mouse.move(centerX, centerY); + await page.mouse.down(); + await page.mouse.move(centerX / 2, centerY); + await page.mouse.move(0, centerY); + await page.mouse.up(); + + // Add a timeout to make sure the item is open + await page.waitFor(2000); + } catch (err) { + throw err; + } +} + +// Close a sliding item after taking a screenshot +// to allow other sliding items to open +export async function closeItemSliding(page: any) { + await page.mouse.move(0, 0); + await page.mouse.down(); + await page.mouse.up(); + await page.waitFor(1000); +} diff --git a/core/src/components/item-sliding/usage/angular.md b/core/src/components/item-sliding/usage/angular.md index 26d49c03968..63d07afa11a 100644 --- a/core/src/components/item-sliding/usage/angular.md +++ b/core/src/components/item-sliding/usage/angular.md @@ -1,17 +1,143 @@ ```html + - - Item - Favorite Share + + Item Options + + Unread + + + + + + Delete + + + + + Expandable Options + + + + + Archive + + + + + + + + +

HubStruck Notifications

+

A new message in your network

+

Oceanic Next has joined your network

+ + + 10:45 AM + + + + + + + + + + + + + + + + + + + + + + + + Sliding Item, Icons Start + + + + + + More + + + + Archive + + + + + + + + + Sliding Item, Icons End + + + + + + More + + + + Archive + + + + + + + + + Sliding Item, Icons Top + + + + + + More + + + + Archive + + + + + + + + + Sliding Item, Icons Bottom + + + + + + More + + + + Archive + + + ``` diff --git a/core/src/components/item-sliding/usage/javascript.md b/core/src/components/item-sliding/usage/javascript.md index 6d34b5e9f11..4884fc04926 100644 --- a/core/src/components/item-sliding/usage/javascript.md +++ b/core/src/components/item-sliding/usage/javascript.md @@ -1,17 +1,143 @@ ```html + - - Item - Favorite Share + + Item Options + + Unread + + + + + + Delete + + + + + Expandable Options + + + + + Archive + + + + + + + + +

HubStruck Notifications

+

A new message in your network

+

Oceanic Next has joined your network

+ + + 10:45 AM + + + + + + + + + + + + + + + + + + + + + + + + Sliding Item, Icons Start + + + + + + More + + + + Archive + + + + + + + + + Sliding Item, Icons End + + + + + + More + + + + Archive + + + + + + + + + Sliding Item, Icons Top + + + + + + More + + + + Archive + + + + + + + + + Sliding Item, Icons Bottom + + + + + + More + + + + Archive + + + ``` diff --git a/core/src/components/item-sliding/usage/react.md b/core/src/components/item-sliding/usage/react.md index fdaab9a922e..8577afe9271 100644 --- a/core/src/components/item-sliding/usage/react.md +++ b/core/src/components/item-sliding/usage/react.md @@ -6,17 +6,143 @@ import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOpti const Example: React.SFC<{}> = () => ( + {/* Sliding item with text options on both sides */} + + Favorite + Share + + - Item + Item Options + + + Unread + + + + {/* Sliding item with expandable options on both sides */} + - {}}>Favorite - {}}>Share + + Delete + + + Expandable Options + + - {}}>Unread + + Archive + + + + + {/* Multi-line sliding item with icon options on both sides */} + + + +

HubStruck Notifications

+

A new message in your network

+

Oceanic Next has joined your network

+ + + 10:45 AM + + + + + + + + + + + + + + + + + + + + {/* Sliding item with icon start options on end side */} + + + + Sliding Item, Icons Start + + + + + + More + + + + Archive + + + + + {/* Sliding item with icon end options on end side */} + + + + Sliding Item, Icons End + + + + + + More + + + + Archive + + + + + {/* Sliding item with icon top options on end side */} + + + + Sliding Item, Icons Top + + + + + + More + + + + Archive + + + + + {/* Sliding item with icon bottom options on end side */} + + + + Sliding Item, Icons Bottom + + + + + + More + + + + Archive + diff --git a/core/src/components/item-sliding/usage/vue.md b/core/src/components/item-sliding/usage/vue.md index 3726ec0841e..f42519b4227 100644 --- a/core/src/components/item-sliding/usage/vue.md +++ b/core/src/components/item-sliding/usage/vue.md @@ -1,19 +1,145 @@ ```html ``` diff --git a/core/src/components/item/test/sliding/e2e.ts b/core/src/components/item/test/sliding/e2e.ts deleted file mode 100644 index 659258ba87a..00000000000 --- a/core/src/components/item/test/sliding/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('item: sliding', async () => { - const page = await newE2EPage({ - url: '/src/components/item/test/sliding?ionic:_testing=true' - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/item/test/sliding/index.html b/core/src/components/item/test/sliding/index.html deleted file mode 100644 index f28c83f0c16..00000000000 --- a/core/src/components/item/test/sliding/index.html +++ /dev/null @@ -1,414 +0,0 @@ - - - - - - Item Sliding - Basic - - - - - - - - - - - - - Item Sliding - Basic - - Dynamic - - - Reload - - - - - - -
- Toggle sliding - Toggle Dynamic Options - Close Opened Items -
- - -
- - - -

No Options

-

Should not error or swipe without options

- - - - - - - - One Line, dynamic option and text - - - - - - - - - - - - - - - - - - Two options, one dynamic option and text - - - - - - - - - - - - - - - - - - - - - - -

HubStruck Notifications

-

A new message from a repo in your network

-

Oceanic Next has joined your network

- - - 10:45 AM - - - - - - No close - - - - - - - - - - - - - - - - -

RIGHT side - no icons

-

Hey do you want to go to the game tonight?

- - - - Archive - Delete - - - - - - -

LEFT side - no icons

-

I think I figured out how to get more Mountain Dew

- - - - Archive - Delete - - - - - - - -

RIGHT/LEFT side - icons

-

I think I figured out how to get more Mountain Dew

- - - - - Unread - - - - - - Archive - - - Delete - - - - - - - -

RIGHT/LEFT side - icons (slot="start")

-

I think I figured out how to get more Mountain Dew

- - - - - Unread - - - - - - Archive - - - Delete - - - - - - - - - - One Line w/ Icon, div only text - - - - - Archive - - - - - - - - - - - - One Line w/ Avatar, div only text - - - - - More - - - Archive - - - Delete - - - - - - - - - One Line, dynamic icon-start option - - - - - - - - - - - - - - - - - - - - -

DOWNLOAD

-

Paragraph text.

- - - - - Archive - - - -
Download
- - - - - - - - - - - - - -

ion-item-sliding without options (no sliding)

-

Paragraph text.

- - - - - - -

Normal ion-item (no sliding)

-

Paragraph text.

- - - - - -

Normal button (no sliding)

-

Hey do you want to go to the game tonight?

- - -
- - - - - - - - - - - diff --git a/core/src/components/loading/test/test.utils.ts b/core/src/components/loading/test/test.utils.ts index c0defd9011d..b9bebb80a87 100644 --- a/core/src/components/loading/test/test.utils.ts +++ b/core/src/components/loading/test/test.utils.ts @@ -18,7 +18,7 @@ export async function testLoading( url: pageUrl }); - const screenShotCompares = []; + const screenshotCompares = []; await page.click(selector); await page.waitForSelector(selector); @@ -28,18 +28,18 @@ export async function testLoading( await loading.waitForVisible(); - screenShotCompares.push(await page.compareScreenshot(screenshotName)); + screenshotCompares.push(await page.compareScreenshot(screenshotName)); await loading.callMethod('dismiss'); await loading.waitForNotVisible(); - screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`)); + screenshotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`)); loading = await page.find('ion-loading'); expect(loading).toBeNull(); - for (const screenShotCompare of screenShotCompares) { - expect(screenShotCompare).toMatchScreenshot(); + for (const screenshotCompare of screenshotCompares) { + expect(screenshotCompare).toMatchScreenshot(); } } catch (err) { diff --git a/core/src/components/menu/test/test.utils.ts b/core/src/components/menu/test/test.utils.ts index 3dbfc132b02..9259256f5e6 100644 --- a/core/src/components/menu/test/test.utils.ts +++ b/core/src/components/menu/test/test.utils.ts @@ -18,22 +18,22 @@ export async function testMenu( url: pageUrl }); - const screenShotCompares = []; + const screenshotCompares = []; const menu = await page.find(selector); await menu.callMethod('open'); await page.waitFor(250); - screenShotCompares.push(await page.compareScreenshot(screenshotName)); + screenshotCompares.push(await page.compareScreenshot(screenshotName)); await menu.callMethod('close'); await page.waitFor(250); - screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`)); + screenshotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`)); - for (const screenShotCompare of screenShotCompares) { - expect(screenShotCompare).toMatchScreenshot(); + for (const screenshotCompare of screenshotCompares) { + expect(screenshotCompare).toMatchScreenshot(); } } catch (err) { throw err; diff --git a/core/src/components/modal/test/test.utils.ts b/core/src/components/modal/test/test.utils.ts index 419e410b9e4..f8456ada531 100644 --- a/core/src/components/modal/test/test.utils.ts +++ b/core/src/components/modal/test/test.utils.ts @@ -18,7 +18,7 @@ export async function testModal( url: pageUrl }); - const screenShotCompares = []; + const screenshotCompares = []; await page.click(selector); await page.waitForSelector(selector); @@ -26,18 +26,18 @@ export async function testModal( let popover = await page.find('ion-modal'); await popover.waitForVisible(); - screenShotCompares.push(await page.compareScreenshot(screenshotName)); + screenshotCompares.push(await page.compareScreenshot(screenshotName)); await popover.callMethod('dismiss'); await popover.waitForNotVisible(); - screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`)); + screenshotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`)); popover = await page.find('ion-modal'); expect(popover).toBeNull(); - for (const screenShotCompare of screenShotCompares) { - expect(screenShotCompare).toMatchScreenshot(); + for (const screenshotCompare of screenshotCompares) { + expect(screenshotCompare).toMatchScreenshot(); } } catch (err) { diff --git a/core/src/components/popover/test/test.utils.ts b/core/src/components/popover/test/test.utils.ts index cd78e759987..127c36596b2 100644 --- a/core/src/components/popover/test/test.utils.ts +++ b/core/src/components/popover/test/test.utils.ts @@ -18,7 +18,7 @@ export async function testPopover( url: pageUrl }); - const screenShotCompares = []; + const screenshotCompares = []; await page.click(selector); await page.waitForSelector(selector); @@ -26,18 +26,18 @@ export async function testPopover( let popover = await page.find('ion-popover'); await popover.waitForVisible(); - screenShotCompares.push(await page.compareScreenshot(screenshotName)); + screenshotCompares.push(await page.compareScreenshot(screenshotName)); await popover.callMethod('dismiss'); await popover.waitForNotVisible(); - screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`)); + screenshotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`)); popover = await page.find('ion-popover'); expect(popover).toBeNull(); - for (const screenShotCompare of screenShotCompares) { - expect(screenShotCompare).toMatchScreenshot(); + for (const screenshotCompare of screenshotCompares) { + expect(screenshotCompare).toMatchScreenshot(); } } catch (err) { diff --git a/core/src/components/toast/test/test.utils.ts b/core/src/components/toast/test/test.utils.ts index 583a161c08e..bebcca95699 100644 --- a/core/src/components/toast/test/test.utils.ts +++ b/core/src/components/toast/test/test.utils.ts @@ -18,7 +18,7 @@ export async function testToast( url: pageUrl }); - const screenShotCompares = []; + const screenshotCompares = []; const button = await page.find(selector); await button.click(); @@ -26,18 +26,18 @@ export async function testToast( let toast = await page.find('ion-toast'); await toast.waitForVisible(); - screenShotCompares.push(await page.compareScreenshot(screenshotName)); + screenshotCompares.push(await page.compareScreenshot(screenshotName)); await toast.callMethod('dismiss'); await toast.waitForNotVisible(); - screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`)); + screenshotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`)); toast = await page.find('ion-toast'); expect(toast).toBeNull(); - for (const screenShotCompare of screenShotCompares) { - expect(screenShotCompare).toMatchScreenshot(); + for (const screenshotCompare of screenshotCompares) { + expect(screenshotCompare).toMatchScreenshot(); } } catch (err) {