-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Add tree dump utility to E2E test framework and fix Image border issue #3754
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.
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
Changes from 8 commits
cc64ce1
c25021a
6c2916f
71fba93
01648c7
1c1d4c6
88f9b0e
91c43d2
2f91657
5275f13
30f6f96
9427f4c
8cf5ea5
dcd83d0
7180fb7
98a1282
ed5818a
b6aedd8
db8b680
ae7527d
44aebf8
84336b6
59ecc0f
84991ef
52a6a6f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "type": "prerelease", | ||
| "comment": "TreeDump for E2E test and fix for image border issue", | ||
| "packageName": "react-native-windows", | ||
| "email": "[email protected]", | ||
| "commit": "88f9b0eaecfe88e2243b66d969420131224f1c56", | ||
| "date": "2019-12-10T20:31:33.939Z" | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| /** | ||
| * Copyright (c) Microsoft Corporation. All rights reserved. | ||
| * Licensed under the MIT License. | ||
| */ | ||
|
|
||
| import {StyleSheet, View, Image, Button, requireNativeComponent} from 'react-native' | ||
| import React, { useState } from 'react'; | ||
| import { TREE_DUMP_RESULT, SHOW_IMAGE_BORDER, IMAGE_ELEMENT } from './Consts'; | ||
| const TreeDumpControl = requireNativeComponent('TreeDumpControl'); | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| height:220, | ||
| width:450, | ||
| }, | ||
| imageWithBorder: { | ||
| height: '100%', | ||
| width: '100%', | ||
| borderRadius: 10.0, | ||
| borderWidth:10, | ||
| borderColor: 'green', | ||
| backgroundColor: 'red', | ||
| }, | ||
| image: { | ||
| height: '100%', | ||
| width: '100%', | ||
| backgroundColor: 'red', | ||
| }, | ||
| buttonContainer: { | ||
| backgroundColor: '#2980b6', | ||
| paddingVertical: 15 | ||
| }, | ||
| buttonText: { | ||
| color: '#fff', | ||
| textAlign: 'center', | ||
| fontWeight: '700' | ||
| }, | ||
| treeDumpControl: { | ||
| height: 150, | ||
| width: 450, | ||
| margin: 10, | ||
| }, | ||
| }); | ||
|
|
||
| export function ImageTestPage() { | ||
| const [imageWithBorder, setImageBorder] = useState(false); | ||
| const onOressBorder = () => { | ||
| var previousImageBorderState = imageWithBorder; | ||
| setImageBorder(!previousImageBorderState); | ||
| } | ||
| return( | ||
| <View style={styles.container}> | ||
| <Image | ||
| testID={IMAGE_ELEMENT} | ||
| style={imageWithBorder?styles.imageWithBorder:styles.image} | ||
| resizeMode={'center'} | ||
| source={{uri: 'http://facebook.github.io/react-native/img/header_logo.png'}} | ||
|
||
| /> | ||
| <Button title= {imageWithBorder?"Hide Border":"Show Border"} | ||
| onPress={onOressBorder} | ||
| testID={SHOW_IMAGE_BORDER}/> | ||
| <TreeDumpControl style={styles.treeDumpControl} dumpID={imageWithBorder?'ImageWithBorder':'ImageWithoutBorder'} uiaID={IMAGE_ELEMENT} testID={TREE_DUMP_RESULT} /> | ||
| </View >); | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| /** | ||
| * Copyright (c) Microsoft Corporation. All rights reserved. | ||
| * Licensed under the MIT License. | ||
| */ | ||
|
|
||
| import { BasePage, By } from './BasePage'; | ||
| import { TREE_DUMP_RESULT, SHOW_IMAGE_BORDER } from '../../app/Consts'; | ||
|
|
||
| class ImageTestPage extends BasePage { | ||
| backToHomePage() { | ||
| this.homeButton.click(); | ||
| this.waitForPageLoaded(); | ||
| } | ||
|
|
||
| isPageLoaded() { | ||
| return super.isPageLoaded() && this.treeDumpResult.isDisplayed(); | ||
| } | ||
|
|
||
| getTreeDumpResult() { | ||
| return this.treeDumpResult.getText(); | ||
| } | ||
|
|
||
| toggleImageBorder() { | ||
| this._imageBorder.click(); | ||
| } | ||
|
|
||
| private get treeDumpResult() { | ||
| return By(TREE_DUMP_RESULT); | ||
| } | ||
|
|
||
| private get _imageBorder() { | ||
| return By(SHOW_IMAGE_BORDER); | ||
| } | ||
| } | ||
|
|
||
| export default new ImageTestPage(); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| /** | ||
| * Copyright (c) Microsoft Corporation. All rights reserved. | ||
| * Licensed under the MIT License. | ||
| */ | ||
|
|
||
| import HomePage from '../pages/HomePage'; | ||
| import ImageTestPage from '../pages/ImageTestPage'; | ||
| import assert from 'assert'; | ||
|
|
||
| beforeAll(() => { | ||
| HomePage.backToHomePage(); | ||
| HomePage.clickAndGotoImagePage(); | ||
| }); | ||
|
|
||
| describe('ImageWithoutBorderTest', () => { | ||
| it('ImageWithoutBorderTest Success', () => { | ||
| const result = ImageTestPage.getTreeDumpResult(); | ||
| assert.ok( | ||
| result.includes('TreeDump:Passed'), | ||
| 'Dump comparison passed for image without border!' | ||
| ); | ||
|
||
| }); | ||
|
|
||
| it('ImageWithBorderTest', () => { | ||
| ImageTestPage.toggleImageBorder(); | ||
| const result = ImageTestPage.getTreeDumpResult(); | ||
| assert.ok( | ||
| result.includes('TreeDump:Passed'), | ||
| 'Dump comparison passed for image with border!' | ||
| ); | ||
| }); | ||
|
|
||
| // toggle back to no border and verify border properties are reset | ||
| it('ImageWithoutBorderTest Success', () => { | ||
| const result = ImageTestPage.getTreeDumpResult(); | ||
| assert.ok( | ||
| result.includes('TreeDump:Passed'), | ||
| 'Second dump comparison passed for image without border!' | ||
| ); | ||
| }); | ||
| }); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,6 +9,8 @@ | |
| using Windows.UI.Xaml.Navigation; | ||
| using Microsoft.ReactNative; | ||
| using Windows.UI.Core; | ||
| using Windows.UI.ViewManagement; | ||
| using Windows.Foundation; | ||
|
|
||
| namespace ReactUWPTestApp | ||
| { | ||
|
|
@@ -42,6 +44,8 @@ public App() | |
| #endif | ||
|
|
||
| PackageProviders.Add(new Microsoft.ReactNative.Managed.ReactPackageProvider()); // Includes any modules in this project | ||
| PackageProviders.Add(new TreeDumpLibrary.ReactPackageProvider()); | ||
|
|
||
| this.InitializeComponent(); | ||
| } | ||
|
|
||
|
|
@@ -54,6 +58,7 @@ protected override void OnLaunched(LaunchActivatedEventArgs e) | |
| { | ||
| base.OnLaunched(e); | ||
| SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed; | ||
| ApplicationView.GetForCurrentView().TryResizeView(new Size(1024, 768)); | ||
|
||
| } | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| [Windows.UI.Xaml.Controls.Border] | ||
| Padding=0,0,0,0 | ||
|
||
| CornerRadius=10,10,10,10 | ||
| BorderThickness=10,10,10,10 | ||
| BorderBrush=#FF008000 | ||
| Background=#FFFF0000 | ||
| Width=450 | ||
| VerticalAlignment=Stretch | ||
| Margin=0,0,0,0 | ||
| HorizontalAlignment=Stretch | ||
| Height=220 | ||
| Clip=[NULL] | ||
| Visibility=Visible | ||
| RenderSize=450,220 | ||
| ActualOffset=<0, 0, 0> | ||
| [Windows.UI.Xaml.DependencyObject] | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| [Windows.UI.Xaml.Controls.Border] | ||
| Padding=0,0,0,0 | ||
| CornerRadius=0,0,0,0 | ||
| BorderThickness=0,0,0,0 | ||
| BorderBrush=[NULL] | ||
| Background=#FFFF0000 | ||
| Width=450 | ||
| VerticalAlignment=Stretch | ||
| Margin=0,0,0,0 | ||
| HorizontalAlignment=Stretch | ||
| Height=220 | ||
| Clip=[NULL] | ||
| Visibility=Visible | ||
| RenderSize=450,220 | ||
| ActualOffset=<0, 0, 0> | ||
| [Windows.UI.Xaml.DependencyObject] |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| copy %LocalAppData%\Packages\ReactUWPTestApp_kc2bncckyf4ap\LocalState\TreeDump\*.out Assets\TreeDump\*.treedump |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| // Copyright (c) Microsoft Corporation. All rights reserved. | ||
| // Licensed under the MIT License. | ||
|
|
||
| using Microsoft.ReactNative.Bridge; | ||
| using Microsoft.ReactNative.Managed; | ||
|
|
||
| namespace TreeDumpLibrary | ||
| { | ||
| public sealed class ReactPackageProvider : IReactPackageProvider | ||
| { | ||
| public void CreatePackage(IReactPackageBuilder packageBuilder) | ||
| { | ||
| packageBuilder.AddViewManagers(); | ||
| } | ||
| } | ||
| } |
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.