zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-25 23:48:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add unit tests for setNativeProps style mutation

Browse Source
This commit is contained in:
Nicolas Gallagher
2021-04-15 14:15:49 -07:00
parent 9d6d39f2c7
commit 7293a613d5
2 changed files with 87 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap
+43
View File
@@ -126,6 +126,49 @@ exports[`components/View prop "pointerEvents" 1`] = `
/>
`;
exports[`components/View prop "ref" setNativeProps method style updates as expected 1`] = `
<div
class="css-view-1dbjc4n r-color-howw7u"
style="width: 10px;"
/>
`;
exports[`components/View prop "ref" setNativeProps method style updates as expected 2`] = `
<div
class="css-view-1dbjc4n"
style="width: 20px; color: rgb(255, 165, 0); height: 20px;"
/>
`;
exports[`components/View prop "ref" setNativeProps method style updates as expected 3`] = `
<div
class="css-view-1dbjc4n r-color-howw7u"
style="width: 30px;"
/>
`;
exports[`components/View prop "ref" setNativeProps method style updates as expected 4`] = `
<div
class="css-view-1dbjc4n r-color-howw7u"
style="width: 30px;"
/>
`;
exports[`components/View prop "ref" setNativeProps method style updates as expected 5`] = `
<div
class="css-view-1dbjc4n r-color-howw7u"
style="width: 40px;"
/>
`;
exports[`components/View prop "ref" setNativeProps method works with react-native props 1`] = `
<div
aria-label="label"
class="css-view-1dbjc4n r-pointerEvents-ah5dr5"
style="box-shadow: 0px 0px 0px rgba(0,0,0,1.00); margin-right: 10px; margin-left: 10px; vertical-align: top;"
/>
`;
exports[`components/View prop "style" value is set 1`] = `
<div
class="css-view-1dbjc4n"
packages/react-native-web/src/exports/View/__tests__/index-test.js
Vendored
+44
View File
@@ -2,6 +2,7 @@
import React from 'react';
import View from '../';
import StyleSheet from '../../StyleSheet';
import { act } from 'react-dom/test-utils';
import { createEventTarget } from 'dom-event-testing-library';
import { render } from '@testing-library/react';
@@ -206,6 +207,49 @@ describe('components/View', () => {
expect(typeof node.measureInWindow === 'function');
expect(typeof node.setNativeProps === 'function');
});
describe('setNativeProps method', () => {
test('works with react-native props', () => {
const ref = React.createRef();
const { container } = render(<View ref={ref} />);
const node = ref.current;
node.setNativeProps({
accessibilityLabel: 'label',
pointerEvents: 'box-only',
style: {
marginHorizontal: 10,
shadowColor: 'black',
shadowWidth: 2,
textAlignVertical: 'top'
}
});
expect(container.firstChild).toMatchSnapshot();
});
test('style updates as expected', () => {
const ref = React.createRef();
const styles = StyleSheet.create({ root: { color: 'red' } });
// initial render
const { container, rerender } = render(
<View ref={ref} style={[styles.root, { width: 10 }]} />
);
const node = ref.current;
expect(container.firstChild).toMatchSnapshot();
// set native props
node.setNativeProps({ style: { color: 'orange', height: 20, width: 20 } });
expect(container.firstChild).toMatchSnapshot();
// set native props again
node.setNativeProps({ style: { width: 30 } });
expect(container.firstChild).toMatchSnapshot();
node.setNativeProps({ style: { width: 30 } });
node.setNativeProps({ style: { width: 30 } });
node.setNativeProps({ style: { width: 30 } });
expect(container.firstChild).toMatchSnapshot();
// update render
rerender(<View ref={ref} style={[styles.root, { width: 40 }]} />);
expect(container.firstChild).toMatchSnapshot();
});
});
});
test('prop "pointerEvents"', () => {