Add tree dump utility to E2E test framework and fix Image border issue

.ado/templates/e2e-test-job.yml

@@ -101,6 +101,21 @@ jobs:
           script: yarn run test
           workingDirectory: packages/E2ETest
 
+      - task: CopyFiles@2
+        displayName: Copy tree dump output files
+        inputs:
+          sourceFolder: $(LocalAppData)\Packages\ReactUWPTestApp_kc2bncckyf4ap\LocalState
+          targetFolder: $(Build.StagingDirectory)/ReactUWPTestAppTreeDump
+          contents: TreeDump\**
+        condition: succeededOrFailed()   
+
+      - task: PublishBuildArtifacts@1
+        displayName: "Publish Artifact:ReactUWPTestAppTreeDump"
+        inputs:
+          artifactName: ReactUWPTestAppTreeDump
+          pathtoPublish: $(Build.StagingDirectory)/ReactUWPTestAppTreeDump
+        condition: succeededOrFailed()       
+
       - task: PublishTestResults@2
         inputs:
           testResultsFormat: "JUnit"

change/react-native-windows-2019-12-10-12-31-34-treedump.json

@@ -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"
+}

packages/E2ETest/app/Consts.ts

@@ -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';
@@ -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_CONTAINER = 'ImageContainer';

packages/E2ETest/app/ImageTestPage.tsx

@@ -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>);
+}

packages/E2ETest/app/TestPages.ts

@@ -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;
@@ -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',

packages/E2ETest/wdio/pages/BasePage.ts

@@ -2,12 +2,22 @@
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License.
  */
-import { REACT_CONTROL_ERROR_TEST_ID, HOME_BUTTON } from '../../app/Consts';
+import {
+  REACT_CONTROL_ERROR_TEST_ID,
+  HOME_BUTTON,
+  TREE_DUMP_RESULT,
+} from '../../app/Consts';
 
 export function By(testId: string): WebdriverIO.Element {
   return $('~' + testId);
 }
 
+export function wait(timeout: number) {
+  return new Promise(resolve => {
+    setTimeout(resolve, timeout);
+  });
+}
+
 export class BasePage {
   isPageLoaded(): boolean {
     return this.homeButton.isDisplayed();
@@ -23,6 +33,28 @@ export class BasePage {
     );
   }
 
+  getTreeDumpResult() {
+    var testResult = false;
+    const maxWait = 20;
+    var waitCount = 1;
+    do {
+      testResult = this.treeDumpResult.getText() == 'TreeDump:Passed';
+      if (!testResult) {
+        console.log(
+          '####Waiting for treedump comparison result ' +
+            waitCount +
+            '/' +
+            maxWait +
+            '...####'
+        );
+        wait(100);
+        waitCount += 1;
+      }
+    } while (waitCount <= maxWait && !testResult);
+
+    return testResult;
+  }
+
   protected timeoutForPageLoaded(currentTimeout?: number) {
     if (currentTimeout) return currentTimeout;
     return this.waitforPageTimeout;
@@ -44,6 +76,10 @@ export class BasePage {
     return this.isPageLoaded();
   }
 
+  private get treeDumpResult() {
+    return By(TREE_DUMP_RESULT);
+  }
+
   // Default timeout for waitForPageLoaded command in PageObject
   private waitforPageTimeout: number = 10000;
 }

packages/E2ETest/wdio/pages/HomePage.ts

@@ -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() {
@@ -38,6 +40,11 @@ class HomePage extends BasePage {
     DirectManipulationPage.waitForPageLoaded();
   }
 
+  clickAndGotoImagePage() {
+    this.ImagePageButton.click();
+    ImageTestPage.waitForPageLoaded();
+  }
+
   private get testInputTestPageButton() {
     return By(TEXTINPUT_TESTPAGE);
   }
@@ -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();

packages/E2ETest/wdio/pages/ImageTestPage.ts

@@ -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();

packages/E2ETest/wdio/test/Image.spec.ts

@@ -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!');
+  });
+});

packages/E2ETest/windows/ReactUWPTestApp.sln

@@ -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
@@ -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

packages/E2ETest/windows/ReactUWPTestApp/App.xaml.cs

@@ -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(800, 600));
         }
     }
 }

packages/E2ETest/windows/ReactUWPTestApp/Assets/TreeDump/ImageWithBorder.txt

@@ -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]