Bunch of style properties fixes and TreeDump utility updates

change/react-native-windows-2019-12-17-13-09-03-textborder.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Fix cornerRadius issue for TextInput and some updates to TreeDump",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "commit": "d2ab5205ec27f1784a54a82236c54b9c13531412",
+  "date": "2019-12-17T21:09:02.950Z"
+}

packages/E2ETest/.gitignore

@@ -3,4 +3,5 @@
 /build
 /reports
 /dist
-/windows/ReactUWPTestApp/Bundle/
+/windows/ReactUWPTestApp/Bundle/
+msbuild.binlog

packages/E2ETest/app/Consts.ts

@@ -38,3 +38,7 @@ export const IMAGE_TESTPAGE = 'ImageTestPage';
 export const IMAGE_CHANGE_BORDER = 'ChangeBorder';
 export const SHOW_IMAGE_BORDER = 'BorderButton';
 export const IMAGE_CONTAINER = 'ImageContainer';
+
+// Control Style Test Page
+export const CONTROL_STYLE_TESTPAGE = 'ControlStyleTestPage';
+export const SHOWBORDER_ON_CONTROLSTYLE = 'ShowBorder';

packages/E2ETest/app/ControlStyleTestPage.tsx

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { Switch, CheckBox, TextInput, View, StyleSheet, Button } from 'react-native';
+import { DatePicker, Picker } from 'react-native-windows';
+import React, { useState } from 'react';
+import { SHOWBORDER_ON_CONTROLSTYLE, TREE_DUMP_RESULT } from './Consts';
+import { TreeDumpControl } from './TreeDumpControl'
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20
+  },
+  regularBorder: {
+    height: 50,
+    backgroundColor: 'rgba(225,225,225,0.2)',
+    borderWidth:1,
+    borderColor: '#ff00ff55',
+    marginBottom: 10,
+    padding: 10,
+    color: '#fff'
+  },
+  roundBorder: {
+    height: 50,
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    marginBottom: 10,
+    padding: 10,
+    color: '#000',
+    borderRadius: 10.0,
+    borderWidth:10,
+    borderColor: '#00ff0055',
+  },
+  buttonText: {
+    color: '#fff',
+    textAlign: 'center',
+    fontWeight: '700',
+    borderRadius: 10.0,
+  },
+  treeDumpControl: {
+    height: 150,
+    width: 500,
+    margin: 10,
+  },
+});
+
+export function ControlStyleTestPage() {
+  const [showRoundBorder, setShowRoundBorder] = useState(false);
+
+  const onPressShowRoundBorder = () => {
+    var previousState = showRoundBorder;
+    setShowRoundBorder(!previousState);
+ }
+
+   return (
+    <View>
+      <View testID={'ControlStyleView'}>
+        <Switch style={showRoundBorder? styles.roundBorder :styles.regularBorder} thumbColor='blue'/>
+        <CheckBox style={showRoundBorder? styles.roundBorder :styles.regularBorder} />
+        <TextInput style={showRoundBorder? styles.roundBorder :styles.regularBorder}
+          placeholder='TextBox'
+          placeholderTextColor='rgba(225,225,225,0.7)'
+          editable={false} />
+
+        <TextInput style={showRoundBorder? styles.roundBorder :styles.regularBorder}
+          placeholder='Password'
+          placeholderTextColor='rgba(225,225,225,0.7)'
+          secureTextEntry = {true}
+          editable={false}/>
+        <DatePicker style={showRoundBorder? styles.roundBorder :styles.regularBorder}/>
+        <Picker style={showRoundBorder? styles.roundBorder :styles.regularBorder}/>
+      </View>
+
+      <Button title= {showRoundBorder?"Hide Round Border":"Show Round Border"} 
+        onPress={onPressShowRoundBorder} 
+        testID={SHOWBORDER_ON_CONTROLSTYLE}/>
+
+      <TreeDumpControl style={styles.treeDumpControl} dumpID={showRoundBorder?'ControlStyleRoundBorder':'ControlStyleRegularBorder'} uiaID={'ControlStyleView'} testID={TREE_DUMP_RESULT} />
+
+    </View >);
+}

packages/E2ETest/app/ImageTestPage.tsx

@@ -3,10 +3,10 @@
  * Licensed under the MIT License.
  */
 
-import {StyleSheet, View, Image, Button, requireNativeComponent} from 'react-native'
+import { StyleSheet, View, Image, Button } from 'react-native'
 import React, { useState } from 'react';
