fix(item-option): add styling for slots other than icon-only (#17711)

styles the item option properly when icons are slotted. This was not working before at all for `top` and `bottom` slots.

- removes the e2e test from item/sliding in favor of all of them being under item-sliding
- adds more usage examples for all frameworks
- updates the styling for an anchor option so that it displays properly
- updates the standalone e2e test to take screenshots of the start icon, top icon, and anchor options
- updates the interactive e2e test to work locally
- cleaned up the CSS for start/end icons
- verified the styles for ben approval 💪

closes #17737 fixes #17402
This commit is contained in:
Brandy Carney
2019-03-15 13:46:57 -04:00
committed by GitHub
parent 29dbd0770c
commit 14f758ca97
22 changed files with 1332 additions and 535 deletions

View File

@ -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();