mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Rick Hanlon
d8bacc28f6
Summary: This diff adds a testing screen dev route to the facebook app for testing generated view configs It's not pretty (i have 0 tetra experiance) but it gets the job done There are three cases handled: - No generated config � - Invalid generated config (useful for dev) � - Valid generated config � On the description page we: - Redbox it it's invalid (this could be used to redbox test all host components) - Show diffs of the view config properties - List all of the generated config properties - List all of the native config properties Using this tool, it's easy to see what the current config on native is, add correct flow types for the generated config, and validate the generated config Coming later: adding all of the native configs to the list (will probably need filtering) Reviewed By: cpojer Differential Revision: D15683033 fbshipit-source-id: 5a566a56bef4f3f0bac3ea581c2e6acb2b9984e3
102 lines
2.8 KiB
JavaScript
102 lines
2.8 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @emails oncall+react_native
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const getNativeComponentAttributes = require('../../ReactNative/getNativeComponentAttributes');
|
|
const verifyComponentAttributeEquivalence = require('../verifyComponentAttributeEquivalence')
|
|
.default;
|
|
|
|
jest.dontMock('../verifyComponentAttributeEquivalence');
|
|
jest.mock('../../ReactNative/getNativeComponentAttributes', () => () => ({
|
|
NativeProps: {
|
|
value: 'BOOL',
|
|
},
|
|
bubblingEventTypes: {
|
|
topChange: {
|
|
phasedRegistrationNames: {
|
|
bubbled: 'onChange',
|
|
captured: 'onChangeCapture',
|
|
},
|
|
},
|
|
},
|
|
directEventTypes: {
|
|
topAccessibilityAction: {
|
|
registrationName: 'onAccessibilityAction',
|
|
},
|
|
},
|
|
validAttributes: {
|
|
borderColor: true,
|
|
style: {
|
|
borderColor: true,
|
|
transform: 'CATransform3D',
|
|
},
|
|
transform: 'CATransform3D',
|
|
},
|
|
}));
|
|
|
|
beforeEach(() => {
|
|
global.__DEV__ = true;
|
|
console.error = jest.fn();
|
|
jest.resetModules();
|
|
});
|
|
|
|
describe('verifyComponentAttributeEquivalence', () => {
|
|
test('should not verify in prod', () => {
|
|
global.__DEV__ = false;
|
|
verifyComponentAttributeEquivalence('TestComponent', {});
|
|
});
|
|
|
|
test('should not error with native config that is a subset of the given config', () => {
|
|
const configWithAdditionalProperties = getNativeComponentAttributes(
|
|
'TestComponent',
|
|
);
|
|
|
|
configWithAdditionalProperties.bubblingEventTypes.topFocus = {
|
|
phasedRegistrationNames: {
|
|
bubbled: 'onFocus',
|
|
captured: 'onFocusCapture',
|
|
},
|
|
};
|
|
|
|
configWithAdditionalProperties.directEventTypes.topSlidingComplete = {
|
|
registrationName: 'onSlidingComplete',
|
|
};
|
|
|
|
configWithAdditionalProperties.validAttributes.active = true;
|
|
|
|
verifyComponentAttributeEquivalence(
|
|
'TestComponent',
|
|
configWithAdditionalProperties,
|
|
);
|
|
verifyComponentAttributeEquivalence(
|
|
'TestComponent',
|
|
configWithAdditionalProperties,
|
|
);
|
|
|
|
expect(console.error).not.toBeCalled();
|
|
});
|
|
|
|
test('should error if given config is missing native config properties', () => {
|
|
verifyComponentAttributeEquivalence('TestComponent', {});
|
|
|
|
expect(console.error).toBeCalledTimes(3);
|
|
expect(console.error).toBeCalledWith(
|
|
'TestComponent generated view config for directEventTypes does not match native, missing: topAccessibilityAction',
|
|
);
|
|
expect(console.error).toBeCalledWith(
|
|
'TestComponent generated view config for bubblingEventTypes does not match native, missing: topChange',
|
|
);
|
|
expect(console.error).toBeCalledWith(
|
|
'TestComponent generated view config for validAttributes does not match native, missing: borderColor style',
|
|
);
|
|
});
|
|
});
|