diff --git a/apps/common-app/src/examples/RuntimeTests/ReJest/TestRunner/UpdatesContainer.ts b/apps/common-app/src/examples/RuntimeTests/ReJest/TestRunner/UpdatesContainer.ts index acf899ebc2b..39debbb1fc0 100644 --- a/apps/common-app/src/examples/RuntimeTests/ReJest/TestRunner/UpdatesContainer.ts +++ b/apps/common-app/src/examples/RuntimeTests/ReJest/TestRunner/UpdatesContainer.ts @@ -23,6 +23,7 @@ type NativeUpdate = { export function createUpdatesContainer() { const jsUpdates = makeMutable>([]); const nativeSnapshots = makeMutable>([]); + const unimplementedNativeSnapshotsOnFabric = makeMutable(false); function _updateNativeSnapshot(updateInfos: JsUpdate[], jsUpdateIndex: number): void { 'worklet'; @@ -36,7 +37,7 @@ export function createUpdatesContainer() { for (const prop of propsToUpdate) { snapshot[prop] = isFabric ? global._obtainPropFabric(updateInfo?.shadowNodeWrapper, prop) - : global._obtainPropPaper(updateInfo?.tag, prop); + : global._obtainPropPaper(updateInfo.tag, prop); } values.push({ tag: updateInfo.tag, @@ -51,6 +52,7 @@ export function createUpdatesContainer() { function _updateJsSnapshot(newUpdates: JsUpdate[]): void { 'worklet'; + jsUpdates.modify(updates => { for (const update of newUpdates) { updates.push(update); @@ -82,16 +84,18 @@ export function createUpdatesContainer() { function pushLayoutAnimationUpdates(tag: number, update: Record) { 'worklet'; - if (global._IS_FABRIC) { - // layout animation doesn't work on Fabric yet - return; - } + // Deep Copy, works with nested objects, but doesn't copy functions (which should be fine here) const updatesCopy = JSON.parse(JSON.stringify(update)); if ('backgroundColor' in updatesCopy) { updatesCopy.backgroundColor = convertDecimalColor(updatesCopy.backgroundColor); } - _updateNativeSnapshot([{ tag, update }], jsUpdates.value.length - 1); + if (!global._IS_FABRIC) { + // TODO Implement native snapshots for layout animations on Fabric + _updateNativeSnapshot([{ tag, update }], jsUpdates.value.length - 1); + } else { + unimplementedNativeSnapshotsOnFabric.value = true; + } jsUpdates.modify(updates => { updates.push({ tag, @@ -106,6 +110,7 @@ export function createUpdatesContainer() { propsNames: string[], ): MultiViewSnapshot { const updatesForTag: Record> = {}; + for (const updateRequest of updates) { const { tag } = updateRequest; @@ -134,10 +139,16 @@ export function createUpdatesContainer() { if (viewTags.length === 1) { return sortedUpdates[Number(viewTags[0])]; } + if (viewTags.length === 0) { + throw new Error("Didn't record any snapshot"); + } throw new Error('Recorded snapshots of many views, specify component you want to get snapshot of'); } const tag = component?.getTag(); if (!tag || !(tag in sortedUpdates)) { + if (_IS_FABRIC && (-1) in sortedUpdates) { + return sortedUpdates[-1]; + } throw new Error('Snapshot of given component not found'); } else { return sortedUpdates[tag]; @@ -150,6 +161,9 @@ export function createUpdatesContainer() { } async function getNativeSnapshots(component?: TestComponent, propsNames: string[] = []): Promise { + if (unimplementedNativeSnapshotsOnFabric.value) { + return []; + } const nativeSnapshotsCount = nativeSnapshots.value.length; const jsUpdatesCount = jsUpdates.value.length; if (jsUpdatesCount === nativeSnapshotsCount) { diff --git a/apps/common-app/src/examples/RuntimeTests/ReJest/matchers/snapshotMatchers.ts b/apps/common-app/src/examples/RuntimeTests/ReJest/matchers/snapshotMatchers.ts index aa8534397e4..6eb26a3e5bf 100644 --- a/apps/common-app/src/examples/RuntimeTests/ReJest/matchers/snapshotMatchers.ts +++ b/apps/common-app/src/examples/RuntimeTests/ReJest/matchers/snapshotMatchers.ts @@ -17,7 +17,13 @@ function compareSnapshot( const comparisonMode = isValidPropName(key) ? getComparisonModeForProp(key) : ComparisonMode.AUTO; const isEqual = getComparator(comparisonMode); const expectMismatch = jsValue < 0 && expectNegativeValueMismatch; - const valuesAreMatching = isEqual(jsValue, nativeValue); + let valuesAreMatching = isEqual(jsValue, nativeValue); + + if ((key as string) === 'opacity' && jsValue === 1 && nativeValue === undefined) { + // undefined opacity may get translated into 1, as it is the default value + valuesAreMatching = true; + } + if ((!valuesAreMatching && !expectMismatch) || (valuesAreMatching && expectMismatch)) { return false; } diff --git a/apps/common-app/src/examples/RuntimeTests/tests/animations/withDecay/basic.test.tsx b/apps/common-app/src/examples/RuntimeTests/tests/animations/withDecay/basic.test.tsx index 3401382081a..de709f69eef 100644 --- a/apps/common-app/src/examples/RuntimeTests/tests/animations/withDecay/basic.test.tsx +++ b/apps/common-app/src/examples/RuntimeTests/tests/animations/withDecay/basic.test.tsx @@ -51,7 +51,7 @@ describe('withDecay animation, test various config', () => { { velocity: 900, clamp: [0, 150], rubberBandEffect: true }, { velocity: 2000, clamp: [0, 150], rubberBandEffect: true }, { velocity: 2000, clamp: [0, 150], rubberBandEffect: true, rubberBandFactor: 2 }, - ] as Array)('Config ${0}', async config => { + ] as Array)('Config %p', async config => { const snapshotName = ('decay_' + Object.entries(config) .map(([key, val]) => {