diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts index 5e6ba95de3..68223747d9 100644 --- a/core/src/utils/animation/animation.ts +++ b/core/src/utils/animation/animation.ts @@ -180,7 +180,7 @@ export const createAnimation = (): Animation => { let afterStylesValue: { [property: string]: any } = {}; let webAnimations: any[] = []; - let onFinishCallback: any | undefined; + const onFinishCallbacks: any[] = []; let numAnimationsRunning = 0; @@ -204,6 +204,7 @@ export const createAnimation = (): Animation => { elements = []; childAnimations = []; + onFinishCallbacks = []; initialized = false; @@ -216,7 +217,7 @@ export const createAnimation = (): Animation => { }; const onFinish = (callback: any): Animation => { - onFinishCallback = callback; + onFinishCallbacks.push(callback); return generatePublicAPI(); }; @@ -574,9 +575,9 @@ export const createAnimation = (): Animation => { runAfterWrite(); runAfterStyles(); - if (onFinishCallback !== undefined) { - onFinishCallback(generatePublicAPI()); - } + onFinishCallbacks.forEach(callback => { + callback(generatePublicAPI()); + }); }; const animationFinish = () => { diff --git a/core/src/utils/animation/test/gesture/e2e.ts b/core/src/utils/animation/test/gesture/e2e.ts deleted file mode 100644 index 48558429ee..0000000000 --- a/core/src/utils/animation/test/gesture/e2e.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -import { checkComponentModeClasses, checkModeClasses } from '../utils'; - -// This test is to loop through all components that should have -// specific classes added and test them -test('component: modes', async () => { - const page = await newE2EPage({ - url: '/src/utils/test/modes?ionic:_testing=true' - }); - - // First test: .button class - // ---------------------------------------------------------------- - // components that need to have the `button` class - // for use in styling by other components (`ion-buttons`) - // e.g. - let tags = ['ion-button', 'ion-back-button', 'ion-menu-button']; - - for (const tag of tags) { - const el = await page.find(tag); - expect(el).toHaveClass('button'); - } - - // Second test: .item class - // ---------------------------------------------------------------- - // components that need to have the `item` class - // for use in styling by other components - // e.g. - tags = ['ion-item', 'ion-item-divider', 'ion-item-group']; - - for (const tag of tags) { - const el = await page.find(tag); - expect(el).toHaveClass('item'); - } - - // Third test: .{component}-{mode} class - // ---------------------------------------------------------------- - // components that need to have their tag name - // + mode as a class for internal styling - // e.g. - tags = ['ion-card-content', 'ion-footer', 'ion-header', 'ion-infinite-scroll-content', 'ion-item-group', 'ion-item-options', 'ion-list', 'ion-picker', 'ion-refresher', 'ion-slides', 'ion-split-pane']; - - for (const tag of tags) { - const el = await page.find(tag); - await checkComponentModeClasses(el); - } - - // Fourth test: .{mode} class - // ---------------------------------------------------------------- - // components that need to have the mode class - // added for external / user styling - // e.g. - tags = ['ion-action-sheet', 'ion-alert', 'ion-anchor', 'ion-app', 'ion-avatar', 'ion-back-button', 'ion-backdrop', 'ion-badge', 'ion-button', 'ion-buttons', 'ion-card-content', 'ion-card-header', 'ion-card-subtitle', 'ion-card-title', 'ion-card', 'ion-checkbox', 'ion-chip', 'ion-col', 'ion-content', 'ion-datetime', 'ion-fab', 'ion-fab-button', 'ion-fab-list', 'ion-footer', 'ion-grid', 'ion-header', 'ion-icon', 'ion-img', 'ion-infinite-scroll', 'ion-infinite-scroll-content', 'ion-input', 'ion-item', 'ion-item-divider', 'ion-item-group', 'ion-item-option', 'ion-item-options', 'ion-item-sliding', 'ion-label', 'ion-list', 'ion-list-header', 'ion-loading', 'ion-modal', 'ion-menu', 'ion-menu-button', 'ion-menu-toggle', 'ion-note', 'ion-picker', 'ion-picker-column', 'ion-popover', 'ion-progress-bar', 'ion-radio', 'ion-radio-group', 'ion-range', 'ion-refresher', 'ion-refresher-content', 'ion-reorder', 'ion-reorder-group', 'ion-ripple-effect', 'ion-row', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-select-option', 'ion-select-popover', 'ion-skeleton-text', 'ion-slide', 'ion-slides', 'ion-spinner', 'ion-split-pane', 'ion-tab-bar', 'ion-tab-button', 'ion-text', 'ion-textarea', 'ion-thumbnail', 'ion-title', 'ion-toast', 'ion-toggle', 'ion-toolbar']; - - const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode')); - for (const tag of tags) { - await page.waitForSelector(tag); - const el = await page.find(tag); - await checkModeClasses(el, globalMode!); - } -});