-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add tree dump utility to E2E test framework and fix Image border issue (
#3754) Add TreeDump utility to E2E test framework and image border fix with TreeDump tests.
- Loading branch information
Showing
26 changed files
with
934 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
change/react-native-windows-2019-12-10-12-31-34-treedump.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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": "dida@ntdev.microsoft.com", | ||
| "commit": "88f9b0eaecfe88e2243b66d969420131224f1c56", | ||
| "date": "2019-12-10T20:31:33.939Z" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| /** | ||
| * 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_CONTAINER } from './Consts'; | ||
| const TreeDumpControl = requireNativeComponent('TreeDumpControl'); | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| height:300, | ||
| width:500, | ||
| backgroundColor: 'yellow', | ||
| alignItems:'center', | ||
| }, | ||
| containerWithBorder: { | ||
| height:300, | ||
| width:500, | ||
| borderRadius: 10.0, | ||
| borderWidth:10, | ||
| borderColor: '#00ff0055', | ||
| backgroundColor: 'yellow', | ||
| alignItems:'center', | ||
| }, | ||
| imageWithBorder: { | ||
| height: '100%', | ||
| width: '100%', | ||
| borderRadius: 10.0, | ||
| borderWidth:10, | ||
| borderColor: '#0000ff55', | ||
| backgroundColor: 'red', | ||
| }, | ||
| image: { | ||
| height: '100%', | ||
| width: '100%', | ||
| backgroundColor: 'red', | ||
| }, | ||
| treeDumpControl: { | ||
| height: 150, | ||
| width: 500, | ||
| margin: 10, | ||
| }, | ||
| }); | ||
|
|
||
| export function ImageTestPage() { | ||
| const [imageWithBorder, setImageBorder] = useState(false); | ||
| const [clickCount, setClickCount] = useState(0); | ||
| const onPressBorder = () => { | ||
| var previousImageBorderState = imageWithBorder; | ||
| setImageBorder(!previousImageBorderState); | ||
| var previousClickCount = clickCount; | ||
| setClickCount(previousClickCount+1); | ||
| } | ||
| return( | ||
| <View> | ||
| <View testID={IMAGE_CONTAINER} style={imageWithBorder?styles.containerWithBorder:styles.container}> | ||
| <Image | ||
| style={imageWithBorder?styles.imageWithBorder:styles.image} | ||
| resizeMode={'center'} | ||
| source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}} | ||
| /> | ||
| </View > | ||
| <Button title= {imageWithBorder?"Hide Border":"Show Border"} | ||
| onPress={onPressBorder} | ||
| testID={SHOW_IMAGE_BORDER}/> | ||
| <TreeDumpControl style={styles.treeDumpControl} dumpID={imageWithBorder?'ImageWithBorder':(clickCount == 0 ? 'ImageWithoutBorder':'ImageWithoutBorder-Subsequent')} uiaID={IMAGE_CONTAINER} testID={TREE_DUMP_RESULT} /> | ||
| </View>); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| /** | ||
| * Copyright (c) Microsoft Corporation. All rights reserved. | ||
| * Licensed under the MIT License. | ||
| */ | ||
|
|
||
| import { BasePage, By } from './BasePage'; | ||
| import { SHOW_IMAGE_BORDER } from '../../app/Consts'; | ||
|
|
||
| class ImageTestPage extends BasePage { | ||
| backToHomePage() { | ||
| this.homeButton.click(); | ||
| this.waitForPageLoaded(); | ||
| } | ||
|
|
||
| isPageLoaded() { | ||
| return super.isPageLoaded(); | ||
| } | ||
|
|
||
| toggleImageBorder() { | ||
| this._imageBorder.click(); | ||
| } | ||
|
|
||
| private get _imageBorder() { | ||
| return By(SHOW_IMAGE_BORDER); | ||
| } | ||
| } | ||
|
|
||
| export default new ImageTestPage(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| /** | ||
| * 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', () => { | ||
| /* Test case #1: view and image displayed with no border and cornerRadius */ | ||
| it('ImageWithoutBorderTest', () => { | ||
| const result = ImageTestPage.getTreeDumpResult(); | ||
| assert(result, '#1. Dump comparison for image without border!'); | ||
| }); | ||
|
|
||
| /* Test case #2: Click button once, update view and image with round border*/ | ||
| it('ImageWithBorderTest', () => { | ||
| ImageTestPage.toggleImageBorder(); | ||
| const result = ImageTestPage.getTreeDumpResult(); | ||
| assert(result, '#2. Dump comparison for image with border!'); | ||
| }); | ||
|
|
||
| /* Test case #3: Click button one more, remove border from view and image but tree sturcture is different from #1*/ | ||
| it('ImageWithoutBorderTest', () => { | ||
| ImageTestPage.toggleImageBorder(); | ||
| const result = ImageTestPage.getTreeDumpResult(); | ||
| assert(result, '#3. Second dump comparison for image without border!'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
packages/E2ETest/windows/ReactUWPTestApp/Assets/TreeDump/ImageWithBorder.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| [Windows.UI.Xaml.Controls.Border] | ||
| Background=#FFFFFF00 | ||
| BorderBrush=#5500FF00 | ||
| BorderThickness=10,10,10,10 | ||
| Clip=[NULL] | ||
| CornerRadius=10,10,10,10 | ||
| Height=300 | ||
| HorizontalAlignment=Stretch | ||
| Margin=0,0,0,0 | ||
| Padding=0,0,0,0 | ||
| RenderSize=500,300 | ||
| VerticalAlignment=Stretch | ||
| Visibility=Visible | ||
| Width=500 | ||
| [react.uwp.ViewPanel] | ||
| Background=[NULL] | ||
| BorderBrush=#5500FF00 | ||
| BorderThickness=10,10,10,10 | ||
| Clip=[NULL] | ||
| CornerRadius=10,10,10,10 | ||
| HorizontalAlignment=Stretch | ||
| Margin=0,0,0,0 | ||
| RenderSize=480,280 | ||
| VerticalAlignment=Stretch | ||
| Visibility=Visible | ||
| [Windows.UI.Xaml.DependencyObject] |
Oops, something went wrong.