Ejlayne/fluentui tester docs (microsoft#473)

* updated fluent tester documentation, added images to show where debug menus live. * updated readme RNTester references to FluentUI Tester * added picture of fluentui tester * forgot to update image reference to radiogroup image * somehow I updated the wrong image reference * moved around contents on main readme page. * missed this file somehow * added links to fluent design system and react native * added more getting started documentation to root readme * messed up my bulleted list * changed one word * added HELLO_WORLD.md file, with link from root readme. * wrong slashes in url * updated fluent ui documentation * updated documentation * forgot to update relative path on root readme * wrong slashes * added android documentation for fluentui tester, and updated top level page to point to platform specific docs. * Removed reference to react native test app on win32 page * Change files
rurikoaraki · Sep 22, 2020 · 4b42014 · 4b42014
1 parent 8ec6742
commit 4b42014
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 85 deletions.
diff --git a/apps/android/README.md b/apps/android/README.md
@@ -0,0 +1,36 @@
+# Running the FluentUI Tester on Android
+
+`FluentUI Tester` is the test app that we use to test our FluentUI components during development. It uses the [react-native-test app](https://github.com/microsoft/react-native-test-app) under the covers, and loads the fluent-tester bundle.
+
+## Launch `FluentUI Tester` app on Android
+
+Prereqs:
+- FluentUI Tester is built uses react-native-test app, so install its [prereqs](https://github.com/microsoft/react-native-test-app#react-native-test-app) and follow instructions depending on whether you're developing on Windows or macOS.
+- Install [Android Studio](https://developer.android.com/studio)
+- Make sure you have setup an [Android Virtual Device](https://developer.android.com/studio/run/managing-avds)
+
+1. Make sure you have followed the [Getting Started](../../README.md) instructions to install packages and build the entire FluentUI React Native repository. I.e. from the root of the repo:
+```
+    yarn && yarn build
+```
+
+2. Then go into `apps/android` folder and launch Android Studio from that directory. This should open Android Studio, and Android Studio will start automatically preparing the "app" folder and apk that your project will run on your Android Virtual Device.
+
+```
+    # Mac
+    open -a "Android Studio" .
+
+    # Windows
+    # Easiest to open from within Android Studio - see picture below
+```
+
+![On Windows, it is easiest to open from within Android Studio, and the folder will show an Android Studio icon.](./../../assets/fluent_tester_android_windows_open.png)
+
+Note: if Android Studio does not provide you with an "app" to run after you first open the project from the android folder, you may have to restart Android Studio.
+
+3. Once Android Studio finishes preparing your app folder, you will be able to build and run your app by clicking on the "app" dropdown in the menu bar. If you have not yet setup an AVD, please see [this page](https://developer.android.com/studio/run/managing-avds) on how to set one up.
+
+![Run your app from Android Studio with the "app" button in the menu bar.](./../../assets/fluent_tester_android_app_built.png)
+
+Troubleshooting
+- The first time you run your project, you may get errors about missing SDKs. Android Studio usually provides quick options to resolve these issues, but you can also go to Tools->SDK Manager to manually install or update SDK platforms or tools for your project.
diff --git a/apps/fluent-tester/README.md b/apps/fluent-tester/README.md
@@ -1,74 +1,9 @@
-`FluentUI Tester` is the test app that we use to test our FluentUI components during development.
+`FluentUI Tester` is the test app that we use to test our FluentUI components during development. It uses the [react-native-test app](https://github.com/microsoft/react-native-test-app) under the covers, and loads the fluent-tester bundle.
 
-## Launch `FluentUI Tester` app
+## `FluentUI Tester` instructions to launch each platform's test app
 
-1. Make sure you have followed the Getting Started instructions [here](../../README.md) to install packages and build the entire repository.
-
-2. Then go into `apps\win32` folder:
-
-```
-    cd apps\win32
-```
-
-3. Build the FluentUI Tester bundle:
-
-```
-    yarn bundle
-```
-
-4. Launch the FluentUI Tester app:
-
-```
-    yarn run-win32
-```
-
-5. You will see FluentUI Tester show up in a new window.
-
-![ReactTest image debug menu location](./../../assets/fluent_tester_radiogroup.png)
-
-## Debug `FluentUI Tester` app with direct debugging
-
-Note: we recommend using [Visual Studio Code](https://code.visualstudio.com/download) for direct debugging.
-
-1. Follow the same step #1 as above.
-2. Follow the same step #2 as above.
-
-3. Build the FluentUI Tester bundle with dev option. This will ensure source map is included in the bundle.
-
-```
-    yarn bundle-dev
-```
-
-4. Launch the FluentUI Tester app:
-
-```
-    yarn run-win32
-```
-
-5. Inside ReactTest, open the debug option menu and select the checkbox `Use Direct Debugger`
-
-![ReactTest image debug menu location](./../../assets/fluent_tester_debug_menu.png)
-
-6. In Visual Studio Code, open the debug pane and select `Debug Fabric Tester` option from the "Run And Debug" dropdown.
-
-![ReactTest image debug menu location](./../../assets/fluent_tester_vscode_debug.png)
-
-7. At this time, VS Code will attach to the JS runtime and you can start debugging. For more information on debugging in VS Code, please see [Visual Studio Code documentation](https://code.visualstudio.com/docs/editor/debugging).
-
-## Debug `FluentUI Tester` app with web debugging
-
-1. Follow the same step #1 as above.
-2. Follow the same step #2 as above.
-3. Start the debug server:
-
-```
-    yarn start
-```
-
-4. Open Edge or Chrome and navigate to http://localhost:8081/debugger-ui
-
-5. Open another command prompt and go into the same location `experiments\tester` and run:
-
-```
-    yarn run-win32-web
-```
+- [iOS](./../ios/README.md)
+- [Android](./../android/README.md)
+- [macOS](./../macos/README.md)
+- [Windows](./../windows/README.md)
+- [Win32](./../win32/README.md)
diff --git a/apps/README.md → apps/ios/README.md b/apps/README.md → apps/ios/README.md
@@ -1,3 +1,5 @@
+# Running the FluentUI Tester on iOS
+
 `FluentUI Tester` is the test app that we use to test our FluentUI components during development. It uses the [react-native-test app](https://github.com/microsoft/react-native-test-app) under the covers, and loads the fluent-tester bundle.
 
 ## Launch `FluentUI Tester` app on iOS

diff --git a/apps/macos/README.md b/apps/macos/README.md
@@ -1,3 +1,5 @@
+# Running the FluentUI Tester on macOS
+
 `FluentUI Tester` is the test app that we use to test our FluentUI components during development. It uses the [react-native-test app](https://github.com/microsoft/react-native-test-app) under the covers, and loads the FluentUI bundle.
 
 ## Launch `FluentUI Tester` app on macOS

diff --git a/apps/win32/README.md b/apps/win32/README.md
@@ -1,15 +1,10 @@
-`FluentUI Tester` is the test app that we use to test our FluentUI components during development.
-
-## Prerequisites
+# Running the FluentUI Tester on Win32
 
-- [Node.js](https://nodejs.org/en/download/)
-- [React Native Windows Development Dependencies](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies#manual-setup)
-  - **NOTE:** Please make sure you grab all of the items listed there and the appropriate versions.
-- Enable [Developer Mode](https://docs.microsoft.com/en-us/windows/uwp/get-started/enable-your-device-for-development) in Windows settings
+`FluentUI Tester` is the test app that we use to test our FluentUI components during development.
 
-## Launch `FluentUI Tester` app
+## Launch `FluentUI Tester` app on Win32
 
-1. Make sure you have followed the Getting Started instructions [here](../../README.md) to install packages and build the entire repository.
+1. Make sure you have followed the [Getting Started](../../README.md) instructions to install packages and build the entire FluentUI React Native repository. I.e. from the root of the repo:
 
 2. Then go into `apps\win32` folder:
 
@@ -28,9 +23,10 @@
 ```
     yarn run-win32
 ```
+
 5. You will see FluentUI Tester show up in a new window.
 
-![ReactTest image debug menu location](./../../docs/pages/images/fluent_tester_radiogroup.png)
+![ReactTest image debug menu location](./../../assets/fluent_tester_radiogroup.png)
 
 ## Debug `FluentUI Tester` app with direct debugging
 
@@ -53,11 +49,11 @@ Note: we recommend using [Visual Studio Code](https://code.visualstudio.com/down
 
 5. Inside ReactTest, open the debug option menu and select the checkbox `Use Direct Debugger`
 
-![ReactTest image debug menu location](./../../docs/pages/images/fluent_tester_debug_menu.png)
+![ReactTest image debug menu location](./../../assets/fluent_tester_debug_menu.png)
 
 6. In Visual Studio Code, open the debug pane and select `Debug Fabric Tester` option from the "Run And Debug" dropdown.
 
-![ReactTest image debug menu location](./../../docs/pages/images/fluent_tester_vscode_debug.png)
+![ReactTest image debug menu location](./../../assets/fluent_tester_vscode_debug.png)
 
 7. At this time, VS Code will attach to the JS runtime and you can start debugging. For more information on debugging in VS Code, please see [Visual Studio Code documentation](https://code.visualstudio.com/docs/editor/debugging).
 

diff --git a/apps/windows/readme.md b/apps/windows/readme.md
@@ -1,4 +1,4 @@
-# Running the FluentUI Tester in UWP
+# Running the FluentUI Tester on Windows
 
 ## Prerequisites
 

diff --git a/assets/fluent_tester_android_app_built.png b/assets/fluent_tester_android_app_built.png
diff --git a/assets/fluent_tester_android_windows_open.png b/assets/fluent_tester_android_windows_open.png
diff --git a/change/@fluentui-react-native-tester-2020-09-22-12-35-00-ejlayne-fluentui-tester-docs.json b/change/@fluentui-react-native-tester-2020-09-22-12-35-00-ejlayne-fluentui-tester-docs.json
@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "added android documentation for fluentui tester, and updated top level page to point to platform specific docs.",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "none",
+  "date": "2020-09-22T19:34:26.267Z"
+}
diff --git a/...@fluentui-react-native-tester-win32-2020-09-22-12-35-00-ejlayne-fluentui-tester-docs.json b/...@fluentui-react-native-tester-win32-2020-09-22-12-35-00-ejlayne-fluentui-tester-docs.json
@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "added android documentation for fluentui tester, and updated top level page to point to platform specific docs.",
+  "packageName": "@fluentui-react-native/tester-win32",
+  "email": "[email protected]",
+  "dependentChangeType": "none",
+  "date": "2020-09-22T19:35:00.684Z"
+}