Skip to content

Commit

Permalink
Add Snapshot Testing for Popup, View, and Flyout (#10660)
Browse files Browse the repository at this point in the history
* Add Snapshots

* Change files

* Adjust Snaps

* Fix Snapshot

* Fix Lint

* Remove Stale Snap
  • Loading branch information
chiaramooney committed Oct 7, 2022
1 parent bb28969 commit 59c2ab9
Show file tree
Hide file tree
Showing 11 changed files with 2,113 additions and 12 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Add Snapshots",
"packageName": "react-native-windows",
"email": "34109996+chiaramooney@users.noreply.github.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ const placementValues: string[] = [
];

class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
// eslint-disable-next-line @typescript-eslint/prefer-readonly
private _anchor: any;
// eslint-disable-next-line @typescript-eslint/prefer-readonly
private _anchorTwo: any;

public state: IFlyoutExampleState = {
Expand Down Expand Up @@ -67,7 +69,7 @@ class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {

return (
<View>
<View style={{flexDirection: 'row', paddingTop: 20}}>
<View style={{flexDirection: 'row', paddingTop: 20}} testID="flyout">
<Text style={{padding: 10}}>Placement Options: </Text>
<Picker
style={{width: 200, height: 35}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ class AnchoredPopupExample extends React.Component<

public render() {
return (
<View>
<View testID="anchor-popup">
<Text style={{width: 250}}>The following tests popup Anchor</Text>
<View style={{flexDirection: 'row'}}>
<Text style={{padding: 10, width: 300, height: 32}}>
Expand Down Expand Up @@ -96,7 +96,7 @@ class PopupPlacementExample extends React.Component<

public render() {
return (
<View style={{width: 500, height: 500}}>
<View style={{width: 500, height: 500}} testID="popup-placement">
<Button onPress={this._togglePopup} title={'Toggle popup'} />
{this.state.showPopup && (
<Popup
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,9 @@ exports.examples = [
title: 'Background Color',
render(): React.Node {
return (
<View style={{backgroundColor: '#527FE4', padding: 5}}>
<View
style={{backgroundColor: '#527FE4', padding: 5}}
testID="background-color">
<Text style={{fontSize: 11}}>Blue background</Text>
</View>
);
Expand All @@ -321,7 +323,9 @@ exports.examples = [
title: 'Border',
render(): React.Node {
return (
<View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
<View
style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}
testID="border">
<Text style={{fontSize: 11}}>5px blue border</Text>
</View>
);
Expand All @@ -338,7 +342,9 @@ exports.examples = [
},
});
return (
<View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
<View
style={{borderColor: '#bb0000', borderWidth: 0.5}}
testID="padding-margin">
<View style={[styles.box, {padding: 5}]}>
<Text style={{fontSize: 11}}>5px padding</Text>
</View>
Expand Down Expand Up @@ -397,7 +403,7 @@ exports.examples = [
title: 'Rounded Borders',
render(): React.Node {
return (
<View style={{flexDirection: 'row'}}>
<View style={{flexDirection: 'row'}} testID="rounded-borders">
<View
style={{
width: 50,
Expand Down Expand Up @@ -464,7 +470,7 @@ exports.examples = [
// NOTE: The <View> that sets `overflow` should only have other layout
// styles so that we can accurately test view flattening optimizations.
return (
<View style={{flexDirection: 'row'}}>
<View style={{flexDirection: 'row'}} testID="overflow">
<View style={styles.container}>
<View style={[StyleSheet.absoluteFill]}>
<Text style={styles.content}>undefined</Text>
Expand All @@ -488,7 +494,7 @@ exports.examples = [
title: 'Opacity',
render(): React.Node {
return (
<View>
<View testID="opacity">
<View style={{opacity: 0}}>
<Text>Opacity 0</Text>
</View>
Expand Down Expand Up @@ -536,7 +542,7 @@ exports.examples = [
title: 'ToolTip',
render(): React.Node {
return (
<View tooltip="Parent View">
<View tooltip="Parent View" testID="tool-tip">
<Text style={{fontSize: 11}}>
This Parent View has tooltip "Parent View"
</Text>
Expand All @@ -562,7 +568,9 @@ exports.examples = [
<Text style={{paddingBottom: 10}}>
View #1, front is visible, back is hidden.
</Text>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<View
style={{justifyContent: 'center', alignItems: 'center'}}
testID="backface-visibility">
<View
style={{
height: 200,
Expand Down Expand Up @@ -592,7 +600,9 @@ exports.examples = [
<Text style={{paddingVertical: 10}}>
View #2, front is hidden, back is visible.
</Text>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<View
style={{justifyContent: 'center', alignItems: 'center'}}
testID="backface-visibility-2">
<View
style={{
height: 200,
Expand Down
13 changes: 13 additions & 0 deletions packages/e2e-test-app/test/FlyoutComponentTest.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import {dumpVisualTree} from '@react-native-windows/automation-commands';
import {goToComponentExample} from './RNTesterNavigation';

beforeAll(async () => {
await goToComponentExample('Flyout');
});

describe('FlyoutTests', () => {
test('Flyout', async () => {
const dump = await dumpVisualTree('flyout');
expect(dump).toMatchSnapshot();
});
});
17 changes: 17 additions & 0 deletions packages/e2e-test-app/test/PopupComponentTest.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import {dumpVisualTree} from '@react-native-windows/automation-commands';
import {goToComponentExample} from './RNTesterNavigation';

beforeAll(async () => {
await goToComponentExample('Popup');
});

describe('PopupTests', () => {
test('Popups can be anchored', async () => {
const dump = await dumpVisualTree('anchor-popup');
expect(dump).toMatchSnapshot();
});
test('Popups can have different placement', async () => {
const dump = await dumpVisualTree('popup-placement');
expect(dump).toMatchSnapshot();
});
});
52 changes: 52 additions & 0 deletions packages/e2e-test-app/test/ViewComponentTest.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* Copyright (c) Microsoft Corporation.
* Licensed under the MIT License.
*
* @format
*/

import {dumpVisualTree} from '@react-native-windows/automation-commands';
import {goToComponentExample} from './RNTesterNavigation';

beforeAll(async () => {
await goToComponentExample('View');
});

describe('ViewTests', () => {
test('Views can have background colors', async () => {
const dump = await dumpVisualTree('background-color');
expect(dump).toMatchSnapshot();
});
test('Views can have borders', async () => {
const dump = await dumpVisualTree('border');
expect(dump).toMatchSnapshot();
});
test('Views can have padding and margins', async () => {
const dump = await dumpVisualTree('padding-margin');
expect(dump).toMatchSnapshot();
});
test('Views can have rounded borders', async () => {
const dump = await dumpVisualTree('rounded-borders');
expect(dump).toMatchSnapshot();
});
test('Views can have overflow', async () => {
const dump = await dumpVisualTree('overflow');
expect(dump).toMatchSnapshot();
});
test('Views can have ranging opacity', async () => {
const dump = await dumpVisualTree('opacity');
expect(dump).toMatchSnapshot();
});
test('Views can have tool tips', async () => {
const dump = await dumpVisualTree('tool-tip');
expect(dump).toMatchSnapshot();
});
test('Views can adjust backface visibility', async () => {
const dump = await dumpVisualTree('backface-visibility');
expect(dump).toMatchSnapshot();
});
test('Views can adjust backface visibility 2', async () => {
const dump = await dumpVisualTree('backface-visibility-2');
expect(dump).toMatchSnapshot();
});
});

0 comments on commit 59c2ab9

Please sign in to comment.