From bf70520c271c13cc6f3323812e5f32e449fbbb08 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 7 Mar 2019 10:25:10 -0500 Subject: [PATCH 01/11] fix(item-option): add styling for slots other than icon-only it was not working before this at all, also removes the e2e test from item/sliding in favor of all of them being under item-sliding, and adds JS usage TODO: - add e2e test with screenshots of this - verify / clean up CSS design - add other usage examples --- .../components/item-option/item-option.scss | 26 +- .../components/item-option/item-option.tsx | 14 +- core/src/components/item-sliding/readme.md | 132 +++++- .../item-sliding/test/standalone/index.html | 128 +++++- .../item-sliding/usage/javascript.md | 132 +++++- core/src/components/item/test/sliding/e2e.ts | 10 - .../components/item/test/sliding/index.html | 414 ------------------ 7 files changed, 408 insertions(+), 448 deletions(-) delete mode 100644 core/src/components/item/test/sliding/e2e.ts delete mode 100644 core/src/components/item/test/sliding/index.html diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss index aa9a9ed1265..1f6b68a47a3 100644 --- a/core/src/components/item-option/item-option.scss +++ b/core/src/components/item-option/item-option.scss @@ -56,8 +56,7 @@ .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 +65,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/readme.md b/core/src/components/item-sliding/readme.md index 19bdf38ea9c..e2a6fcb1d2c 100644 --- a/core/src/components/item-sliding/readme.md +++ b/core/src/components/item-sliding/readme.md @@ -56,19 +56,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 + + + ``` diff --git a/core/src/components/item-sliding/test/standalone/index.html b/core/src/components/item-sliding/test/standalone/index.html index 1fdf33e00d1..aaa3a9a15da 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,145 @@ + + + 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 + + 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/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?

- - -
- - - - - - - - - - - From acb44338dd660cf5f9a30dc1f65f21d1174a63e9 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 8 Mar 2019 18:18:49 -0500 Subject: [PATCH 02/11] fix(item-option): set the display and box sizing for anchors fixes #17402 --- .../components/item-option/item-option.scss | 4 ++++ .../item-sliding/test/standalone/index.html | 18 ++++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss index 1f6b68a47a3..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,6 +53,8 @@ cursor: pointer; appearance: none; + + box-sizing: border-box; } .button-inner { diff --git a/core/src/components/item-sliding/test/standalone/index.html b/core/src/components/item-sliding/test/standalone/index.html index aaa3a9a15da..a5a1af585d8 100644 --- a/core/src/components/item-sliding/test/standalone/index.html +++ b/core/src/components/item-sliding/test/standalone/index.html @@ -133,6 +133,7 @@

HubStruck Notifications

+ @@ -152,6 +153,23 @@

HubStruck Notifications

 + + + + + Sliding Item, Anchor Icon Option + + + + + + + + + + + + From 07b75712efcc93c92c6f3aae027e2cc0fb68eca0 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 11 Mar 2019 12:49:29 -0400 Subject: [PATCH 03/11] docs(item-sliding): update usage information for frameworks --- .../components/item-sliding/item-sliding.tsx | 4 +- .../components/item-sliding/usage/angular.md | 132 ++++++++++++++++- .../components/item-sliding/usage/react.md | 134 +++++++++++++++++- core/src/components/item-sliding/usage/vue.md | 132 ++++++++++++++++- 4 files changed, 390 insertions(+), 12 deletions(-) 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/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/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 ``` From 62907f8412721e4daff1ce5456e993c6a4cdec34 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 11 Mar 2019 13:09:08 -0400 Subject: [PATCH 04/11] chore(docs): update readme from build --- core/src/components/item-sliding/readme.md | 398 ++++++++++++++++++++- 1 file changed, 388 insertions(+), 10 deletions(-) diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md index e2a6fcb1d2c..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 + + + ``` @@ -209,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 + 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 + @@ -235,19 +487,145 @@ export default Example; ```html ``` From 6498999e209a91381aabda52710a311a29126ec7 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 11 Mar 2019 13:09:27 -0400 Subject: [PATCH 05/11] test(item-sliding): update standalone test to take more SS --- .../item-sliding/test/standalone/e2e.ts | 37 ++++++++++++++++++- .../item-sliding/test/standalone/index.html | 9 ++++- 2 files changed, 42 insertions(+), 4 deletions(-) diff --git a/core/src/components/item-sliding/test/standalone/e2e.ts b/core/src/components/item-sliding/test/standalone/e2e.ts index 668574e0273..3541710893a 100644 --- a/core/src/components/item-sliding/test/standalone/e2e.ts +++ b/core/src/components/item-sliding/test/standalone/e2e.ts @@ -5,6 +5,39 @@ test('item-sliding: standalone', async () => { 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()); + + // Grab item with start icons in option + let item = await page.find('#start'); + await openItem(item, page); + + compares.push(await page.compareScreenshot()); + + // Grab item with top icons in option + item = await page.find('#top'); + await openItem(item, page); + + compares.push(await page.compareScreenshot()); + + for (const compare of compares) { + expect(compare).toMatchScreenshot(); + } }); + +async function openItem(item: any, page: any) { + try { + // 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(); + } catch (err) { + throw err; + } +} diff --git a/core/src/components/item-sliding/test/standalone/index.html b/core/src/components/item-sliding/test/standalone/index.html index a5a1af585d8..9877ffe15fe 100644 --- a/core/src/components/item-sliding/test/standalone/index.html +++ b/core/src/components/item-sliding/test/standalone/index.html @@ -78,7 +78,7 @@

HubStruck Notifications

- + Sliding Item, Icons Start @@ -116,7 +116,7 @@

HubStruck Notifications

 - + Sliding Item, Icons Top @@ -172,4 +172,9 @@

HubStruck Notifications

+ From 28495a42f920e82321ba0fe10cc7f20b0e9575bb Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 11 Mar 2019 13:11:56 -0400 Subject: [PATCH 06/11] test(item-sliding): add anchor option to SS --- core/src/components/item-sliding/test/standalone/e2e.ts | 6 ++++++ core/src/components/item-sliding/test/standalone/index.html | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/core/src/components/item-sliding/test/standalone/e2e.ts b/core/src/components/item-sliding/test/standalone/e2e.ts index 3541710893a..949b2e5d9c2 100644 --- a/core/src/components/item-sliding/test/standalone/e2e.ts +++ b/core/src/components/item-sliding/test/standalone/e2e.ts @@ -21,6 +21,12 @@ test('item-sliding: standalone', async () => { compares.push(await page.compareScreenshot()); + // Grab item with anchor option + item = await page.find('#anchor'); + await openItem(item, page); + + compares.push(await page.compareScreenshot()); + 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 9877ffe15fe..de3377b5ede 100644 --- a/core/src/components/item-sliding/test/standalone/index.html +++ b/core/src/components/item-sliding/test/standalone/index.html @@ -154,7 +154,7 @@

HubStruck Notifications

 - + Sliding Item, Anchor Icon Option From b3010cd2adbe14b177cdbca51e8e1256cf75d935 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 15 Mar 2019 10:32:02 -0400 Subject: [PATCH 07/11] test(item-sliding): update standalone --- .../item-sliding/test/standalone/e2e.ts | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/core/src/components/item-sliding/test/standalone/e2e.ts b/core/src/components/item-sliding/test/standalone/e2e.ts index 949b2e5d9c2..4b48013331b 100644 --- a/core/src/components/item-sliding/test/standalone/e2e.ts +++ b/core/src/components/item-sliding/test/standalone/e2e.ts @@ -9,33 +9,29 @@ test('item-sliding: standalone', async () => { compares.push(await page.compareScreenshot()); - // Grab item with start icons in option - let item = await page.find('#start'); - await openItem(item, page); + // Pass item with start icons in option + await openItem('#start', page); + compares.push(await page.compareScreenshot(`start icons open`)); - compares.push(await page.compareScreenshot()); - - // Grab item with top icons in option - item = await page.find('#top'); - await openItem(item, page); - - compares.push(await page.compareScreenshot()); + // Pass item with top icons in option + await openItem('#top', page); + compares.push(await page.compareScreenshot(`top icons open`)); - // Grab item with anchor option - item = await page.find('#anchor'); - await openItem(item, page); - - compares.push(await page.compareScreenshot()); + // Pass item with anchor option + await openItem('#anchor', page); + compares.push(await page.compareScreenshot(`anchor option`)); for (const compare of compares) { expect(compare).toMatchScreenshot(); } }); -async function openItem(item: any, page: any) { +async function openItem(id: string, page: any) { try { + const slidingItem = await page.$(id); + // Simulate a drag - const boundingBox = await item.boundingBox(); + const boundingBox = await slidingItem.boundingBox(); const centerX = parseFloat(boundingBox.x + boundingBox.width / 2); const centerY = parseFloat(boundingBox.y + boundingBox.height / 2); @@ -43,6 +39,10 @@ async function openItem(item: any, page: any) { await page.mouse.down(); await page.mouse.move(0, centerY); await page.mouse.up(); + + const slidingEl = await page.find(id); + const open = await slidingEl.callMethod('getOpenAmount'); + console.log('open amount is', open); } catch (err) { throw err; } From cac9b3bba844d5c9510b531600efc88ef36e2057 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 15 Mar 2019 11:53:47 -0400 Subject: [PATCH 08/11] test(item-sliding): fix the drag event --- .../item-sliding/test/standalone/e2e.ts | 31 ++++++++++++------- .../item-sliding/test/standalone/index.html | 6 ++-- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/core/src/components/item-sliding/test/standalone/e2e.ts b/core/src/components/item-sliding/test/standalone/e2e.ts index 4b48013331b..a94620afbe6 100644 --- a/core/src/components/item-sliding/test/standalone/e2e.ts +++ b/core/src/components/item-sliding/test/standalone/e2e.ts @@ -6,26 +6,29 @@ test('item-sliding: standalone', async () => { }); const compares = []; - compares.push(await page.compareScreenshot()); - // Pass item with start icons in option - await openItem('#start', page); + // Pass sliding item with start icons in option + await openItem('#startItem', page); compares.push(await page.compareScreenshot(`start icons open`)); + await closeItem(page); - // Pass item with top icons in option - await openItem('#top', page); + // Pass sliding item with top icons in option + await openItem('#topItem', page); compares.push(await page.compareScreenshot(`top icons open`)); + await closeItem(page); - // Pass item with anchor option - await openItem('#anchor', page); + // Pass sliding item with anchor option + await openItem('#anchorItem', page); compares.push(await page.compareScreenshot(`anchor option`)); + await closeItem(page); for (const compare of compares) { expect(compare).toMatchScreenshot(); } }); +// Opens a sliding item by simulating a drag event async function openItem(id: string, page: any) { try { const slidingItem = await page.$(id); @@ -37,13 +40,19 @@ async function openItem(id: string, page: any) { 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(); - - const slidingEl = await page.find(id); - const open = await slidingEl.callMethod('getOpenAmount'); - console.log('open amount is', open); } catch (err) { throw err; } } + +// Close a sliding item after taking a screenshot +// to allow other sliding items to open +async function closeItem(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/test/standalone/index.html b/core/src/components/item-sliding/test/standalone/index.html index de3377b5ede..04e945474dc 100644 --- a/core/src/components/item-sliding/test/standalone/index.html +++ b/core/src/components/item-sliding/test/standalone/index.html @@ -78,7 +78,7 @@

HubStruck Notifications

 - + Sliding Item, Icons Start @@ -116,7 +116,7 @@

HubStruck Notifications

 - + Sliding Item, Icons Top @@ -154,7 +154,7 @@

HubStruck Notifications

 - + Sliding Item, Anchor Icon Option From 860101e41f249d04d49ae02b34034e9d67934ad6 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 15 Mar 2019 11:57:35 -0400 Subject: [PATCH 09/11] style(test): updates capitalization on screenshotCompares --- .../action-sheet/test/test.utils.ts | 20 +++++++++---------- core/src/components/alert/test/test.utils.ts | 10 +++++----- core/src/components/fab/test/test.utils.ts | 8 ++++---- .../src/components/loading/test/test.utils.ts | 10 +++++----- core/src/components/menu/test/test.utils.ts | 10 +++++----- core/src/components/modal/test/test.utils.ts | 10 +++++----- .../src/components/popover/test/test.utils.ts | 10 +++++----- core/src/components/toast/test/test.utils.ts | 10 +++++----- 8 files changed, 44 insertions(+), 44 deletions(-) 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/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) { From d5a701e7da1dcc484d25ad33c680e4c5f5efd9c1 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 15 Mar 2019 12:28:28 -0400 Subject: [PATCH 10/11] test(item-sliding): get interactive test working locally moves open and close functions to utils --- .../item-sliding/test/interactive/e2e.ts | 40 +++++++++-------- .../item-sliding/test/standalone/e2e.ts | 43 ++++--------------- .../item-sliding/test/test.utils.ts | 28 ++++++++++++ 3 files changed, 57 insertions(+), 54 deletions(-) create mode 100644 core/src/components/item-sliding/test/test.utils.ts 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 a94620afbe6..7b3c7cef70d 100644 --- a/core/src/components/item-sliding/test/standalone/e2e.ts +++ b/core/src/components/item-sliding/test/standalone/e2e.ts @@ -1,5 +1,7 @@ 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' @@ -9,50 +11,21 @@ test('item-sliding: standalone', async () => { compares.push(await page.compareScreenshot()); // Pass sliding item with start icons in option - await openItem('#startItem', page); + await openItemSliding('#startItem', page); compares.push(await page.compareScreenshot(`start icons open`)); - await closeItem(page); + await closeItemSliding(page); // Pass sliding item with top icons in option - await openItem('#topItem', page); + await openItemSliding('#topItem', page); compares.push(await page.compareScreenshot(`top icons open`)); - await closeItem(page); + await closeItemSliding(page); // Pass sliding item with anchor option - await openItem('#anchorItem', page); + await openItemSliding('#anchorItem', page); compares.push(await page.compareScreenshot(`anchor option`)); - await closeItem(page); + await closeItemSliding(page); for (const compare of compares) { expect(compare).toMatchScreenshot(); } }); - -// Opens a sliding item by simulating a drag event -async function openItem(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(); - } catch (err) { - throw err; - } -} - -// Close a sliding item after taking a screenshot -// to allow other sliding items to open -async function closeItem(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/test/test.utils.ts b/core/src/components/item-sliding/test/test.utils.ts new file mode 100644 index 00000000000..49382a07c30 --- /dev/null +++ b/core/src/components/item-sliding/test/test.utils.ts @@ -0,0 +1,28 @@ +// 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(); + } 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); +} From fa67bd2086247ba5c849260d167ee8da3d78b83e Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 15 Mar 2019 12:45:41 -0400 Subject: [PATCH 11/11] test(item-sliding): add a timeout for the open item --- core/src/components/item-sliding/test/test.utils.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/core/src/components/item-sliding/test/test.utils.ts b/core/src/components/item-sliding/test/test.utils.ts index 49382a07c30..b8543550a56 100644 --- a/core/src/components/item-sliding/test/test.utils.ts +++ b/core/src/components/item-sliding/test/test.utils.ts @@ -13,6 +13,9 @@ export async function openItemSliding(id: string, page: any) { 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; }