Skip to content

Replace target in snapshot, so it doesn't keep changing #15924

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
acoates-ms wants to merge 2 commits into
base: main
Choose a base branch
from
+38 −19
Open

Replace target in snapshot, so it doesn't keep changing #15924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b4476e6
Replace target in snapshot, so it doesn't keep changing
acoates-ms Apr 3, 2026
624b384
fix
acoates-ms Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 14 additions & 10 deletions ...ct-native-windows/tester/src/js/examples-win/Pointer/PointerClickEventsExample.windows.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,37 @@
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';

const React = require('react');
import {Pressable, StyleSheet, View} from 'react-native';
import {StyleSheet, View} from 'react-native';
import RNTesterText from '../../components/RNTesterText';

function PointerClickEventsExample(): React.Node {
const [text, setText] = React.useState(
'onClick should cause the box to go red, onAuxClick will cause it go green',
);
const [bgColor, setBgColor]= React.useState('gray');
const [bgColor, setBgColor] = React.useState('gray');
return (
<View>
<View
accessible
testID="pointer-click-target"
style={[styles.targetBox, {backgroundColor: bgColor}]}
onClick={(e) => {
onClick={e => {
setBgColor('red');
setText('onClick.nativeEvent: ' + JSON.stringify(e.nativeEvent, null, 2));
setText(
'onClick.nativeEvent: ' + JSON.stringify(e.nativeEvent, null, 2),
);
}}
onAuxClick={(e) => {
onAuxClick={e => {
setBgColor('green');
setText('onAuxClick.nativeEvent: ' + JSON.stringify(e.nativeEvent, null, 2));
setText(
'onAuxClick.nativeEvent: ' + JSON.stringify(e.nativeEvent, null, 2),
);
}}
/>
<RNTesterText accessible testID='pointer-click-text'>{text}</RNTesterText>
<RNTesterText accessible testID="pointer-click-text">
{text}
</RNTesterText>
</View>

);
}

Expand All @@ -46,8 +51,7 @@ exports.category = 'Basic';
exports.title = 'Pointer Clicks';
exports.documentationURL =
'https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event';
exports.description =
'Tests that onClick and onAuxClick work.';
exports.description = 'Tests that onClick and onAuxClick work.';

exports.examples = [
{
Expand Down
33 changes: 24 additions & 9 deletions packages/e2e-test-app-fabric/test/PointerClickEventsTest.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ afterEach(async () => {
await verifyNoErrorLogs();
});


describe('Pointer onClick Test', () => {
test('onClick reports correct native event properties on left click', async () => {
const component = await app.findElementByTestID('pointer-click-target');
Expand All @@ -33,7 +32,9 @@ describe('Pointer onClick Test', () => {
await app.waitUntil(
async () => {
const currentText = await stateText.getText();
return currentText.includes('"button": 0') && currentText.includes('onClick');
return (
currentText.includes('"button": 0') && currentText.includes('onClick')
);
},
{
timeout: 5000,
Expand All @@ -43,7 +44,10 @@ describe('Pointer onClick Test', () => {
);

const text = await stateText.getText();
expect(text).toMatchSnapshot();
const nativeEvent = JSON.parse(text.split('onClick.nativeEvent: ')[1]);
expect(typeof nativeEvent.target).toBe('number');
nativeEvent.target = '<target>';
expect(nativeEvent).toMatchSnapshot();
});
test('onAuxClick reports correct native event properties on middle click', async () => {
const component = await app.findElementByTestID('pointer-click-target');
Expand All @@ -56,7 +60,10 @@ describe('Pointer onClick Test', () => {
await app.waitUntil(
async () => {
const currentText = await stateText.getText();
return currentText.includes('"button": 1') && currentText.includes('onAuxClick');
return (
currentText.includes('"button": 1') &&
currentText.includes('onAuxClick')
);
},
{
timeout: 5000,
Expand All @@ -66,20 +73,26 @@ describe('Pointer onClick Test', () => {
);

const text = await stateText.getText();
expect(text).toMatchSnapshot();
const nativeEvent = JSON.parse(text.split('onAuxClick.nativeEvent: ')[1]);
expect(typeof nativeEvent.target).toBe('number');
nativeEvent.target = '<target>';
expect(nativeEvent).toMatchSnapshot();
});
test('onAuxClick reports correct native event properties on right click', async () => {
const component = await app.findElementByTestID('pointer-click-target');
await component.waitForDisplayed({ timeout: 5000 });

// Middle click triggers onPointerDown with button=2
// Right click triggers onPointerDown with button=2
await component.click({ button: 'right' });
const stateText = await app.findElementByTestID('pointer-click-text');

await app.waitUntil(
async () => {
const currentText = await stateText.getText();
return currentText.includes('"button": 2') && currentText.includes('onAuxClick');
return (
currentText.includes('"button": 2') &&
currentText.includes('onAuxClick')
);
},
{
timeout: 5000,
Expand All @@ -89,7 +102,9 @@ describe('Pointer onClick Test', () => {
);

const text = await stateText.getText();
expect(text).toMatchSnapshot();
const nativeEvent = JSON.parse(text.split('onAuxClick.nativeEvent: ')[1]);
expect(typeof nativeEvent.target).toBe('number');
nativeEvent.target = '<target>';
expect(nativeEvent).toMatchSnapshot();
});

});
Loading