@fluentui-react-native/tester 0.78.3 → 0.79.1

package/docs/android.md

@@ -0,0 +1,112 @@
+# 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:
+
+```sh
+yarn
+yarn build
+```
+
+2. Start the server by running:
+
+```sh
+cd apps/android
+yarn start
+```
+
+3. To boot the app, open a new command prompt and run:
+
+```sh
+cd apps/android
+yarn android
+```
+
+## Using an Apple Silicon Mac (As of July 2021)
+
+- The virtual devices in the AVD Manager with arm64 images still have some bugs. To get the current best emulator, download it from Github: [version 3](https://github.com/google/android-emulator-m1-preview).
+
+- Since the emulator is an emulator, you need open it manually first. Then open Android Studio from `/apps/android/src`, choose 'emulator-5554' as the device and run the app.
+- To connect to metro run the following and reload the app:
+
+```sh
+adb reverse tcp:8081 tcp:8081
+yarn start
+```
+
+- APKs: The emulator is running on arm64 so any APKs that need to be installed need to be for arm64. Here is a [link](https://www.apkmirror.com/apk/google-inc/android-accessibility-suite/android-accessibility-suite-9-1-0-358315219-release/android-accessibility-suite-9-1-0-358315219-android-apk-download/) to the accessibility APK which includes TalkBack (voiceover)
+  - The ADB location is not automatically detected on the emulator so you need to manually set it.
+    1.  Go to expanded settings (three dots on the side) -> settings
+    2.  Turn off "Use detected ADB location"
+    3.  Click the folder and find the location of adb (~/Library/Android/sdk/platform-tools/adb). You will need to show hidden folders (Shift + CMD + .) to see Library
+  - Once ADB location is set, drag and drop the downloaded APK into the emulator to install it onto the emulator
+
+## Dependencies
+
+Dependencies are managed by
+[`@rnx-kit/dep-check`](https://github.com/microsoft/rnx-kit/tree/main/packages/dep-check).
+If you're looking to upgrade `react-native`, look for the `rnx-kit` section in
+`/apps/android/package.json`:
+
+```json
+{
+  ...
+  "rnx-kit": {
+    "reactNativeVersion": "^0.66",
+    "kitType": "app",
+    "bundle": {
+  ...
+}
+```
+
+Bump `reactNativeVersion`, and run `yarn rnx-dep-check --write`. This command
+will ensure that all relevant packages are bumped correctly.
+
+You can read more about this tool here:
+[`@rnx-kit/dep-check` design document](https://github.com/microsoft/rnx-kit/blob/main/docsite/docs/architecture/dependency-management.md)
+
+## Debugging
+
+You can debug native code in Android Studio. To debug javascript code, you can either use standard web debugging, or you can use [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native) to debug directly in VS Code. The steps are as follows:
+
+1. Launch your test app + packager as you normally would
+2. Go the debug menu in VS Code and run the "Attach to Packager (Android)" configuration
+3. Open the developer menu in your test app, and click debug
+4. You now should be able to set breakpoints and step through your code directly in VS Code.
+
+## 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.
+
+- If you get the error "command not found: adb", add the following to .bash_profile or .zprofile
+
+```sh
+export PATH=~/Library/Android/sdk/platform-tools:$PATH
+```
+
+- If you would like to debug in Android Studio, you can do the following to open the project there:
+
+```sh
+# macOS
+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.
+
+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)

package/docs/ios.md

@@ -0,0 +1,78 @@
+# 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
+
+Prereq: FluentUI Tester on iOS can only run on a Mac.
+
+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:
+
+```sh
+yarn
+yarn build
+```
+
+2. Then go into `apps/ios/src` folder and run pod install to pull in the project-level Cocoapod dependencies defined in the podfile, and to generate a valid xcworkspace:
+
+```sh
+cd apps/ios/src
+pod install
+```
+
+Note: if you get the error: "CocoaPods could not find compatible versions for pod "MicrosoftFluentUI"," you may need to run `pod install --repo-update`.
+
+3. Return to the ios directory and run yarn ios to launch the FluentUI Tester app:
+
+```sh
+cd ..
+yarn ios
+```
+
+## Dependencies
+
+Dependencies are managed by
+[`@rnx-kit/dep-check`](https://github.com/microsoft/rnx-kit/tree/main/packages/dep-check).
+If you're looking to upgrade `react-native`, look for the `rnx-kit` section in
+`/apps/ios/package.json`:
+
+```json
+{
+  ...
+  "rnx-kit": {
+    "reactNativeVersion": "^0.66",
+    "kitType": "app",
+    "bundle": {
+  ...
+}
+```
+
+Bump `reactNativeVersion`, and run `yarn rnx-dep-check --write`. This command
+will ensure that all relevant packages are bumped correctly.
+
+You can read more about this tool here:
+[`@rnx-kit/dep-check` design document](https://github.com/microsoft/rnx-kit/blob/main/docsite/docs/architecture/dependency-management.md)
+
+## Debugging
+
+You can debug native code in Xcode. To debug javascript code, you can either use standard web debugging, or you can use [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native) to debug directly in VS Code. The steps are as follows:
+
+1. Launch your test app + packager as you normally would
+2. Go the debug menu in VS Code and run the "Attach to Packager (iOS)" configuration
+3. Open the developer menu in your test app, and click debug
+4. You now should be able to set breakpoints and step through your code directly in VS Code.
+
+## Troubleshooting
+
+- The first time you yarn ios, you receive an error and have to run "FluentTester.xcworkspace" directly from Xcode. The workspace can be found in the apps/ios/src folder. After running the workspace the first time from Xcode, you will be able to `yarn ios` from the CLI.
+- If the packager didn't launch in a separate terminal and your iOS simulator just shows a white screen for your app, you can run `yarn start` from apps/ios to launch it separately
+- If you get the error: "Unable to resolve module... None of these files exist:...", close the packager and restart it by running `yarn start`. Note: you need to restart the packager when you switch to a different platform (e.g. from macOS or Android to iOS), but once it restarts you can reload the tester apps on all running platforms at once.
+- If you want to do direct debugging via xcode, after the pod install, you can launch src/FluentTester.xcworkspace and build/run the scheme "ReactTestApp"
+- If you want to have a clean rebuild of the generated iOS project, you can do the following:
+
+```sh
+cd apps/ios/
+rm src/FluentTester.xcworkspace
+rm -r src/Pods/
+pod install --project-directory=src.
+```

package/docs/macos.md

@@ -0,0 +1,76 @@
+# 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
+
+Prereq: FluentUI Tester on macOS can only run on a Mac.
+
+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:
+
+```sh
+yarn
+yarn build
+```
+
+2. Then go into `apps/macos/src` folder and run pod install to pull in the project-level Cocoapod dependencies defined in the podfile, and to generate a valid xcworkspace:
+
+```sh
+cd apps/macos/src
+pod install
+```
+
+Note: if you get the error: "CocoaPods could not find compatible versions for pod "MicrosoftFluentUI"," you may need to run `pod install --repo-update`.
+
+3. Return to the macos directory and first run yarn start. Then run yarn macos to launch the FluentUI Tester app:
+
+```sh
+cd ..
+yarn macos
+```
+
+## Debugging
+
+You can debug native code in Xcode. To debug javascript code, you can either use standard web debugging, or you can use [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native) to debug directly in VS Code. The steps are as follows:
+
+1. Launch your test app + packager as you normally would
+2. Go the debug menu in VS Code and run the "Attach to Packager (macOS)" configuration
+3. Open the developer menu in your test app, and click debug
+4. You now should be able to set breakpoints and step through your code directly in VS Code.
+
+## Dependencies
+
+Dependencies are managed by
+[`@rnx-kit/dep-check`](https://github.com/microsoft/rnx-kit/tree/main/packages/dep-check).
+If you're looking to upgrade `react-native`, look for the `rnx-kit` section in
+`/apps/macos/package.json`:
+
+```json
+{
+  ...
+  "rnx-kit": {
+    "reactNativeVersion": "^0.66",
+    "kitType": "app",
+    "bundle": {
+  ...
+}
+```
+
+Bump `reactNativeVersion`, and run `yarn rnx-dep-check --write`. This command
+will ensure that all relevant packages are bumped correctly.
+
+You can read more about this tool here:
+[`@rnx-kit/dep-check` design document](https://github.com/microsoft/rnx-kit/blob/main/docsite/docs/architecture/dependency-management.md)
+
+## Troubleshooting
+
+- If you get the error: "Unable to resolve module... None of these files exist:...", close the packager and restart it by running `yarn start`. Note: you need to restart the packager when you switch to a different platform (e.g. from iOS to macOS), but once it restarts you can reload the tester apps on all running platforms at once.
+- If you want to do direct debugging via xcode, after the pod install, you can launch src/FluentTester.xcworkspace and build/run the scheme "ReactTestApp"
+- If you want to have a clean rebuild of the generated macOS project, you can do the following:
+
+```sh
+cd apps/macos/
+rm src/FluentTester.xcworkspace
+rm -r src/Pods/
+pod install --project-directory=src.
+```

package/docs/windows.md

@@ -0,0 +1,65 @@
+# Running the FluentUI Tester on Windows
+
+`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.
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/en/download/)
+  - You can quickly see if Node.js is installed by running "node -v" in a command prompt. If it's installed, you will see the version number. If not, it will not recognize the command.
+- [React Native Windows Development Dependencies](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies)
+  - **NOTE:** Please make sure you grab all of the items listed there and the appropriate versions.
+  - You can check or install these dependencies by running the command mentioned in the link above in an elevated PowerShell window.
+  - If you're installing or verifying Visual Studio 2019 dependencies manually, you can check your tool options under Tools > Get Tools and Features...
+- [Azure Credentials Plugin for NuGet](https://github.com/microsoft/artifacts-credprovider#installation-on-windows)
+  - We're currently on an expermental version of react-native-windows which is being published to a private NPM feed hosted on Azure DevOps.
+
+## Running the App
+
+1. Run `yarn` from the root of the repo
+2. From this directory, simply `yarn windows`
+
+## Debugging
+
+You can debug native code in Visual Studio. To debug javascript code, you can either use standard web debugging, or you can use [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native) to debug directly in VS Code. The steps are as follows:
+
+1. Launch your test app + packager as you normally would
+2. Go the debug menu in VS Code and run the "Attach to Packager (Windows)" configuration
+3. Open the developer menu in your test app, and click debug
+4. You now should be able to set breakpoints and step through your code directly in VS Code.
+
+## Dependencies
+
+Dependencies are managed by
+[`@rnx-kit/dep-check`](https://github.com/microsoft/rnx-kit/tree/main/packages/dep-check).
+If you're looking to upgrade `react-native`, look for the `rnx-kit` section in
+`/apps/windows/package.json`:
+
+```json
+{
+  ...
+  "rnx-kit": {
+    "reactNativeVersion": "^0.66",
+    "kitType": "app",
+    "bundle": {
+  ...
+}
+```
+
+Bump `reactNativeVersion`, and run `yarn rnx-dep-check --write`. This command
+will ensure that all relevant packages are bumped correctly.
+
+You can read more about this tool here:
+[`@rnx-kit/dep-check` design document](https://github.com/microsoft/rnx-kit/blob/main/docsite/docs/architecture/dependency-management.md)
+
+## Troubleshooting
+
+### EPERM restoring NuGet packages
+
+If you see an error like the following:
+
+```
+- Restoring NuGet packages
+× Failed to restore the NuGet packages: Error: EPERM: operation not permitted, unlink C:\Users\adrum\AppData\Local\Temp\nuget.4.9.2.exe'
+```
+
+Double check that you have correctly installed the Azure Credentials Plugin for NuGet mentioned in the Prerequisites above.

package/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+import { FluentTesterApp } from './src/FluentTesterApp';
+import { AppRegistry } from 'react-native';
+
+AppRegistry.registerComponent('FluentTester', () => FluentTesterApp);
+
+export default FluentTesterApp;

package/ios/Podfile

@@ -0,0 +1,35 @@
+require_relative '../../../node_modules/react-native-test-app/test_app'
+
+workspace 'FluentTester.xcworkspace'
+
+react_native_path = "#{__dir__}/../../../node_modules/react-native"
+
+start_packager_script = %{
+export RCT_METRO_PORT="${RCT_METRO_PORT:=8081}"
+echo "export RCT_METRO_PORT=${RCT_METRO_PORT}" > "#{react_native_path}/scripts/.packager.env"
+if [ -z "${RCT_NO_LAUNCH_PACKAGER+xxx}" ] ; then
+  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then
+    if ! curl -s "http://localhost:${RCT_METRO_PORT}/status" | grep -q "packager-status:running" ; then
+      echo "Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly"
+      exit 2
+    fi
+  else
+    open "#{__dir__}/../launchPackager.command" || echo "Can't start packager automatically"
+  fi
+fi
+}
+
+use_test_app! do |target|
+  target.app do
+    platform :ios, '14.0'
+
+    # There is a bug where autolinking isn't working, do specify these manually.
+    pod 'FRNAvatar', :path => '../../../packages/experimental/Avatar/FRNAvatar.podspec'
+    pod 'FRNDatePicker', :path => '../../../packages/experimental/NativeDatePicker/FRNDatePicker.podspec'
+    pod 'react-native-menu', :path => '../../../node_modules/@react-native-menu/menu'
+
+    script_phase name: 'Start Packager',
+                 script: start_packager_script,
+                 execution_position: :before_compile
+  end
+end