From 085f5df0b71b1594ed86e75d41022a4bef2b99a1 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 26 Jul 2019 16:39:28 -0400 Subject: [PATCH] add base tests --- .../utils/animation/animation-interface.ts | 11 +-- core/src/utils/animation/animation.ts | 37 +++++----- core/src/utils/animation/test/basic/e2e.ts | 33 ++++++++- .../src/utils/animation/test/basic/index.html | 3 +- .../utils/animation/test/chaining/index.html | 2 +- core/src/utils/animation/test/grid/index.html | 2 +- core/src/utils/animation/test/multiple/e2e.ts | 71 +++++++++++++++++++ .../utils/animation/test/multiple/index.html | 23 +++--- .../utils/animation/test/simple/index.html | 2 +- core/src/utils/config.ts | 1 + core/src/utils/test/utils.ts | 2 +- 11 files changed, 151 insertions(+), 36 deletions(-) create mode 100644 core/src/utils/animation/test/multiple/e2e.ts diff --git a/core/src/utils/animation/animation-interface.ts b/core/src/utils/animation/animation-interface.ts index 0df9879286..c969f8643e 100644 --- a/core/src/utils/animation/animation-interface.ts +++ b/core/src/utils/animation/animation-interface.ts @@ -24,8 +24,8 @@ export interface Animation { addAnimation(animationToADd: Animation | Animation[] | undefined | null): Animation; addElement(el: Element | Element[] | Node | Node[] | NodeList | undefined | null): Animation; iterations(iterations: number): Animation; - fill(fill: 'auto' | 'none' | 'forwards' | 'backwards' | 'both' | undefined): Animation; - direction(direction: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse' | undefined): Animation; + fill(fill: AnimationFill | undefined): Animation; + direction(direction: AnimationDirection | undefined): Animation; duration(duration: number): Animation; easing(easing: string): Animation; delay(delay: number): Animation; @@ -33,8 +33,8 @@ export interface Animation { parent(animation: Animation): Animation; getKeyframes(): any[]; - getDirection(): 'normal' | 'reverse' | 'alternate' | 'alternate-reverse' | undefined; - getFill(): 'auto' | 'none' | 'forwards' | 'backwards' | 'both' | undefined; + getDirection(): AnimationDirection | undefined; + getFill(): AnimationFill | undefined; getDelay(): number | undefined; getIterations(): number | undefined; getEasing(): string | undefined; @@ -56,3 +56,6 @@ export interface Animation { onFinish(callback: any): Animation; } + +export type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'; +export type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both'; diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts index e691a2e831..e0812b1bc2 100644 --- a/core/src/utils/animation/animation.ts +++ b/core/src/utils/animation/animation.ts @@ -1,8 +1,13 @@ -import { Animation } from './animation-interface'; +import { Animation, AnimationDirection, AnimationFill } from './animation-interface'; import { addClassToArray, animationEnd, createKeyframeStylesheet, generateKeyframeString } from './animation-utils'; let counter = 0; +/** + * HACKY + */ +const _forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations'); + export const createAnimation = () => { const elements: HTMLElement[] = []; const childAnimations: Animation[] = []; @@ -45,7 +50,7 @@ export const createAnimation = () => { const _afterAddReadFunctions: any[] = []; const _afterAddWriteFunctions: any[] = []; - const supportsWebAnimations = !!(window as any).Animation; + const supportsWebAnimations = !!(window as any).Animation && _forceCSSAnimations !== null; /** * Destroy this animation and all child animations. @@ -213,14 +218,14 @@ export const createAnimation = () => { return ani; }; - const getFill = (): 'auto' | 'none' | 'forwards' | 'backwards' | 'both' | undefined => { + const getFill = () => { if (_fill !== undefined) { return _fill; } if (parentAnimation) { return parentAnimation.getFill(); } return undefined; }; - const getDirection = (): 'normal' | 'reverse' | 'alternate' | 'alternate-reverse' | undefined => { + const getDirection = () => { if (shouldForceReverseDirection) { return 'reverse'; } if (_direction !== undefined) { return _direction; } if (parentAnimation) { return parentAnimation.getDirection(); } @@ -229,7 +234,7 @@ export const createAnimation = () => { }; - const getEasing = (): string | undefined => { + const getEasing = () => { if (shouldForceLinearEasing) { return 'linear'; } if (_easing !== undefined) { return _easing; } if (parentAnimation) { return parentAnimation.getEasing(); } @@ -237,7 +242,7 @@ export const createAnimation = () => { return undefined; }; - const getDuration = (): number | undefined => { + const getDuration = () => { if (shouldForceSyncPlayback) { return 0; } if (_duration !== undefined) { return _duration; } if (parentAnimation) { return parentAnimation.getDuration(); } @@ -245,21 +250,21 @@ export const createAnimation = () => { return undefined; }; - const getIterations = (): number | undefined => { + const getIterations = () => { if (_iterations !== undefined) { return _iterations; } if (parentAnimation) { return parentAnimation.getIterations(); } return undefined; }; - const getDelay = (): number | undefined => { + const getDelay = () => { if (_delay !== undefined) { return _delay; } if (parentAnimation) { return parentAnimation.getDelay(); } return undefined; }; - const getKeyframes = (): any[] => { + const getKeyframes = () => { return _keyframes; }; @@ -269,13 +274,13 @@ export const createAnimation = () => { return ani; }; - const direction = (animationDirection: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse') => { + const direction = (animationDirection: AnimationDirection) => { _direction = animationDirection; return ani; }; - const fill = (animationFill: 'auto' | 'none' | 'forwards' | 'backwards' | 'both') => { + const fill = (animationFill: AnimationFill) => { _fill = animationFill; return ani; @@ -469,7 +474,7 @@ export const createAnimation = () => { iterationsCount = (getIterations() === Infinity) ? 'infinite' : getIterations()!.toString(); } - element.style.setProperty('animation-iteration-countion', iterationsCount); + element.style.setProperty('animation-iteration-count', iterationsCount); element.style.setProperty('animation-play-state', 'paused'); } }); @@ -540,8 +545,8 @@ export const createAnimation = () => { elements.forEach(element => { if (_keyframes.length > 0) { - (element as HTMLElement).style.animationDelay = animationDuration; - (element as HTMLElement).style.animationPlayState = 'paused'; + element.style.setProperty('animation-delay', animationDuration); + element.style.setProperty('animation-play-state', 'paused'); } }); } @@ -643,7 +648,7 @@ export const createAnimation = () => { return ani; }; - const playAsync = (): Promise => { + const playAsync = () => { return new Promise(resolve => { onFinish(resolve); play(); @@ -799,5 +804,5 @@ export const createAnimation = () => { progressStart, progressStep, progressEnd - }; + } as Animation; }; diff --git a/core/src/utils/animation/test/basic/e2e.ts b/core/src/utils/animation/test/basic/e2e.ts index 4cee94364f..ec1e879cd6 100644 --- a/core/src/utils/animation/test/basic/e2e.ts +++ b/core/src/utils/animation/test/basic/e2e.ts @@ -2,8 +2,37 @@ import { newE2EPage } from '@stencil/core/testing'; import { listenForEvent, waitForFunctionTestContext } from '../../../test/utils'; -test(`animation: basic`, async () => { - const page = await newE2EPage({ url: '/src/utils/animation/test/basic?ionic:_testing=true' }); +test(`animation:web: basic`, async () => { + const page = await newE2EPage({ url: '/src/utils/animation/test/basic' }); + const screenshotCompares = []; + + screenshotCompares.push(await page.compareScreenshot()); + + const ANIMATION_FINISHED = 'onIonAnimationFinished'; + const animationFinishedCount: any = { count: 0 }; + await page.exposeFunction(ANIMATION_FINISHED, () => { + console.log('yay'); + animationFinishedCount.count += 1; + }); + + const square = await page.$('.square-a'); + await listenForEvent(page, 'ionAnimationFinished', square, ANIMATION_FINISHED); + + await page.click('.play'); + await page.waitForSelector('.play'); + + await waitForFunctionTestContext((payload: any) => { + return payload.animationFinishedCount.count === 1; + }, { animationFinishedCount }); + + screenshotCompares.push(await page.compareScreenshot()); +}); + +test(`animation:css: basic`, async () => { + const page = await newE2EPage({ url: '/src/utils/animation/test/basic?ionic:_forceCSSAnimations=true' }); + + page.evaluate(() => window.Ionic.config._forceCSSAnimations = true); + const screenshotCompares = []; screenshotCompares.push(await page.compareScreenshot()); diff --git a/core/src/utils/animation/test/basic/index.html b/core/src/utils/animation/test/basic/index.html index 67e75df822..4887edb004 100644 --- a/core/src/utils/animation/test/basic/index.html +++ b/core/src/utils/animation/test/basic/index.html @@ -15,7 +15,7 @@ import { createAnimation } from '../../../../dist/index.mjs'; const squareA = document.querySelector('.square-a'); - + const rootAnimation = createAnimation(); rootAnimation @@ -36,6 +36,7 @@ document.querySelector('.play').addEventListener('click', () => { rootAnimation.play(); }); +