-import { TREE_DUMP_RESULT, SHOW_IMAGE_BORDER, IMAGE_CONTAINER } from './Consts';
-const TreeDumpControl = requireNativeComponent('TreeDumpControl');
+import { SHOW_IMAGE_BORDER, IMAGE_CONTAINER, TREE_DUMP_RESULT } from './Consts';
+import { TreeDumpControl } from './TreeDumpControl'
 
 const styles = StyleSheet.create({
   container: {

packages/E2ETest/app/TestPages.ts

@@ -14,11 +14,13 @@ import {
   ACCESSBILITY_TESTPAGE,
   DIRECT_MANIPULATION_TESTPAGE,
   IMAGE_TESTPAGE,
+  CONTROL_STYLE_TESTPAGE,
 } from './Consts';
 import { LoginTestPage } from './LoginTestPage';
 import { AccessibilityTestPage } from './AccessibilityTestPage';
 import { DirectManipulationTestPage } from './DirectManipulationPage';
 import { ImageTestPage } from './ImageTestPage';
+import { ControlStyleTestPage } from './ControlStyleTestPage';
 
 export interface ITestPage {
   testId: string;
@@ -52,6 +54,11 @@ const TestPages: ITestPage[] = [
     description: 'Image Test Page',
     content: ImageTestPage,
   },
+  {
+    testId: CONTROL_STYLE_TESTPAGE,
+    description: 'Control Style Test Page',
+    content: ControlStyleTestPage,
+  },
   {
     testId: UNKNOWN_TESTPAGE,
     description: 'Unknown Page',

packages/E2ETest/app/TreeDumpControl.ts

@@ -0,0 +1,8 @@
+/**
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { requireNativeComponent } from 'react-native';
+export const TreeDumpControl = requireNativeComponent('TreeDumpControl');

packages/E2ETest/wdio/pages/ControlStylePage.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { BasePage, By } from './BasePage';
+import { SHOWBORDER_ON_CONTROLSTYLE } from '../../app/Consts';
+
+class ControlStyleTestPage extends BasePage {
+  backToHomePage() {
+    this.homeButton.click();
+    this.waitForPageLoaded();
+  }
+
+  isPageLoaded() {
+    return super.isPageLoaded();
+  }
+
+  toggleControlBorder() {
+    this._controlBorder.click();
+  }
+
+  private get _controlBorder() {
+    return By(SHOWBORDER_ON_CONTROLSTYLE);
+  }
+}
+
+export default new ControlStyleTestPage();

packages/E2ETest/wdio/pages/HomePage.ts

@@ -10,10 +10,12 @@ import {
   LOGIN_TESTPAGE,
   DIRECT_MANIPULATION_TESTPAGE,
   IMAGE_TESTPAGE,
+  CONTROL_STYLE_TESTPAGE,
 } from '../../app/Consts';
 import LoginPage from './LoginPage';
 import DirectManipulationPage from './DirectManipulationPage';
 import ImageTestPage from './ImageTestPage';
+import ControlStyleTestPage from './ControlStylePage';
 
 class HomePage extends BasePage {
   backToHomePage() {
@@ -45,6 +47,11 @@ class HomePage extends BasePage {
     ImageTestPage.waitForPageLoaded();
   }
 
+  clickAndGotoControlStylePage() {
+    this.ControlStylePageButton.click();
+    ControlStyleTestPage.waitForPageLoaded();
+  }
+
   private get testInputTestPageButton() {
     return By(TEXTINPUT_TESTPAGE);
   }
@@ -60,6 +67,10 @@ class HomePage extends BasePage {
   private get ImagePageButton() {
     return By(IMAGE_TESTPAGE);
   }
+
+  private get ControlStylePageButton() {
+    return By(CONTROL_STYLE_TESTPAGE);
+  }
 }
 
 export default new HomePage();

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

@@ -26,7 +26,7 @@ describe('ImageWithoutBorderTest', () => {
     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*/
+  /* 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();

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

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import HomePage from '../pages/HomePage';
+import ControlStyleTestPage from '../pages/ControlStylePage';
+import assert from 'assert';
+
+beforeAll(() => {
+  HomePage.backToHomePage();
+  HomePage.clickAndGotoControlStylePage();
+});
+
+describe('ControlStyleTest', () => {
+  /* Test case #1: Controls style with regular border */
+  it('ControlStyleTestWithRegularBorder', () => {
+    const result = ControlStyleTestPage.getTreeDumpResult();
+    assert(
+      result,
+      '#1. Dump comparison for Control style with regular border!'
+    );
+  });
+
+  /* Test case #2: Click button once, update controls style and round border*/
+  it('ControlStyleTestWithRoundBorder', () => {
+    ControlStyleTestPage.toggleControlBorder();
+    const result = ControlStyleTestPage.getTreeDumpResult();
+    assert(result, '#2. Dump comparison for Control style with round border!');
+  });
+
+  /* Test case #3: Click button one more, return to #1*/
+  it('ControlStyleTestWithRegularBorder #2', () => {
+    ControlStyleTestPage.toggleControlBorder();
+    const result = ControlStyleTestPage.getTreeDumpResult();
+    assert(
+      result,
+      '#3. Second dump comparison for Control style with regular border!'
+    );
+  });
+});