Skip to content
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
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
8 changes: 8 additions & 0 deletions change/react-native-windows-2019-12-10-12-31-34-treedump.json
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"
}
7 changes: 7 additions & 0 deletions packages/E2ETest/app/Consts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export const APP_NAME = 'ReactUWPTestApp';
export const SEARCH_BUTTON = 'SearchButton';
export const HOME_BUTTON = '_HomeButton';
export const REACT_CONTROL_ERROR_TEST_ID = 'ReactControlErrorMessage';
export const TREE_DUMP_RESULT = 'TreeDump';

// UnknownTestPage
export const UNKNOWN_TESTPAGE = 'UnknownTestPage';
Expand Down Expand Up @@ -31,3 +32,9 @@ export const ACCESSBILITY_TESTPAGE = 'AccessiblityTestPage';
export const DIRECT_MANIPULATION_TESTPAGE = 'DirectManipulationTestPage';
export const MEASURE_IN_WINDOW_BUTTON = 'MeasureInWindow';
export const MEASURE_IN_WINDOW_RESULT = 'MeasureInWindowResult';

// Image Test Page
export const IMAGE_TESTPAGE = 'ImageTestPage';
export const IMAGE_CHANGE_BORDER = 'ChangeBorder';
export const SHOW_IMAGE_BORDER = 'BorderButton';
export const IMAGE_ELEMENT = 'ImageElement';
64 changes: 64 additions & 0 deletions packages/E2ETest/app/ImageTestPage.tsx
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 = () => {
Copy link
Member

@chrisglein chrisglein Dec 13, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const onOressBorder = () => {
const onPressBorder = () => {
``` #Resolved

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'}}
Copy link
Contributor

@licanhua licanhua Dec 10, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

http://facebook.github.io/react-native/img/header_logo.png [](start = 21, length = 58)

make it to Assert. it may introduce unnecessary delay and flakiness of testing #Resolved

Copy link
Contributor

@kmelmon kmelmon Dec 11, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

http://facebook.github.io/react-native/img/header_logo.png [](start = 21, length = 58)

I suggest packaging an image into the local bundle but that may require fixing #2452 first. If so please leave a note in that bug to come back and fix this test. #Closed

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Switching to using the embedded image data directly.


In reply to: 356352744 [](ancestors = 356352744)

/>
<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 >);
}
7 changes: 7 additions & 0 deletions packages/E2ETest/app/TestPages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@ import {
LOGIN_TESTPAGE,
ACCESSBILITY_TESTPAGE,
DIRECT_MANIPULATION_TESTPAGE,
IMAGE_TESTPAGE,
} from './Consts';
import { LoginTestPage } from './LoginTestPage';
import { AccessibilityTestPage } from './AccessibilityTestPage';
import { DirectManipulationTestPage } from './DirectManipulationPage';
import { ImageTestPage } from './ImageTestPage';

export interface ITestPage {
testId: string;
Expand Down Expand Up @@ -45,6 +47,11 @@ const TestPages: ITestPage[] = [
description: 'Direct Manipulation Test Page',
content: DirectManipulationTestPage,
},
{
testId: IMAGE_TESTPAGE,
description: 'Image Test Page',
content: ImageTestPage,
},
{
testId: UNKNOWN_TESTPAGE,
description: 'Unknown Page',
Expand Down
11 changes: 11 additions & 0 deletions packages/E2ETest/wdio/pages/HomePage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@ import {
TEXTINPUT_TESTPAGE,
LOGIN_TESTPAGE,
DIRECT_MANIPULATION_TESTPAGE,
IMAGE_TESTPAGE,
} from '../../app/Consts';
import LoginPage from './LoginPage';
import DirectManipulationPage from './DirectManipulationPage';
import ImageTestPage from './ImageTestPage';

class HomePage extends BasePage {
backToHomePage() {
Expand All @@ -38,6 +40,11 @@ class HomePage extends BasePage {
DirectManipulationPage.waitForPageLoaded();
}

clickAndGotoImagePage() {
this.ImagePageButton.click();
ImageTestPage.waitForPageLoaded();
}

private get testInputTestPageButton() {
return By(TEXTINPUT_TESTPAGE);
}
Expand All @@ -49,6 +56,10 @@ class HomePage extends BasePage {
private get directManipulationPageButton() {
return By(DIRECT_MANIPULATION_TESTPAGE);
}

private get ImagePageButton() {
return By(IMAGE_TESTPAGE);
}
}

export default new HomePage();
36 changes: 36 additions & 0 deletions packages/E2ETest/wdio/pages/ImageTestPage.ts
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();
41 changes: 41 additions & 0 deletions packages/E2ETest/wdio/test/Image.spec.ts
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!'
);
Copy link
Contributor

@kmelmon kmelmon Dec 11, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the test fails, will anything be visible in the test output or as test artifacts other than this message? It will be particularly important to report this as a test artifact when the test is running in the CI loop. Note this doesn't have to be done for this checkin - feel free to file an issue to improve this. #Closed

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added steps to generate artifacts for the generated .out file and .err file during the test.


In reply to: 356351609 [](ancestors = 356351609)

});

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!'
);
});
});
15 changes: 15 additions & 0 deletions packages/E2ETest/windows/ReactUWPTestApp.sln
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,16 @@ Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Microsoft.ReactNative", "..
EndProject
Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "Microsoft.ReactNative.SharedManaged", "..\..\..\vnext\Microsoft.ReactNative.SharedManaged\Microsoft.ReactNative.SharedManaged.shproj", "{67A1076F-7790-4203-86EA-4402CCB5E782}"
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "TreeDumpLibrary", "TreeDumpLibrary\TreeDumpLibrary.csproj", "{C0A6BD9C-3EE5-4B12-8CE4-CEE95178539C}"
EndProject
Global
GlobalSection(SharedMSBuildProjectFiles) = preSolution
..\..\..\vnext\Chakra\Chakra.vcxitems*{2d5d43d9-cffc-4c40-b4cd-02efb4e2742b}*SharedItemsImports = 4
..\..\..\vnext\Shared\Shared.vcxitems*{2d5d43d9-cffc-4c40-b4cd-02efb4e2742b}*SharedItemsImports = 4
..\..\..\vnext\Microsoft.ReactNative.SharedManaged\Microsoft.ReactNative.SharedManaged.projitems*{67a1076f-7790-4203-86ea-4402ccb5e782}*SharedItemsImports = 13
..\..\..\vnext\JSI\Shared\JSI.Shared.vcxitems*{a62d504a-16b8-41d2-9f19-e2e86019e5e4}*SharedItemsImports = 4
..\..\..\vnext\Microsoft.ReactNative.SharedManaged\Microsoft.ReactNative.SharedManaged.projitems*{abbb0407-0e82-486f-94ce-710900fcaadc}*SharedItemsImports = 4
..\..\..\vnext\Microsoft.ReactNative.SharedManaged\Microsoft.ReactNative.SharedManaged.projitems*{c0a6bd9c-3ee5-4b12-8ce4-cee95178539c}*SharedItemsImports = 4
EndGlobalSection
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|ARM = Debug|ARM
Expand Down Expand Up @@ -163,6 +166,18 @@ Global
{F7D32BD0-2749-483E-9A0D-1635EF7E3136}.Release|x64.Build.0 = Release|x64
{F7D32BD0-2749-483E-9A0D-1635EF7E3136}.Release|x86.ActiveCfg = Release|Win32
{F7D32BD0-2749-483E-9A0D-1635EF7E3136}.Release|x86.Build.0 = Release|Win32
{C0A6BD9C-3EE5-4B12-8CE4-CEE95178539C}.Debug|ARM.ActiveCfg = Debug|ARM
{C0A6BD9C-3EE5-4B12-8CE4-CEE95178539C}.Debug|ARM.Build.0 = Debug|ARM
{C0A6BD9C-3EE5-4B12-8CE4-CEE95178539C}.Debug|x64.ActiveCfg = Debug|x64
{C0A6BD9C-3EE5-4B12-8CE4-CEE95178539C}.Debug|x64.Build.0 = Debug|x64
{C0A6BD9C-3EE5-4B12-8CE4-CEE95178539C}.Debug|x86.ActiveCfg = Debug|x86
{C0A6BD9C-3EE5-4B12-8CE4-CEE95178539C}.Debug|x86.Build.0 = Debug|x86
{C0A6BD9C-3EE5-4B12-8CE4-CEE95178539C}.Release|ARM.ActiveCfg = Release|ARM
{C0A6BD9C-3EE5-4B12-8CE4-CEE95178539C}.Release|ARM.Build.0 = Release|ARM
{C0A6BD9C-3EE5-4B12-8CE4-CEE95178539C}.Release|x64.ActiveCfg = Release|x64
{C0A6BD9C-3EE5-4B12-8CE4-CEE95178539C}.Release|x64.Build.0 = Release|x64
{C0A6BD9C-3EE5-4B12-8CE4-CEE95178539C}.Release|x86.ActiveCfg = Release|x86
{C0A6BD9C-3EE5-4B12-8CE4-CEE95178539C}.Release|x86.Build.0 = Release|x86
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
Expand Down
5 changes: 5 additions & 0 deletions packages/E2ETest/windows/ReactUWPTestApp/App.xaml.cs
Original file line number Diff line number Diff line change
Expand Up @@ -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
{
Expand Down Expand Up @@ -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();
}

Expand All @@ -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));
Copy link
Member

@chrisglein chrisglein Dec 13, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You had mentioned issues having consistent layout sizes. Did this work? #Resolved

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, by default we will launch the app at 800x600 and I also added the code to fail and don't do comparison if size is not 800x600 in tree dump too.


In reply to: 357847530 [](ancestors = 357847530)

}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
[Windows.UI.Xaml.Controls.Border]
Padding=0,0,0,0
Copy link
Contributor

@licanhua licanhua Dec 10, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Possible just make the extension name .treedump as .txt. customer doesn't need to setup a tool to open .treedump. #Resolved

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do.


In reply to: 356300132 [](ancestors = 356300132)

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
Expand Up @@ -105,6 +105,8 @@
<AppxManifest Include="Package.appxmanifest">
<SubType>Designer</SubType>
</AppxManifest>
<Content Include="Assets\TreeDump\ImageWithBorder.treedump" />
<Content Include="Assets\TreeDump\ImageWithoutBorder.treedump" />
<None Include="ReactUWPTestApp_TemporaryKey.pfx" />
</ItemGroup>
<ItemGroup>
Expand Down Expand Up @@ -139,6 +141,10 @@
<Project>{f7d32bd0-2749-483e-9a0d-1635ef7e3136}</Project>
<Name>Microsoft.ReactNative</Name>
</ProjectReference>
<ProjectReference Include="..\TreeDumpLibrary\TreeDumpLibrary.csproj">
<Project>{c0a6bd9c-3ee5-4b12-8ce4-cee95178539c}</Project>
<Name>TreeDumpLibrary</Name>
</ProjectReference>
</ItemGroup>
<Import Project="$(ReactNativeWindowsDir)\Microsoft.ReactNative.SharedManaged\Microsoft.ReactNative.SharedManaged.projitems" Label="Shared" />
<PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0' ">
Expand Down
1 change: 1 addition & 0 deletions packages/E2ETest/windows/ReactUWPTestApp/copyTreeDump.cmd
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
copy %LocalAppData%\Packages\ReactUWPTestApp_kc2bncckyf4ap\LocalState\TreeDump\*.out Assets\TreeDump\*.treedump
16 changes: 16 additions & 0 deletions packages/E2ETest/windows/TreeDumpLibrary/ReactPackageProvider.cs
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();
}
}
}
Loading